From fbf365ceff10c9f75adfc86337fe492a4da08900 Mon Sep 17 00:00:00 2001 From: Konstantinos Kaloutas Date: Fri, 2 Jun 2023 15:49:41 +0300 Subject: [PATCH] enhance: support whiteboard translations --- src/main/frontend/extensions/tldraw.cljs | 4 +- src/resources/dicts/en.edn | 84 ++++++++++++++++ .../src/components/ActionBar/ActionBar.tsx | 12 ++- .../ContextBar/contextBarActionFactory.tsx | 59 ++++++++--- .../components/ContextMenu/ContextMenu.tsx | 98 ++++++++++--------- .../GeometryTools/GeometryTools.tsx | 40 +++++--- .../components/PrimaryTools/PrimaryTools.tsx | 20 ++-- .../src/components/QuickLinks/QuickLinks.tsx | 3 +- .../components/QuickSearch/QuickSearch.tsx | 18 ++-- .../src/components/inputs/ColorInput.tsx | 13 ++- .../src/components/inputs/ScaleInput.tsx | 19 ++-- .../src/components/inputs/ShapeLinksInput.tsx | 23 +++-- .../tldraw-logseq/src/lib/logseq-context.ts | 1 + .../handles/RotateHandle.tsx | 1 - 14 files changed, 281 insertions(+), 114 deletions(-) diff --git a/src/main/frontend/extensions/tldraw.cljs b/src/main/frontend/extensions/tldraw.cljs index 927de4c9c5..409fafcf6d 100644 --- a/src/main/frontend/extensions/tldraw.cljs +++ b/src/main/frontend/extensions/tldraw.cljs @@ -5,6 +5,7 @@ [frontend.components.export :as export] [frontend.components.page :as page] [frontend.config :as config] + [frontend.context.i18n :refer [t]] [frontend.db.model :as model] [frontend.handler.editor :as editor-handler] [frontend.handler.route :as route-handler] @@ -93,7 +94,8 @@ (def undo (fn [] (history/undo! nil))) (def redo (fn [] (history/redo! nil))) (defn get-tldraw-handlers [current-whiteboard-name] - {:search search-handler + {:t (fn [key] (t (keyword key))) + :search search-handler :queryBlockByUUID (fn [block-uuid] (clj->js (model/query-block-by-uuid (parse-uuid block-uuid)))) diff --git a/src/resources/dicts/en.edn b/src/resources/dicts/en.edn index 03eef0405c..d8d55e3e2b 100644 --- a/src/resources/dicts/en.edn +++ b/src/resources/dicts/en.edn @@ -249,6 +249,90 @@ :search/publishing "Search" :search "Search or create page" :whiteboard/link-whiteboard-or-block "Link whiteboard/page/block" + :whiteboard/align-left "Align left" + :whiteboard/align-center-horizontally "Align center horizontally" + :whiteboard/align-right "Align right" + :whiteboard/distribute-horizontally "Distribute horizontally" + :whiteboard/align-top "Align top" + :whiteboard/align-center-vertically "Align center vertically" + :whiteboard/align-bottom "Align bottom" + :whiteboard/distribute-vertically "Distribute vertically" + :whiteboard/pack-into-rectangle"Pack into rectangle" + :whiteboard/zoom-to-fit "Zoom to fit" + :whiteboard/ungroup "Ungroup" + :whiteboard/group "Group" + :whiteboard/cut "Cut" + :whiteboard/copy "Copy" + :whiteboard/paste "Paste" + :whiteboard/paste-as-link "Paste as link" + :whiteboard/export "Export" + :whiteboard/select-all "Select all" + :whiteboard/deselect-all "Deselect all" + :whiteboard/lock "Lock" + :whiteboard/unlock "Unlock" + :whiteboard/delete "Delete" + :whiteboard/flip-horizontally "Flip horizontally" + :whiteboard/flip-vertically "Flip vertically" + :whiteboard/move-to-front "Move to front" + :whiteboard/move-to-back "Move to back" + :whiteboard/dev-print-shape-props "(Dev) Print shape props" + :whiteboard/auto-resize "Auto resize" + :whiteboard/expand "Expand" + :whiteboard/collapse "Collapse" + :whiteboard/website-url "Website url" + :whiteboard/reload "Reload" + :whiteboard/open-website-url "Open website url" + :whiteboard/youtube-url "YouTube url" + :whiteboard/open-youtube-url "Open YouTube url" + :whiteboard/twitter-url "Twitter url" + :whiteboard/open-twitter-url "Open Twitter url" + :whiteboard/fill "Fill" + :whiteboard/stroke-type "Stroke type" + :whiteboard/arrow-head "Arrow head" + :whiteboard/bold "Bold" + :whiteboard/italic "Italic" + :whiteboard/undo "Undo" + :whiteboard/redo "Redo" + :whiteboard/zoom-in "Zoom in" + :whiteboard/zoom-out "Zoom out" + :whiteboard/select "Select" + :whiteboard/pan "Pan" + :whiteboard/add-block-or-page "Add block or page" + :whiteboard/draw "Draw" + :whiteboard/highlight "Highlight" + :whiteboard/eraser "Eraser" + :whiteboard/connector "Connector" + :whiteboard/text "Text" + :whiteboard/color "Color" + :whiteboard/select-custom-color "Select custom color" + :whiteboard/opacity "Opacity" + :whiteboard/extra-small "Extra Small" + :whiteboard/small "Small" + :whiteboard/medium "Medium" + :whiteboard/large "Large" + :whiteboard/extra-large "Extra Large" + :whiteboard/huge "Huge" + :whiteboard/scale-level "Scale level" + :whiteboard/rectangle "Rectangle" + :whiteboard/circle "Circle" + :whiteboard/triangle "Triangle" + :whiteboard/shape "Shape" + :whiteboard/open-page "Open page" + :whiteboard/open-page-in-sidebar "Open page in sidebar" + :whiteboard/remove-link "Remove link" + :whiteboard/link "Link" + :whiteboard/references "References" + :whiteboard/link-to-any-page-or-block "Link to any page or block" + :whiteboard/start-typing-to-search "Start typing to search..." + :whiteboard/new-block-colon "New block:" + :whiteboard/new-block-no-colon "New block" + :whiteboard/new-block "New block:" + :whiteboard/new-page "New page:" + :whiteboard/new-whiteboard "New whiteboard" + :whiteboard/search-only-blocks "Search only blocks" + :whiteboard/search-only-pages "Search only pages" + :whiteboard/cache-outdated "Cache is outdated. Please click the 'Re-index' button in the graph's dropdown menu." + :whiteboard/shape-quick-links "Shape Quick Links" :page-search "Search in the current page" :graph-search "Search graph" :home "Home" diff --git a/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx b/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx index 86bf68cb60..51f4df3df0 100644 --- a/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx @@ -8,9 +8,13 @@ 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() + const { + handlers: { t }, + } = React.useContext(LogseqContext) const undo = React.useCallback(() => { app.api.undo() @@ -32,20 +36,20 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
{!app.readOnly && (
- -
)}
- - diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx index ce6f2197f1..d560f53840 100644 --- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx @@ -92,13 +92,16 @@ function filterShapeByAction(type: ContextBarActionType) { const AutoResizingAction = observer(() => { const app = useApp() + const { + handlers: { t }, + } = React.useContext(LogseqContext) const shapes = filterShapeByAction('AutoResizing') const pressed = shapes.every(s => s.props.isAutoResizing) return ( s.props.type === 'logseq-portal')} className="tl-button" pressed={pressed} @@ -122,6 +125,9 @@ const AutoResizingAction = observer(() => { const LogseqPortalViewModeAction = observer(() => { const app = useApp() + const { + handlers: { t }, + } = React.useContext(LogseqContext) const shapes = filterShapeByAction('LogseqPortalViewMode') const collapsed = shapes.every(s => s.collapsed) @@ -131,7 +137,7 @@ const LogseqPortalViewModeAction = observer(() => { const tooltip = (
- {collapsed ? 'Expand' : 'Collapse'} + {collapsed ? t('whiteboard/expand') : t('whiteboard/collapse')} @@ -164,6 +170,9 @@ const ScaleLevelAction = observer(() => { const IFrameSourceAction = observer(() => { const app = useApp() + const { + handlers: { t }, + } = React.useContext(LogseqContext) const shape = filterShapeByAction('IFrameSource')[0] const handleChange = React.useCallback((e: React.ChangeEvent) => { @@ -177,16 +186,20 @@ const IFrameSourceAction = observer(() => { return ( - - @@ -195,6 +208,9 @@ const IFrameSourceAction = observer(() => { const YoutubeLinkAction = observer(() => { const app = useApp() + const { + handlers: { t }, + } = React.useContext(LogseqContext) const shape = filterShapeByAction('YoutubeLink')[0] const handleChange = React.useCallback((e: React.ChangeEvent) => { shape.onYoutubeLinkChange(e.target.value) @@ -204,13 +220,13 @@ const YoutubeLinkAction = observer(() => { return (
)}