m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Improve detection of whether a whats new notification was 'seen' (#11225)

Browse Source
This commit is contained in:
Dan J Miller 2021-06-03 13:58:04 -02:30 committed by Dan Miller
parent 0a9aee19f4
commit a6b1444b4d
2 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/app/components/app/whats-new-popup/index.scss
View File

@ -10,6 +10,19 @@
flex-direction: column; flex-direction: column;
margin: 0 24px 24px 24px; margin: 0 24px 24px 24px;
border-bottom: 1px solid $Grey-100; border-bottom: 1px solid $Grey-100;
position: relative;
}
&__last-notification {
> * {
&:nth-last-child(2) {
margin-bottom: 0;
};
}
.whats-new-popup__intersection-observable {
bottom: 8px;
}
} }
&__notification-image { &__notification-image {
@ -47,6 +60,13 @@
font-weight: bold; font-weight: bold;
margin-bottom: 8px; margin-bottom: 8px;
} }
&__intersection-observable {
bottom: 22px;
position: absolute;
height: 1px;
width: 100%;
}
} }
.popover-wrap.whats-new-popup__popover { .popover-wrap.whats-new-popup__popover {

29
ui/app/components/app/whats-new-popup/whats-new-popup.js
View File

@ -56,7 +56,7 @@ const renderDescription = (description) => {
); );
}; };
const renderFirstNotification = (notification, idRefMap) => { const renderFirstNotification = (notification, idRefMap, isLast) => {
const { id, date, title, description, image, actionText } = notification; const { id, date, title, description, image, actionText } = notification;
const actionFunction = getActionFunctionById(id); const actionFunction = getActionFunctionById(id);
const imageComponent = image && ( const imageComponent = image && (
@ -72,9 +72,11 @@ const renderFirstNotification = (notification, idRefMap) => {
<div <div
className={classnames( className={classnames(
'whats-new-popup__notification whats-new-popup__first-notification', 'whats-new-popup__notification whats-new-popup__first-notification',
{
'whats-new-popup__last-notification': isLast,
},
)} )}
key={`whats-new-popop-notification-${id}`} key={`whats-new-popop-notification-${id}`}
ref={idRefMap[id]}
> >
{!placeImageBelowDescription && imageComponent} {!placeImageBelowDescription && imageComponent}
<div className="whats-new-popup__notification-title">{title}</div> <div className="whats-new-popup__notification-title">{title}</div>
@ -95,19 +97,24 @@ const renderFirstNotification = (notification, idRefMap) => {
{actionText} {actionText}
</Button> </Button>
)} )}
<div
className="whats-new-popup__intersection-observable"
ref={idRefMap[id]}
/>
</div> </div>
); );
}; };
const renderSubsequentNotification = (notification, idRefMap) => { const renderSubsequentNotification = (notification, idRefMap, isLast) => {
const { id, date, title, description, actionText } = notification; const { id, date, title, description, actionText } = notification;
const actionFunction = getActionFunctionById(id); const actionFunction = getActionFunctionById(id);
return ( return (
<div <div
className={classnames('whats-new-popup__notification')} className={classnames('whats-new-popup__notification', {
'whats-new-popup__last-notification': isLast,
})}
key={`whats-new-popop-notification-${id}`} key={`whats-new-popop-notification-${id}`}
ref={idRefMap[id]}
> >
<div className="whats-new-popup__notification-title">{title}</div> <div className="whats-new-popup__notification-title">{title}</div>
<div className="whats-new-popup__description-and-date"> <div className="whats-new-popup__description-and-date">
@ -121,6 +128,10 @@ const renderSubsequentNotification = (notification, idRefMap) => {
{`${actionText} >`} {`${actionText} >`}
</div> </div>
)} )}
<div
className="whats-new-popup__intersection-observable"
ref={idRefMap[id]}
/>
</div> </div>
); );
}; };
@ -194,9 +205,11 @@ export default function WhatsNewPopup({ onClose }) {
<div className="whats-new-popup__notifications"> <div className="whats-new-popup__notifications">
{notifications.map(({ id }, index) => { {notifications.map(({ id }, index) => {
const notification = getTranslatedUINoficiations(t, locale)[id]; const notification = getTranslatedUINoficiations(t, locale)[id];
return index === 0 const isLast = index === notifications.length - 1;
? renderFirstNotification(notification, idRefMap) // Display the swaps notification with full image
: renderSubsequentNotification(notification, idRefMap); return index === 0 || id === 1
? renderFirstNotification(notification, idRefMap, isLast)
: renderSubsequentNotification(notification, idRefMap, isLast);
})} })}
</div> </div>
</Popover> </Popover>