Skip to content

Commit daa4722

Browse files
oleojakeoleojake
committed
#513-import-button-added-to-toolbar
1 parent d080497 commit daa4722

File tree

7 files changed

+146
-93
lines changed

7 files changed

+146
-93
lines changed

‎src/common/components/icons/export-icon.component.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,15 @@ export const ExportIcon = () => {
44
xmlns="http://www.w3.org/2000/svg"
55
width="1.2em"
66
height="1.2em"
7-
viewBox="0 0 256 256"
7+
viewBox="0 0 24 24"
88
>
99
<path
1010
fill="currentColor"
11-
d="M214 112v96a14 14 0 0 1-14 14H56a14 14 0 0 1-14-14v-96a14 14 0 0 1 14-14h24a6 6 0 0 1 0 12H56a2 2 0 0 0-2 2v96a2 2 0 0 0 2 2h144a2 2 0 0 0 2-2v-96a2 2 0 0 0-2-2h-24a6 6 0 0 1 0-12h24a14 14 0 0 1 14 14M92.24 68.24L122 38.49V136a6 6 0 0 0 12 0V38.49l29.76 29.75a6 6 0 1 0 8.48-8.48l-40-40a6 6 0 0 0-8.48 0l-40 40a6 6 0 1 0 8.48 8.48"
11+
d="M5.552 20.968a2.577 2.577 0 0 1-2.5-2.73c-.012-2.153 0-4.306 0-6.459a.5.5 0 0 1 1 0c0 2.2-.032 4.4 0 6.6c.016 1.107.848 1.589 1.838 1.589h12.463A1.55 1.55 0 0 0 19.825 19a3 3 0 0 0 .1-1.061v-6.16a.5.5 0 0 1 1 0c0 2.224.085 4.465 0 6.687a2.567 2.567 0 0 1-2.67 2.5Z"
12+
/>
13+
<path
14+
fill="currentColor"
15+
d="M12.337 3.176a.46.46 0 0 0-.311-.138q-.021.002-.043-.006c-.022-.008-.027 0-.041.006a.46.46 0 0 0-.312.138L7.961 6.845a.5.5 0 0 0 .707.707l2.816-2.815v10.742a.5.5 0 0 0 1 0V4.737L15.3 7.552a.5.5 0 0 0 .707-.707Z"
1216
/>
1317
</svg>
1418
);

‎src/common/components/icons/import-icon.component.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const ImportIcon = () => {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="1.2em"
6+
height="1.2em"
7+
viewBox="0 0 24 24"
8+
>
9+
<path
10+
fill="currentColor"
11+
d="M5.552 20.968a2.577 2.577 0 0 1-2.5-2.73c-.012-2.153 0-4.306 0-6.459a.5.5 0 0 1 1 0c0 2.2-.032 4.4 0 6.6c.016 1.107.848 1.589 1.838 1.589h12.463A1.55 1.55 0 0 0 19.825 19a3 3 0 0 0 .1-1.061v-6.16a.5.5 0 0 1 1 0c0 2.224.085 4.465 0 6.687a2.567 2.567 0 0 1-2.67 2.5Z"
12+
/>
13+
<path
14+
fill="currentColor"
15+
d="M12.337 15.824a.46.46 0 0 1-.311.138q-.021-.002-.043.006c-.022.008-.027 0-.041-.006a.46.46 0 0 1-.312-.138l-3.669-3.669a.5.5 0 0 1 .707-.707l2.816 2.815V3.515a.5.5 0 0 1 1 0v10.742l2.816-2.815a.5.5 0 1 1 .707.707Z"
16+
/>
17+
</svg>
18+
);
19+
};

