From 8d02df8712dc1e625526c3f3b3e0eb3c218ad5ef Mon Sep 17 00:00:00 2001 From: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Date: Tue, 12 Mar 2024 09:13:42 +0000 Subject: [PATCH] Make the custom menu examples a bit clearer (#3106) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use the Readme and bg color of elements to make it clearer which menu is being customised. - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a brief release note for your PR here. --- .../CustomActionsMenuExample.tsx | 25 +++++++++++-- .../examples/custom-actions-menu/README.md | 2 +- .../CustomContextMenuExample.tsx | 20 ++++++----- .../examples/custom-context-menu/README.md | 2 +- .../CustomDebugMenuExample.tsx | 32 +++++++++-------- .../src/examples/custom-debug-menu/README.md | 2 +- .../CustomHelpMenuExample.tsx | 24 +++++++------ .../src/examples/custom-help-menu/README.md | 2 +- .../CustomKeyboardShortcutsDialogExample.tsx | 22 ++++++------ .../README.md | 2 +- .../CustomMainMenuExample.tsx | 24 +++++++------ .../src/examples/custom-main-menu/README.md | 2 +- .../CustomNavigationPanelExample.tsx | 2 +- .../custom-navigation-panel/README.md | 2 +- .../CustomPageMenuExample.tsx | 2 +- .../src/examples/custom-page-menu/README.md | 2 +- .../CustomQuickActions.tsx | 4 ++- .../CustomStylePanelExample.tsx | 36 ++++++++++--------- .../CustomZoomMenuExample.tsx | 24 +++++++------ .../src/examples/custom-zoom-menu/README.md | 2 +- 20 files changed, 136 insertions(+), 97 deletions(-) diff --git a/apps/examples/src/examples/custom-actions-menu/CustomActionsMenuExample.tsx b/apps/examples/src/examples/custom-actions-menu/CustomActionsMenuExample.tsx index 6e93b4c00..471a6ab37 100644 --- a/apps/examples/src/examples/custom-actions-menu/CustomActionsMenuExample.tsx +++ b/apps/examples/src/examples/custom-actions-menu/CustomActionsMenuExample.tsx @@ -1,10 +1,29 @@ -import { DefaultActionsMenu, TLComponents, Tldraw } from 'tldraw' +import { + DefaultActionsMenu, + DefaultActionsMenuContent, + TLComponents, + Tldraw, + TldrawUiMenuItem, +} from 'tldraw' import 'tldraw/tldraw.css' function CustomActionsMenu() { return ( -
- +
+ +
+ { + window.open('https://x.com/tldraw', '_blank') + }} + /> +
+ +
) } diff --git a/apps/examples/src/examples/custom-actions-menu/README.md b/apps/examples/src/examples/custom-actions-menu/README.md index 4521088d5..ace4abde8 100644 --- a/apps/examples/src/examples/custom-actions-menu/README.md +++ b/apps/examples/src/examples/custom-actions-menu/README.md @@ -8,4 +8,4 @@ You can customize tldraw's actions menu. --- -The actions menu can be customized by providing a `ActionsMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden. +The actions menu is a dropdown menu that can be found in the top-left of the tldraw component, or just above the toolbar on smaller screens. It contains actions related to editing shapes such as grouping, rotating or changing shape order. The actions menu can be customized by providing a `ActionsMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden. diff --git a/apps/examples/src/examples/custom-context-menu/CustomContextMenuExample.tsx b/apps/examples/src/examples/custom-context-menu/CustomContextMenuExample.tsx index f0d87c20d..9e8c0c3f6 100644 --- a/apps/examples/src/examples/custom-context-menu/CustomContextMenuExample.tsx +++ b/apps/examples/src/examples/custom-context-menu/CustomContextMenuExample.tsx @@ -13,15 +13,17 @@ function CustomContextMenu(props: TLUiContextMenuProps) { return ( - { - window.open('https://x.com/tldraw', '_blank') - }} - /> +
+ { + window.open('https://x.com/tldraw', '_blank') + }} + /> +
diff --git a/apps/examples/src/examples/custom-context-menu/README.md b/apps/examples/src/examples/custom-context-menu/README.md index bb74f6fc1..c3d6cbe23 100644 --- a/apps/examples/src/examples/custom-context-menu/README.md +++ b/apps/examples/src/examples/custom-context-menu/README.md @@ -8,4 +8,4 @@ You can customize tldraw's context menu. --- -The context menu can be customized by providing a `ContextMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead. +Create some shapes, select them and right click the selection to see the custom context menu. It can be customized by providing a `ContextMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead. diff --git a/apps/examples/src/examples/custom-debug-menu/CustomDebugMenuExample.tsx b/apps/examples/src/examples/custom-debug-menu/CustomDebugMenuExample.tsx index fc7beb9e4..25be50d9d 100644 --- a/apps/examples/src/examples/custom-debug-menu/CustomDebugMenuExample.tsx +++ b/apps/examples/src/examples/custom-debug-menu/CustomDebugMenuExample.tsx @@ -10,20 +10,24 @@ import 'tldraw/tldraw.css' function CustomDebugMenu() { return ( - - - - { - window.open('https://x.com/tldraw', '_blank') - }} - /> - - +
+ + +
+ + { + window.open('https://x.com/tldraw', '_blank') + }} + /> + +
+ +
) } diff --git a/apps/examples/src/examples/custom-debug-menu/README.md b/apps/examples/src/examples/custom-debug-menu/README.md index 6930e47e4..fd19aa841 100644 --- a/apps/examples/src/examples/custom-debug-menu/README.md +++ b/apps/examples/src/examples/custom-debug-menu/README.md @@ -8,4 +8,4 @@ You can customize tldraw's debug menu. --- -The help menu can be customized by providing a `DebugMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden. +The debug menu contains helpful menu items for debugging the tldraw component. To show the debug menu, turn on debug mode in the preferences. It can be customized by providing a `DebugMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden. diff --git a/apps/examples/src/examples/custom-help-menu/CustomHelpMenuExample.tsx b/apps/examples/src/examples/custom-help-menu/CustomHelpMenuExample.tsx index 646f1a830..09a374c1c 100644 --- a/apps/examples/src/examples/custom-help-menu/CustomHelpMenuExample.tsx +++ b/apps/examples/src/examples/custom-help-menu/CustomHelpMenuExample.tsx @@ -11,17 +11,19 @@ import 'tldraw/tldraw.css' function CustomHelpMenu() { return ( - - { - window.open('https://x.com/tldraw', '_blank') - }} - /> - +
+ + { + window.open('https://x.com/tldraw', '_blank') + }} + /> + +
) diff --git a/apps/examples/src/examples/custom-help-menu/README.md b/apps/examples/src/examples/custom-help-menu/README.md index e75714d17..d00100ce8 100644 --- a/apps/examples/src/examples/custom-help-menu/README.md +++ b/apps/examples/src/examples/custom-help-menu/README.md @@ -8,4 +8,4 @@ You can customize tldraw's help menu. --- -The help menu can be customized by providing a `HelpMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden. +The help menu contains options for opening the keyboard shortcuts dialog and changing the language. It can be opened by clicking on the help icon in the bottom right of the screen at larger breakpoints. The help menu can be customized by providing a `HelpMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden. diff --git a/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/CustomKeyboardShortcutsDialogExample.tsx b/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/CustomKeyboardShortcutsDialogExample.tsx index 896cd19ef..3211cdc61 100644 --- a/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/CustomKeyboardShortcutsDialogExample.tsx +++ b/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/CustomKeyboardShortcutsDialogExample.tsx @@ -11,16 +11,18 @@ import 'tldraw/tldraw.css' function CustomKeyboardShortcutsDialog(props: TLUiKeyboardShortcutsDialogProps) { return ( - { - window.open('https://x.com/tldraw', '_blank') - }} - /> +
+ { + window.open('https://x.com/tldraw', '_blank') + }} + /> +
) diff --git a/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/README.md b/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/README.md index 81e69b0f3..cedbd4cb7 100644 --- a/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/README.md +++ b/apps/examples/src/examples/custom-keyboard-shortcuts-dialog/README.md @@ -8,4 +8,4 @@ You can customize tldraw's keyboard shortcuts dialog. --- -The keyboard shortcuts dialog can be customized by providing a `KeyboardShortcutsDialog` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead. +The keyboard shortcuts dialog can be opened via the help menu in the bottom right corner of the tldraw component. It can be customized by providing a `KeyboardShortcutsDialog` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead. diff --git a/apps/examples/src/examples/custom-main-menu/CustomMainMenuExample.tsx b/apps/examples/src/examples/custom-main-menu/CustomMainMenuExample.tsx index 492a49569..e86a3c74f 100644 --- a/apps/examples/src/examples/custom-main-menu/CustomMainMenuExample.tsx +++ b/apps/examples/src/examples/custom-main-menu/CustomMainMenuExample.tsx @@ -11,17 +11,19 @@ import 'tldraw/tldraw.css' function CustomMainMenu() { return ( - - { - window.open('https://x.com/tldraw', '_blank') - }} - /> - +
+ + { + window.open('https://x.com/tldraw', '_blank') + }} + /> + +
) diff --git a/apps/examples/src/examples/custom-main-menu/README.md b/apps/examples/src/examples/custom-main-menu/README.md index fa105edce..f8859d20b 100644 --- a/apps/examples/src/examples/custom-main-menu/README.md +++ b/apps/examples/src/examples/custom-main-menu/README.md @@ -8,4 +8,4 @@ You can customize tldraw's main menu. --- -The actions menu can be customized by providing a `MainMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden. +The main menu contains important submenus: Edit, Shape, Preferences etc. To open the main menu, click the hamburger icon in the top left corner of the tldraw component. It can be customized by providing a `MainMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden. diff --git a/apps/examples/src/examples/custom-navigation-panel/CustomNavigationPanelExample.tsx b/apps/examples/src/examples/custom-navigation-panel/CustomNavigationPanelExample.tsx index e22f4e564..c3034e8e4 100644 --- a/apps/examples/src/examples/custom-navigation-panel/CustomNavigationPanelExample.tsx +++ b/apps/examples/src/examples/custom-navigation-panel/CustomNavigationPanelExample.tsx @@ -2,7 +2,7 @@ import { TLComponents, Tldraw } from 'tldraw' import 'tldraw/tldraw.css' function CustomNavigationPanel() { - return
here you are
+ return
here you are
} const components: TLComponents = { diff --git a/apps/examples/src/examples/custom-navigation-panel/README.md b/apps/examples/src/examples/custom-navigation-panel/README.md index afe15ae99..909b23c5d 100644 --- a/apps/examples/src/examples/custom-navigation-panel/README.md +++ b/apps/examples/src/examples/custom-navigation-panel/README.md @@ -8,4 +8,4 @@ You can customize tldraw's navigation panel or remove it entirely. --- -The navigation panel can be customized by providing a `NavigationPanel` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead. +The navigation panel is in the bottom left of the tldraw component at larger breakpoints. It contains zoom controls and a mini map. It can be customized by providing a `NavigationPanel` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead. diff --git a/apps/examples/src/examples/custom-page-menu/CustomPageMenuExample.tsx b/apps/examples/src/examples/custom-page-menu/CustomPageMenuExample.tsx index c1a5188ff..4c836f3d5 100644 --- a/apps/examples/src/examples/custom-page-menu/CustomPageMenuExample.tsx +++ b/apps/examples/src/examples/custom-page-menu/CustomPageMenuExample.tsx @@ -3,7 +3,7 @@ import 'tldraw/tldraw.css' function CustomPageMenu() { return ( -
+
) diff --git a/apps/examples/src/examples/custom-page-menu/README.md b/apps/examples/src/examples/custom-page-menu/README.md index 02d8aa4ad..1573c507e 100644 --- a/apps/examples/src/examples/custom-page-menu/README.md +++ b/apps/examples/src/examples/custom-page-menu/README.md @@ -8,4 +8,4 @@ You can customize tldraw's page menu, or remove it entirely. --- -The page menu can be customized by providing a `PageMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden. +The page menu contains options for creating and editing pages. To open the page menu, click the page name in the top left of the tldraw component. It can be customized by providing a `PageMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden. diff --git a/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx b/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx index 5ce3f8631..fad630c7d 100644 --- a/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx +++ b/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx @@ -11,7 +11,9 @@ function CustomQuickActions() { return ( - window.alert('code')} /> +
+ window.alert('code')} /> +
) } diff --git a/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx b/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx index fdce92a80..c8d27b5c3 100644 --- a/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx +++ b/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx @@ -21,22 +21,26 @@ function CustomStylePanel(props: TLUiStylePanelProps) { return ( - { - editor.setStyleForSelectedShapes(DefaultColorStyle, 'red', { squashing: true }) - }} - > - Red - - { - editor.setStyleForSelectedShapes(DefaultColorStyle, 'green', { squashing: true }) - }} - > - Green - +
+ { + editor.setStyleForSelectedShapes(DefaultColorStyle, 'red', { squashing: true }) + }} + > + Red + +
+
+ { + editor.setStyleForSelectedShapes(DefaultColorStyle, 'green', { squashing: true }) + }} + > + Green + +
) diff --git a/apps/examples/src/examples/custom-zoom-menu/CustomZoomMenuExample.tsx b/apps/examples/src/examples/custom-zoom-menu/CustomZoomMenuExample.tsx index bc887b636..514348bbc 100644 --- a/apps/examples/src/examples/custom-zoom-menu/CustomZoomMenuExample.tsx +++ b/apps/examples/src/examples/custom-zoom-menu/CustomZoomMenuExample.tsx @@ -11,17 +11,19 @@ import 'tldraw/tldraw.css' function CustomZoomMenu() { return ( - - { - window.open('https://x.com/tldraw', '_blank') - }} - /> - +
+ + { + window.open('https://x.com/tldraw', '_blank') + }} + /> + +
) diff --git a/apps/examples/src/examples/custom-zoom-menu/README.md b/apps/examples/src/examples/custom-zoom-menu/README.md index 8cee646ca..d3a17b86e 100644 --- a/apps/examples/src/examples/custom-zoom-menu/README.md +++ b/apps/examples/src/examples/custom-zoom-menu/README.md @@ -8,4 +8,4 @@ You can customize tldraw's zoom menu. --- -The zoom menu can be customized by providing a `ZoomMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead. +The zoom menu is in the bottom left of the tldraw component, the button to open it is labeled with a percentage indicating the editor's current zoom level. It can be customized by providing a `ZoomMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.