Updating buttons with new configuration and splitting buttons into ac…

…tions
Lemoncode · Aug 10, 2024 · 32522a1 · 32522a1
1 parent 5d9de49
commit 32522a1
Show file tree

Hide file tree

Showing 16 changed files with 112 additions and 87 deletions.
diff --git a/src/common/components/icons/delete-icon.component.tsx b/src/common/components/icons/delete-icon.component.tsx
@@ -2,8 +2,8 @@ export const DeleteIcon = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="1em"
-      height="1em"
+      width="1.2em"
+      height="1.2em"
       viewBox="0 0 256 256"
     >
       <path

diff --git a/src/pods/toolbar/components/about-button/about-button.tsx b/src/pods/toolbar/components/about-button/about-button.tsx
@@ -8,11 +8,11 @@ export const AboutButton = () => {
   };
 
   return (
-    <ToolbarButton onClick={handleClick} className={classes.button}>
-      <AboutIcon />
-      <span>About Us</span>
-    </ToolbarButton>
+    <ToolbarButton
+      onClick={handleClick}
+      className={classes.button}
+      icon={<AboutIcon />}
+      label="About"
+    />
   );
 };
-
-export default AboutButton;
diff --git a/src/pods/toolbar/components/delete-button/delete-button.tsx b/src/pods/toolbar/components/delete-button/delete-button.tsx
@@ -1,5 +1,5 @@
 import { DeleteIcon } from '@/common/components/icons/delete-icon.component';
-import { ToolbarButton } from '@/pods/toolbar/components/toolbar-button/toolbar-button';
+import { ToolbarButton } from '../toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
 import { useCanvasContext } from '@/core/providers';
 import { SHORTCUTS } from '../../shortcut/shortcut.const';
@@ -21,7 +21,6 @@ export const DeleteButton = () => {
       className={classes.button}
       disabled={!selectionInfo.selectedShapeId}
       shortcutOptions={SHORTCUTS.delete}
-      children={<></>}
     />
   );
 };
diff --git a/src/pods/toolbar/components/export-button/export-button.tsx b/src/pods/toolbar/components/export-button/export-button.tsx
@@ -1,9 +1,9 @@
 import { ExportIcon } from '@/common/components/icons/export-icon.component';
 import { useCanvasContext } from '@/core/providers';
-import ToolbarButton from '@/pods/toolbar/components/toolbar-button/toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
 import { Stage } from 'konva/lib/Stage';
 import { calculateCanvasBounds } from './export-button.utils';
+import { ToolbarButton } from '../toolbar-button';
 
 export const ExportButton = () => {
   const { stageRef, shapes } = useCanvasContext();
@@ -44,11 +44,8 @@ export const ExportButton = () => {
       onClick={handleExport}
       className={classes.button}
       disabled={shapes.length === 0}
-    >
-      <ExportIcon />
-      <span>Export</span>
-    </ToolbarButton>
+      icon={<ExportIcon />}
+      label="Export"
+    />
   );
 };
-
-export default ExportButton;
diff --git a/src/pods/toolbar/components/new-button/new-button.tsx b/src/pods/toolbar/components/new-button/new-button.tsx
@@ -1,7 +1,7 @@
 import { NewIcon } from '@/common/components/icons/new-button.components';
-import ToolbarButton from '../toolbar-button/toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
 import { useCanvasContext } from '@/core/providers';
+import { ToolbarButton } from '../toolbar-button';
 
 export const NewButton = () => {
   const { clearCanvas } = useCanvasContext();
@@ -11,11 +11,11 @@ export const NewButton = () => {
   };
 
   return (
-    <ToolbarButton onClick={handleClick} className={classes.button}>
-      <NewIcon />
-      <span>New</span>
-    </ToolbarButton>
+    <ToolbarButton
+      onClick={handleClick}
+      className={classes.button}
+      icon={<NewIcon />}
+      label="New"
+    />
   );
 };
-
-export default NewButton;
diff --git a/src/pods/toolbar/components/open-button/open-button.tsx b/src/pods/toolbar/components/open-button/open-button.tsx
@@ -1,5 +1,5 @@
 import { OpenIcon } from '@/common/components/icons/open-icon.component';
