feat: zoom buttons

tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx

@@ -17,15 +17,34 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
     app.api.redo()
   }, [app])
 
+  const zoomIn = React.useCallback(() => {
+    app.api.zoomIn()
+  }, [app])
+
+  const zoomOut = React.useCallback(() => {
+    app.api.zoomOut()
+  }, [app])
+
   return (
     <div className="tl-action-bar">
-      <button onClick={undo}>
-        <TablerIcon name="arrow-back-up" />
-      </button>
-      <button onClick={redo}>
-        <TablerIcon name="arrow-forward-up" />
-      </button>
-      <ZoomMenu />
+      <div className="tl-history-bar">
+        <button title="Undo" onClick={undo}>
+          <TablerIcon name="arrow-back-up" />
+        </button>
+        <button title="Redo" onClick={redo}>
+          <TablerIcon name="arrow-forward-up" />
+        </button>
+      </div>
+
+      <div className="tl-zoom-bar">
+        <button title="Zoom in" onClick={zoomIn}>
+          <TablerIcon name="plus" />
+        </button>
+        <button title="Zoom out" onClick={zoomOut}>
+          <TablerIcon name="minus" />
+        </button>
+        <ZoomMenu />
+      </div>
     </div>
   )
 })

tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx

@@ -8,6 +8,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
   const preventEvent = (e: Event) => {
     e.preventDefault()
   }
+
   return (
     <DropdownMenuPrimitive.Root>
       <DropdownMenuPrimitive.Trigger>
@@ -18,7 +19,6 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
         id="zoomPopup"
         sideOffset={12}
       >
-        <DropdownMenuPrimitive.Arrow style={{ fill: 'white' }}></DropdownMenuPrimitive.Arrow>
         <DropdownMenuPrimitive.Item
           className="menu-link tl-zoom-menu-dropdown-item"
           onSelect={preventEvent}

tldraw/apps/tldraw-logseq/src/styles.css

@@ -75,34 +75,37 @@
   color: whites;
 }
 
+.tl-zoom-bar,
+.tl-history-bar {
+  @apply flex items-center border-0 rounded gap-1 p-1;
+
+  background: var(--ls-secondary-background-color);
+  box-shadow: var(--shadow-medium);
+}
+
+.tl-zoom-bar {
+  @apply ml-4;
+}
+
 .tl-action-bar {
-  @apply absolute bottom-0 flex border-0;
+  @apply absolute bottom-0 flex items-center border-0 left-10 bottom-10;
 
-  border-radius: 12px 12px 0 0;
-  left: 53px;
-  align-items: center;
-  gap: 12px;
-  padding: 8px;
-  color: black;
   z-index: 100000;
   user-select: none;
-  background: var(--ls-primary-background-color);
-  box-shadow: var(--shadow-medium);
 
-  > button {
-    @apply text-sm rounded border-0 inline-flex items-center justify-center;
+  button {
+    @apply text-sm rounded border-0 inline-flex items-center justify-center p-2;
 
-    height: 32px;
-    padding: 0 8px;
+    height: 30px;
+    background: transparent;
     color: var(--ls-primary-text-color);
     font-family: var(--ls-font-family);
-    background: none;
     cursor: pointer;
     opacity: 1;
     white-space: nowrap;
 
     &:hover {
-      background-color: var(--color-hover);
+      background-color: var(--ls-primary-background-color);
     }
   }
 }
@@ -112,9 +115,6 @@
   opacity: 100%;
   background-color: var(--ls-primary-background-color);
 
-  > span svg {
-    display: none !important;
-  }
 }
 
 .tl-zoom-menu-dropdown-item {