‎src/pods/toolbar/components/import-button/import-button.component.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ToolbarButton } from '../toolbar-button/toolbarButton.component';
2+
import { SHORTCUTS } from '../../shortcut/shortcut.const';
3+
import { ImportIcon } from '@/common/components/icons/import-icon.component';
4+
import classes from '@/pods/toolbar/toolbar.pod.module.css';
5+
6+
export const ImportButton = () => {
7+
const handleImportClick = () => {
8+
console.log('Hola');
9+
};
10+
11+
return (
12+
<ToolbarButton
13+
icon={<ImportIcon />}
14+
label="Import"
15+
onClick={handleImportClick}
16+
className={`${classes.button} hide-mobile`}
17+
shortcutOptions={SHORTCUTS.import}
18+
/>
19+
);
20+
};

‎src/pods/toolbar/components/import-button/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './import-button.component';

‎src/pods/toolbar/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,4 @@ export * from './about-button';
1515
export * from './duplicate-button';
1616
export * from './copy-button';
1717
export * from './paste-button';
18+
export * from './import-button';

‎src/pods/toolbar/shortcut/shortcut.const.ts

Lines changed: 97 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,104 @@
11
import { ShortcutOptions } from './shortcut.model';
22

33
interface Shortcut {
4-
[key: string]: ShortcutOptions;
4+
[key: string]: ShortcutOptions;
55
}
66

