Merge branch 'master' into enhance/mobile-ux-2

logseq · Nov 28, 2022 · 7f5bd7d · 7f5bd7d
2 parents f69c6af + 9daec09
commit 7f5bd7d
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 24 deletions.
diff --git a/src/main/frontend/components/file_sync.cljs b/src/main/frontend/components/file_sync.cljs
@@ -434,8 +434,8 @@
              (when-not (and no-active-files? idle?)
                (cond
                  need-password?
-                 [{:title   [:div.file-item
-                             (ui/icon "lock") "Password is required"]
+                 [{:title   [:div.file-item.flex.items-center.leading-none.pt-3
+                             (ui/icon "lock" {:size 20}) [:span.pl-1.font-semibold "Password is required"]]
                    :options {:on-click fs-sync/sync-need-password!}}]
 
                  ;; head of upcoming sync

diff --git a/src/main/frontend/components/file_sync.css b/src/main/frontend/components/file_sync.css
@@ -159,6 +159,10 @@
       .title-wrap {
         flex: 1;
       }
+
+      .menu-link {
+        @apply px-2;
+      }
     }
 
     &.is-enabled-progress-pane {
@@ -196,6 +200,10 @@
 
     .ti {
       @apply translate-y-0;
+
+      &.ls-icon-thumb-up {
+        @apply translate-x-[0.5px];
+      }
     }
 
     > .a {
@@ -464,7 +472,7 @@
       &.strength-wrap {
         @apply flex-wrap;
       }
-      
+
       .strength-item {
         @apply whitespace-nowrap flex items-center leading-none opacity-60;
 

diff --git a/src/main/frontend/components/repo.cljs b/src/main/frontend/components/repo.cljs
@@ -118,7 +118,7 @@
                (t :open-a-directory)
                :on-click #(state/pub-event! [:graph/setup-a-repo]))])]]
 
-        (when (seq remote-graphs)
+        (when (and (file-sync/enable-sync?) login?)
           [:div
            [:hr]
            [:div.flex.align-items.justify-between
@@ -194,7 +194,8 @@
   [state]
   (let [multiple-windows? (::electron-multiple-windows? state)
         current-repo (state/sub :git/current-repo)
-        login? (boolean (state/sub :auth/id-token))]
+        login? (boolean (state/sub :auth/id-token))
+        remotes-loading? (state/sub [:file-sync/remote-graphs :loading])]
     (when (or login? current-repo)
       (let [repos (state/sub [:me :repos])
             remotes (state/sub [:file-sync/remote-graphs :graphs])
@@ -229,7 +230,13 @@
                             :modal-class (util/hiccup->class
                                            "origin-top-right.absolute.left-0.mt-2.rounded-md.shadow-lg")}
                            (> (count repos) 1)              ; show switch to if there are multiple repos
-                           (assoc :links-header [:div.font-medium.text-sm.opacity-60.px-4.pt-2.pb-1
-                                                 "Switch to:"]))]
+                           (assoc :links-header [:div.font-medium.text-sm.opacity-70.px-4.pt-2.pb-1.flex.flex-row.justify-between.items-center
+                                                 [:div "Switch to:"]
+                                                 (when (and (file-sync/enable-sync?) login?)
+                                                   (if remotes-loading?
+                                                     (ui/loading "")
+                                                     [:a.flex {:title "Refresh remote graphs"
+                                                               :on-click file-sync/load-session-graphs}
+                                                      (ui/icon "refresh")]))]))]
         (when (seq repos)
           (ui/dropdown-with-links render-content links links-header))))))
diff --git a/src/main/frontend/handler/user.cljs b/src/main/frontend/handler/user.cljs
@@ -143,9 +143,9 @@
         refresh-token (js/localStorage.getItem "refresh-token")]
     (when refresh-token
       (set-tokens! id-token access-token refresh-token)
-      (when-not (or (nil? id-token) (nil? access-token)
-                    (-> id-token parse-jwt almost-expired?)
-                    (-> access-token parse-jwt almost-expired?))
+      (when (or (nil? id-token) (nil? access-token)
+                (-> id-token parse-jwt almost-expired?)
+                (-> access-token parse-jwt almost-expired?))
         (go
           ;; id-token or access-token expired
           (<! (<refresh-id-token&access-token))

diff --git a/tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx b/tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx
@@ -3,21 +3,30 @@ import React from 'react'
 import { LogseqContext } from '../../lib/logseq-context'
 import { TablerIcon } from '../icons'
 
-export const BlockLink = ({ id }: { id: string }) => {
+export const BlockLink = ({
+  id,
+  showReferenceContent = false,
+}: {
+  id: string
+  showReferenceContent?: boolean
+}) => {
   const {
     handlers: { isWhiteboardPage, redirectToPage, sidebarAddBlock, queryBlockByUUID },
     renderers: { Breadcrumb, PageName, BlockReference },
   } = React.useContext(LogseqContext)
 
   let iconName = ''
   let linkType = validUUID(id) ? 'B' : 'P'
+  let blockContent = ''
 
   if (validUUID(id)) {
     const block = queryBlockByUUID(id)
     if (!block) {
-      return <span className='p-2'>Invalid reference. Did you remove it?</span>
+      return <span className="p-2">Invalid reference. Did you remove it?</span>
     }
 
+    blockContent = block.content
+
     if (block.properties?.['ls-type'] === 'whiteboard-shape') {
       iconName = 'link-to-whiteboard'
     } else {
@@ -31,6 +40,9 @@ export const BlockLink = ({ id }: { id: string }) => {
     }
   }
 
+  const slicedContent =
+    blockContent && blockContent.length > 23 ? blockContent.slice(0, 20) + '...' : blockContent
+
   return (
     <button
       className="inline-flex gap-1 items-center w-full"
@@ -49,8 +61,8 @@ export const BlockLink = ({ id }: { id: string }) => {
           <PageName pageName={id} />
         ) : (
           <>
-            <Breadcrumb levelLimit={1} blockId={id} endSeparator />
-            <BlockReference blockId={id} />
+            <Breadcrumb levelLimit={1} blockId={id} endSeparator={showReferenceContent} />
+            {showReferenceContent && slicedContent}
           </>
         )}
       </span>

diff --git a/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx b/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx
@@ -4,12 +4,16 @@ import React from 'react'
 import type { Shape } from '../../lib'
 import { BlockLink } from '../BlockLink'
 
-export const QuickLinks: TLQuickLinksComponent<Shape> = observer(({ id, shape }) => {
+export const QuickLinks: TLQuickLinksComponent<Shape> = observer(({ shape }) => {
   const links = React.useMemo(() => {
-    const links = [...(shape.props.refs ?? [])]
+    const links = [...(shape.props.refs ?? [])].map<[ref: string, showReferenceContent: boolean]>(
+      // user added links should show the referenced block content
+      l => [l, true]
+    )
 
     if (shape.props.type === 'logseq-portal' && shape.props.pageId) {
-      links.unshift(shape.props.pageId)
+      // portal reference should not show the block content
+      links.unshift([shape.props.pageId, false])
     }
 
     return links
@@ -19,10 +23,10 @@ export const QuickLinks: TLQuickLinksComponent<Shape> = observer(({ id, shape })
 
   return (
     <div className="tl-quick-links" title="Shape Quick Links">
-      {links.map(ref => {
+      {links.map(([ref, showReferenceContent]) => {
         return (
           <div key={ref} className="tl-quick-links-row">
-            <BlockLink id={ref} />
+            <BlockLink id={ref} showReferenceContent={showReferenceContent} />
           </div>
         )
       })}

diff --git a/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx b/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx
@@ -14,7 +14,12 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
       <DropdownMenuPrimitive.Trigger className="tl-button text-sm px-2 important" id="tl-zoom">
         {(app.viewport.camera.zoom * 100).toFixed(0) + '%'}
       </DropdownMenuPrimitive.Trigger>
-      <DropdownMenuPrimitive.Content className="tl-menu" id="zoomPopup" sideOffset={12}>
+      <DropdownMenuPrimitive.Content
+        onCloseAutoFocus={e => e.preventDefault()}
+        className="tl-menu"
+        id="zoomPopup"
+        sideOffset={12}
+      >
         <DropdownMenuPrimitive.Item
           className="tl-menu-item"
           onSelect={preventEvent}

diff --git a/tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx b/tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx
@@ -23,17 +23,19 @@ function ShapeLinkItem({
   id,
   type,
   onRemove,
+  showContent,
 }: {
   id: string
   type: 'B' | 'P'
   onRemove?: () => void
+  showContent?: boolean
 }) {
   const { handlers } = React.useContext(LogseqContext)
 
   return (
     <div className="tl-shape-links-panel-item color-level relative">
       <div className="whitespace-pre break-all overflow-hidden text-ellipsis inline-flex">
-        <BlockLink id={id} />
+        <BlockLink id={id} showReferenceContent={showContent} />
       </div>
       <div className="flex-1" />
       <Button title="Open Page" type="button" onClick={() => handlers?.redirectToPage(id)}>
@@ -131,6 +133,7 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({
                     onRemove={() => {
                       onRefsChange(refs.filter((_, j) => i !== j))
                     }}
+                    showContent
                   />
                 )
               })}

diff --git a/tldraw/packages/core/src/lib/TLSettings.ts b/tldraw/packages/core/src/lib/TLSettings.ts
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { observable, makeObservable, action } from 'mobx'
-import { isSafari } from '../utils'
 
 export interface TLSettingsProps {
   mode: 'light' | 'dark'

diff --git a/tldraw/packages/react/src/components/Canvas/Canvas.tsx b/tldraw/packages/react/src/components/Canvas/Canvas.tsx
@@ -111,8 +111,6 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
   const erasingShapesSet = React.useMemo(() => new Set(erasingShapes || []), [erasingShapes])
   const singleSelectedShape = selectedShapes?.length === 1 ? selectedShapes[0] : undefined
 
-  const selectedOrHooveredShape = hoveredShape || singleSelectedShape
-
   return (
     <div ref={rContainer} className={`tl-container ${className ?? ''}`}>
       <div tabIndex={-1} className="tl-absolute tl-canvas" {...events}>