mirror of https://github.com/logseq/logseq
fix: some style changes
parent
e9531e1d00
commit
5480e1bd0d
|
@ -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') {
|
||||
|
@ -32,7 +32,7 @@ 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)
|
||||
}
|
||||
|
@ -40,7 +40,11 @@ export const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => {
|
|||
>
|
||||
<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>
|
||||
)
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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(() => {
|
||||
|
@ -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 */}
|
||||
|
@ -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 }}
|
||||
|
|
|
@ -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)}>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue