Skip to content

Commit

Permalink
enhance (wip): adjust ui on published whiteboards
Browse files Browse the repository at this point in the history
  • Loading branch information
@sprocketc @logseq-cldwalker
sprocketc authored and logseq-cldwalker committed Mar 27, 2023
1 parent e21de5c commit 6a3f928
Show file tree
Hide file tree
Showing 7 changed files with 66 additions and 45 deletions.
2 changes: 2 additions & 0 deletions src/main/frontend/extensions/tldraw.cljs
View file
Expand Up @@ -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]
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 3 additions & 1 deletion tldraw/apps/tldraw-logseq/src/app.tsx
View file
Expand Up @@ -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']
Expand Down Expand Up @@ -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]) => {
Expand All @@ -135,6 +136,7 @@ export const App = function App({ renderers, handlers, ...rest }: LogseqTldrawPr
const contextValue = {
renderers: memoRenders,
handlers: handlers,
isPublishing: isPublishing,
}

return (
Expand Down
23 changes: 14 additions & 9 deletions tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx
View file
Expand Up @@ -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])
Expand All @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion tldraw/apps/tldraw-logseq/src/components/AppUI.tsx
View file
Expand Up @@ -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 />
</>
)
Expand Down
70 changes: 40 additions & 30 deletions tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx
View file
Expand Up @@ -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'
Expand All @@ -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()
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)}
Expand All @@ -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))}
Expand Down Expand Up @@ -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"
Expand All @@ -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
Expand All @@ -281,6 +288,8 @@ export const ContextMenu = observer(function ContextMenu({
</ReactContextMenu.Item>
</>
)}
{!isPublishing && (
<>
<ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item
className="tl-menu-item"
Expand All @@ -303,7 +312,8 @@ export const ContextMenu = observer(function ContextMenu({
<code>⇧</code> <code>[</code>
</span>
</div>
</ReactContextMenu.Item>
</ReactContextMenu.Item>)
</>)}

{developerMode && (
<ReactContextMenu.Item
Expand Down
1 change: 1 addition & 0 deletions tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts
View file
Expand Up @@ -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)
4 changes: 0 additions & 4 deletions tldraw/apps/tldraw-logseq/src/styles.css
View file
Expand Up @@ -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;

Expand Down

0 comments on commit 6a3f928

Please sign in to comment.