enhance (wip): adjust ui on published whiteboards

cybaj · Mar 27, 2023 · 6a3f928 · 6a3f928
1 parent e21de5c
commit 6a3f928
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 45 deletions.
diff --git a/src/main/frontend/extensions/tldraw.cljs b/src/main/frontend/extensions/tldraw.cljs
@@ -3,6 +3,7 @@
   (:require ["/frontend/tldraw-logseq" :as TldrawLogseq]
             [frontend.components.block :as block]
             [frontend.components.page :as page]
+            [frontend.config :as config]
             [frontend.db.model :as model]
             [frontend.handler.editor :as editor-handler]
             [frontend.handler.route :as route-handler]
@@ -152,6 +153,7 @@
        (tldraw {:renderers tldraw-renderers
                 :handlers (get-tldraw-handlers page-name)
                 :onMount on-mount
+                :isPublishing config/publishing?
                 :onPersist (fn [app info]
                              (state/set-state! [:whiteboard/last-persisted-at (state/get-current-repo)] (util/time-ms))
                              (util/profile "tldraw persist"

diff --git a/tldraw/apps/tldraw-logseq/src/app.tsx b/tldraw/apps/tldraw-logseq/src/app.tsx
@@ -53,6 +53,7 @@ const tools: TLReactToolConstructor<Shape>[] = [
 interface LogseqTldrawProps {
   renderers: LogseqContextValue['renderers']
   handlers: LogseqContextValue['handlers']
+  isPublishing: LogseqContextValue['isPublishing']
   model?: TLDocumentModel<Shape>
   onMount?: TLReactCallbacks<Shape>['onMount']
   onPersist?: TLReactCallbacks<Shape>['onPersist']
@@ -123,7 +124,7 @@ const AppInner = ({
   )
 }
 
-export const App = function App({ renderers, handlers, ...rest }: LogseqTldrawProps): JSX.Element {
+export const App = function App({ renderers, handlers, isPublishing, ...rest }: LogseqTldrawProps): JSX.Element {
   const memoRenders: any = React.useMemo(() => {
     return Object.fromEntries(
       Object.entries(renderers).map(([key, comp]) => {
@@ -135,6 +136,7 @@ export const App = function App({ renderers, handlers, ...rest }: LogseqTldrawPr
   const contextValue = {
     renderers: memoRenders,
     handlers: handlers,
+    isPublishing: isPublishing,
   }
 
   return (

diff --git a/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx b/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx
@@ -8,9 +8,12 @@ import { TablerIcon } from '../icons'
 import { Button } from '../Button'
 import { ZoomMenu } from '../ZoomMenu'
 import * as Separator from '@radix-ui/react-separator'
+import { LogseqContext } from './../../lib/logseq-context'
 
 export const ActionBar = observer(function ActionBar(): JSX.Element {
   const app = useApp<Shape>()
+  const { isPublishing } = React.useContext(LogseqContext)
+
   const undo = React.useCallback(() => {
     app.api.undo()
   }, [app])
@@ -29,16 +32,18 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
 
   return (
     <div className="tl-action-bar">
-      <div className="tl-toolbar tl-history-bar">
-        <Button tooltip="Undo" onClick={undo}>
-          <TablerIcon name="arrow-back-up" />
-        </Button>
-        <Button tooltip="Redo" onClick={redo}>
-          <TablerIcon name="arrow-forward-up" />
-        </Button>
-      </div>
+      {!isPublishing && (
+        <div className="tl-toolbar tl-history-bar">
+          <Button tooltip="Undo" onClick={undo}>
+            <TablerIcon name="arrow-back-up" />
+          </Button>
+          <Button tooltip="Redo" onClick={redo}>
+            <TablerIcon name="arrow-forward-up" />
+          </Button>
+        </div>
+      )}
 
-      <div className="tl-toolbar tl-zoom-bar">
+      <div className={`tl-toolbar tl-zoom-bar ${isPublishing ? "" : "ml-4"}`}>
         <Button tooltip="Zoom in" onClick={zoomIn} id="tl-zoom-in">
           <TablerIcon name="plus" />
         </Button>

diff --git a/tldraw/apps/tldraw-logseq/src/components/AppUI.tsx b/tldraw/apps/tldraw-logseq/src/components/AppUI.tsx
@@ -4,13 +4,18 @@ import { DevTools } from './Devtools'
 import { PrimaryTools } from './PrimaryTools'
 import { StatusBar } from './StatusBar'
 import { isDev } from '@tldraw/core'
+import { LogseqContext } from './../lib/logseq-context'
+import React from 'react'
+
 
 export const AppUI = observer(function AppUI() {
+  const { isPublishing } = React.useContext(LogseqContext)
+
   return (
     <>
       {isDev() && <StatusBar />}
       {isDev() && <DevTools />}
-      <PrimaryTools />
+      {!isPublishing && <PrimaryTools />}
       <ActionBar />
     </>
   )

diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx
@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite'
 import { TablerIcon } from '../icons'
 import { Button } from '../Button'
 import * as React from 'react'
+import { LogseqContext } from './../../lib/logseq-context'
 
 import * as ReactContextMenu from '@radix-ui/react-context-menu'
 import * as Separator from '@radix-ui/react-separator'
@@ -20,6 +21,7 @@ export const ContextMenu = observer(function ContextMenu({
 }: ContextMenuProps) {
   const app = useApp()
   const rContent = React.useRef<HTMLDivElement>(null)
+  const { isPublishing } = React.useContext(LogseqContext)
 
   const runAndTransition = (f: Function) => {
     f()
@@ -54,7 +56,7 @@ export const ContextMenu = observer(function ContextMenu({
         tabIndex={-1}
       >
         <div>
-          {app.selectedShapes?.size > 1 && (
+          {app.selectedShapes?.size > 1 && !isPublishing && (
             <>
               <ReactContextMenu.Item>
                 <div className="tl-menu-button-row pb-0">
@@ -142,7 +144,8 @@ export const ContextMenu = observer(function ContextMenu({
             </>
           )}
           {(app.selectedShapesArray.some(s => s.type === 'group' || app.getParentGroup(s)) ||
-            app.selectedShapesArray.length > 1) && (
+            app.selectedShapesArray.length > 1) &&
+            !isPublishing && (
             <>
               {app.selectedShapesArray.some(s => s.type === 'group' || app.getParentGroup(s)) && (
                 <ReactContextMenu.Item
@@ -177,18 +180,20 @@ export const ContextMenu = observer(function ContextMenu({
           )}
           {app.selectedShapes?.size > 0 && (
             <>
-              <ReactContextMenu.Item
-                className="tl-menu-item"
-                onClick={() => runAndTransition(app.cut)}
-              >
-                <TablerIcon className="tl-menu-icon" name="cut" />
-                Cut
-                <div className="tl-menu-right-slot">
-                  <span className="keyboard-shortcut">
-                    <code>{MOD_KEY}</code> <code>X</code>
-                  </span>
-                </div>
-              </ReactContextMenu.Item>
+              {!isPublishing && (
+                <ReactContextMenu.Item
+                  className="tl-menu-item"
+                  onClick={() => runAndTransition(app.cut)}
+                >
+                  <TablerIcon className="tl-menu-icon" name="cut" />
+                  Cut
+                  <div className="tl-menu-right-slot">
+                    <span className="keyboard-shortcut">
+                      <code>{MOD_KEY}</code> <code>X</code>
+                    </span>
+                  </div>
+                </ReactContextMenu.Item>
+              )}
               <ReactContextMenu.Item
                 className="tl-menu-item"
                 onClick={() => runAndTransition(app.copy)}
@@ -203,19 +208,21 @@ export const ContextMenu = observer(function ContextMenu({
               </ReactContextMenu.Item>
             </>
           )}
-          <ReactContextMenu.Item
-            className="tl-menu-item"
-            onClick={() => runAndTransition(app.paste)}
-          >
-            <TablerIcon className="tl-menu-icon" name="clipboard" />
-            Paste
-            <div className="tl-menu-right-slot">
-              <span className="keyboard-shortcut">
-                <code>{MOD_KEY}</code> <code>V</code>
-              </span>
-            </div>
-          </ReactContextMenu.Item>
-          {app.selectedShapes?.size === 1 && (
+          {!isPublishing && (
+            <ReactContextMenu.Item
+              className="tl-menu-item"
+              onClick={() => runAndTransition(app.paste)}
+            >
+              <TablerIcon className="tl-menu-icon" name="clipboard" />
+              Paste
+              <div className="tl-menu-right-slot">
+                <span className="keyboard-shortcut">
+                  <code>{MOD_KEY}</code> <code>V</code>
+                </span>
+              </div>
+            </ReactContextMenu.Item>
+          )}
+          {app.selectedShapes?.size === 1 && !isPublishing && (
             <ReactContextMenu.Item
               className="tl-menu-item"
               onClick={() => runAndTransition(() => app.paste(undefined, true))}
@@ -248,7 +255,7 @@ export const ContextMenu = observer(function ContextMenu({
               Deselect all
             </ReactContextMenu.Item>
           )}
-          {app.selectedShapes?.size > 0 && (
+          {app.selectedShapes?.size > 0 && !isPublishing && (
             <>
               <ReactContextMenu.Item
                 className="tl-menu-item"
@@ -262,7 +269,7 @@ export const ContextMenu = observer(function ContextMenu({
                   </span>
                 </div>
               </ReactContextMenu.Item>
-              {app.selectedShapes?.size > 1 && (
+              {app.selectedShapes?.size > 1 && !isPublishing && (
                 <>
                   <ReactContextMenu.Separator className="menu-separator" />
                   <ReactContextMenu.Item
@@ -281,6 +288,8 @@ export const ContextMenu = observer(function ContextMenu({
                   </ReactContextMenu.Item>
                 </>
               )}
+              {!isPublishing && (
+                <>
               <ReactContextMenu.Separator className="menu-separator" />
               <ReactContextMenu.Item
                 className="tl-menu-item"
@@ -303,7 +312,8 @@ export const ContextMenu = observer(function ContextMenu({
                     <code>⇧</code> <code>[</code>
                   </span>
                 </div>
-              </ReactContextMenu.Item>
+              </ReactContextMenu.Item>)
+              </>)}
 
               {developerMode && (
                 <ReactContextMenu.Item

diff --git a/tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts b/tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts
@@ -57,6 +57,7 @@ export interface LogseqContextValue {
     redirectToPage: (uuidOrPageName: string) => void
     copyToClipboard: (text: string, html: string) => void
   }
+  isPublishing: boolean
 }
 
 export const LogseqContext = React.createContext<LogseqContextValue>({} as LogseqContextValue)
diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css
@@ -150,10 +150,6 @@ html[data-theme='light'] {
   color: whites;
 }
 
-.tl-zoom-bar {
-  @apply ml-4;
-}
-
 .tl-action-bar {
   @apply absolute bottom-0 flex items-center border-0 left-10 bottom-10;