fix: some quick link ui issues

logseq · Nov 22, 2022 · d00ebf9 · d00ebf9
1 parent da75451
commit d00ebf9
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 44 deletions.
diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs
@@ -681,10 +681,7 @@
           inner (page-inner config
                             page-name-in-block
                             page-name
-                            redirect-page-name page-entity contents-page? children html-export? label whiteboard-page?)
-          inner (if whiteboard-page?
-                  [:<> [:span.text-gray-500 (ui/icon "whiteboard" {:extension? true}) " "] inner]
-                  inner)]
+                            redirect-page-name page-entity contents-page? children html-export? label whiteboard-page?)]
       (cond
         (:breadcrumb? config)
         (or (:block/original-name page)

diff --git a/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx b/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx
@@ -8,16 +8,37 @@ import { TablerIcon } from '../icons'
 
 const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => {
   const {
+    handlers: { isWhiteboardPage, redirectToPage, sidebarAddBlock },
     renderers: { Breadcrumb, PageNameLink },
   } = React.useContext(LogseqContext)
 
   type = type ?? (validUUID(id) ? 'B' : 'P')
 
   return (
-    <>
-      <TablerIcon name={type === 'P' ? 'link-to-page' : 'link-to-block'} />
-      {type === 'P' ? <PageNameLink pageName={id} /> : <Breadcrumb levelLimit={1} blockId={id} />}
-    </>
+    <button
+      className="inline-flex gap-1 items-center w-full"
+      onPointerDown={e => {
+        e.stopPropagation()
+        if (e.shiftKey) {
+          sidebarAddBlock(id, type === 'B' ? 'block' : 'page')
+        } else {
+          redirectToPage(id)
+        }
+      }}
+    >
+      <TablerIcon
+        name={
+          type === 'P'
+            ? isWhiteboardPage(id)
+              ? 'link-to-whiteboard'
+              : 'link-to-page'
+            : 'link-to-block'
+        }
+      />
+      <span className='pointer-events-none'>
+        {type === 'P' ? <PageNameLink pageName={id} /> : <Breadcrumb levelLimit={1} blockId={id} />}
+      </span>
+    </button>
   )
 }
 
@@ -38,7 +59,7 @@ export const QuickLinks: TLQuickLinksComponent<Shape> = observer(({ id, shape })
       )}
       {refs.map(ref => {
         return (
-          <div key={ref} className="tl-quick-links-row">
+          <div key={ref} className="tl-quick-links-row tl-quick-links-row-secondary">
             <BlockLink id={ref} />
           </div>
         )

diff --git a/tldraw/apps/tldraw-logseq/src/components/icons/TablerIcon.tsx b/tldraw/apps/tldraw-logseq/src/components/icons/TablerIcon.tsx
@@ -6,6 +6,7 @@ const extendedIcons = [
   'internal-link',
   'link-to-block',
   'link-to-page',
+  'link-to-whiteboard',
   'move-to-sidebar-right',
   'object-compact',
   'object-expanded',

diff --git a/tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx b/tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx
@@ -71,12 +71,9 @@ export function ShapeLinksInput({
   const noOfLinks = refs.length + (pageId ? 1 : 0)
   const canAddLink = refs.length === 0
 
-  const [showQuickSearch, setShowQuickSearch] = React.useState(canAddLink)
-
   const addNewRef = (value?: string) => {
     if (value && !refs.includes(value)) {
       onRefsChange([...refs, value])
-      setShowQuickSearch(false)
     }
   }
 
@@ -144,39 +141,20 @@ export function ShapeLinksInput({
         <div className="tl-shape-links-panel color-level">
           <div className="text-base font-bold inline-flex gap-1 items-center">
             <TablerIcon className="opacity-50" name="add-link" />
-            Your link
-          </div>
-          <div className="h-2" />
-          <div className="whitespace-pre-wrap">
-            This <strong>{shapeType}</strong> can be linked to any other block, page or whiteboard
-            element you have stored in Logseq.
+            Link to any page or block
           </div>
-
           <div className="h-2" />
 
           {canAddLink && (
             <>
-              {showQuickSearch ? (
-                <LogseqQuickSearch
-                  style={{
-                    width: 'calc(100% - 46px)',
-                    marginLeft: '46px',
-                  }}
-                  onBlur={() => setShowQuickSearch(false)}
-                  placeholder="Start typing to search..."
-                  onChange={addNewRef}
-                />
-              ) : (
-                <div>
-                  <Button
-                    className="tl-shape-links-panel-add-button"
-                    onClick={() => setShowQuickSearch(true)}
-                  >
-                    <TablerIcon name="plus" />
-                    Add a new link
-                  </Button>
-                </div>
-              )}
+              <LogseqQuickSearch
+                style={{
+                  width: 'calc(100% - 46px)',
+                  marginLeft: '46px',
+                }}
+                placeholder="Start typing to search..."
+                onChange={addNewRef}
+              />
               <div className="h-2" />
               <div className="text-center">
                 <span className="opacity-50 mr-1">Paste from clipboard with</span>

diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css
@@ -1088,10 +1088,14 @@ html[data-theme='dark'] {
 }
 
 .tl-quick-links-row {
-  @apply flex px-2 items-center gap-1;
+  @apply flex;
   min-height: 26px;
 
-  > .breadcrumb {
+  > button {
+    @apply px-2;
+  }
+
+  .breadcrumb {
     margin: 0;
   }
 
@@ -1105,10 +1109,24 @@ html[data-theme='dark'] {
 }
 
 .tl-quick-links-row-primary {
-  @apply rounded;
-  background-color: var(--color-selectedFill);
+  @apply rounded bg-indigo-600;
   color: #fff;
 }
+
 .tl-quick-links-row-secondary {
+  @apply opacity-50;
   color: var(--ls-secondary-text-color);
+
+  &:hover {
+    @apply opacity-100;
+  }
+}
+
+.tl-quick-links:hover {
+  .tl-quick-links-row-primary:not(:hover) {
+    @apply opacity-50;
+  }
+  .tl-quick-links-row-primary:hover {
+    @apply bg-indigo-500;
+  }
 }