Permissions picker styling (#302753)

* feat: enhance chat permission picker with warning and info labels

* feat: enhance action label styles with opacity and hover effects
This commit is contained in:
Benjamin Christopher Simmonds
2026-03-18 13:57:01 +01:00
committed by GitHub
parent 6dbea2838a
commit aeb06c306d
2 changed files with 34 additions and 1 deletions

View File

@@ -291,6 +291,34 @@
margin-left: 2px;
}
.sessions-chat-picker-slot .action-label.warning {
color: var(--vscode-problemsWarningIcon-foreground);
opacity: 0.75;
}
.sessions-chat-picker-slot .action-label.warning .codicon {
color: var(--vscode-problemsWarningIcon-foreground) !important;
}
.sessions-chat-picker-slot .action-label.warning:hover {
color: var(--vscode-problemsWarningIcon-foreground);
opacity: 1;
}
.sessions-chat-picker-slot .action-label.info {
color: var(--vscode-problemsInfoIcon-foreground);
opacity: 0.75;
}
.sessions-chat-picker-slot .action-label.info .codicon {
color: var(--vscode-problemsInfoIcon-foreground) !important;
}
.sessions-chat-picker-slot .action-label.info:hover {
color: var(--vscode-problemsInfoIcon-foreground);
opacity: 1;
}
/* Sync indicator: a slim non-interactive-looking separator before the button */
.sessions-chat-sync-indicator {
margin-left: 4px;

View File

@@ -9,7 +9,7 @@ import { Emitter, Event } from '../../../../base/common/event.js';
import { Disposable, DisposableStore } from '../../../../base/common/lifecycle.js';
import { localize } from '../../../../nls.js';
import { IActionWidgetService } from '../../../../platform/actionWidget/browser/actionWidget.js';
import { ActionListItemKind, IActionListDelegate, IActionListItem } from '../../../../platform/actionWidget/browser/actionList.js';
import { ActionListItemKind, IActionListDelegate, IActionListItem, IActionListOptions } from '../../../../platform/actionWidget/browser/actionList.js';
import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js';
import { IDialogService } from '../../../../platform/dialogs/common/dialogs.js';
import { renderIcon } from '../../../../base/browser/ui/iconLabel/iconLabels.js';
@@ -151,6 +151,7 @@ export class NewChatPermissionPicker extends Disposable {
onHide: () => { triggerElement.focus(); },
};
const listOptions: IActionListOptions = { descriptionBelow: true, minWidth: 255 };
this.actionWidgetService.show<IPermissionItem>(
'permissionPicker',
false,
@@ -163,6 +164,7 @@ export class NewChatPermissionPicker extends Disposable {
getAriaLabel: (item) => item.label ?? '',
getWidgetAriaLabel: () => localize('permissionPicker.ariaLabel', "Permission Picker"),
},
listOptions,
);
}
@@ -253,5 +255,8 @@ export class NewChatPermissionPicker extends Disposable {
const labelSpan = dom.append(trigger, dom.$('span.sessions-chat-dropdown-label'));
labelSpan.textContent = label;
dom.append(trigger, renderIcon(Codicon.chevronDown));
trigger.classList.toggle('warning', this._currentLevel === ChatPermissionLevel.Autopilot);
trigger.classList.toggle('info', this._currentLevel === ChatPermissionLevel.AutoApprove);
}
}