m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02: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 GitHub
parent c3b79bb358
commit 6dae3bbe57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,19 @@
flex-direction: column;
margin: 0 24px 24px 24px;
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 {
@ -53,6 +66,13 @@
font-weight: bold;
margin-bottom: 8px;
}
&__intersection-observable {
bottom: 22px;
position: absolute;
height: 1px;
width: 100%;
}
}
.popover-wrap.whats-new-popup__popover {

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

@ -68,7 +68,7 @@ const renderDescription = (description) => {
);
};
const renderFirstNotification = (notification, idRefMap, history) => {
const renderFirstNotification = (notification, idRefMap, history, isLast) => {
const { id, date, title, description, image, actionText } = notification;
const actionFunction = getActionFunctionById(id, history);
const imageComponent = image && (
@ -84,9 +84,11 @@ const renderFirstNotification = (notification, idRefMap, history) => {
<div
className={classnames(
'whats-new-popup__notification whats-new-popup__first-notification',
{
'whats-new-popup__last-notification': isLast,
},
)}
key={`whats-new-popop-notification-${id}`}
ref={idRefMap[id]}
>
{!placeImageBelowDescription && imageComponent}
<div className="whats-new-popup__notification-title">{title}</div>
@ -107,19 +109,29 @@ const renderFirstNotification = (notification, idRefMap, history) => {
{actionText}
</Button>
)}
<div
className="whats-new-popup__intersection-observable"
ref={idRefMap[id]}
/>
</div>
);
};
const renderSubsequentNotification = (notification, idRefMap, history) => {
const renderSubsequentNotification = (
notification,
idRefMap,
history,
isLast,
) => {
const { id, date, title, description, actionText } = notification;
const actionFunction = getActionFunctionById(id, history);
return (
<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}`}
ref={idRefMap[id]}
>
<div className="whats-new-popup__notification-title">{title}</div>
<div className="whats-new-popup__description-and-date">
@ -133,6 +145,10 @@ const renderSubsequentNotification = (notification, idRefMap, history) => {
{`${actionText} >`}
</div>
)}
<div
className="whats-new-popup__intersection-observable"
ref={idRefMap[id]}
/>
</div>
);
};
@ -207,10 +223,16 @@ export default function WhatsNewPopup({ onClose }) {
<div className="whats-new-popup__notifications">
{notifications.map(({ id }, index) => {
const notification = getTranslatedUINoficiations(t, locale)[id];
const isLast = index === notifications.length - 1;
// Display the swaps notification with full image
return index === 0 || id === 1
? renderFirstNotification(notification, idRefMap, history)
: renderSubsequentNotification(notification, idRefMap, history);
? renderFirstNotification(notification, idRefMap, history, isLast)
: renderSubsequentNotification(
notification,
idRefMap,
history,
isLast,
);
})}
</div>
</Popover>