Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-27 15:30:57 +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

78
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,32 +400,39 @@ export function AmharicDatePicker({
setTime(fromEthTime(next as EthPeriod, nextHours[slot]), minute); setTime(fromEthTime(next as EthPeriod, nextHours[slot]), minute);
}} }}
/> />
<Select <Group gap={4} justify="center" wrap="nowrap">
label=" " <Select
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}
onChange={(next) => { w={72}
if (!next) return; comboboxProps={{ withinPortal: true }}
setTime(fromEthTime(period, Number(next)), minute); onChange={(next) => {
}} if (!next) return;
/> setTime(fromEthTime(period, Number(next)), minute);
<Select }}
label=" " />
disabled={!selected} <Text size="sm" c="dimmed">
value={String(minute).padStart(2, '0')} :
data={Array.from({ length: 60 }, (_, m) => ({ </Text>
value: String(m).padStart(2, '0'), <Select
label: String(m).padStart(2, '0'), disabled={!selected}
}))} value={String(minute).padStart(2, '0')}
allowDeselect={false} data={Array.from({ length: 60 }, (_, m) => ({
onChange={(next) => { value: String(m).padStart(2, '0'),
if (next == null) return; label: String(m).padStart(2, '0'),
setTime(fromEthTime(period, hour), Number(next)); }))}
}} allowDeselect={false}
/> w={72}
</Group> comboboxProps={{ withinPortal: true }}
onChange={(next) => {
if (next == null) return;
setTime(fromEthTime(period, hour), Number(next));
}}
/>
</Group>
</Stack>
); );
})()} })()}