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

Prevent hidden popup overlay

Browse Source 
A hidden overlay was preventing interactions with the lower 356 pixels
in the popup view when there are zero notifications. It was also
preventing interactions with the 100 pixels above the notifications in
the case where there were two notifications, which obscured the `Send`
button.

The first problem was solved by ensuring the notification wrapper isn't
rendered when there are no notifications. The second problem was solved
by updating the notification wrapper style to avoid setting a height.
This commit is contained in:
Mark Stacey 2019-08-06 16:09:40 -03:00
parent 0e51292acf
commit b3833b1074
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/app/multiple-notifications/index.scss
View File

@ -3,7 +3,6 @@
display: flex;
flex-direction: column;
width: 472px;
height: 116px;
position: absolute;
bottom: 0;
right: 0;
@ -37,7 +36,6 @@
}
.home-notification-wrapper--show-all {
height: 356px;;
justify-content: flex-end;
margin-bottom: 0;

32
ui/app/components/app/multiple-notifications/multiple-notifications.component.js
View File

@ -18,21 +18,27 @@ export default class MultipleNotifications extends PureComponent {
const notificationsToBeRendered = notifications.filter(notificationConfig => notificationConfig.shouldBeRendered)
return (<div
className={classnames(...classNames, {
'home-notification-wrapper--show-all': showAll,
'home-notification-wrapper--show-first': !showAll,
})}
>
{ notificationsToBeRendered.map(notificationConfig => notificationConfig.component) }
if (notificationsToBeRendered.length === 0) {
return null
}
return (
<div
className="home-notification-wrapper__i-container"
onClick={() => this.setState({ showAll: !showAll })}
className={classnames(...classNames, {
'home-notification-wrapper--show-all': showAll,
'home-notification-wrapper--show-first': !showAll,
})}
>
{notificationsToBeRendered.length > 1 ? <i className={classnames('fa fa-sm fa-sort-amount-asc', {
'flipped': !showAll,
})} /> : null}
{ notificationsToBeRendered.map(notificationConfig => notificationConfig.component) }
<div
className="home-notification-wrapper__i-container"
onClick={() => this.setState({ showAll: !showAll })}
>
{notificationsToBeRendered.length > 1 ? <i className={classnames('fa fa-sm fa-sort-amount-asc', {
'flipped': !showAll,
})} /> : null}
</div>
</div>
</div>)
)
}
}