notifications - add container to prevent bleeding

Benjamin Pasero · Benjamin Pasero · commit 06140907dde7 · 2018-02-22T19:03:29.000+01:00
diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css b/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css
@@ -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;
 }
diff --git a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts
@@ -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');
 		}
 	}
 