-import ToolbarButton from '../toolbar-button/toolbar-button';
+import { ToolbarButton } from '../toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
 
 export const OpenButton = () => {
@@ -8,11 +8,11 @@ export const OpenButton = () => {
   };
 
   return (
-    <ToolbarButton onClick={handleClick} className={classes.button}>
-      <OpenIcon />
-      <span>Open</span>
-    </ToolbarButton>
+    <ToolbarButton
+      onClick={handleClick}
+      className={classes.button}
+      icon={<OpenIcon />}
+      label="Open"
+    />
   );
 };
-
-export default OpenButton;
diff --git a/src/pods/toolbar/components/redo-button/redo-button.tsx b/src/pods/toolbar/components/redo-button/redo-button.tsx
@@ -1,18 +1,18 @@
 import { RedoIcon } from '@/common/components/icons/redo-icon.component';
-import ToolbarButton from '../toolbar-button/toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
+import { ToolbarButton } from '../toolbar-button';
 
 export const RedoButton = () => {
   const handleClick = () => {
     console.log('Redo');
   };
 
   return (
-    <ToolbarButton onClick={handleClick} className={classes.button}>
-      <RedoIcon />
-      <span>Redo</span>
-    </ToolbarButton>
+    <ToolbarButton
+      onClick={handleClick}
+      className={classes.button}
+      icon={<RedoIcon />}
+      label="Redo"
+    />
   );
 };
-
-export default RedoButton;
diff --git a/src/pods/toolbar/components/save-button/save-button.tsx b/src/pods/toolbar/components/save-button/save-button.tsx
@@ -1,16 +1,18 @@
 import { SaveIcon } from '@/common/components/icons/save-icon.component';
-import ToolbarButton from '../toolbar-button/toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
+import { ToolbarButton } from '../toolbar-button';
 
 export const SaveButton = () => {
   const handleClick = () => {
     console.log('Save');
   };
 
   return (
-    <ToolbarButton onClick={handleClick} className={classes.button}>
-      <SaveIcon />
-      <span>Save</span>
-    </ToolbarButton>
+    <ToolbarButton
+      onClick={handleClick}
+      className={classes.button}
+      icon={<SaveIcon />}
+      label="Save"
+    />
   );
 };
diff --git a/src/pods/toolbar/components/toolbar-button/index.ts b/src/pods/toolbar/components/toolbar-button/index.ts
@@ -0,0 +1 @@
+export * from './toolbar-button';
diff --git a/src/pods/toolbar/components/toolbar-button/toolbar-button.tsx b/src/pods/toolbar/components/toolbar-button/toolbar-button.tsx
@@ -1,9 +1,8 @@
-import useShortcut from '../../shortcut/shortcut.hook';
+import { useShortcut } from '../../shortcut/shortcut.hook';
 /* import { isMacOS } from '@/common/helpers/platform.helpers'; */
 import { ShortcutOptions } from '../../shortcut/shortcut.model';
 
 interface Props {
-  children: React.ReactNode;
   onClick?: () => void;
   className?: string;
   disabled?: boolean;
@@ -13,7 +12,6 @@ interface Props {
 }
 export const ToolbarButton: React.FC<Props> = props => {
   const {
-    children,
     onClick = () => {},
     className,
     disabled,
@@ -46,9 +44,6 @@ export const ToolbarButton: React.FC<Props> = props => {
           {tooltipText}
         </span>
       )} */}
-      {children}
     </button>
   );
 };
-
-export default ToolbarButton;
diff --git a/src/pods/toolbar/components/undo-button/undo-button.tsx b/src/pods/toolbar/components/undo-button/undo-button.tsx
@@ -1,18 +1,18 @@
 import { UndoIcon } from '@/common/components/icons/undo-icon.component';
-import ToolbarButton from '../toolbar-button/toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
+import { ToolbarButton } from '../toolbar-button/toolbar-button';
 
 export const UndoButton = () => {
   const handleClick = () => {
     console.log('Undo');
   };
 
   return (
-    <ToolbarButton onClick={handleClick} className={classes.button}>
-      <UndoIcon />
-      <span>Undo</span>
-    </ToolbarButton>
+    <ToolbarButton
+      onClick={handleClick}
+      className={classes.button}
+      icon={<UndoIcon />}
+      label="Undo"
+    />
   );
 };
-
-export default UndoButton;
diff --git a/src/pods/toolbar/components/zoom-in-button/zoom-in-button.tsx b/src/pods/toolbar/components/zoom-in-button/zoom-in-button.tsx
@@ -1,7 +1,7 @@
-import ToolbarButton from '../toolbar-button/toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
 import { ZoomInIcon } from '@/common/components/icons/zoom-in.component';
 import { useCanvasContext } from '@/core/providers';