77
export const SHORTCUTS: Shortcut = {
8-
addCollection: {
9-
description: 'Add Collection',
10-
id: 'add-collection-button-shortcut',
11-
targetKey: ['c'],
12-
targetKeyLabel: 'C',
13-
},
14-
addRelation: {
15-
description: 'Add Relation',
16-
id: 'add-relation-button-shortcut',
17-
targetKey: ['r'],
18-
targetKeyLabel: 'R',
19-
},
20-
delete: {
21-
description: 'Delete',
22-
id: 'delete-button-shortcut',
23-
targetKey: ['backspace'],
24-
targetKeyLabel: 'Backspace',
25-
},
26-
export: {
27-
description: 'Export',
28-
id: 'export-button-shortcut',
29-
targetKey: ['e'],
30-
targetKeyLabel: 'E',
31-
},
32-
new: {
33-
description: 'New',
34-
id: 'new-button-shortcut',
35-
targetKey: ['n'],
36-
targetKeyLabel: 'N',
37-
},
38-
open: {
39-
description: 'Open',
40-
id: 'open-button-shortcut',
41-
targetKey: ['o'],
42-
targetKeyLabel: 'O',
43-
},
44-
redo: {
45-
description: 'Redo',
46-
id: 'redo-button-shortcut',
47-
targetKey: ['y'],
48-
targetKeyLabel: 'Y',
49-
},
50-
save: {
51-
description: 'Save',
52-
id: 'save-button-shortcut',
53-
targetKey: ['s'],
54-
targetKeyLabel: 'S',
55-
},
56-
settings: {
57-
description: 'Settings',
58-
id: 'settings-button-shortcut',
59-
targetKey: ['t'],
60-
targetKeyLabel: 'T',
61-
},
62-
undo: {
63-
description: 'Undo',
64-
id: 'undo-button-shortcut',
65-
targetKey: ['z'],
66-
targetKeyLabel: 'Z',
67-
},
68-
zoomIn: {
69-
description: 'Zoom In',
70-
id: 'zoom-in-button-shortcut',
71-
targetKey: ['=', '+'],
72-
targetKeyLabel: '"+"',
73-
},
74-
zoomOut: {
75-
description: 'Zoom Out',
76-
id: 'zoom-out-button-shortcut',
77-
targetKey: ['-', '-'],
78-
targetKeyLabel: '"-"',
79-
},
80-
duplicate: {
81-
description: 'Duplicate',
82-
id: 'duplicate-button-shortcut',
83-
targetKey: ['d'],
84-
targetKeyLabel: 'D',
85-
},
86-
copy: {
87-
description: 'Copy',
88-
id: 'copy-button-shortcut',
89-
targetKey: ['c'],
90-
targetKeyLabel: 'C',
91-
},
92-
paste: {
93-
description: 'Paste',
94-
id: 'paste-button-shortcut',
95-
targetKey: ['v'],
96-
targetKeyLabel: 'V',
97-
},
8+
addCollection: {
9+
description: 'Add Collection',
10+
id: 'add-collection-button-shortcut',
11+
targetKey: ['c'],
12+
targetKeyLabel: 'C',
13+
},
14+
addRelation: {
15+
description: 'Add Relation',
16+
id: 'add-relation-button-shortcut',
17+
targetKey: ['r'],
18+
targetKeyLabel: 'R',
19+
},
20+
delete: {
21+
description: 'Delete',
22+
id: 'delete-button-shortcut',
23+
targetKey: ['backspace'],
24+
targetKeyLabel: 'Backspace',
25+
},
26+
export: {
27+
description: 'Export',
28+
id: 'export-button-shortcut',
29+
targetKey: ['e'],
30+
targetKeyLabel: 'E',
31+
},
32+
new: {
33+
description: 'New',
34+
id: 'new-button-shortcut',
35+
targetKey: ['n'],
36+
targetKeyLabel: 'N',
37+
},
38+
open: {
39+
description: 'Open',
40+
id: 'open-button-shortcut',
41+
targetKey: ['o'],
42+
targetKeyLabel: 'O',
43+
},
44+
redo: {
45+
description: 'Redo',
46+
id: 'redo-button-shortcut',
47+
targetKey: ['y'],
48+
targetKeyLabel: 'Y',
49+
},
50+
save: {
51+
description: 'Save',
52+
id: 'save-button-shortcut',
53+
targetKey: ['s'],
54+
targetKeyLabel: 'S',
55+
},
56+
settings: {
57+
description: 'Settings',
58+
id: 'settings-button-shortcut',
59+
targetKey: ['t'],
60+
targetKeyLabel: 'T',
61+
},
62+
undo: {
63+
description: 'Undo',
64+
id: 'undo-button-shortcut',
65+
targetKey: ['z'],
66+
targetKeyLabel: 'Z',
67+
},
68+
zoomIn: {
69+
description: 'Zoom In',
70+
id: 'zoom-in-button-shortcut',
71+
targetKey: ['=', '+'],
72+
targetKeyLabel: '"+"',
73+
},
74+
zoomOut: {
75+
description: 'Zoom Out',
76+
id: 'zoom-out-button-shortcut',
77+
targetKey: ['-', '-'],
78+
targetKeyLabel: '"-"',
79+
},
80+
duplicate: {
81+
description: 'Duplicate',
82+
id: 'duplicate-button-shortcut',
83+
targetKey: ['d'],
84+
targetKeyLabel: 'D',
85+
},
86+
copy: {
87+
description: 'Copy',
88+
id: 'copy-button-shortcut',
89+
targetKey: ['c'],
90+
targetKeyLabel: 'C',
91+
},
92+
paste: {
93+
description: 'Paste',
94+
id: 'paste-button-shortcut',
95+
targetKey: ['v'],
96+
targetKeyLabel: 'V',
97+
},
98+
import: {
99+
description: 'Import',
100+
id: 'import-button-shortcut',
101+
targetKey: ['i'],
102+
targetKeyLabel: 'I',
103+
},
98104
};

‎src/pods/toolbar/toolbar.pod.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
CanvasSettingButton,
1818
CopyButton,
1919
PasteButton,
20+
ImportButton,
2021
} from './components';
2122
import classes from './toolbar.pod.module.css';
2223

@@ -35,6 +36,7 @@ export const ToolbarPod: React.FC = () => {
3536
<UndoButton />
3637
<RedoButton />
3738
<ExportButton />
39+
<ImportButton />
3840
<DeleteButton />
3941
<CanvasSettingButton />
4042
<AboutButton />

0 commit comments

Comments
 (0)