Skip to content

Commit 2a50b09

Browse files
samejrsamejr
committed
Added new icon based shortcut keys for mac and win
1 parent 0958943 commit 2a50b09

File tree

7 files changed

+109
-21
lines changed

7 files changed

+109
-21
lines changed

‎apps/webapp/app/assets/icons/KeyboardDownIcon.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function KeyboardDownIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M12.8779 16.3905C12.4989 17.0854 11.5011 17.0854 11.1221 16.3905L6.80665 8.47885C6.44317 7.81248 6.92548 7 7.68454 7L16.3155 7C17.0745 7 17.5568 7.81248 17.1934 8.47885L12.8779 16.3905Z"
13+
fill="currentColor"
14+
/>
15+
</svg>
16+
);
17+
}

‎apps/webapp/app/assets/icons/KeyboardLeftIcon.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function KeyboardLeftIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M7.60947 12.8779C6.91461 12.4989 6.91461 11.5011 7.60947 11.1221L15.5211 6.80665C16.1875 6.44317 17 6.92548 17 7.68454L17 16.3155C17 17.0745 16.1875 17.5568 15.5211 17.1934L7.60947 12.8779Z"
13+
fill="currentColor"
14+
/>
15+
</svg>
16+
);
17+
}

‎apps/webapp/app/assets/icons/KeyboardRightIcon.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function KeyboardRightIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M16.3905 11.1221C17.0854 11.5011 17.0854 12.4989 16.3905 12.8779L8.47885 17.1934C7.81248 17.5568 7 17.0745 7 16.3155L7 7.68454C7 6.92548 7.81248 6.44317 8.47885 6.80665L16.3905 11.1221Z"
13+
fill="currentColor"
14+
/>
15+
</svg>
16+
);
17+
}

‎apps/webapp/app/assets/icons/KeyboardUpIcon.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function KeyboardUpIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M11.1221 6.60947C11.5011 5.91461 12.4989 5.91461 12.8779 6.60947L17.1934 14.5211C17.5568 15.1875 17.0745 16 16.3155 16L7.68454 16C6.92548 16 6.44317 15.1875 6.80665 14.5211L11.1221 6.60947Z"
13+
fill="currentColor"
14+
/>
15+
</svg>
16+
);
17+
}

‎apps/webapp/app/assets/icons/KeyboardWindowsIcon.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function KeyboardWindowsIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<rect x="5.5" y="5.5" width="6" height="6" fill="currentColor" />
12+
<rect x="12.5" y="5.5" width="6" height="6" fill="currentColor" />
13+
<rect x="5.5" y="12.5" width="6" height="6" fill="currentColor" />
14+
<rect x="12.5" y="12.5" width="6" height="6" fill="currentColor" />
15+
</svg>
16+
);
17+
}

‎apps/webapp/app/components/Shortcuts.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,28 @@ export function Shortcuts() {
4040
</span>
4141
</div>
4242
</SheetTitle>
43-
<div className="space-y-6 px-4 py-2">
43+
<div className="space-y-6 px-4 pb-4 pt-2">
4444
<div className="space-y-3">
4545
<Header3>General</Header3>
46+
<Shortcut name="Close">
47+
<ShortcutKey
48+
shortcut={{ modifiers: ["alt", "ctrl", "meta", "shift", "mod"], key: "w" }}
49+
variant="medium/bright"
50+
/>
51+
</Shortcut>
4652
<Shortcut name="Close">
4753
<ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
4854
</Shortcut>
4955
<Shortcut name="Confirm">
50-
<ShortcutKey shortcut={{ key: "", modifiers: ["mod"] }} variant="medium/bright" />
56+
<ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
5157
<ShortcutKey shortcut={{ key: "enter" }} variant="medium/bright" />
5258
</Shortcut>
5359
<Shortcut name="Filter">
5460
<ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />
5561
</Shortcut>
5662
<Shortcut name="Select filter">
5763
<ShortcutKey shortcut={{ key: "1" }} variant="medium/bright" />
58-
<Paragraph variant="small" className="ml-1">
64+
<Paragraph variant="small" className="ml-1.5">
5965
to
6066
</Paragraph>
6167
<ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
@@ -113,7 +119,7 @@ export function Shortcuts() {
113119
</Shortcut>
114120
<Shortcut name="Toggle level">
115121
<ShortcutKey shortcut={{ key: "0" }} variant="medium/bright" />
116-
<Paragraph variant="small" className="ml-1">
122+
<Paragraph variant="small" className="ml-1.5">
117123
to
118124
</Paragraph>
119125
<ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />

‎apps/webapp/app/components/primitives/ShortcutKey.tsx‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1-
import {
2-
ChevronDownIcon,
3-
ChevronLeftIcon,
4-
ChevronRightIcon,
5-
ChevronUpIcon,
6-
} from "@heroicons/react/20/solid";
1+
import { KeyboardDownIcon } from "~/assets/icons/KeyboardDownIcon";
2+
import { KeyboardLeftIcon } from "~/assets/icons/KeyboardLeftIcon";
3+
import { KeyboardRightIcon } from "~/assets/icons/KeyboardRightIcon";
4+
import { KeyboardUpIcon } from "~/assets/icons/KeyboardUpIcon";
5+
import { KeyboardWindowsIcon } from "~/assets/icons/KeyboardWindowsIcon";
76
import { Modifier, Shortcut } from "~/hooks/useShortcutKeys";
87
import { cn } from "~/utils/cn";
98
import { useOperatingSystem } from "./OperatingSystemProvider";
10-
import { KeyboardRightIcon } from "~/assets/icons/KeyboardRightIcon";
11-
import { KeyboardLeftIcon } from "~/assets/icons/KeyboardLeftIcon";
12-
import { KeyboardDownIcon } from "~/assets/icons/KeyboardDownIcon";
13-
import { KeyboardUpIcon } from "~/assets/icons/KeyboardUpIcon";
149

1510
const medium =
1611
"text-[0.75rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase";
@@ -49,7 +44,9 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps)
4944
return (
5045
<span className={cn(variants[variant], className)}>
5146
{modifiers.map((k) => (
52-
<span key={k}>{modifierString(k, isMac)}</span>
47+
<span key={k}>
48+
<span>{modifierString(k, isMac)}</span>
49+
</span>
5350
))}
5451
{character && <span>{character}</span>}
5552
</span>
@@ -79,17 +76,17 @@ function keyString(key: String, isMac: boolean, variant: "small" | "medium" | "m
7976
}
8077
}
8178

82-
function modifierString(modifier: Modifier, isMac: boolean) {
79+
function modifierString(modifier: Modifier, isMac: boolean): string | JSX.Element {
8380
switch (modifier) {
8481
case "alt":
85-
return isMac ? "⌥" : "Alt +";
82+
return isMac ? "⌥" : "Alt+";
8683
case "ctrl":
87-
return isMac ? "⌃" : "Ctrl +";
84+
return isMac ? "⌃" : "Ctrl+";
8885
case "meta":
89-
return isMac ? "⌘" : "⊞ +";
86+
return isMac ? "⌘" : <KeyboardWindowsIcon />;
9087
case "shift":
91-
return isMac ? "⇧" : "Shift +";
88+
return isMac ? "⇧" : "Shift+";
9289
case "mod":
93-
return isMac ? "⌘" : "Ctrl +";
90+
return isMac ? "⌘" : "Ctrl+";
9491
}
9592
}

0 commit comments

Comments
 (0)