Skip to content

Commit

Permalink
Merge pull request #165 from Lemoncode/feature/navbar-styles
Browse files Browse the repository at this point in the history
Updating buttons with new configuration and splitting buttons into actions
brauliodiez authored Aug 10, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 5d9de49 + 32522a1 commit 6921724
Showing 16 changed files with 112 additions and 87 deletions.
4 changes: 2 additions & 2 deletions src/common/components/icons/delete-icon.component.tsx
Original file line number Diff line number Diff line change
@@ -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
12 changes: 6 additions & 6 deletions src/pods/toolbar/components/about-button/about-button.tsx
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 1 addition & 2 deletions src/pods/toolbar/components/delete-button/delete-button.tsx
Original file line number Diff line number Diff line change
@@ -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={<></>}
/>
);
};
11 changes: 4 additions & 7 deletions src/pods/toolbar/components/export-button/export-button.tsx
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 7 additions & 7 deletions src/pods/toolbar/components/new-button/new-button.tsx
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 7 additions & 7 deletions src/pods/toolbar/components/open-button/open-button.tsx
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 7 additions & 7 deletions src/pods/toolbar/components/redo-button/redo-button.tsx
Original file line number Diff line number Diff line change
@@ -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;
12 changes: 7 additions & 5 deletions src/pods/toolbar/components/save-button/save-button.tsx
Original file line number Diff line number Diff line change
@@ -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"
/>
);
};
1 change: 1 addition & 0 deletions src/pods/toolbar/components/toolbar-button/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './toolbar-button';
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 7 additions & 7 deletions src/pods/toolbar/components/undo-button/undo-button.tsx
Original file line number Diff line number Diff line change
@@ -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;
11 changes: 4 additions & 7 deletions src/pods/toolbar/components/zoom-in-button/zoom-in-button.tsx
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 1 addition & 3 deletions src/pods/toolbar/shortcut/shortcut.hook.tsx
Original file line number Diff line number Diff line change
@@ -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;
15 changes: 13 additions & 2 deletions src/pods/toolbar/toolbar.pod.module.css
Original file line number Diff line number Diff line change
@@ -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 {
52 changes: 40 additions & 12 deletions src/pods/toolbar/toolbar.pod.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};

0 comments on commit 6921724

Please sign in to comment.