From 03db54e4dd2fdca2b6ac4afaa3ac6a97a637c7c1 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Wed, 21 Feb 2018 10:20:03 +0100 Subject: [PATCH] notifications - fix bad layout in toasts --- .../notifications/notificationsToasts.ts | 30 +++++++++++++++---- 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts index c56fc142357..a9dbab5eeb2 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts @@ -113,12 +113,17 @@ export class NotificationsToasts extends Themable { // Make visible notificationList.show(); - // Layout - this.layout(this.workbenchDimensions); + // Layout lists + const maxDimensions = this.computeMaxDimensions(); + this.layoutLists(maxDimensions.width); // Show notification notificationList.updateNotificationsList(0, 0, [item]); + // Layout container: only after we show the notification to ensure that + // the height computation takes the content of it into account! + this.layoutContainer(maxDimensions.height); + // Update when item height changes due to expansion itemDisposeables.push(item.onDidExpansionChange(() => { notificationList.updateNotificationsList(0, 1, [item]); @@ -309,6 +314,16 @@ export class NotificationsToasts extends Themable { public layout(dimension: Dimension): void { this.workbenchDimensions = dimension; + const maxDimensions = this.computeMaxDimensions(); + + // Layout all lists of toasts + this.layoutLists(maxDimensions.width); + + // Hide toasts that exceed height + this.layoutContainer(maxDimensions.height); + } + + private computeMaxDimensions(): Dimension { let maxWidth = NotificationsToasts.MAX_DIMENSIONS.width; let maxHeight = NotificationsToasts.MAX_DIMENSIONS.height; @@ -334,11 +349,14 @@ export class NotificationsToasts extends Themable { availableHeight -= (2 * 12); // adjust for paddings top and bottom } - // Apply width to all toasts - this.mapNotificationToToast.forEach(toast => toast.list.layout(Math.min(maxWidth, availableWidth))); + return new Dimension(Math.min(maxWidth, availableWidth), Math.min(maxHeight, availableHeight)); + } - // Hide toasts that exceed height - let heightToGive = Math.min(maxHeight, availableHeight); + private layoutLists(width: number): void { + this.mapNotificationToToast.forEach(toast => toast.list.layout(width)); + } + + private layoutContainer(heightToGive: number): void { this.getVisibleToasts().forEach(toast => { // In order to measure the client height, the element cannot have display: none -- GitLab