- {portalType && shape.props.type === 'logseq-portal' && (
- <>
-
-
-
- >
- )}
- {refs.map(ref => {
+ {links.map(ref => {
return (
-
+
)
diff --git a/tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx b/tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx
index ec3bb2e74..d1a10c5f9 100644
--- a/tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx
@@ -131,6 +131,8 @@ export const LogseqQuickSearch = observer(
const [prefixIcon, setPrefixIcon] = React.useState
('circle-plus')
+ const [showPanel, setShowPanel] = React.useState(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?.()
+ }}
/>
{/* 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',
+ }}
>
+
-
+
{onRemove && (
-
@@ -132,7 +137,6 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({
References
- 0 && (
- <>
-
-
- {refs.map((ref, i) => {
- return (
- {
- onRefsChange(refs.filter((_, j) => i !== j))
- }}
- />
- )
- })}
-
- >
+
+ {refs.map((ref, i) => {
+ return (
+ {
+ onRefsChange(refs.filter((_, j) => i !== j))
+ }}
+ />
+ )
+ })}
+
)}
diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css
index e6582dc55..808180775 100644
--- a/tldraw/apps/tldraw-logseq/src/styles.css
+++ b/tldraw/apps/tldraw-logseq/src/styles.css
@@ -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;
}
}