From a0515f04b1ef8855ca32b181037d86a0810e431b Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Sun, 18 Feb 2018 11:13:25 +0100 Subject: [PATCH] notifications - animate toasts --- .../media/notificationsToasts.css | 8 +++++++ .../notifications/notificationsCenter.ts | 2 +- .../notifications/notificationsToasts.ts | 21 ++++++++++++------- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css b/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css index 016143657c8..056fcc6175a 100644 --- a/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css +++ b/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css @@ -24,4 +24,12 @@ .monaco-workbench > .notifications-toasts .notification-toast { margin: 5px; /* enables separation and drop shadows around toasts */ + position: relative; + + -webkit-transition: left 200ms linear; + -ms-transition: left 200ms linear; + -moz-transition: left 200ms linear; + -khtml-transition: left 200ms linear; + -o-transition: left 200ms linear; + transition: left 200ms linear; } \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts index 88338395cc7..bf3b3935878 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts @@ -178,7 +178,7 @@ export class NotificationsCenter extends Themable { // Make sure notifications are not exceding available width availableWidth = this.workbenchDimensions.width; - availableWidth -= (2 * 12); // adjust for paddings left and right + availableWidth -= (2 * 8); // adjust for paddings left and right // Make sure notifications are not exceeding available height availableHeight = this.workbenchDimensions.height; diff --git a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts index c93f4f6635f..2d5c9ebcfd3 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts @@ -135,17 +135,15 @@ export class NotificationsToasts extends Themable { this.removeToast(item); }); - // Automatically hide notifications without buttons after a timeout - if (item.actions.primary.length === 0) { + // Automatically hide collapsed notifications + if (!item.expanded) { let timeoutHandle: number; const hideAfterTimeout = () => { timeoutHandle = setTimeout(() => { - if (!notificationList.hasFocus()) { - if (item.actions.primary.length === 0) { - this.removeToast(item); // only remove if actions are still not there (they can change after the fact) - } + if (!notificationList.hasFocus() && !item.expanded) { + this.removeToast(item); } else { - hideAfterTimeout(); // push out disposal if item has focus + hideAfterTimeout(); // push out disposal if item has focus or is expanded } }, NotificationsToasts.PURGE_TIMEOUT[item.severity]); }; @@ -160,6 +158,13 @@ export class NotificationsToasts extends Themable { // Context Key this.notificationsToastsVisibleContextKey.set(true); + + // Animate In + notificationToastContainer.style.left = `${NotificationsToasts.MAX_DIMENSIONS.width}px`; + const animationHandle = setTimeout(() => { + notificationToastContainer.style.left = '0px'; + }); + itemDisposeables.push(toDisposable(() => clearTimeout(animationHandle))); } private removeToast(item: INotificationViewItem): void { @@ -313,7 +318,7 @@ export class NotificationsToasts extends Themable { // Make sure notifications are not exceding available width availableWidth = this.workbenchDimensions.width; - availableWidth -= (2 * 12); // adjust for paddings left and right + availableWidth -= (2 * 8); // adjust for paddings left and right // Make sure notifications are not exceeding available height availableHeight = this.workbenchDimensions.height; -- GitLab