Skip to content

Commit

Permalink
fix: some style changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@pengx17
pengx17 committed Nov 23, 2022
1 parent e9531e1 commit 5480e1b
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 45 deletions.
12 changes: 8 additions & 4 deletions tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx
View file
Expand Up @@ -3,14 +3,14 @@ import React from 'react'
import { LogseqContext } from '../../lib/logseq-context'
import { TablerIcon } from '../icons'

export const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => {
export const BlockLink = ({ id }: { id: string }) => {
const {
handlers: { isWhiteboardPage, redirectToPage, sidebarAddBlock, queryBlockByUUID },
renderers: { Breadcrumb, PageNameLink },
} = React.useContext(LogseqContext)

let iconName = ''
type = type ?? (validUUID(id) ? 'B' : 'P')
let linkType = validUUID(id) ? 'B' : 'P'

if (validUUID(id)) {
if (queryBlockByUUID(id)?.properties?.['ls-type'] === 'whiteboard-shape') {
Expand All @@ -32,15 +32,19 @@ export const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => {
onPointerDown={e => {
e.stopPropagation()
if (e.shiftKey) {
sidebarAddBlock(id, type === 'B' ? 'block' : 'page')
sidebarAddBlock(id, linkType === 'B' ? 'block' : 'page')
} else {
redirectToPage(id)
}
}}
>
<TablerIcon name={iconName} />
<span className="pointer-events-none">
{type === 'P' ? <PageNameLink pageName={id} /> : <Breadcrumb levelLimit={1} blockId={id} />}
{linkType === 'P' ? (
<PageNameLink pageName={id} />
) : (
<Breadcrumb levelLimit={1} blockId={id} />
)}
</span>
</button>
)
Expand Down
25 changes: 13 additions & 12 deletions tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx
View file
@@ -1,26 +1,27 @@
import type { TLQuickLinksComponent } from '@tldraw/react'
import { observer } from 'mobx-react-lite'
import React from 'react'
import type { Shape } from '../../lib'
import { BlockLink } from '../BlockLink'

export const QuickLinks: TLQuickLinksComponent<Shape> = observer(({ id, shape }) => {
const refs = shape.props.refs ?? []
const portalType = shape.props.type === 'logseq-portal' && shape.props.blockType
const links = React.useMemo(() => {
const links = [...(shape.props.refs ?? [])]

if (refs.length === 0 && !portalType) return null
if (shape.props.type === 'logseq-portal' && shape.props.pageId) {
links.unshift(shape.props.pageId)
}

return links
}, [shape.props.type, shape.props.parentId, shape.props.refs])

if (links.length === 0) return null

return (
<div className="tl-quick-links">
{portalType && shape.props.type === 'logseq-portal' && (
<>
<div className="tl-quick-links-row tl-quick-links-row-primary">
<BlockLink id={shape.props.pageId} type={portalType} />
</div>
</>
)}
{refs.map(ref => {
{links.map(ref => {
return (
<div key={ref} className="tl-quick-links-row tl-quick-links-row-secondary">
<div key={ref} className="tl-quick-links-row">
<BlockLink id={ref} />
</div>
)
Expand Down
15 changes: 14 additions & 1 deletion tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx
View file
Expand Up @@ -131,6 +131,8 @@ export const LogseqQuickSearch = observer(

const [prefixIcon, setPrefixIcon] = React.useState<string>('circle-plus')

const [showPanel, setShowPanel] = React.useState<boolean>(false)

React.useEffect(() => {
// autofocus attr seems not to be working
setTimeout(() => {
Expand Down Expand Up @@ -384,7 +386,13 @@ export const LogseqQuickSearch = observer(
}
e.stopPropagation()
}}
onBlur={onBlur}
onFocus={() => {
setShowPanel(true)
}}
onBlur={() => {
setShowPanel(false)
onBlur?.()
}}
/>
</div>
{/* TODO: refactor to radix-ui popover */}
Expand All @@ -393,6 +401,11 @@ export const LogseqQuickSearch = observer(
onWheelCapture={e => e.stopPropagation()}
className="tl-quick-search-options"
ref={optionsWrapperRef}
style={{
// not using display: none so we can persist the scroll position
visibility: showPanel ? 'visible' : 'hidden',
pointerEvents: showPanel ? 'all' : 'none',
}}
>
<Virtuoso
style={{ height: Math.min(Math.max(1, options.length), 12) * 40 }}
Expand Down
46 changes: 23 additions & 23 deletions tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx
View file
Expand Up @@ -33,9 +33,9 @@ function ShapeLinkItem({
const { handlers } = React.useContext(LogseqContext)

return (
<div className="tl-shape-links-panel-item color-level">
<div className="tl-shape-links-panel-item color-level relative">
<div className="whitespace-pre break-all overflow-hidden text-ellipsis">
<BlockLink id={id} type={type} />
<BlockLink id={id} />
</div>
<div className="flex-1" />
<Button title="Open Page" type="button" onClick={() => handlers?.redirectToPage(id)}>
Expand All @@ -49,8 +49,13 @@ function ShapeLinkItem({
<TablerIcon name="move-to-sidebar-right" />
</Button>
{onRemove && (
<Button title="Remove link" type="button" onClick={onRemove}>
<TablerIcon name="x" />
<Button
className="tl-shape-links-panel-item-remove-button"
title="Remove link"
type="button"
onClick={onRemove}
>
<TablerIcon name="x" className='!translate-y-0' />
</Button>
)}
</div>
Expand Down Expand Up @@ -132,7 +137,6 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({
<TablerIcon className="opacity-50" name="internal-link" />
References
</div>
<div className="h-2" />
<ShapeLinkItem type={portalType} id={pageId} />
</div>
)}
Expand All @@ -141,7 +145,6 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({
<TablerIcon className="opacity-50" name="add-link" />
Link to any page or block
</div>
<div className="h-2" />

{canAddLink && (
<LogseqQuickSearch
Expand All @@ -155,23 +158,20 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({
)}

{refs.length > 0 && (
<>
<div className="h-2" />
<div className="flex flex-col items-stretch gap-2">
{refs.map((ref, i) => {
return (
<ShapeLinkItem
key={ref}
id={ref}
type={validUUID(ref) ? 'B' : 'P'}
onRemove={() => {
onRefsChange(refs.filter((_, j) => i !== j))
}}
/>
)
})}
</div>
</>
<div className="flex flex-col items-stretch gap-2">
{refs.map((ref, i) => {
return (
<ShapeLinkItem
key={ref}
id={ref}
type={validUUID(ref) ? 'B' : 'P'}
onRemove={() => {
onRefsChange(refs.filter((_, j) => i !== j))
}}
/>
)
})}
</div>
)}
</div>
</div>
Expand Down
22 changes: 17 additions & 5 deletions tldraw/apps/tldraw-logseq/src/styles.css
View file
Expand Up @@ -1029,7 +1029,7 @@ html[data-theme='dark'] {

.tl-shape-links-panel,
.tl-shape-links-reference-panel {
@apply p-3;
@apply p-3 flex flex-col gap-2;
min-width: 340px;
max-width: 516px;
color: var(--ls-primary-text-color);
Expand All @@ -1056,6 +1056,18 @@ html[data-theme='dark'] {
}
}

button.tl-shape-links-panel-item-remove-button {
@apply rounded-full w-6 h-6 min-w-0 -ml-4;

transform: translate(16px, -16px);

background-color: var(--ls-primary-background-color);

&:hover {
background-color: var(--ls-tertiary-background-color);
}
}

.tl-shape-links-panel-add-button {
@apply w-full font-medium text-base h-[40px];
background-color: var(--ls-secondary-background-color);
Expand Down Expand Up @@ -1110,12 +1122,12 @@ html[data-theme='dark'] {
}
}

.tl-quick-links-row-primary {
.tl-quick-links-row:nth-child(1) {
@apply rounded bg-indigo-600;
color: #fff;
}

.tl-quick-links-row-secondary {
.tl-quick-links-row:nth-child(2) {
@apply opacity-50;
color: var(--ls-secondary-text-color);

Expand All @@ -1125,10 +1137,10 @@ html[data-theme='dark'] {
}

.tl-quick-links:hover {
.tl-quick-links-row-primary:not(:hover) {
.tl-quick-links-row:nth-child(1):not(:hover) {
@apply opacity-50;
}
.tl-quick-links-row-primary:hover {
.tl-quick-links-row:nth-child(1):hover {
@apply bg-indigo-500;
}
}

0 comments on commit 5480e1b

Please sign in to comment.