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;
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-image {
@ -47,6 +60,13 @@
font-weight: bold;
margin-bottom: 8px;
}
&__intersection-observable {
bottom: 22px;
position: absolute;
height: 1px;
width: 100%;
}
}
.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 actionFunction = getActionFunctionById(id);
const imageComponent = image && (
@ -72,9 +72,11 @@ const renderFirstNotification = (notification, idRefMap) => {
<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>
@ -95,19 +97,24 @@ const renderFirstNotification = (notification, idRefMap) => {
{actionText}
</Button>
)}
<div
className="whats-new-popup__intersection-observable"
ref={idRefMap[id]}
/>
</div>
);
};
const renderSubsequentNotification = (notification, idRefMap) => {
const renderSubsequentNotification = (notification, idRefMap, isLast) => {
const { id, date, title, description, actionText } = notification;
const actionFunction = getActionFunctionById(id);
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">
@ -121,6 +128,10 @@ const renderSubsequentNotification = (notification, idRefMap) => {
{`${actionText} >`}
</div>
)}
<div
className="whats-new-popup__intersection-observable"
ref={idRefMap[id]}
/>
</div>
);
};
@ -194,9 +205,11 @@ export default function WhatsNewPopup({ onClose }) {
<div className="whats-new-popup__notifications">
{notifications.map(({ id }, index) => {
const notification = getTranslatedUINoficiations(t, locale)[id];
return index === 0
? renderFirstNotification(notification, idRefMap)
: renderSubsequentNotification(notification, idRefMap);
const isLast = index === notifications.length - 1;
// Display the swaps notification with full image
return index === 0 || id === 1
? renderFirstNotification(notification, idRefMap, isLast)
: renderSubsequentNotification(notification, idRefMap, isLast);
})}
</div>
</Popover>