Skip to content

Commit b2d1f53

Browse files
jriekenjrieken
committed
make CC be two special MenuEntryActionViewItem instances and style them as one
fixes microsoft#153762
1 parent e2209cb commit b2d1f53

File tree

2 files changed

+63
-49
lines changed

2 files changed

+63
-49
lines changed

‎src/vs/workbench/browser/parts/titlebar/commandCenterControl.ts

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,20 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
import { reset } from 'vs/base/browser/dom';
7-
import { ActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems';
87
import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
98
import { renderIcon } from 'vs/base/browser/ui/iconLabel/iconLabels';
109
import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar';
11-
import { Action, IAction } from 'vs/base/common/actions';
10+
import { IAction } from 'vs/base/common/actions';
1211
import { Codicon } from 'vs/base/common/codicons';
1312
import { Emitter, Event } from 'vs/base/common/event';
1413
import { DisposableStore } from 'vs/base/common/lifecycle';
1514
import { assertType } from 'vs/base/common/types';
1615
import { localize } from 'vs/nls';
1716
import { createActionViewItem, createAndFillInContextMenuActions, MenuEntryActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem';
18-
import { IMenuService, MenuId, MenuItemAction } from 'vs/platform/actions/common/actions';
17+
import { Action2, IMenuService, MenuId, MenuItemAction, registerAction2 } from 'vs/platform/actions/common/actions';
1918
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
2019
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
21-
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
20+
import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
2221
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
2322
import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
2423
import * as colors from 'vs/platform/theme/common/colorRegistry';
@@ -57,7 +56,7 @@ export class CommandCenterControl {
5756

5857
override render(container: HTMLElement): void {
5958
super.render(container);
60-
container.classList.add('quickopen');
59+
container.classList.add('quickopen', 'left');
6160

6261
assertType(this.label);
6362
this.label.classList.add('search');
@@ -68,7 +67,7 @@ export class CommandCenterControl {
6867
this.workspaceTitle.classList.add('search-label');
6968
this._updateFromWindowTitle();
7069
reset(this.label, searchIcon, this.workspaceTitle);
71-
this._renderAllQuickPickItem(container);
70+
// this._renderAllQuickPickItem(container);
7271

7372
this._store.add(windowTitle.onDidChange(this._updateFromWindowTitle, this));
7473
}
@@ -96,24 +95,23 @@ export class CommandCenterControl {
9695
: localize('title2', "Search {0} \u2014 {1}", windowTitle.workspaceName, windowTitle.value);
9796
this._applyUpdateTooltip(title);
9897
}
98+
}
99+
return instantiationService.createInstance(InputLikeViewItem, action, { hoverDelegate });
99100

100-
private _renderAllQuickPickItem(parent: HTMLElement): void {
101-
const container = document.createElement('span');
102-
container.classList.add('all-options');
103-
parent.appendChild(container);
104-
const action = new Action('all', localize('all', "Show Search Modes..."), Codicon.chevronDown.classNames, true, () => {
105-
quickInputService.quickAccess.show('?');
106-
});
107-
const dropdown = new ActionViewItem(undefined, action, { icon: true, label: false, hoverDelegate });
108-
dropdown.render(container);
109-
this._store.add(dropdown);
110-
this._store.add(action);
101+
} else if (action instanceof MenuItemAction && action.id === 'commandCenter.help') {
102+
103+
class ExtraClass extends MenuEntryActionViewItem {
104+
override render(container: HTMLElement): void {
105+
super.render(container);
106+
container.classList.add('quickopen', 'right');
111107
}
112108
}
113-
return instantiationService.createInstance(InputLikeViewItem, action, { hoverDelegate });
114-
}
115109

116-
return createActionViewItem(instantiationService, action, { hoverDelegate });
110+
return instantiationService.createInstance(ExtraClass, action, { hoverDelegate });
111+
112+
} else {
113+
return createActionViewItem(instantiationService, action, { hoverDelegate });
114+
}
117115
}
118116
});
119117
const menu = this._disposables.add(menuService.createMenu(MenuId.CommandCenter, contextKeyService));
@@ -143,6 +141,21 @@ export class CommandCenterControl {
143141
}
144142
}
145143

144+
registerAction2(class extends Action2 {
145+
146+
constructor() {
147+
super({
148+
id: 'commandCenter.help',
149+
title: localize('all', "Show Search Modes..."),
150+
icon: Codicon.chevronDown,
151+
menu: { id: MenuId.CommandCenter, order: 100 }
152+
});
153+
}
154+
run(accessor: ServicesAccessor): void {
155+
accessor.get(IQuickInputService).quickAccess.show('?');
156+
}
157+
});
158+
146159
// --- theme colors
147160

148161
// foreground (inactive and active)

‎src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,6 @@
101101
color: var(--vscode-commandCenter-foreground);
102102
background-color: var(--vscode-commandCenter-background);
103103
border: 1px solid var(--vscode-commandCenter-border);
104-
border-radius: 6px;
105-
height: 22px;
106-
line-height: 18px;
107-
width: 38vw;
108-
max-width: 600px;
109-
min-width: 32px;
110-
margin: 0 4px;
111104
flex-direction: row;
112105
justify-content: center;
113106
overflow: hidden;
@@ -116,47 +109,55 @@
116109
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen:HOVER {
117110
color: var(--vscode-commandCenter-activeForeground);
118111
background-color: var(--vscode-commandCenter-activeBackground);
119-
line-height: 18px;
120112
}
121113

122-
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.action-label {
123-
height: 16px;
124-
line-height: 16px;
114+
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen.left {
115+
/* border,margin tricks */
116+
margin-left: 6px;
117+
border-top-left-radius: 6px;
118+
border-bottom-left-radius: 6px;
119+
border-right: none;
120+
121+
/* width */
122+
width: 38vw;
123+
max-width: 600px;
124+
min-width: 32px;
125+
}
126+
127+
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen.right {
128+
/* border,margin tricks */
129+
margin-right: 6px;
130+
border-top-right-radius: 6px;
131+
border-bottom-right-radius: 6px;
132+
border-left: none;
133+
134+
/* width */
135+
width: 16px;
125136
}
126137

127-
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.action-label.search {
138+
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.action-label {
139+
height: 22px;
140+
line-height: 22px;
141+
padding: 0;
142+
background-color: transparent;
128143
display: inline-flex;
129144
text-align: center;
130145
font-size: 12px;
131-
background-color: inherit;
132146
justify-content: center;
133-
width: calc(100% - 19px);
147+
width: 100%;
134148
}
135149

136-
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.action-label.search>.search-icon {
150+
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen.left>.action-label.search>.search-icon {
137151
font-size: 14px;
138152
opacity: .8;
139153
margin: auto 3px;
140154
}
141155

142-
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.action-label.search>.search-label {
156+
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen.left>.action-label.search>.search-label {
143157
overflow: hidden;
144158
text-overflow: ellipsis;
145159
}
146160

147-
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.all-options>.action-label {
148-
text-align: center;
149-
font-size: 12px;
150-
width: 16px;
151-
border-left: 1px solid transparent;
152-
border-radius: 0;
153-
padding-right: 0;
154-
}
155-
156-
.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center:HOVER .action-item.quickopen>.all-options>.action-label {
157-
border-color: var(--vscode-commandCenter-border);
158-
}
159-
160161
/* Menubar */
161162
.monaco-workbench .part.titlebar>.titlebar-container>.menubar {
162163
/* move menubar above drag region as negative z-index on drag region cause greyscale AA */

0 commit comments

Comments
 (0)