easier styling of options
Massimo Melina committed
Jan 15, 2025 at 17:52 UTC
b2bbbce0fb27e7445b5f4dc6955375083105d871
3 files changed
+13
-4
frontend/src/components.ts
+4
-2
@@ -44,18 +44,20 @@ interface CheckboxProps extends Omit<Partial<InputHTMLAttributes<any>>, 'onChang
44
value?: any,
45
onChange?: (v: boolean, ev: ChangeEvent) => void
46
labelProps?: LabelHTMLAttributes<any>
47
+ id?: string
48
}
49
49
-export const Checkbox = forwardRef(({ onChange, value, children, labelProps, ...props }: CheckboxProps, ref) => {
50
+export const Checkbox = forwardRef(({ onChange, value, children, labelProps, id, ...props }: CheckboxProps, ref) => {
51
const ret = h('input', {
52
ref,
53
type: 'checkbox',
54
onChange: (ev: ChangeEvent<HTMLInputElement>) => onChange?.(Boolean(ev.target.checked), ev),
55
...value !== undefined && { checked: Boolean(value) },
56
value: 1,
57
+ id: children ? undefined : id,
58
...props
59
})
58
- return !children ? ret : h('label', labelProps || {}, ret, children)
60
+ return !children ? ret : h('label', { id, ...labelProps }, ret, children)
61
})
62
63
interface SelectProps<T> extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> {
frontend/src/login.ts
+1
-1
@@ -102,7 +102,7 @@ export async function loginDialog(closable=true, reloadAfter=true) {
102
h('div', { style: { textAlign: 'right' } },
103
h('button', { type: 'submit' }, t`Continue`)),
104
h('div', { id: 'login-options' },
105
- h(Checkbox, { ref: ipRef, labelProps: { id: 'allow_session_ip_change' } },
105
+ h(Checkbox, { ref: ipRef, id: 'allow_session_ip_change' },
106
t('allow_session_ip_change', "Allow IP change during this session")),
107
),
108
)
frontend/src/options.ts
+8
-1
@@ -23,12 +23,14 @@ export function showOptions (){
23
const {t} = useI18N()
24
return h(FlexV, { gap: '1.5em' },
25
snap.adminUrl && h(MenuLink, {
26
+ id: 'admin-link',
27
icon: 'admin',
28
label: t`Admin-panel`,
29
href: snap.adminUrl,
30
target: 'admin',
31
}),
32
h(Select, {
33
+ id: 'option-sort-by',
34
options: SORT_BY_OPTIONS.map(x => ({
35
value: x,
36
label: t("Sort by:", { by: t(x) }, t`Sort by` + ': ' + t(x))
@@ -37,19 +39,22 @@ export function showOptions (){
39
onChange(v) { state.sort_by = v }
40
}),
41
h(Checkbox, {
42
+ id: 'option-invert-order',
43
value: snap.invert_order,
44
onChange(v) { state.invert_order = v }
45
}, t`Invert order`),
46
h(Checkbox, {
47
+ id: 'option-folders-first',
48
value: snap.folders_first,
49
onChange(v) { state.folders_first = v }
50
}, t`Folders first`),
51
h(Checkbox, {
52
+ id: 'option-sort-numerics',
53
value: snap.sort_numerics,
54
onChange(v) { state.sort_numerics = v }
55
}, t`Numeric names`),
56
52
- h('div', {},
57
+ h('div', { id: 'option-tile-size' },
58
h('div', {}, t`Tiles mode:`, ' ', state.tile_size || t`off`),
59
h('input', {
60
type: 'range',
@@ -62,6 +67,7 @@ export function showOptions (){
67
),
68
69
!getHFS().forceTheme && h(Select, {
70
+ id: 'option-theme',
71
options: _.map(THEME_OPTIONS, (value, label) => ({ label: t(["theme:", "Theme:", ]) + ' ' + t(label), value })),
72
value: snap.theme,
73
onChange(v) {
@@ -70,6 +76,7 @@ export function showOptions (){
76
}),
77
78
h(Checkbox, {
79
+ id: 'option-english',
80
value: snap.disableTranslation,
81
onChange(v) {
82
i18n.state.disabled = state.disableTranslation = v