+import { ToolbarButton } from '../toolbar-button';
 
 export const ZoomInButton = () => {
   const { scale, setScale } = useCanvasContext();
@@ -17,11 +17,8 @@ export const ZoomInButton = () => {
       onClick={handleClick}
       className={classes.button}
       disabled={isDisabled}
-    >
-      <ZoomInIcon />
-      <span>Zoom In</span>
-    </ToolbarButton>
+      icon={<ZoomInIcon />}
+      label="Zoom In"
+    />
   );
 };
-
-export default ZoomInButton;
diff --git a/src/pods/toolbar/components/zoom-out-component/zoom-out-button.tsx b/src/pods/toolbar/components/zoom-out-component/zoom-out-button.tsx
@@ -1,7 +1,7 @@
 import { ZoomOutIcon } from '@/common/components/icons/zoom-out.component';
-import ToolbarButton from '../toolbar-button/toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
 import { useCanvasContext } from '@/core/providers';
+import { ToolbarButton } from '../toolbar-button';
 
 export const ZoomOutButton = () => {
   const { scale, setScale } = useCanvasContext();
@@ -17,11 +17,8 @@ export const ZoomOutButton = () => {
       onClick={handleClick}
       className={classes.button}
       disabled={isDisabled}
-    >
-      <ZoomOutIcon />
-      <span>Zoom Out</span>
-    </ToolbarButton>
+      icon={<ZoomOutIcon />}
+      label="Zoom Out"
+    />
   );
 };
-
-export default ZoomOutButton;
diff --git a/src/pods/toolbar/shortcut/shortcut.hook.tsx b/src/pods/toolbar/shortcut/shortcut.hook.tsx
@@ -6,7 +6,7 @@ export interface ShortcutHookProps {
   callback: () => void;
 }
 
-const useShortcut = ({ targetKey, callback }: ShortcutHookProps) => {
+export const useShortcut = ({ targetKey, callback }: ShortcutHookProps) => {
   const handleKeyPress = (event: KeyboardEvent) => {
     const isAltKeyPressed = event.getModifierState('Alt');
     const isCtrlKeyPressed = event.getModifierState('Control');
@@ -31,5 +31,3 @@ const useShortcut = ({ targetKey, callback }: ShortcutHookProps) => {
     };
   }, [targetKey, callback]);
 };
-
-export default useShortcut;
diff --git a/src/pods/toolbar/toolbar.pod.module.css b/src/pods/toolbar/toolbar.pod.module.css
@@ -1,10 +1,21 @@
 .container {
   grid-area: toolbar;
   display: flex;
-  justify-content: space-evenly;
-  padding: var(--space-s);
+  justify-content: space-between;
+  padding: var(--space-s) var(--space-md);
   background-color: var(--primary-100);
   border-bottom: 1px solid var(--primary-900);
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+}
+
+.buttonGroup {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-xl);
 }
 
 .button {

diff --git a/src/pods/toolbar/toolbar.pod.tsx b/src/pods/toolbar/toolbar.pod.tsx
@@ -14,17 +14,45 @@ import classes from './toolbar.pod.module.css';
 
 export const ToolbarPod: React.FC = () => {
   return (
-    <div className={classes.container}>
-      <NewButton />
-      <OpenButton />
-      <SaveButton />
-      <ZoomOutButton />
-      <ZoomInButton />
-      <UndoButton />
-      <RedoButton />
-      <ExportButton />
-      <DeleteButton />
-      <AboutButton />
-    </div>
+    <header className={classes.container}>
+      <ul className={classes.buttonGroup}>
+        <li>
+          <NewButton />
+        </li>
+        <li>
+          <OpenButton />
+        </li>
+        <li>
+          <SaveButton />
+        </li>
+        <li>
+          <ExportButton />
+        </li>
+      </ul>
+      <ul className={classes.buttonGroup}>
+        <li>
+          <UndoButton />
+        </li>
+        <li>
+          <RedoButton />
+        </li>
+        <li>
+          <DeleteButton />
+        </li>
+      </ul>
+      <ul className={classes.buttonGroup}>
+        <li>
+          <ZoomOutButton />
+        </li>
+        <li>
+          <ZoomInButton />
+        </li>
+      </ul>
+      <ul className={classes.buttonGroup}>
+        <li>
+          <AboutButton />
+        </li>
+      </ul>
+    </header>
   );
 };