Skip to content

Commit a568db5

Browse files
std-microblockstd-microblock
committed
refactor: improve theme editor
1 parent f42b233 commit a568db5

3 files changed

Lines changed: 142 additions & 123 deletions

File tree

‎src/shell/script/script.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/shell/script/ts/src/config_page/components/NumberBox.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ const NumberBoxControl = ({
7878
onClick={onDecrease}
7979
backgroundColor={
8080
decreaseHover.isActive ? (isLightTheme ? '#d0d0d0' : '#404040') :
81-
decreaseHover.isHovered ? (isLightTheme ? '#e8e8e8' : '#353535') :
82-
(isLightTheme ? '#ffffff00' : '#2a2a2a00')
81+
decreaseHover.isHovered ? (isLightTheme ? '#e8e8e8' : '#353535') :
82+
(isLightTheme ? '#ffffff00' : '#2a2a2a00')
8383
}
8484
borderRadius={4}
8585
onMouseEnter={decreaseHover.onMouseEnter}
@@ -99,7 +99,9 @@ const NumberBoxControl = ({
9999
autoSize={false}
100100
>
101101
<Text fontSize={13} color={isLightTheme ? [40, 40, 40, 255] : [220, 220, 220, 255]}>
102-
{value.toFixed(step < 1 ? 1 : 0)}
102+
{value.toFixed(
103+
step < 1 ? Math.ceil(-Math.log10(step)) : 0
104+
)}
103105
</Text>
104106
</flex>
105107
<flex
@@ -110,8 +112,8 @@ const NumberBoxControl = ({
110112
onClick={onIncrease}
111113
backgroundColor={
112114
increaseHover.isActive ? (isLightTheme ? '#d0d0d0' : '#404040') :
113-
increaseHover.isHovered ? (isLightTheme ? '#e8e8e8' : '#353535') :
114-
(isLightTheme ? '#ffffff00' : '#2a2a2a00')
115+
increaseHover.isHovered ? (isLightTheme ? '#e8e8e8' : '#353535') :
116+
(isLightTheme ? '#ffffff00' : '#2a2a2a00')
115117
}
116118
borderRadius={4}
117119
onMouseEnter={increaseHover.onMouseEnter}

‎src/shell/script/ts/src/config_page/components/ThemeCustomEditor.tsx‎

Lines changed: 134 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,17 @@ import { breeze } from "mshell";
55
import { useTranslation } from "../hooks";
66

77
const OptionGroup = ({ label, children }: { label: string; children: React.ReactNode }) => {
8+
const isLightTheme = breeze.is_light_theme();
89
return (
9-
<flex gap={6} backgroundColor={breeze.is_light_theme() ? '#ffffff40' : '#2a2a2a40'} padding={16} borderRadius={14}>
10-
<Text fontSize={15}>{label}</Text>
11-
<flex gap={5} paddingLeft={20} alignItems="stretch">
10+
<flex
11+
gap={10}
12+
backgroundColor={isLightTheme ? '#ffffff50' : '#2a2a2a50'}
13+
padding={16}
14+
borderRadius={14}
15+
alignItems="stretch"
16+
>
17+
<Text fontSize={16} opacity={0.8}>{label}</Text>
18+
<flex gap={8} paddingLeft={10} paddingTop={4}>
1219
{children}
1320
</flex>
1421
</flex>
@@ -31,139 +38,149 @@ export const ThemeCustomEditor = memo(({
3138
onUpdate(newTheme);
3239
};
3340

34-
const roundValue = (value: number, step: number): number => {
35-
return Math.round(value / step) * step;
41+
const roundValue = (value: number, resolution: number): number => {
42+
const factor = 1 / resolution;
43+
return Math.round((value + Number.EPSILON * factor) * factor) / factor;
3644
};
3745

3846
return (
3947
<flex
4048
gap={20}
4149
alignItems="stretch"
42-
width={600}
50+
width={700}
4351
enableScrolling
44-
maxHeight={550}
52+
maxHeight={600}
4553
paddingLeft={25}
4654
paddingRight={25}
4755
paddingTop={5}
56+
paddingBottom={20}
4857
>
4958
<flex horizontal justifyContent="space-between" alignItems="center">
50-
<Text fontSize={20}>{t("customEditor.theme.title")}</Text>
59+
<Text fontSize={22}>{t("customEditor.theme.title")}</Text>
5160
<Button onClick={onClose}>
5261
<Text fontSize={14}>{t("customEditor.theme.done")}</Text>
5362
</Button>
5463
</flex>
5564

56-
<flex horizontal gap={20} alignItems="start">
57-
<flex gap={10} flexGrow={1}>
58-
<OptionGroup label={t("customEditor.theme.sizeSettings")}>
59-
<NumberBox
60-
label={t("customEditor.theme.radius")}
61-
value={theme?.radius ?? 6.0}
62-
onChange={(v) => updateValue('radius', roundValue(v, 0.5))}
63-
min={0}
64-
max={20}
65-
step={0.5}
66-
/>
67-
<NumberBox
68-
label={t("customEditor.theme.itemHeight")}
69-
value={theme?.item_height ?? 23.0}
70-
onChange={(v) => updateValue('item_height', Math.round(v))}
71-
min={15}
72-
max={40}
73-
step={1}
74-
/>
75-
<NumberBox
76-
label={t("customEditor.theme.itemGap")}
77-
value={theme?.item_gap ?? 3.0}
78-
onChange={(v) => updateValue('item_gap', roundValue(v, 0.5))}
79-
min={0}
80-
max={10}
81-
step={0.5}
82-
/>
83-
<NumberBox
84-
label={t("customEditor.theme.itemRadius")}
85-
value={theme?.item_radius ?? 5.0}
86-
onChange={(v) => updateValue('item_radius', roundValue(v, 0.5))}
87-
min={0}
88-
max={20}
89-
step={0.5}
90-
/>
91-
<NumberBox
92-
label={t("customEditor.theme.margin")}
93-
value={theme?.margin ?? 5.0}
94-
onChange={(v) => updateValue('margin', roundValue(v, 0.5))}
95-
min={0}
96-
max={20}
97-
step={0.5}
98-
/>
99-
<NumberBox
100-
label={t("customEditor.theme.padding")}
101-
value={theme?.padding ?? 6.0}
102-
onChange={(v) => updateValue('padding', roundValue(v, 0.5))}
103-
min={0}
104-
max={20}
105-
step={0.5}
106-
/>
107-
</OptionGroup>
108-
</flex>
65+
<flex gap={15} alignItems="stretch">
66+
<OptionGroup label={t("customEditor.theme.sizeSettings")}>
67+
<flex horizontal gap={10} alignItems="center">
68+
<flex gap={10} alignItems="stretch">
69+
<NumberBox
70+
label={t("customEditor.theme.radius")}
71+
value={theme?.radius ?? 6.0}
72+
onChange={(v) => updateValue('radius', roundValue(v, 0.5))}
73+
min={0}
74+
max={20}
75+
step={0.5}
76+
/>
77+
<NumberBox
78+
label={t("customEditor.theme.itemHeight")}
79+
value={theme?.item_height ?? 23.0}
80+
onChange={(v) => updateValue('item_height', Math.round(v))}
81+
min={15}
82+
max={40}
83+
step={1}
84+
/>
85+
<NumberBox
86+
label={t("customEditor.theme.itemGap")}
87+
value={theme?.item_gap ?? 3.0}
88+
onChange={(v) => updateValue('item_gap', roundValue(v, 0.5))}
89+
min={0}
90+
max={10}
91+
step={0.5}
92+
/>
93+
</flex>
94+
<flex gap={10} alignItems="stretch">
95+
<NumberBox
96+
label={t("customEditor.theme.itemRadius")}
97+
value={theme?.item_radius ?? 5.0}
98+
onChange={(v) => updateValue('item_radius', roundValue(v, 0.5))}
99+
min={0}
100+
max={20}
101+
step={0.5}
102+
/>
103+
<NumberBox
104+
label={t("customEditor.theme.margin")}
105+
value={theme?.margin ?? 5.0}
106+
onChange={(v) => updateValue('margin', roundValue(v, 0.5))}
107+
min={0}
108+
max={20}
109+
step={0.5}
110+
/>
111+
<NumberBox
112+
label={t("customEditor.theme.padding")}
113+
value={theme?.padding ?? 6.0}
114+
onChange={(v) => updateValue('padding', roundValue(v, 0.5))}
115+
min={0}
116+
max={20}
117+
step={0.5}
118+
/>
119+
</flex>
120+
</flex>
121+
</OptionGroup>
109122

110-
<flex gap={10} flexGrow={1}>
111-
<OptionGroup label={t("customEditor.theme.textAndIcon")}>
112-
<NumberBox
113-
label={t("customEditor.theme.fontSize")}
114-
value={theme?.font_size ?? 14.0}
115-
onChange={(v) => updateValue('font_size', Math.round(v))}
116-
min={10}
117-
max={24}
118-
step={1}
119-
/>
120-
<NumberBox
121-
label={t("customEditor.theme.textPadding")}
122-
value={theme?.text_padding ?? 8.0}
123-
onChange={(v) => updateValue('text_padding', roundValue(v, 0.5))}
124-
min={0}
125-
max={20}
126-
step={0.5}
127-
/>
128-
<NumberBox
129-
label={t("customEditor.theme.iconPadding")}
130-
value={theme?.icon_padding ?? 4.0}
131-
onChange={(v) => updateValue('icon_padding', roundValue(v, 0.5))}
132-
min={0}
133-
max={20}
134-
step={0.5}
135-
/>
136-
<NumberBox
137-
label={t("customEditor.theme.rightIconPadding")}
138-
value={theme?.right_icon_padding ?? 20.0}
139-
onChange={(v) => updateValue('right_icon_padding', Math.round(v))}
140-
min={0}
141-
max={40}
142-
step={1}
143-
/>
144-
</OptionGroup>
123+
<OptionGroup label={t("customEditor.theme.textAndIcon")}>
124+
<flex horizontal gap={10}>
125+
<flex gap={10} alignItems="stretch">
126+
<NumberBox
127+
label={t("customEditor.theme.fontSize")}
128+
value={theme?.font_size ?? 14.0}
129+
onChange={(v) => updateValue('font_size', Math.round(v))}
130+
min={10}
131+
max={24}
132+
step={1}
133+
/>
134+
<NumberBox
135+
label={t("customEditor.theme.textPadding")}
136+
value={theme?.text_padding ?? 8.0}
137+
onChange={(v) => updateValue('text_padding', roundValue(v, 0.5))}
138+
min={0}
139+
max={20}
140+
step={0.5}
141+
/>
142+
</flex>
143+
<flex gap={10} alignItems="stretch">
144+
<NumberBox
145+
label={t("customEditor.theme.iconPadding")}
146+
value={theme?.icon_padding ?? 4.0}
147+
onChange={(v) => updateValue('icon_padding', roundValue(v, 0.5))}
148+
min={0}
149+
max={20}
150+
step={0.5}
151+
/>
152+
<NumberBox
153+
label={t("customEditor.theme.rightIconPadding")}
154+
value={theme?.right_icon_padding ?? 20.0}
155+
onChange={(v) => updateValue('right_icon_padding', Math.round(v))}
156+
min={0}
157+
max={40}
158+
step={1}
159+
/>
160+
</flex>
161+
</flex>
162+
</OptionGroup>
145163

146-
<OptionGroup label={t("customEditor.theme.effects")}>
147-
<Toggle
148-
label={t("customEditor.theme.useDwm")}
149-
value={theme?.use_dwm_if_available ?? true}
150-
onChange={(v) => updateValue('use_dwm_if_available', v)}
151-
/>
152-
<Toggle
153-
label={t("customEditor.theme.acrylic")}
154-
value={theme?.acrylic ?? true}
155-
onChange={(v) => updateValue('acrylic', v)}
156-
/>
157-
<NumberBox
158-
label={t("customEditor.theme.backgroundOpacity")}
159-
value={theme?.background_opacity ?? 1.0}
160-
onChange={(v) => updateValue('background_opacity', roundValue(v, 0.05))}
161-
min={0}
162-
max={1}
163-
step={0.05}
164-
/>
165-
</OptionGroup>
166-
</flex>
164+
<OptionGroup label={t("customEditor.theme.effects")}>
165+
<Toggle
166+
label={t("customEditor.theme.useDwm")}
167+
value={theme?.use_dwm_if_available ?? true}
168+
onChange={(v) => updateValue('use_dwm_if_available', v)}
169+
/>
170+
<Toggle
171+
label={t("customEditor.theme.acrylic")}
172+
value={theme?.acrylic ?? true}
173+
onChange={(v) => updateValue('acrylic', v)}
174+
/>
175+
<NumberBox
176+
label={t("customEditor.theme.backgroundOpacity")}
177+
value={theme?.background_opacity ?? 1.0}
178+
onChange={(v) => updateValue('background_opacity', roundValue(v, 0.05))}
179+
min={0}
180+
max={1}
181+
step={0.05}
182+
/>
183+
</OptionGroup>
167184
</flex>
168185
</flex>
169186
);

0 commit comments

Comments
 (0)