Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-09-09 04:48:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI fixes

Browse Source
This commit is contained in:
estifanos
2026-08-11 12:24:03 +00:00
parent b2f99200e7
commit 4a68bdf169
1 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
libs/ui/src/lib/input/AmharicDatePicker.tsx
View File

@@ -6,7 +6,10 @@ import {
Group, Group,
MantineSize, MantineSize,
Popover, Popover,
SegmentedControl,
Select, Select,
Stack,
Text,
TextInput, TextInput,
} from '@mantine/core'; } from '@mantine/core';
import { TimeInput } from '@mantine/dates'; import { TimeInput } from '@mantine/dates';
@@ -375,15 +378,21 @@ export function AmharicDatePicker({
formatWireValue(mergeDateTime(selected, undefined, { hours: h24, minutes: m }), dateFormat, true), formatWireValue(mergeDateTime(selected, undefined, { hours: h24, minutes: m }), dateFormat, true),
); );
return ( return (
<Group grow mt="sm"> <Stack gap={4} mt="sm">
<Select <Text size="sm" fw={500}>
label={t('common.time')} {t('common.time')}
</Text>
{/* Full-width 4-way toggle reads better than a dropdown for 4
short Amharic words, and doesn't get squeezed by the
calendar's fixed (auto) popover width the way three
side-by-side Selects did. */}
<SegmentedControl
fullWidth
size="xs"
disabled={!selected} disabled={!selected}
value={period} value={period}
data={ETH_PERIODS.map((p) => ({ value: p.value, label: p.label }))} data={ETH_PERIODS.map((p) => ({ value: p.value, label: p.label }))}
allowDeselect={false}
onChange={(next) => { onChange={(next) => {
if (!next) return;
// Keep the same slot index within the new period so the // Keep the same slot index within the new period so the
// hour never lands outside its 6-hour range. // hour never lands outside its 6-hour range.
const slot = Math.max(periodHours.indexOf(hour), 0); const slot = Math.max(periodHours.indexOf(hour), 0);
@@ -391,19 +400,23 @@ export function AmharicDatePicker({
setTime(fromEthTime(next as EthPeriod, nextHours[slot]), minute); setTime(fromEthTime(next as EthPeriod, nextHours[slot]), minute);
}} }}
/> />
<Group gap={4} justify="center" wrap="nowrap">
<Select <Select
label=" "
disabled={!selected} disabled={!selected}
value={String(hour)} value={String(hour)}
data={periodHours.map((h) => ({ value: String(h), label: String(h) }))} data={periodHours.map((h) => ({ value: String(h), label: String(h) }))}
allowDeselect={false} allowDeselect={false}
w={72}
comboboxProps={{ withinPortal: true }}
onChange={(next) => { onChange={(next) => {
if (!next) return; if (!next) return;
setTime(fromEthTime(period, Number(next)), minute); setTime(fromEthTime(period, Number(next)), minute);
}} }}
/> />
<Text size="sm" c="dimmed">
:
</Text>
<Select <Select
label=" "
disabled={!selected} disabled={!selected}
value={String(minute).padStart(2, '0')} value={String(minute).padStart(2, '0')}
data={Array.from({ length: 60 }, (_, m) => ({ data={Array.from({ length: 60 }, (_, m) => ({
@@ -411,12 +424,15 @@ export function AmharicDatePicker({
label: String(m).padStart(2, '0'), label: String(m).padStart(2, '0'),
}))} }))}
allowDeselect={false} allowDeselect={false}
w={72}
comboboxProps={{ withinPortal: true }}
onChange={(next) => { onChange={(next) => {
if (next == null) return; if (next == null) return;
setTime(fromEthTime(period, hour), Number(next)); setTime(fromEthTime(period, hour), Number(next));
}} }}
/> />
</Group> </Group>
</Stack>
); );
})()} })()}