Skip to content

Commit 2629443

Browse files
imguoguoimguoguo
committed
optimize(desktop): use same menu bar UI with browser
1 parent 052e026 commit 2629443

19 files changed

Lines changed: 73 additions & 61 deletions

File tree

‎browser/src/components/menu/mouse/mode.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const Mode = () => {
4242
<Popover content={content} placement="rightTop" arrow={false} align={{ offset: [13, 0] }}>
4343
<div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
4444
<div className="flex size-[18px] items-center justify-center">
45-
<SquareMousePointerIcon size={16} />
45+
<SquareMousePointerIcon size={18} />
4646
</div>
4747
<span>{t('mouse.mode')}</span>
4848
</div>

‎desktop/src/renderer/src/components/menu/fullscreen/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const Fullscreen = (): ReactElement => {
1515

1616
return (
1717
<div
18-
className="flex h-[28px] cursor-pointer items-center justify-center rounded px-2 text-white hover:bg-neutral-700/70"
18+
className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-white hover:bg-neutral-700/70"
1919
onClick={handleFullscreen}
2020
>
2121
{isFullscreen ? <MinimizeIcon size={18} /> : <MaximizeIcon size={18} />}

‎desktop/src/renderer/src/components/menu/index.tsx‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { ReactElement, useEffect, useState } from 'react'
22
import { Divider } from 'antd'
33
import clsx from 'clsx'
4+
import { useAtomValue } from 'jotai'
45
import { MenuIcon, XIcon } from 'lucide-react'
56

7+
import { serialPortStateAtom } from '@renderer/jotai/device'
68
import * as storage from '@renderer/libs/storage'
79

810
import { Fullscreen } from './fullscreen'
@@ -14,6 +16,8 @@ import { Video } from './video'
1416
import { Recorder } from './recorder'
1517

1618
export const Menu = (): ReactElement => {
19+
const serialPortState = useAtomValue(serialPortStateAtom)
20+
1721
const [isMenuOpen, setIsMenuOpen] = useState(false)
1822

1923
useEffect(() => {
@@ -22,34 +26,43 @@ export const Menu = (): ReactElement => {
2226
}, [])
2327

2428
function toggleMenu(): void {
25-
setIsMenuOpen(!isMenuOpen)
29+
const isOpen = !isMenuOpen
30+
setIsMenuOpen(isOpen)
31+
storage.setIsMenuOpen(isOpen)
2632
}
2733

2834
return (
29-
<div className="fixed top-[10px] left-1/2 z-[1000] -translate-x-1/2">
35+
<div className="fixed left-1/2 top-[10px] z-[1000] -translate-x-1/2">
3036
<div className="sticky top-[10px]">
3137
<div
3238
className={clsx(
33-
'h-[34px] items-center justify-between rounded bg-neutral-800/70 px-2',
39+
'h-[34px] items-center justify-between space-x-1.5 rounded bg-neutral-800/70 px-3',
3440
isMenuOpen ? 'flex' : 'hidden'
3541
)}
3642
>
3743
<Video />
38-
<SerialPort />
39-
<Divider type="vertical" className="px-[2px]" />
4044

41-
<Mouse />
42-
<Keyboard />
43-
<Divider type="vertical" className="px-[2px]" />
45+
{serialPortState === 'connected' && (
46+
<>
47+
<SerialPort />
48+
49+
<Divider type="vertical" />
50+
51+
<Keyboard />
52+
<Mouse />
53+
</>
54+
)}
55+
56+
<Divider type="vertical" />
4457

4558
<Recorder />
4659

47-
<Divider type="vertical" className="px-[2px]" />
60+
<Divider type="vertical" />
4861

49-
<Fullscreen />
5062
<Settings />
63+
<Fullscreen />
5164
<div
52-
className="flex h-[28px] cursor-pointer items-center justify-center rounded px-2 text-white hover:bg-neutral-700/70"
65+
className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-white hover:bg-neutral-700/70"
5366
onClick={toggleMenu}
5467
>
5568
<XIcon size={18} />
@@ -58,7 +71,7 @@ export const Menu = (): ReactElement => {
5871

5972
{!isMenuOpen && (
6073
<div
61-
className="flex h-[30px] w-[35px] cursor-pointer items-center justify-center rounded bg-neutral-800/50 text-white/70 hover:bg-neutral-800 hover:text-white"
74+
className="flex h-[30px] w-[35px] cursor-pointer items-center justify-center rounded bg-neutral-800/50 text-white/50 hover:bg-neutral-800 hover:text-white"
6275
onClick={toggleMenu}
6376
>
6477
<MenuIcon size={18} />

‎desktop/src/renderer/src/components/menu/keyboard/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ export const Keyboard = (): ReactElement => {
1010
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
1111

1212
const content = (
13-
<>
13+
<div className="flex flex-col space-y-0.5">
1414
<Paste />
1515
<VirtualKeyboard />
1616
<KeyboardShortcutsMenu />
17-
</>
17+
</div>
1818
)
1919

2020
return (

‎desktop/src/renderer/src/components/menu/keyboard/paste.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const Paste = (): ReactElement => {
5252

5353
return (
5454
<div
55-
className="flex h-[30px] cursor-pointer items-center space-x-1 rounded px-3 text-neutral-300 hover:bg-neutral-700/50"
55+
className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50"
5656
onClick={paste}
5757
>
5858
<ClipboardIcon size={18} />

‎desktop/src/renderer/src/components/menu/keyboard/virtual-keyboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const VirtualKeyboard = (): ReactElement => {
1111

1212
return (
1313
<div
14-
className="flex h-[30px] cursor-pointer items-center space-x-1 rounded px-3 text-neutral-300 hover:bg-neutral-700/60"
14+
className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50"
1515
onClick={() => setIsKeyboardOpen(true)}
1616
>
1717
<KeyboardIcon size={18} />

‎desktop/src/renderer/src/components/menu/mouse/direction.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const Direction = (): ReactElement => {
3131
<div
3232
key={direction.value}
3333
className={clsx(
34-
'my-1 flex cursor-pointer items-center space-x-1 rounded py-1 pr-5 pl-2 hover:bg-neutral-700/60',
34+
'my-1 flex cursor-pointer items-center space-x-1 rounded py-1 pl-2 pr-5 hover:bg-neutral-700/50',
3535
direction.value === scrollDirection.toString() ? 'text-blue-500' : 'text-neutral-300'
3636
)}
3737
onClick={() => update(direction.value)}
@@ -44,10 +44,8 @@ export const Direction = (): ReactElement => {
4444

4545
return (
4646
<Popover content={content} placement="rightTop" arrow={false} align={{ offset: [13, 0] }}>
47-
<div className="flex h-[30px] cursor-pointer items-center space-x-1 rounded px-3 text-neutral-300 hover:bg-neutral-700/60">
48-
<div className="flex h-[14px] w-[20px] items-end">
49-
<ArrowDownUpIcon size={16} />
50-
</div>
47+
<div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
48+
<ArrowDownUpIcon size={18} />
5149
<span>{t('mouse.direction')}</span>
5250
</div>
5351
</Popover>

‎desktop/src/renderer/src/components/menu/mouse/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ReactElement, useEffect, useState } from 'react'
2-
import { Popover } from 'antd'
2+
import { Divider, Popover } from 'antd'
33
import { useAtom, useSetAtom } from 'jotai'
44
import { MouseIcon } from 'lucide-react'
55

@@ -54,11 +54,12 @@ export const Mouse = (): ReactElement => {
5454
}, [])
5555

5656
const content = (
57-
<div className="flex flex-col space-y-1">
57+
<div className="flex flex-col space-y-0.5">
5858
<Style />
5959
<Mode />
6060
<Direction />
6161
<Speed />
62+
<Divider style={{ margin: '5px 0 5px 0' }} />
6263
<Jiggler />
6364
</div>
6465
)
@@ -72,7 +73,7 @@ export const Mouse = (): ReactElement => {
7273
open={isPopoverOpen}
7374
onOpenChange={setIsPopoverOpen}
7475
>
75-
<div className="flex h-[28px] cursor-pointer items-center justify-center rounded px-2 text-white hover:bg-neutral-700/70">
76+
<div className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-white hover:bg-neutral-700/70">
7677
<MouseIcon size={18} />
7778
</div>
7879
</Popover>

‎desktop/src/renderer/src/components/menu/mouse/jiggler.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { ReactElement, useEffect } from 'react'
22
import { Popover } from 'antd'
33
import clsx from 'clsx'
44
import { useAtom } from 'jotai'
5-
import { MousePointerIcon } from 'lucide-react'
5+
import { MousePointerClickIcon } from 'lucide-react'
66
import { useTranslation } from 'react-i18next'
77

88
import { mouseJigglerModeAtom } from '@renderer/jotai/mouse'
@@ -33,7 +33,7 @@ export const Jiggler = (): ReactElement => {
3333
<div
3434
key={mode.value}
3535
className={clsx(
36-
'my-1 flex cursor-pointer items-center space-x-1 rounded py-1 pr-5 pl-2 hover:bg-neutral-700/50',
36+
'my-1 flex cursor-pointer items-center space-x-1 rounded py-1 pl-2 pr-5 hover:bg-neutral-700/50',
3737
mode.value === jigglerMode ? 'text-blue-500' : 'text-neutral-300'
3838
)}
3939
onClick={() => update(mode.value)}
@@ -45,10 +45,8 @@ export const Jiggler = (): ReactElement => {
4545
)
4646
return (
4747
<Popover content={content} placement="rightTop" arrow={false} align={{ offset: [13, 0] }}>
48-
<div className="flex h-[30px] cursor-pointer items-center space-x-1 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
49-
<div className="flex h-[14px] w-[20px] items-end">
50-
<MousePointerIcon size={16} />
51-
</div>
48+
<div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
49+
<MousePointerClickIcon size={18} />
5250
<span>{t('mouse.jiggler.title')}</span>
5351
</div>
5452
</Popover>

‎desktop/src/renderer/src/components/menu/mouse/mode.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const Mode = (): ReactElement => {
2929
<div
3030
key={mode.value}
3131
className={clsx(
32-
'my-1 flex cursor-pointer items-center space-x-1 rounded py-1 pr-5 pl-2 hover:bg-neutral-700/60',
32+
'my-1 flex cursor-pointer items-center space-x-1 rounded py-1 pl-2 pr-5 hover:bg-neutral-700/50',
3333
mode.value === mouseMode ? 'text-blue-500' : 'text-neutral-300'
3434
)}
3535
onClick={() => update(mode.value)}
@@ -42,9 +42,9 @@ export const Mode = (): ReactElement => {
4242

4343
return (
4444
<Popover content={content} placement="rightTop" arrow={false} align={{ offset: [13, 0] }}>
45-
<div className="flex h-[30px] cursor-pointer items-center space-x-1 rounded px-3 text-neutral-300 hover:bg-neutral-700/60">
46-
<div className="flex h-[14px] w-[20px] items-end">
47-
<SquareMousePointerIcon size={16} />
45+
<div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
46+
<div className="flex size-[18px] items-center justify-center">
47+
<SquareMousePointerIcon size={18} />
4848
</div>
4949
<span>{t('mouse.mode')}</span>
5050
</div>

0 commit comments

Comments
 (0)