Skip to content

Commit cf86ab3

Browse files
Vivek-RamanVivek-Raman
committed
Move icon to common components, improve tool UI
1 parent c6523ff commit cf86ab3

10 files changed

Lines changed: 179 additions & 64 deletions

File tree

‎.nf‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
[?25l[?7l /////////////
2+
/////////////////////
3+
///////*767////////////////
4+
//////7676767676*//////////////
5+
/////76767//7676767//////////////
6+
/////767676///*76767///////////////
7+
///////767676///76767.///7676*///////
8+
/////////767676//76767///767676////////
9+
//////////76767676767////76767/////////
10+
///////////76767676//////7676//////////
11+
////////////,7676,///////767///////////
12+
/////////////*7676///////76////////////
13+
///////////////7676////////////////////
14+
///////////////7676///767////////////
15+
//////////////////////'////////////
16+
//////.7676767676767676767,//////
17+
/////767676767676767676767/////
18+
///////////////////////////
19+
/////////////////////
20+
/////////////
21+
vivek@pop-os
22+
------------
23+
OS: Pop!_OS 22.04 LTS x86_64
24+
Host: ASUS TUF Dash F15 FX516PM_FX516PM 1.0
25+
Kernel: 6.12.10-76061203-generic
26+
Uptime: 5 hours, 51 mins
27+
Packages: 2764 (dpkg), 7 (flatpak), 7 (snap)
28+
Shell: bash 5.1.16
29+
Resolution: 1920x1080
30+
DE: Plasma 5.24.7
31+
WM: KWin
32+
WM Theme: Sweet-Mars-transparent
33+
Theme: [Plasma], Sweet-mars [GTK2/3]
34+
Icons: candy-icons [Plasma], candy-icons [GTK2/3]
35+
Terminal: vscode
36+
CPU: 11th Gen Intel i7-11370H (8) @ 4.800GHz
37+
GPU: Intel TigerLake-LP GT2 [Iris Xe Graphics]
38+
GPU: NVIDIA GeForce RTX 3060 Mobile / Max-Q
39+
Memory: 11527MiB / 15685MiB
40+
41+
        
42+
        
43+
44+
45+
[?25h[?7h

src/renderer-editor/components/Icon.tsx renamed to src/common/Icon.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
/* eslint-disable react/require-default-props */
12
import { IconProps, Icon as TheIcon } from '@iconify/react/dist/iconify.cjs';
23

34
export default function Icon({
45
size = '1rem',
56
...props
6-
}: IconProps & { size: string | number }) {
7+
}: IconProps & { size?: string | number }) {
78
// eslint-disable-next-line react/jsx-props-no-spreading
89
return <TheIcon {...props} width={size} height={size} />;
910
}

‎src/common/Loading.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Center, Loader } from '@mantine/core';
22

33
export default function Loading() {
44
return (
5-
<Center>
5+
<Center h="100%" w="100%">
66
<Loader type="dots" />
77
</Center>
88
);

‎src/renderer-editor/components/ShortcutPreview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import ShortcutType from '../../common/enums/ShortcutType';
22
import { Shortcut } from '../../types/Shortcut';
3-
import Icon from './Icon';
3+
import Icon from '../../common/Icon';
44

55
interface ShortcutPreviewProps {
66
shortcut: Shortcut;

‎src/renderer/App.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,5 @@ export default function App() {
3333
checkFirstTimeUser();
3434
}, [checkFirstTimeUser]);
3535

36-
return (
37-
<Suspense fallback={<Loading />}>
38-
<div>You should not be here.</div>
39-
</Suspense>
40-
);
36+
return <Loading />;
4137
}

‎src/renderer/layout/StageProvider.tsx‎

Lines changed: 86 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { SimpleGrid } from '@mantine/core';
1+
import { MantineTransition, SimpleGrid, Transition } from '@mantine/core';
22
import PouchDB from 'pouchdb-browser';
3-
import { Suspense, useEffect, useState } from 'react';
3+
import { useEffect, useState } from 'react';
44
import { useParams } from 'react-router-dom';
5-
import Loading from '../../common/Loading';
65
import { CENTER_INDEX } from '../../common/constants';
76
import ShortcutType from '../../common/enums/ShortcutType';
87
import {
@@ -17,9 +16,19 @@ import Container from './shortcuts/Container';
1716
import Hotkey from './shortcuts/Hotkey';
1817
import Script from './shortcuts/Script';
1918

19+
// prettier-ignore
20+
const TRANSITIONS = [
21+
'pop-bottom-right', 'fade-up' , 'pop-bottom-left',
22+
'fade-left' , /* 'fade', */ 'fade-right',
23+
'pop-top-right' , 'fade-down' , 'pop-top-left',
24+
] as MantineTransition[];
25+
const TRANSITION_DURATION = 250;
26+
const TRANSITION_EASING = 'ease-in';
27+
2028
export default function StageProvider() {
2129
const { id: stageID } = useParams<{ id?: string }>();
2230
const [shortcuts, setShortcuts] = useState<Shortcut[]>([]);
31+
const [mounted, setMounted] = useState(false);
2332

2433
const loadStage = async (id: string) => {
2534
setShortcuts([]);
@@ -31,47 +40,86 @@ export default function StageProvider() {
3140
};
3241

3342
useEffect(() => {
43+
setMounted(false);
44+
3445
(async () => {
3546
if (!stageID) return;
3647
await loadStage(stageID);
3748
})();
49+
50+
setTimeout(() => {
51+
setMounted(true);
52+
}, 10);
3853
}, [stageID]);
3954

4055
return (
41-
<Suspense fallback={<Loading />}>
42-
<SimpleGrid cols={3}>
43-
{shortcuts.flatMap((shortcut, index) => {
44-
const elements = [];
45-
if (index === CENTER_INDEX) {
46-
elements.push(<Back key="x" />);
47-
}
48-
if (shortcut.type === ShortcutType.EMPTY) {
49-
elements.push(<div key={shortcut.position} />);
50-
} else if (shortcut.type === ShortcutType.CONTAINER) {
51-
elements.push(
52-
<Container
53-
key={shortcut.position}
54-
item={shortcut as ContainerShortcut}
55-
/>,
56-
);
57-
} else if (shortcut.type === ShortcutType.SCRIPT) {
58-
elements.push(
59-
<Script
60-
key={shortcut.position}
61-
item={shortcut as ScriptShortcut}
62-
/>,
63-
);
64-
} else if (shortcut.type === ShortcutType.HOTKEY) {
65-
elements.push(
66-
<Hotkey
67-
key={shortcut.position}
68-
item={shortcut as HotkeyShortcut}
69-
/>,
70-
);
71-
}
72-
return elements;
73-
})}
74-
</SimpleGrid>
75-
</Suspense>
56+
<SimpleGrid cols={3} h="100%" p="xs">
57+
{shortcuts.flatMap((shortcut, index) => {
58+
const elements = [];
59+
if (index === CENTER_INDEX) {
60+
elements.push(
61+
<Transition
62+
key="x"
63+
transition="fade"
64+
duration={TRANSITION_DURATION}
65+
timingFunction={TRANSITION_EASING}
66+
enterDelay={TRANSITION_DURATION / 3}
67+
mounted={mounted}
68+
>
69+
{(styles) => <Back style={styles} />}
70+
</Transition>,
71+
);
72+
}
73+
if (shortcut.type === ShortcutType.EMPTY) {
74+
elements.push(<div key={shortcut.position} />);
75+
} else if (shortcut.type === ShortcutType.CONTAINER) {
76+
elements.push(
77+
<Transition
78+
key={shortcut.position}
79+
transition={TRANSITIONS[index]}
80+
duration={TRANSITION_DURATION}
81+
timingFunction={TRANSITION_EASING}
82+
mounted={mounted}
83+
>
84+
{(styles) => (
85+
<Container
86+
item={shortcut as ContainerShortcut}
87+
style={styles}
88+
/>
89+
)}
90+
</Transition>,
91+
);
92+
} else if (shortcut.type === ShortcutType.SCRIPT) {
93+
elements.push(
94+
<Transition
95+
key={shortcut.position}
96+
transition={TRANSITIONS[index]}
97+
duration={TRANSITION_DURATION}
98+
mounted={mounted}
99+
timingFunction={TRANSITION_EASING}
100+
>
101+
{(styles) => (
102+
<Script item={shortcut as ScriptShortcut} style={styles} />
103+
)}
104+
</Transition>,
105+
);
106+
} else if (shortcut.type === ShortcutType.HOTKEY) {
107+
elements.push(
108+
<Transition
109+
key={shortcut.position}
110+
transition={TRANSITIONS[index]}
111+
duration={TRANSITION_DURATION}
112+
mounted={mounted}
113+
timingFunction={TRANSITION_EASING}
114+
>
115+
{(styles) => (
116+
<Hotkey item={shortcut as HotkeyShortcut} style={styles} />
117+
)}
118+
</Transition>,
119+
);
120+
}
121+
return elements;
122+
})}
123+
</SimpleGrid>
76124
);
77125
}

‎src/renderer/layout/shortcuts/Back.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
import { Button } from '@mantine/core';
21
import { useNavigate } from 'react-router-dom';
2+
import Icon from '../../../common/Icon';
3+
import { Stack, UnstyledButton } from '@mantine/core';
34

4-
export default function Back() {
5+
export default function Back({ style }: { style: React.CSSProperties }) {
56
const navigate = useNavigate();
67

78
return (
8-
<Button key="x" onClick={() => navigate(-1)}>
9-
Back
10-
</Button>
9+
<UnstyledButton style={style} onClick={() => navigate(-1)}>
10+
<Stack align="center" justify="center" style={style}>
11+
<Icon icon="tabler:arrow-left" size="2rem" />
12+
</Stack>
13+
</UnstyledButton>
1114
);
1215
}

‎src/renderer/layout/shortcuts/Container.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
import { useNavigate } from 'react-router-dom';
2+
import type React from 'react';
23
import { ContainerShortcut } from '../../../types/Shortcut';
4+
import Icon from '../../../common/Icon';
5+
import { Button, Stack, UnstyledButton } from '@mantine/core';
36

47
interface ContainerProps {
58
item: ContainerShortcut;
9+
style: React.CSSProperties;
610
}
711

812
export default function Container(props: ContainerProps) {
9-
const { item } = props;
13+
const { item, style } = props;
1014
const navigate = useNavigate();
1115

1216
return (
13-
<button
14-
type="button"
17+
<UnstyledButton
1518
onClick={() => {
1619
navigate(`/stage/${item.stageID}`);
1720
}}
1821
>
19-
{item.stageID}
20-
</button>
22+
<Stack align="center" justify="center" style={style}>
23+
<Icon icon="tabler:folder" size="2rem" />
24+
</Stack>
25+
</UnstyledButton>
2126
);
2227
}

‎src/renderer/layout/shortcuts/Hotkey.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1+
import { Stack, UnstyledButton } from '@mantine/core';
12
import { HotkeyShortcut } from '../../../types/Shortcut';
3+
import Icon from '../../../common/Icon';
24

35
interface HotkeyProps {
46
item: HotkeyShortcut;
7+
style: React.CSSProperties;
58
}
69

7-
export default function Hotkey({ item }: HotkeyProps) {
8-
return <button type="button">{item.keycode}</button>;
10+
export default function Hotkey(props: HotkeyProps) {
11+
const { item, style } = props;
12+
13+
return (
14+
<UnstyledButton>
15+
<Stack align="center" justify="center" style={style}>
16+
<Icon icon="tabler:keyboard" size="2rem" />
17+
</Stack>
18+
</UnstyledButton>
19+
);
920
}

‎src/renderer/layout/shortcuts/Script.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
1+
import { Stack, UnstyledButton } from '@mantine/core';
12
import { ScriptShortcut } from '../../../types/Shortcut';
3+
import Icon from '../../../common/Icon';
24

35
interface ScriptProps {
46
item: ScriptShortcut;
7+
style: React.CSSProperties;
58
}
69

710
export default function Script(props: ScriptProps) {
8-
const { item } = props;
11+
const { item, style } = props;
912

1013
const execute = () => {
11-
// run script
12-
}
14+
// TODO: run script
15+
// window.electron.ipcRenderer.send('ipc--run-script', item.script);
16+
};
1317

1418
return (
15-
<button type="button" onClick={execute}>
16-
{item.script}
17-
</button>
19+
<UnstyledButton onClick={execute}>
20+
<Stack align="center" justify="center" style={style}>
21+
<Icon icon="tabler:terminal" size="2rem" />
22+
</Stack>
23+
</UnstyledButton>
1824
);
1925
}

0 commit comments

Comments
 (0)