open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Optimizing notifications for mobile

Browse Source
This commit is contained in:
Ian Philips 2022-07-06 11:32:10 -06:00
parent 897bcf905d
commit f9584c424d
2 changed files with 88 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/avatar.tsx
View File

@ -53,7 +53,7 @@ export function EmptyAvatar(props: { size?: number; multi?: boolean }) {
return ( return (
<div <div
className={`flex h-${size} w-${size} items-center justify-center rounded-full bg-gray-200`} className={`flex flex-shrink-0 h-${size} w-${size} items-center justify-center rounded-full bg-gray-200`}
> >
<Icon className={`h-${insize} w-${insize} text-gray-500`} aria-hidden /> <Icon className={`h-${insize} w-${insize} text-gray-500`} aria-hidden />
</div> </div>

175
web/pages/notifications.tsx
View File

@ -375,9 +375,8 @@ function IncomeNotificationItem(props: {
justSummary={true} justSummary={true}
/> />
</div> </div>
<span className={'flex-shrink-0'}> <span className={'flex truncate'}>
{getReasonForShowingNotification(notification, true)} {getReasonForShowingNotification(notification, true)}
{` on`}
<NotificationLink notification={notification} /> <NotificationLink notification={notification} />
</span> </span>
</div> </div>
@ -405,64 +404,51 @@ function IncomeNotificationItem(props: {
<Avatar <Avatar
avatarUrl={sourceUserAvatarUrl} avatarUrl={sourceUserAvatarUrl}
size={'sm'} size={'sm'}
className={'mr-2'} className={'mr-1'}
username={sourceUserName} username={sourceUserName}
/> />
) )
) : ( ) : (
<TrendingUpIcon className={'text-primary mr-1 h-7 w-7'} /> <TrendingUpIcon className={'text-primary mr-1 h-7 w-7'} />
)} )}
<div className={'flex-1 overflow-hidden sm:flex'}> <div className={'flex max-w-xl shrink pl-1 sm:pl-0'}>
<div <div className={'inline-flex pl-1'}>
className={ {sourceType && reason && (
'flex max-w-xl shrink overflow-hidden text-ellipsis pl-1 sm:pl-0' <div className={'inline'}>
} <span className={'mr-1'}>
> <NotificationTextLabel
{sourceType != 'bonus' && contract={null}
(sourceUserUsername === 'Multiple Users' ? ( defaultText={notification.sourceText ?? ''}
<span>Multiple Users</span> notification={notification}
) : ( />
<UserLink </span>
name={sourceUserName || ''} {sourceType != 'bonus' &&
username={sourceUserUsername || ''} (sourceUserUsername === 'Multiple Users' ? (
className={'mr-0 flex-shrink-0'} <span className={'mr-1'}>Users</span>
justFirstName={true} ) : (
/> <UserLink
))} name={sourceUserName || ''}
<div className={'inline-flex overflow-hidden text-ellipsis pl-1'}> username={sourceUserUsername || ''}
{sourceType && reason && ( className={'mr-1 flex-shrink-0'}
<div className={'inline truncate'}> justFirstName={true}
{getReasonForShowingNotification(notification, false)} />
<NotificationLink notification={notification} /> ))}
</div> {getReasonForShowingNotification(notification, false)}
)} </div>
</div> )}
</div> </div>
{sourceId && sourceContractSlug && sourceContractCreatorUsername ? ( <span className={'ml-1 flex hidden sm:inline-block'}>
<CopyLinkDateTimeComponent on
prefix={sourceContractCreatorUsername} <NotificationLink notification={notification} />
slug={sourceContractSlug} </span>
createdTime={createdTime} <RelativeTimestamp time={createdTime} />
elementId={getSourceIdForLinkComponent(sourceId)}
className={clsx(
'-mx-1 inline-flex sm:inline-block',
sourceType === 'bonus' && 'mx-0 sm:-mx-1'
)}
/>
) : (
<RelativeTimestamp time={createdTime} />
)}
</div> </div>
</Row> </Row>
<div className={'mt-1 ml-1 md:text-base'}> <span className={'flex truncate text-gray-500 sm:hidden'}>
<NotificationTextLabel on
contract={null} <NotificationLink notification={notification} />
defaultText={notification.sourceText ?? ''} </span>
notification={notification} <div className={'mt-4 border-b border-gray-300'} />
/>
</div>
<div className={'mt-6 border-b border-gray-300'} />
</a> </a>
</div> </div>
) )
@ -507,16 +493,18 @@ function NotificationGroupItem(props: {
)} )}
<Row className={'items-center text-gray-500 sm:justify-start'}> <Row className={'items-center text-gray-500 sm:justify-start'}>
<EmptyAvatar multi /> <EmptyAvatar multi />
<div className={'flex-1 overflow-hidden pl-2 sm:flex'}> <div className={'flex truncate pl-2'}>
<div <div
onClick={() => setExpanded(!expanded)} onClick={() => setExpanded(!expanded)}
className={'line-clamp-1 cursor-pointer pl-1 sm:pl-0'} className={' flex cursor-pointer truncate pl-1 sm:pl-0'}
> >
{sourceContractTitle ? ( {sourceContractTitle ? (
<span> <>
{'Activity on '} <span className={'flex-shrink-0'}>{'Activity on '}</span>
<NotificationLink notification={notifications[0]} /> <span className={'truncate'}>
</span> <NotificationLink notification={notifications[0]} />
</span>
</>
) : ( ) : (
'Other activity' 'Other activity'
)} )}
@ -560,6 +548,7 @@ function NotificationGroupItem(props: {
notification={notification} notification={notification}
key={notification.id} key={notification.id}
justSummary={false} justSummary={false}
hideTitle={true}
/> />
))} ))}
</> </>
@ -789,7 +778,7 @@ function NotificationLink(props: { notification: Notification }) {
: '' : ''
} }
className={ className={
'ml-1 font-bold hover:underline hover:decoration-indigo-400 hover:decoration-2' 'ml-1 inline max-w-xs truncate font-bold text-gray-500 hover:underline hover:decoration-indigo-400 hover:decoration-2 sm:max-w-sm'
} }
> >
{sourceContractTitle || sourceTitle} {sourceContractTitle || sourceTitle}
@ -842,8 +831,9 @@ function getSourceIdForLinkComponent(
function NotificationItem(props: { function NotificationItem(props: {
notification: Notification notification: Notification
justSummary?: boolean justSummary?: boolean
hideTitle?: boolean
}) { }) {
const { notification, justSummary } = props const { notification, justSummary, hideTitle } = props
const { const {
sourceType, sourceType,
sourceId, sourceId,
@ -892,10 +882,7 @@ function NotificationItem(props: {
<span className={'flex-shrink-0'}> <span className={'flex-shrink-0'}>
{sourceType && {sourceType &&
reason && reason &&
getReasonForShowingNotification(notification, true).replace( getReasonForShowingNotification(notification, true, true)}
' on',
''
)}
</span> </span>
<div className={'ml-1 text-black'}> <div className={'ml-1 text-black'}>
<NotificationTextLabel <NotificationTextLabel
@ -942,26 +929,30 @@ function NotificationItem(props: {
justFirstName={true} justFirstName={true}
/> />
)} )}
<div className={'inline-flex overflow-hidden text-ellipsis pl-1'}> {sourceType && reason && (
{sourceType && reason && ( <div className={'inline flex truncate'}>
<div className={'inline truncate'}> <span className={'ml-1 flex-shrink-0'}>
{getReasonForShowingNotification(notification, false)} {getReasonForShowingNotification(notification, false, true)}
</span>
{!hideTitle && (
<NotificationLink notification={notification} /> <NotificationLink notification={notification} />
</div> )}
)} </div>
</div> )}
{sourceId &&
sourceContractSlug &&
sourceContractCreatorUsername ? (
<CopyLinkDateTimeComponent
prefix={sourceContractCreatorUsername}
slug={sourceContractSlug}
createdTime={createdTime}
elementId={getSourceIdForLinkComponent(sourceId)}
className={'-mx-1 inline-flex sm:inline-block'}
/>
) : (
<RelativeTimestamp time={createdTime} />
)}
</div> </div>
{sourceId && sourceContractSlug && sourceContractCreatorUsername ? (
<CopyLinkDateTimeComponent
prefix={sourceContractCreatorUsername}
slug={sourceContractSlug}
createdTime={createdTime}
elementId={getSourceIdForLinkComponent(sourceId)}
className={'-mx-1 inline-flex sm:inline-block'}
/>
) : (
<RelativeTimestamp time={createdTime} />
)}
</div> </div>
</Row> </Row>
<div className={'mt-1 ml-1 md:text-base'}> <div className={'mt-1 ml-1 md:text-base'}>
@ -1035,7 +1026,9 @@ function NotificationTextLabel(props: {
) )
} else if ((sourceType === 'bonus' || sourceType === 'tip') && sourceText) { } else if ((sourceType === 'bonus' || sourceType === 'tip') && sourceText) {
return ( return (
<span className="text-primary">{formatMoney(parseInt(sourceText))}</span> <span className="text-primary">
{'+' + formatMoney(parseInt(sourceText))}
</span>
) )
} }
// return default text // return default text
@ -1048,7 +1041,8 @@ function NotificationTextLabel(props: {
function getReasonForShowingNotification( function getReasonForShowingNotification(
notification: Notification, notification: Notification,
simple?: boolean simple?: boolean,
replaceOn?: boolean
) { ) {
const { sourceType, sourceUpdateType, sourceText, reason, sourceSlug } = const { sourceType, sourceUpdateType, sourceText, reason, sourceSlug } =
notification notification
@ -1106,17 +1100,22 @@ function getReasonForShowingNotification(
case 'bonus': case 'bonus':
if (reason === 'unique_bettors_on_your_contract' && sourceText) if (reason === 'unique_bettors_on_your_contract' && sourceText)
reasonText = !simple reasonText = !simple
? `You had ${ ? `for ${
parseInt(sourceText) / UNIQUE_BETTOR_BONUS_AMOUNT parseInt(sourceText) / UNIQUE_BETTOR_BONUS_AMOUNT
} unique bettors on` } unique bettors`
: ' for unique bettors' : ' for unique bettors on'
else reasonText = 'You earned your daily manna' else reasonText = 'You earned your daily manna'
break break
case 'tip': case 'tip':
reasonText = !simple ? `tipped you on` : `in tips on` reasonText = !simple ? `tipped you` : `in tips on`
break break
default: default:
reasonText = '' reasonText = ''
} }
return reasonText
return (
<span className={'flex-shrink-0'}>
{replaceOn ? reasonText.replace(' on', '') : reasonText}
</span>
)
} }