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

Refactor MySeaRecordsPage to use AmharicDatePicker and update styles for better UX

Browse Source
This commit is contained in:
Estifo77
2026-08-10 14:18:09 +03:00
parent 1997434028
commit 1a0da134a5
3 changed files with 59 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
libs/ui/src/lib/input/AmharicDatePicker.css
View File

@@ -3,14 +3,14 @@
no border/box affordance and a hardcoded blue chevron. */
.amharic-daypicker {
--rdp-accent-color: var(--mantine-primary-color-filled);
--rdp-day-height: 44px;
--rdp-day-width: 44px;
--rdp-day_button-height: 42px;
--rdp-day_button-width: 42px;
--rdp-weekday-padding: 0.5rem 0;
--rdp-nav-height: 2.75rem;
--rdp-nav_button-width: 2.75rem;
--rdp-nav_button-height: 2.75rem;
--rdp-day-height: 36px;
--rdp-day-width: 36px;
--rdp-day_button-height: 34px;
--rdp-day_button-width: 34px;
--rdp-weekday-padding: 0.25rem 0;
--rdp-nav-height: 2.25rem;
--rdp-nav_button-width: 2rem;
--rdp-nav_button-height: 2rem;
}
/* Backoffice loads Tailwind's preflight after the package stylesheet. That
@@ -170,3 +170,16 @@
border-color: var(--mantine-primary-color-filled);
color: var(--mantine-color-white);
}
/* Ensure no scrollbar appears on the datepicker popover dropdown */
.amharic-daypicker-dropdown {
overflow: hidden !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.amharic-daypicker-dropdown::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}

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

@@ -208,7 +208,7 @@ export function AmharicDatePicker({
? calendarType === 'EN'
? selected.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
month: 'short',
day: 'numeric',
})
: toAmharicDisplay(selected)
@@ -228,6 +228,8 @@ export function AmharicDatePicker({
trapFocus
withArrow
withinPortal
shadow="md"
radius="md"
// The field lives inside a Modal's scrollable body while the dropdown is
// portaled to <body> — a different scroll container than its reference.
// The default `absolute` strategy sums offsets across that scroll chain
@@ -255,37 +257,46 @@ export function AmharicDatePicker({
placeholder={placeholder}
onClick={() => !disabled && toggle()}
onBlur={onBlur}
styles={{
input: {
cursor: disabled ? 'not-allowed' : 'pointer',
},
}}
leftSection={
<Button
type="button"
variant="light"
variant="subtle"
size="compact-xs"
tabIndex={0}
tabIndex={-1}
disabled={disabled}
onClick={(e) => {
e.stopPropagation();
setCalendarType((prev) => (prev === 'EN' ? 'AMH' : 'EN'));
}}
aria-label={t('common.switchCalendar')}
styles={{
root: {
paddingLeft: 6,
paddingRight: 6,
fontWeight: 600,
fontSize: '0.75rem',
},
}}
>
{calendarType}
</Button>
}
leftSectionWidth="calc(4.375rem * var(--mantine-scale))"
leftSectionWidth="3.25rem"
rightSection={
<ActionIcon size="md" variant="transparent" disabled={disabled} onClick={() => toggle()}>
<IconCalendarEvent size={20} />
<ActionIcon size="sm" variant="transparent" disabled={disabled} onClick={() => toggle()}>
<IconCalendarEvent size={18} />
</ActionIcon>
}
/>
</Popover.Target>
{/* Inside a Modal there may not be room below the field for the full
calendar + time input + action row — scroll the dropdown itself
rather than relying on the page (which doesn't scroll while a
Modal is open) or the Modal body (the dropdown is portaled out of
it, so its scroll never reaches this). */}
<Popover.Dropdown p="md" mah="70dvh" style={{ overflowY: 'auto' }}>
{/* Inside a Modal the dropdown is portaled out of the modal body so it positions nicely. */}
<Popover.Dropdown className="amharic-daypicker-dropdown" p="sm" style={{ overflow: 'hidden' }}>
{calendarType === 'AMH' ? (
<EthiopicDayPicker
className="amharic-daypicker"