moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Date display improvements 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-11-30 18:34:05 +01:00
parent 6435f33af9
commit 13ccc3fe7f
4 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/components/ui/stack/stack.tsx
View File

@ -52,7 +52,7 @@ const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.Legacy
<Elem <Elem
{...filteredProps} {...filteredProps}
ref={ref} ref={ref}
className={classNames('flex flex-col items', { className={classNames('flex flex-col', {
// @ts-ignore // @ts-ignore
[spaces[space]]: typeof space !== 'undefined', [spaces[space]]: typeof space !== 'undefined',
// @ts-ignore // @ts-ignore

2
app/soapbox/components/ui/textarea/textarea.tsx
View File

@ -28,7 +28,7 @@ const Textarea = React.forwardRef(
{...props} {...props}
ref={ref} ref={ref}
className={classNames({ className={classNames({
'bg-white dark:bg-gray-900 shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500': 'bg-white dark:bg-transparent shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
true, true,
'font-mono': isCodeEditor, 'font-mono': isCodeEditor,
'text-red-600 border-red-600': hasError, 'text-red-600 border-red-600': hasError,

5
app/soapbox/features/event/components/event-date.tsx
View File

@ -22,12 +22,13 @@ const EventDate: React.FC<IEventDate> = ({ status }) => {
if (event.end_time) { if (event.end_time) {
const endDate = new Date(event.end_time); const endDate = new Date(event.end_time);
const sameDay = startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear(); const sameYear = startDate.getFullYear() === endDate.getFullYear();
const sameDay = startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && sameYear;
if (sameDay) { if (sameDay) {
date = ( date = (
<> <>
<FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' /> <FormattedDate value={event.start_time} year={sameYear ? undefined : '2-digit'} month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
{' - '} {' - '}
<FormattedDate value={event.end_time} hour='2-digit' minute='2-digit' /> <FormattedDate value={event.end_time} hour='2-digit' minute='2-digit' />
</> </>

29
app/soapbox/features/event/event-information.tsx
View File

@ -88,7 +88,12 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
const renderEventDate = useCallback(() => { const renderEventDate = useCallback(() => {
const event = status?.event; const event = status?.event;
if (!event?.start_time) return null; const startDate = new Date(event.start_time);
const endDate = new Date(event.end_time);
if (!startDate) return null;
const sameDay = endDate && startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
return ( return (
<Stack space={1}> <Stack space={1}>
@ -98,10 +103,26 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
<HStack space={2} alignItems='center'> <HStack space={2} alignItems='center'>
<Icon src={require('@tabler/icons/calendar.svg')} /> <Icon src={require('@tabler/icons/calendar.svg')} />
<Text> <Text>
<FormattedDate value={event.start_time} year='numeric' month='long' day='2-digit' weekday='long' hour='2-digit' minute='2-digit' /> <FormattedDate
{event.end_time && (<> value={startDate}
year='numeric'
month='long'
day='2-digit'
weekday='long'
hour='2-digit'
minute='2-digit'
/>
{endDate && (<>
{' - '} {' - '}
<FormattedDate value={event.end_time} year='numeric' month='long' day='2-digit' weekday='long' hour='2-digit' minute='2-digit' /> <FormattedDate
value={endDate}
year={sameDay ? undefined : 'numeric'}
month={sameDay ? undefined : 'long'}
day={sameDay ? undefined : '2-digit'}
weekday={sameDay ? undefined : 'long'}
hour='2-digit'
minute='2-digit'
/>
</>)} </>)}
</Text> </Text>
</HStack> </HStack>