notifications - tweak colors and focus

Benjamin Pasero · Benjamin Pasero · commit 4eb771bfa865 · 2018-02-15T11:00:59.000+01:00
diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts
@@ -1016,6 +1016,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 
 		if (styles.listFocusBackground) {
 			content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused { background-color: ${styles.listFocusBackground}; }`);
+			content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused:hover { background-color: ${styles.listFocusBackground}; }`); // overwrite :hover style in this case!
 		}
 
 		if (styles.listFocusForeground) {
diff --git a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts
@@ -62,6 +62,8 @@ export class NotificationsCenter extends Themable {
 
 	public show(): void {
 		if (this._isVisible) {
+			this.focusNotificationsList();
+
 			return; // already visible
 		}
 
@@ -77,10 +79,25 @@ export class NotificationsCenter extends Themable {
 		// Show all notifications that are present now
 		this.onNotificationsAdded(0, this.model.notifications);
 
+		// Focus
+		this.focusNotificationsList();
+
 		// Event
 		this._onDidChangeVisibility.fire();
 	}
 
+	private focusNotificationsList(): void {
+		if (!this._isVisible) {
+			return;
+		}
+
+		this.list.domFocus();
+
+		if (this.list.getFocus().length === 0) {
+			this.list.focusFirst();
+		}
+	}
+
 	private createNotificationsList(): void {
 
 		// List Container
@@ -98,12 +115,20 @@ export class NotificationsCenter extends Themable {
 			new NotificationsListDelegate(this.listContainer),
 			[renderer],
 			{
-				ariaLabel: localize('notificationsList', "Notifications List"),
-				multipleSelectionSupport: true
+				ariaLabel: localize('notificationsList', "Notifications List")
 			} as IListOptions<INotificationViewItem>
 		);
 		this.toUnbind.push(this.list);
 
+		// Only allow for focus in notifications, as the
+		// selection is too strong over the contents of
+		// the notification
+		this.toUnbind.push(this.list.onSelectionChange(e => {
+			if (e.indexes.length > 0) {
+				this.list.setSelection([]);
+			}
+		}));
+
 		this.container.appendChild(this.listContainer);
 
 		this.updateStyles();
@@ -139,8 +164,7 @@ export class NotificationsCenter extends Themable {
 
 	private updateNotificationsList(start: number, deleteCount: number, items: INotificationViewItem[] = []) {
 
-		// Remember focus/selection
-		const selection = this.indexToItems(this.list.getSelection());
+		// Remember focus
 		const focus = this.indexToItems(this.list.getFocus());
 
 		// Update view model
@@ -155,9 +179,8 @@ export class NotificationsCenter extends Themable {
 			this.hide();
 		}
 
-		// Otherwise restore focus/selection
+		// Otherwise restore focus
 		else {
-			this.list.setSelection(selection.map(s => this.viewModel.indexOf(s)));
 			this.list.setFocus(focus.map(f => this.viewModel.indexOf(f)));
 		}
 	}

Original file line number	Diff line number	Diff line change
`@@ -1016,6 +1016,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {`
`1016`	`1016`
`1017`	`1017`	`if (styles.listFocusBackground) {`
`1018`	`1018`	content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused { background-color: ${styles.listFocusBackground}; }`);
	`1019`	+ content.push(`.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused:hover { background-color: ${styles.listFocusBackground}; }`); // overwrite :hover style in this case!
`1019`	`1020`	`}`
`1020`	`1021`
`1021`	`1022`	`if (styles.listFocusForeground) {`