Skip to content

Commit 2bd5418

Browse files
author
Benjamin Pasero
committed
web - home indicator wrap up
1 parent 7e2e87a commit 2bd5418

6 files changed

Lines changed: 53 additions & 48 deletions

File tree

‎src/vs/base/browser/ui/actionbar/actionbar.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export class BaseActionViewItem extends Disposable implements IActionViewItem {
136136

137137
if (platform.isMacintosh) {
138138
// macOS: allow to trigger the button when holding Ctrl+key and pressing the
139-
// main mouse button. This is for scenarios where e.g. some interaction forces
139+
// main mouse button. This is for scenarios where e.g. some interaction forces
140140
// the Ctrl+key to be pressed and hold but the user still wants to interact
141141
// with the actions (for example quick access in quick navigation mode).
142142
this._register(DOM.addDisposableListener(element, DOM.EventType.CONTEXT_MENU, e => {
@@ -276,7 +276,6 @@ export class ActionViewItem extends BaseActionViewItem {
276276
this.label = DOM.append(this.element, DOM.$('a.action-label'));
277277
}
278278

279-
280279
if (this.label) {
281280
if (this._action.id === Separator.ID) {
282281
this.label.setAttribute('role', 'presentation'); // A separator is a presentation item

‎src/vs/workbench/browser/parts/activitybar/activitybarActions.ts‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/bro
2828
import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet';
2929
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
3030
import { createAndFillInActionBarActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
31+
import { ICommandService } from 'vs/platform/commands/common/commands';
3132

3233
export class ViewletActivityAction extends ActivityAction {
3334

@@ -338,9 +339,21 @@ export class NextSideBarViewAction extends SwitchSideBarViewAction {
338339
}
339340
}
340341

341-
const registry = Registry.as<IWorkbenchActionRegistry>(ActionExtensions.WorkbenchActions);
342-
registry.registerWorkbenchAction(SyncActionDescriptor.create(PreviousSideBarViewAction, PreviousSideBarViewAction.ID, PreviousSideBarViewAction.LABEL), 'View: Previous Side Bar View', nls.localize('view', "View"));
343-
registry.registerWorkbenchAction(SyncActionDescriptor.create(NextSideBarViewAction, NextSideBarViewAction.ID, NextSideBarViewAction.LABEL), 'View: Next Side Bar View', nls.localize('view', "View"));
342+
export class HomeAction extends Action {
343+
344+
constructor(
345+
private readonly command: string,
346+
name: string,
347+
icon: string,
348+
@ICommandService private readonly commandService: ICommandService
349+
) {
350+
super('workbench.action.home', name, `codicon-${icon}`);
351+
}
352+
353+
async run(): Promise<void> {
354+
this.commandService.executeCommand(this.command);
355+
}
356+
}
344357

345358
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
346359

@@ -352,6 +365,7 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
352365
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label:not(.codicon) {
353366
background-color: ${activeForegroundColor} !important;
354367
}
368+
.monaco-workbench .activitybar > .content .home-bar > .monaco-action-bar .action-item .action-label.codicon,
355369
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label.codicon,
356370
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label.codicon,
357371
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label.codicon {
@@ -443,3 +457,7 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
443457
}
444458
}
445459
});
460+
461+
const registry = Registry.as<IWorkbenchActionRegistry>(ActionExtensions.WorkbenchActions);
462+
registry.registerWorkbenchAction(SyncActionDescriptor.create(PreviousSideBarViewAction, PreviousSideBarViewAction.ID, PreviousSideBarViewAction.LABEL), 'View: Previous Side Bar View', nls.localize('view', "View"));
463+
registry.registerWorkbenchAction(SyncActionDescriptor.create(NextSideBarViewAction, NextSideBarViewAction.ID, NextSideBarViewAction.LABEL), 'View: Next Side Bar View', nls.localize('view', "View"));

‎src/vs/workbench/browser/parts/activitybar/activitybarPart.ts‎

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { ActionsOrientation, ActionBar } from 'vs/base/browser/ui/actionbar/acti
99
import { GLOBAL_ACTIVITY_ID, IActivity } from 'vs/workbench/common/activity';
1010
import { Registry } from 'vs/platform/registry/common/platform';
1111
import { Part } from 'vs/workbench/browser/part';
12-
import { GlobalActivityActionViewItem, ViewletActivityAction, ToggleViewletAction, PlaceHolderToggleCompositePinnedAction, PlaceHolderViewletActivityAction, AccountsActionViewItem } from 'vs/workbench/browser/parts/activitybar/activitybarActions';
12+
import { GlobalActivityActionViewItem, ViewletActivityAction, ToggleViewletAction, PlaceHolderToggleCompositePinnedAction, PlaceHolderViewletActivityAction, AccountsActionViewItem, HomeAction } from 'vs/workbench/browser/parts/activitybar/activitybarActions';
1313
import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet';
1414
import { IBadge, NumberBadge } from 'vs/workbench/services/activity/common/activity';
1515
import { IWorkbenchLayoutService, Parts, Position as SideBarPosition } from 'vs/workbench/services/layout/browser/layoutService';
@@ -20,7 +20,7 @@ import { IThemeService, IColorTheme } from 'vs/platform/theme/common/themeServic
2020
import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme';
2121
import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
2222
import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop } from 'vs/workbench/browser/parts/compositeBar';
23-
import { Dimension, addClass, removeNode, addClasses } from 'vs/base/browser/dom';
23+
import { Dimension, addClass, removeNode } from 'vs/base/browser/dom';
2424
import { IStorageService, StorageScope, IWorkspaceStorageChangeEvent } from 'vs/platform/storage/common/storage';
2525
import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions';
2626
import { URI, UriComponents } from 'vs/base/common/uri';
@@ -86,10 +86,8 @@ export class ActivitybarPart extends Part implements IActivityBarService {
8686

8787
private content: HTMLElement | undefined;
8888

89-
private homeIndicatorActionLabel: HTMLAnchorElement | undefined = undefined;
90-
91-
private menubar: CustomMenubarControl | undefined;
92-
private menubarContainer: HTMLElement | undefined;
89+
private menuBar: CustomMenubarControl | undefined;
90+
private menuBarContainer: HTMLElement | undefined;
9391

9492
private compositeBar: CompositeBar;
9593

@@ -297,25 +295,25 @@ export class ActivitybarPart extends Part implements IActivityBarService {
297295
}
298296

299297
private uninstallMenubar() {
300-
if (this.menubar) {
301-
this.menubar.dispose();
298+
if (this.menuBar) {
299+
this.menuBar.dispose();
302300
}
303301

304-
if (this.menubarContainer) {
305-
removeNode(this.menubarContainer);
302+
if (this.menuBarContainer) {
303+
removeNode(this.menuBarContainer);
306304
}
307305
}
308306

309307
private installMenubar() {
310-
this.menubarContainer = document.createElement('div');
311-
addClass(this.menubarContainer, 'menubar');
308+
this.menuBarContainer = document.createElement('div');
309+
addClass(this.menuBarContainer, 'menubar');
312310

313311
const content = assertIsDefined(this.content);
314-
content.prepend(this.menubarContainer);
312+
content.prepend(this.menuBarContainer);
315313

316314
// Menubar: install a custom menu bar depending on configuration
317-
this.menubar = this._register(this.instantiationService.createInstance(CustomMenubarControl));
318-
this.menubar.create(this.menubarContainer);
315+
this.menuBar = this._register(this.instantiationService.createInstance(CustomMenubarControl));
316+
this.menuBar.create(this.menuBarContainer);
319317
}
320318

321319
createContentArea(parent: HTMLElement): HTMLElement {
@@ -328,7 +326,7 @@ export class ActivitybarPart extends Part implements IActivityBarService {
328326
// Home action bar
329327
const homeIndicator = this.environmentService.options?.homeIndicator;
330328
if (homeIndicator) {
331-
this.createHomeBar(homeIndicator.href, homeIndicator.title, homeIndicator.icon);
329+
this.createHomeBar(homeIndicator.command, homeIndicator.title, homeIndicator.icon);
332330
}
333331

334332
// Install menubar if compact
@@ -349,33 +347,28 @@ export class ActivitybarPart extends Part implements IActivityBarService {
349347
return this.content;
350348
}
351349

352-
private createHomeBar(href: string, title: string, icon: string): void {
350+
private createHomeBar(command: string, title: string, icon: string): void {
353351
const homeBarContainer = document.createElement('div');
354352
homeBarContainer.setAttribute('aria-label', nls.localize('homeIndicator', "Home"));
355353
homeBarContainer.setAttribute('role', 'toolbar');
356354
addClass(homeBarContainer, 'home-bar');
357355

358-
const content = assertIsDefined(this.content);
359-
content.prepend(homeBarContainer);
356+
const homeActionBar = this._register(new ActionBar(homeBarContainer, {
357+
orientation: ActionsOrientation.VERTICAL,
358+
animated: false
359+
}));
360360

361-
this.homeIndicatorActionLabel = document.createElement('a');
362-
this.homeIndicatorActionLabel.tabIndex = 0;
363-
this.homeIndicatorActionLabel.title = title;
364-
this.homeIndicatorActionLabel.setAttribute('aria-label', title);
365-
this.homeIndicatorActionLabel.setAttribute('role', 'button');
366-
this.homeIndicatorActionLabel.href = href;
367-
addClasses(this.homeIndicatorActionLabel, 'action-label', 'codicon', `codicon-${icon}`);
361+
homeActionBar.push(this._register(this.instantiationService.createInstance(HomeAction, command, title, icon)), { icon: true, label: false });
368362

369-
homeBarContainer.appendChild(this.homeIndicatorActionLabel);
363+
const content = assertIsDefined(this.content);
364+
content.prepend(homeBarContainer);
370365
}
371366

372367
updateStyles(): void {
373368
super.updateStyles();
374369

375-
// Part container
376370
const container = assertIsDefined(this.getContainer());
377371
const background = this.getColor(ACTIVITY_BAR_BACKGROUND) || '';
378-
const forground = this.getColor(ACTIVITY_BAR_FOREGROUND) || '';
379372
container.style.backgroundColor = background;
380373

381374
const borderColor = this.getColor(ACTIVITY_BAR_BORDER) || this.getColor(contrastBorder) || '';
@@ -387,11 +380,6 @@ export class ActivitybarPart extends Part implements IActivityBarService {
387380
container.style.borderLeftWidth = borderColor && !isPositionLeft ? '1px' : '';
388381
container.style.borderLeftStyle = borderColor && !isPositionLeft ? 'solid' : '';
389382
container.style.borderLeftColor = !isPositionLeft ? borderColor : '';
390-
391-
// Home action label
392-
if (this.homeIndicatorActionLabel) {
393-
this.homeIndicatorActionLabel.style.color = forground;
394-
}
395383
}
396384

397385
private getActivitybarItemColors(theme: IColorTheme): ICompositeBarColors {
@@ -601,8 +589,8 @@ export class ActivitybarPart extends Part implements IActivityBarService {
601589
if (this.globalActivityActionBar) {
602590
availableHeight -= (this.globalActivityActionBar.viewItems.length * ActivitybarPart.ACTION_HEIGHT); // adjust height for global actions showing
603591
}
604-
if (this.menubarContainer) {
605-
availableHeight -= this.menubarContainer.clientHeight;
592+
if (this.menuBarContainer) {
593+
availableHeight -= this.menuBarContainer.clientHeight;
606594
}
607595
this.compositeBar.layout(new Dimension(width, availableHeight));
608596
}

‎src/vs/workbench/browser/parts/activitybar/media/activityaction.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
margin-bottom: 4px;
1010
}
1111

12+
.monaco-workbench .activitybar > .content > .home-bar > .monaco-action-bar .action-item {
13+
margin-bottom: 0;
14+
}
15+
1216
.monaco-workbench .activitybar > .content .composite-bar > .monaco-action-bar .action-item::before,
1317
.monaco-workbench .activitybar > .content .composite-bar > .monaco-action-bar .action-item::after {
1418
position: absolute;

‎src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,13 @@
2626

2727
.monaco-workbench .activitybar > .content > .home-bar {
2828
width: 100%;
29-
height: 35px;
29+
height: 48px;
3030
display: flex;
3131
align-items: center;
3232
justify-content: center;
3333
order: -1;
3434
}
3535

36-
.monaco-workbench .activitybar > .content > .home-bar > .action-label {
37-
font-size: 24px;
38-
}
39-
4036
/** Viewlet Switcher */
4137

4238
.monaco-workbench .activitybar > .content .monaco-action-bar {

‎src/vs/workbench/workbench.web.api.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,9 @@ interface ICommand {
8989
interface IHomeIndicator {
9090

9191
/**
92-
* The location to open when clicking the home indicator.
92+
* The identifier of the command to run when clicking the home indicator.
9393
*/
94-
href: string;
94+
command: string;
9595

9696
/**
9797
* The icon name for the home indicator. This needs to be one of the existing

0 commit comments

Comments
 (0)