Skip to content

Commit 758449c

Browse files
wj-xiaowj-xiao
committed
optimize: update menu bar UI
1 parent 9a925dd commit 758449c

12 files changed

Lines changed: 73 additions & 70 deletions

File tree

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -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/50">
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>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { 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

@@ -59,13 +59,15 @@ export const Mouse = () => {
5959
}
6060

6161
const content = (
62-
<>
62+
<div className="flex flex-col space-y-0.5">
6363
<Style />
6464
<Mode />
6565
<Direction />
6666
<Speed />
67+
68+
<Divider style={{ margin: '5px 0 5px 0' }} />
6769
<Jiggler />
68-
</>
70+
</div>
6971
);
7072

7173
return (

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { 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 '@/jotai/mouse.ts';
@@ -33,7 +33,7 @@ export const Jiggler = () => {
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)}
@@ -43,12 +43,11 @@ export const Jiggler = () => {
4343
))}
4444
</>
4545
);
46+
4647
return (
4748
<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>
49+
<div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
50+
<MousePointerClickIcon size={18} />
5251
<span>{t('mouse.jiggler.title')}</span>
5352
</div>
5453
</Popover>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ export const Mode = () => {
4040

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

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,8 @@ export const Speed = (): ReactElement => {
5757

5858
return (
5959
<Popover content={content} placement="rightTop" arrow={false} align={{ offset: [13, 0] }}>
60-
<div className="flex h-[30px] cursor-pointer items-center space-x-1 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
61-
<div className="flex h-[14px] w-[20px] items-end">
62-
<GaugeIcon size={16} />
63-
</div>
60+
<div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
61+
<GaugeIcon size={18} />
6462
<span>{t('mouse.speed')}</span>
6563
</div>
6664
</Popover>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const Style = () => {
3434
<div
3535
key={style.value}
3636
className={clsx(
37-
'flex cursor-pointer select-none items-center space-x-1 rounded py-1.5 pl-3 pr-5 hover:bg-neutral-700/50',
37+
'flex cursor-pointer select-none items-center space-x-1 rounded py-1 pl-3 pr-5 hover:bg-neutral-700/50',
3838
style.value === mouseStyle ? 'text-blue-500' : 'text-neutral-300'
3939
)}
4040
onClick={() => updateStyle(style.value)}
@@ -48,8 +48,8 @@ export const Style = () => {
4848

4949
return (
5050
<Popover content={content} placement="rightTop" arrow={false} align={{ offset: [13, 0] }}>
51-
<div className="flex h-[30px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700">
52-
<MousePointerIcon size={16} />
51+
<div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
52+
<MousePointerIcon size={18} />
5353
<span className="select-none text-sm">{t('mouse.cursor.title')}</span>
5454
</div>
5555
</Popover>

‎browser/src/components/menu/settings/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,19 @@ export const Settings = () => {
1212
}
1313

1414
const content = (
15-
<div className="flex flex-col space-y-1">
15+
<div className="flex flex-col space-y-0.5">
1616
<Language />
1717

1818
<div
19-
className="flex h-[30px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700"
19+
className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50"
2020
onClick={() => openPage('https://wiki.sipeed.com/nanokvmusb')}
2121
>
2222
<BookIcon size={18} />
2323
<span>{t('settings.document')}</span>
2424
</div>
2525

2626
<div
27-
className="flex h-[30px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700"
27+
className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50"
2828
onClick={() => openPage('https://github.com/sipeed/NanoKVM-USB/releases')}
2929
>
3030
<DownloadIcon size={18} />
@@ -35,7 +35,7 @@ export const Settings = () => {
3535

3636
return (
3737
<Popover content={content} placement="bottomLeft" trigger="click" arrow={false}>
38-
<div className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-white hover:bg-neutral-700/70">
38+
<div className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-white hover:bg-neutral-700/50">
3939
<SettingsIcon size={18} />
4040
</div>
4141
</Popover>

‎browser/src/components/menu/settings/language.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const Language = () => {
3535

3636
return (
3737
<Popover content={content} placement="rightTop">
38-
<div className="flex h-[30px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700">
38+
<div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
3939
<LanguagesIcon size={18} />
4040
<span>{t('settings.language')}</span>
4141
</div>

‎browser/src/components/menu/video/device.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export const Device = () => {
7878
<div
7979
key={device.videoId}
8080
className={clsx(
81-
'cursor-pointer rounded px-2 py-1.5 hover:bg-neutral-700/60',
81+
'max-w-[320px] cursor-pointer truncate rounded px-2 py-1.5 hover:bg-neutral-700/60',
8282
device.videoId === videoDeviceId ? 'text-blue-500' : 'text-white'
8383
)}
8484
onClick={() => selectDevice(device)}
@@ -91,7 +91,7 @@ export const Device = () => {
9191

9292
return (
9393
<Popover content={content} placement="rightTop" arrow={false} align={{ offset: [13, 0] }}>
94-
<div className="flex h-[30px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700">
94+
<div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
9595
<VideoIcon size={18} />
9696
<span className="select-none text-sm">{t('video.device')}</span>
9797
</div>

‎browser/src/components/menu/video/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Scale } from './scale.tsx';
77

88
export const Video = () => {
99
const content = (
10-
<div className="flex flex-col space-y-1">
10+
<div className="flex flex-col space-y-0.5">
1111
<Resolution />
1212
<Scale />
1313
<Device />

0 commit comments

Comments
 (0)