mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-04 22:40:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

add hint for date formatting

Browse source
This commit is contained in:
Gimle Larpes 2025-07-24 21:22:23 +02:00
parent 140b3814a6
commit 78ac14eb6b
1 changed files with 168 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

198
src/app/features/settings/general/General.tsx
View file

@ -13,6 +13,7 @@ import {
Button, Button,
Chip, Chip,
config, config,
Header,
Icon, Icon,
IconButton, IconButton,
Icons, Icons,
@ -345,11 +346,175 @@ function Appearance() {
); );
} }
type DateHintProps = {
hasChanges: boolean;
handleReset: () => void;
};
function DateHint({ hasChanges, handleReset }: DateHintProps) {
const [anchor, setAnchor] = useState<RectCords>();
const categoryPadding = { padding: config.space.S200, paddingTop: 0 };
const handleOpenMenu: MouseEventHandler<HTMLElement> = (evt) => {
setAnchor(evt.currentTarget.getBoundingClientRect());
};
return (
<PopOut
anchor={anchor}
position="Top"
align="End"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setAnchor(undefined),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Menu>
<Header size="300" style={{ padding: `0 ${config.space.S200}` }}>
<Text size="L400">Formatting</Text>
</Header>
<Box style={categoryPadding} direction="Column">
<Header size="300">
<Text size="L400">Year</Text>
</Header>
<Box direction="Column" tabIndex={0} gap="100">
<Text size="T300">
YY
<Text as="span" size="Inherit" priority="300">
{': '}
Two-digit year
</Text>{' '}
</Text>
<Text size="T300">
YYYY
<Text as="span" size="Inherit" priority="300">
{': '}Four-digit year
</Text>
</Text>
</Box>
</Box>
<Box style={categoryPadding} direction="Column">
<Header size="300">
<Text size="L400">Month</Text>
</Header>
<Box direction="Column" tabIndex={0} gap="100">
<Text size="T300">
M
<Text as="span" size="Inherit" priority="300">
{': '}The month
</Text>
</Text>
<Text size="T300">
MM
<Text as="span" size="Inherit" priority="300">
{': '}Two-digit month
</Text>{' '}
</Text>
<Text size="T300">
MMM
<Text as="span" size="Inherit" priority="300">
{': '}Short month name
</Text>
</Text>
<Text size="T300">
MMMM
<Text as="span" size="Inherit" priority="300">
{': '}Full month name
</Text>
</Text>
</Box>
</Box>
<Box style={categoryPadding} direction="Column">
<Header size="300">
<Text size="L400">Day of the Month</Text>
</Header>
<Box direction="Column" tabIndex={0} gap="100">
<Text size="T300">
D
<Text as="span" size="Inherit" priority="300">
{': '}Day of the month
</Text>
</Text>
<Text size="T300">
DD
<Text as="span" size="Inherit" priority="300">
{': '}Two-digit day of the month
</Text>
</Text>
</Box>
</Box>
<Box style={categoryPadding} direction="Column">
<Header size="300">
<Text size="L400">Day of the Week</Text>
</Header>
<Box direction="Column" tabIndex={0} gap="100">
<Text size="T300">
d
<Text as="span" size="Inherit" priority="300">
{': '}Day of the week (Sunday = 0)
</Text>
</Text>
<Text size="T300">
dd
<Text as="span" size="Inherit" priority="300">
{': '}Two-letter day name
</Text>
</Text>
<Text size="T300">
ddd
<Text as="span" size="Inherit" priority="300">
{': '}Short day name
</Text>
</Text>
<Text size="T300">
dddd
<Text as="span" size="Inherit" priority="300">
{': '}Full day name
</Text>
</Text>
</Box>
</Box>
</Menu>
</FocusTrap>
}
>
{hasChanges ? (
<IconButton
tabIndex={-1}
onClick={handleReset}
type="reset"
variant="Secondary"
size="300"
radii="300"
>
<Icon src={Icons.Cross} size="100" />
</IconButton>
) : (
<IconButton
tabIndex={-1}
onClick={handleOpenMenu}
type="button"
variant="Secondary"
size="300"
radii="300"
aria-pressed={!!anchor}
>
<Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.Info} />
</IconButton>
)}
</PopOut>
);
}
type CustomDateFormatProps = { type CustomDateFormatProps = {
value: string; value: string;
onChange: (format: string) => void; onChange: (format: string) => void;
}; };
function CustomDateFormat({ value, onChange }: CustomDateFormatProps) { function CustomDateFormat({ value, onChange }: CustomDateFormatProps) {
const [dateFormatCustom, setDateFormatCustom] = useState(value); const [dateFormatCustom, setDateFormatCustom] = useState(value);
@ -379,21 +544,7 @@ function CustomDateFormat({ value, onChange }: CustomDateFormatProps) {
const hasChanges = dateFormatCustom !== value; const hasChanges = dateFormatCustom !== value;
return ( return (
<SettingTile <SettingTile>
description={
<Text size="T200">
View formatting syntax on{' '}
<a
href="https://day.js.org/docs/en/display/format"
target="_blank"
rel="noreferrer noopener"
>
Day.js
</a>
.
</Text>
}
>
<Box as="form" onSubmit={handleSubmit} gap="200"> <Box as="form" onSubmit={handleSubmit} gap="200">
<Box grow="Yes" direction="Column"> <Box grow="Yes" direction="Column">
<Input <Input
@ -406,19 +557,7 @@ function CustomDateFormat({ value, onChange }: CustomDateFormatProps) {
variant="Secondary" variant="Secondary"
radii="300" radii="300"
style={{ paddingRight: config.space.S200 }} style={{ paddingRight: config.space.S200 }}
after={ after={<DateHint hasChanges={hasChanges} handleReset={handleReset} />}
hasChanges && (
<IconButton
type="reset"
onClick={handleReset}
size="300"
radii="300"
variant="Secondary"
>
<Icon src={Icons.Cross} size="100" />
</IconButton>
)
}
/> />
</Box> </Box>
<Button <Button
@ -441,7 +580,6 @@ type PresetDateFormatProps = {
value: string; value: string;
onChange: (format: string) => void; onChange: (format: string) => void;
}; };
function PresetDateFormat({ value, onChange }: PresetDateFormatProps) { function PresetDateFormat({ value, onChange }: PresetDateFormatProps) {
const [menuCords, setMenuCords] = useState<RectCords>(); const [menuCords, setMenuCords] = useState<RectCords>();
const dateFormatItems = useDateFormatItems(); const dateFormatItems = useDateFormatItems();