urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-23 19:05:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4644 from urbit/james/chat-unread

Browse Source 
chat: new unread message style
This commit is contained in:
matildepark 2021-03-23 15:35:52 -04:00 committed by GitHub
commit 74c2e59d71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 78 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
pkg/interface/src/views/apps/chat/components/unread-notice.js
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { Box, Text } from '@tlon/indigo-react';
import { Box, Text, Center, Icon } from '@tlon/indigo-react';
import VisibilitySensor from 'react-visibility-sensor';
import Timestamp from '~/views/components/Timestamp';
@ -8,51 +8,67 @@ import Timestamp from '~/views/components/Timestamp';
export const UnreadNotice = (props) => {
const { unreadCount, unreadMsg, dismissUnread, onClick } = props;
if (!unreadMsg || (unreadCount === 0)) {
if (!unreadMsg || unreadCount === 0) {
return null;
}
const stamp = moment.unix(unreadMsg.post['time-sent'] / 1000);
let datestamp = moment.unix(unreadMsg.post['time-sent'] / 1000).format('YYYY.M.D');
const timestamp = moment.unix(unreadMsg.post['time-sent'] / 1000).format('HH:mm');
let datestamp = moment
.unix(unreadMsg.post['time-sent'] / 1000)
.format('YYYY.M.D');
const timestamp = moment
.unix(unreadMsg.post['time-sent'] / 1000)
.format('HH:mm');
if (datestamp === moment().format('YYYY.M.D')) {
datestamp = null;
}
return (
<Box style={{ left: '0px', top: '0px' }}
p='4'
<Box
style={{ left: '0px', top: '0px' }}
p='12px'
width='100%'
position='absolute'
zIndex='1'
className='unread-notice'
>
<Box
backgroundColor='white'
display='flex'
alignItems='center'
p='2'
fontSize='0'
justifyContent='space-between'
borderRadius='1'
border='1'
borderColor='blue'>
<Text flexShrink='1' textOverflow='ellipsis' whiteSpace='pre' overflow='hidden' display='flex' cursor='pointer' onClick={onClick}>
{unreadCount} new message{unreadCount > 1 ? 's' : ''} since{' '}
<Timestamp stamp={stamp} color='blue' date={true} fontSize={1} />
</Text>
<Text
ml='4'
color='blue'
cursor='pointer'
textAlign='right'
flexShrink='0'
onClick={dismissUnread}>
Mark as Read
</Text>
</Box>
<Center>
<Box backgroundColor='white' borderRadius='2'>
<Box
backgroundColor='washedBlue'
display='flex'
alignItems='center'
p='2'
fontSize='0'
justifyContent='space-between'
borderRadius='3'
border='1'
borderColor='lightBlue'
>
<Text
textOverflow='ellipsis'
whiteSpace='pre'
overflow='hidden'
display='flex'
cursor='pointer'
onClick={onClick}
>
{unreadCount} new message{unreadCount > 1 ? 's' : ''} since{' '}
<Timestamp stamp={stamp} color='black' date={true} fontSize={1} />
</Text>
<Icon
icon='X'
ml='4'
color='black'
cursor='pointer'
textAlign='right'
onClick={dismissUnread}
/>
</Box>
</Box>
</Center>
</Box>
);
}
};

52
pkg/interface/src/views/components/Timestamp.tsx
View File

@ -11,20 +11,24 @@ export type TimestampProps = BoxProps & {
stamp: MomentType;
date?: boolean;
time?: boolean;
}
};
const Timestamp = (props: TimestampProps): ReactElement | null=> {
const Timestamp = (props: TimestampProps): ReactElement | null => {
const { stamp, date, time, color, fontSize, ...rest } = {
time: true, color: 'gray', fontSize: 0, ...props
time: true,
color: 'gray',
fontSize: 0,
...props
};
if (!stamp) return null;
const { hovering, bind } = date === true
? { hovering: true, bind: {} }
: useHovering();
const { hovering, bind } =
date === true ? { hovering: true, bind: {} } : useHovering();
let datestamp = stamp.format(DateFormat);
if (stamp.format(DateFormat) === moment().format(DateFormat)) {
datestamp = 'Today';
} else if (stamp.format(DateFormat) === moment().subtract(1, 'day').format(DateFormat)) {
} else if (
stamp.format(DateFormat) === moment().subtract(1, 'day').format(DateFormat)
) {
datestamp = 'Yesterday';
}
const timestamp = stamp.format(TimeFormat);
@ -33,22 +37,28 @@ const Timestamp = (props: TimestampProps): ReactElement | null=> {
{...bind}
display='flex'
flex='row'
flexWrap="nowrap"
flexWrap='nowrap'
{...rest}
title={stamp.format(DateFormat + ' ' + TimeFormat)}
>
{time && <Text flexShrink={0} color={color} fontSize={fontSize}>{timestamp}</Text>}
{date !== false && <Text
flexShrink={0}
color={color}
fontSize={fontSize}
ml={time ? 2 : 0}
display={time ? ['none', hovering ? 'block' : 'none'] : 'block'}
>
{datestamp}
</Text>}
{time && (
<Text flexShrink={0} color={color} fontSize={fontSize}>
{timestamp}
</Text>
)}
{date !== false && (
<Text
flexShrink={0}
color={color}
fontSize={fontSize}
display={time ? ['none', hovering ? 'block' : 'none'] : 'block'}
>
{time ? '\u00A0' : ''}
{datestamp}
</Text>
)}
</Box>
)
}
);
};
export default Timestamp;
export default Timestamp;