development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-09-13 21:55:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

notifications - add container to prevent bleeding

Browse source
This commit is contained in:
Benjamin Pasero 2018-02-22 19:03:29 +01:00
parent 16900e560b
commit 06140907dd
2 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css
View file

@ -21,7 +21,11 @@
flex-direction: column-reverse;
}
.monaco-workbench > .notifications-toasts .notification-toast {
.monaco-workbench > .notifications-toasts .notification-toast-container {
overflow: hidden; /* this ensures that the notification toast does not shine through */
}
.monaco-workbench > .notifications-toasts .notification-toast-container > .notification-toast {
margin: 5px; /* enables separation and drop shadows around toasts */
transform: translateY(100%); /* move the notification 50px to the bottom (to prevent bleed through) */
@ -30,14 +34,13 @@
will-change: transform, opacity; /* force a separate layer for the toast to speed things up */
}
.monaco-workbench > .notifications-toasts .notification-toast.notification-fade-in {
z-index: -1; /* draw the notification below the current one */
.monaco-workbench > .notifications-toasts .notification-toast-container > .notification-toast.notification-fade-in {
opacity: 1;
transform: none;
}
.monaco-workbench > .notifications-toasts .notification-toast.notification-fade-in-done {
.monaco-workbench > .notifications-toasts .notification-toast-container > .notification-toast.notification-fade-in-done {
opacity: 1;
transform: none;
transition: none;
opacity: 1;
}

19
src/vs/workbench/browser/parts/notifications/notificationsToasts.ts
View file

@ -104,12 +104,17 @@ export class NotificationsToasts extends Themable {
// Container
const notificationToastContainer = document.createElement('div');
addClass(notificationToastContainer, 'notification-toast');
addClass(notificationToastContainer, 'notification-toast-container');
this.notificationsToastsContainer.appendChild(notificationToastContainer);
itemDisposeables.push(toDisposable(() => this.notificationsToastsContainer.removeChild(notificationToastContainer)));
// Toast
const notificationToast = document.createElement('div');
addClass(notificationToast, 'notification-toast');
notificationToastContainer.appendChild(notificationToast);
// Create toast with item and show
const notificationList = this.instantiationService.createInstance(NotificationsList, notificationToastContainer, {
const notificationList = this.instantiationService.createInstance(NotificationsList, notificationToast, {
ariaLabel: localize('notificationsToast', "Notification Toast"),
verticalScrollMode: ScrollbarVisibility.Hidden
});
@ -173,13 +178,13 @@ export class NotificationsToasts extends Themable {
// Animate In if we are in a running session (otherwise just show directly)
if (this.lifecycleService.phase >= LifecyclePhase.Running) {
addClass(notificationToastContainer, 'notification-fade-in');
itemDisposeables.push(addDisposableListener(notificationToastContainer, 'transitionend', () => {
removeClass(notificationToastContainer, 'notification-fade-in');
addClass(notificationToastContainer, 'notification-fade-in-done');
addClass(notificationToast, 'notification-fade-in');
itemDisposeables.push(addDisposableListener(notificationToast, 'transitionend', () => {
removeClass(notificationToast, 'notification-fade-in');
addClass(notificationToast, 'notification-fade-in-done');
}));
} else {
addClass(notificationToastContainer, 'notification-fade-in-done');
addClass(notificationToast, 'notification-fade-in-done');
}
}