Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new header bar #177

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion extensions/pearai-submodule
Submodule pearai-submodule updated 139 files
6 changes: 3 additions & 3 deletions scripts/code.sh
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
set -e

# Comment out if pearai submodule does not need to be recompiled. Speeds things up.
cd extensions/pearai-submodule
./scripts/install-and-build.sh
cd ../..
# cd extensions/pearai-submodule
# ./scripts/install-and-build.sh
# cd ../..

if [[ "$OSTYPE" == "darwin"* ]]; then
realpath() { [[ $1 = /* ]] && echo "$1" || echo "$PWD/${1#./}"; }
Expand Down
2 changes: 1 addition & 1 deletion src/vs/workbench/api/browser/viewsExtensionPoint.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const viewsContainersContribution: IJSONSchema = {
items: viewsContainerSchema
},
"auxiliarybar": {
description: localize('views.container.auxiliarybar', "Contribute views containers to Secondary Side Bar"),
description: localize('views.container.auxiliarybar', "Contribute views containers to PearAI Side Bar"),
type: 'array',
items: viewsContainerSchema
}
Expand Down
12 changes: 6 additions & 6 deletions src/vs/workbench/browser/actions/layoutActions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ MenuRegistry.appendMenuItems([{
group: '3_workbench_layout_move',
command: {
id: ToggleSidebarPositionAction.ID,
title: localize('move second sidebar left', "Move Secondary Side Bar Left")
title: localize('move second sidebar left', "Move PearAI Side Bar Left")
},
when: ContextKeyExpr.and(ContextKeyExpr.notEquals('config.workbench.sideBar.location', 'right'), ContextKeyExpr.equals('viewLocation', ViewContainerLocationToString(ViewContainerLocation.AuxiliaryBar))),
order: 1
Expand All @@ -252,7 +252,7 @@ MenuRegistry.appendMenuItems([{
group: '3_workbench_layout_move',
command: {
id: ToggleSidebarPositionAction.ID,
title: localize('move second sidebar right', "Move Secondary Side Bar Right")
title: localize('move second sidebar right', "Move PearAI Side Bar Right")
},
when: ContextKeyExpr.and(ContextKeyExpr.equals('config.workbench.sideBar.location', 'right'), ContextKeyExpr.equals('viewLocation', ViewContainerLocationToString(ViewContainerLocation.AuxiliaryBar))),
order: 1
Expand Down Expand Up @@ -953,7 +953,7 @@ registerAction2(class extends Action2 {
if (!hasAddedView) {
results.push({
type: 'separator',
label: localize('secondarySideBarContainer', "Secondary Side Bar / {0}", containerModel.title)
label: localize('secondarySideBarContainer', "PearAI Side Bar / {0}", containerModel.title)
});
hasAddedView = true;
}
Expand Down Expand Up @@ -1060,7 +1060,7 @@ class MoveFocusedViewAction extends Action2 {
if (!(isViewSolo && currentLocation === ViewContainerLocation.AuxiliaryBar)) {
items.push({
id: '_.auxiliarybar.newcontainer',
label: localize('moveFocusedView.newContainerInSidePanel', "New Secondary Side Bar Entry")
label: localize('moveFocusedView.newContainerInSidePanel', "New PearAI Side Bar Entry")
});
}

Expand Down Expand Up @@ -1108,7 +1108,7 @@ class MoveFocusedViewAction extends Action2 {

items.push({
type: 'separator',
label: localize('secondarySideBar', "Secondary Side Bar")
label: localize('secondarySideBar', "PearAI Side Bar")
});

const pinnedAuxPanels = paneCompositePartService.getPinnedPaneCompositeIds(ViewContainerLocation.AuxiliaryBar);
Expand Down Expand Up @@ -1390,7 +1390,7 @@ if (!isMacintosh || !isNative) {
ToggleVisibilityActions.push(...[
CreateToggleLayoutItem(ToggleActivityBarVisibilityActionId, ContextKeyExpr.notEquals('config.workbench.activityBar.location', 'hidden'), localize('activityBar', "Activity Bar"), { whenA: ContextKeyExpr.equals('config.workbench.sideBar.location', 'left'), iconA: activityBarLeftIcon, iconB: activityBarRightIcon }),
CreateToggleLayoutItem(ToggleSidebarVisibilityAction.ID, SideBarVisibleContext, localize('sideBar', "Primary Side Bar"), { whenA: ContextKeyExpr.equals('config.workbench.sideBar.location', 'left'), iconA: panelLeftIcon, iconB: panelRightIcon }),
CreateToggleLayoutItem(ToggleAuxiliaryBarAction.ID, AuxiliaryBarVisibleContext, localize('secondarySideBar', "Secondary Side Bar"), { whenA: ContextKeyExpr.equals('config.workbench.sideBar.location', 'left'), iconA: panelRightIcon, iconB: panelLeftIcon }),
CreateToggleLayoutItem(ToggleAuxiliaryBarAction.ID, AuxiliaryBarVisibleContext, localize('secondarySideBar', "PearAI Side Bar"), { whenA: ContextKeyExpr.equals('config.workbench.sideBar.location', 'left'), iconA: panelRightIcon, iconB: panelLeftIcon }),
CreateToggleLayoutItem(TogglePanelAction.ID, PanelVisibleContext, localize('panel', "Panel"), panelIcon),
CreateToggleLayoutItem(ToggleStatusbarVisibilityAction.ID, ContextKeyExpr.equals('config.workbench.statusBar.visible', true), localize('statusBar', "Status Bar"), statusBarIcon),
CreateToggleLayoutItem(TogglePearOverlayAction.ID, PearAIVisibleContext, 'PearAI', pearaiIcon)
Expand Down
2 changes: 1 addition & 1 deletion src/vs/workbench/browser/layout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2453,7 +2453,7 @@ export abstract class Layout extends Disposable implements IWorkbenchLayoutServi
comment: 'Information about the layout of the workbench during statup';
activityBarVisible: { classification: 'SystemMetaData'; purpose: 'FeatureInsight'; comment: 'Whether or the not the activity bar is visible' };
sideBarVisible: { classification: 'SystemMetaData'; purpose: 'FeatureInsight'; comment: 'Whether or the not the primary side bar is visible' };
auxiliaryBarVisible: { classification: 'SystemMetaData'; purpose: 'FeatureInsight'; comment: 'Whether or the not the secondary side bar is visible' };
auxiliaryBarVisible: { classification: 'SystemMetaData'; purpose: 'FeatureInsight'; comment: 'Whether or the not the PearAI Side Bar is visible' };
panelVisible: { classification: 'SystemMetaData'; purpose: 'FeatureInsight'; comment: 'Whether or the not the panel is visible' };
statusbarVisible: { classification: 'SystemMetaData'; purpose: 'FeatureInsight'; comment: 'Whether or the not the status bar is visible' };
sideBarPosition: { classification: 'SystemMetaData'; purpose: 'FeatureInsight'; comment: 'Whether the primary side bar is on the left or right' };
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@ const auxiliaryBarLeftOffIcon = registerIcon('auxiliarybar-left-off-layout-icon'
export class ToggleAuxiliaryBarAction extends Action2 {

static readonly ID = 'workbench.action.toggleAuxiliaryBar';
static readonly LABEL = localize2('toggleAuxiliaryBar', "Toggle Secondary Side Bar Visibility");
static readonly LABEL = localize2('toggleAuxiliaryBar', "Toggle PearAI Side Bar Visibility");

constructor() {
super({
id: ToggleAuxiliaryBarAction.ID,
title: ToggleAuxiliaryBarAction.LABEL,
toggled: {
condition: AuxiliaryBarVisibleContext,
title: localize('secondary sidebar', "Secondary Side Bar"),
title: localize('secondary sidebar', "PearAI Side Bar"),
mnemonicTitle: localize({ key: 'secondary sidebar mnemonic', comment: ['&& denotes a mnemonic'] }, "Secondary Si&&de Bar"),
},

Expand Down Expand Up @@ -84,7 +84,7 @@ registerAction2(ToggleAuxiliaryBarAction);
registerAction2(class FocusAuxiliaryBarAction extends Action2 {

static readonly ID = 'workbench.action.focusAuxiliaryBar';
static readonly LABEL = localize2('focusAuxiliaryBar', "Focus into Secondary Side Bar");
static readonly LABEL = localize2('focusAuxiliaryBar', "Focus into PearAI Side Bar");

constructor() {
super({
Expand Down Expand Up @@ -117,7 +117,7 @@ MenuRegistry.appendMenuItems([
group: '2_pane_toggles',
command: {
id: ToggleAuxiliaryBarAction.ID,
title: localize('toggleSecondarySideBar', "Toggle Secondary Side Bar"),
title: localize('toggleSecondarySideBar', "Toggle PearAI Side Bar"),
toggled: { condition: AuxiliaryBarVisibleContext, icon: auxiliaryBarLeftIcon },
icon: auxiliaryBarLeftOffIcon,
},
Expand All @@ -130,7 +130,7 @@ MenuRegistry.appendMenuItems([
group: '2_pane_toggles',
command: {
id: ToggleAuxiliaryBarAction.ID,
title: localize('toggleSecondarySideBar', "Toggle Secondary Side Bar"),
title: localize('toggleSecondarySideBar', "Toggle PearAI Side Bar"),
toggled: { condition: AuxiliaryBarVisibleContext, icon: auxiliaryBarRightIcon },
icon: auxiliaryBarRightOffIcon,
},
Expand All @@ -143,7 +143,7 @@ MenuRegistry.appendMenuItems([
group: '3_workbench_layout_move',
command: {
id: ToggleAuxiliaryBarAction.ID,
title: localize2('hideAuxiliaryBar', 'Hide Secondary Side Bar'),
title: localize2('hideAuxiliaryBar', 'Hide PearAI Side Bar'),
},
when: ContextKeyExpr.and(AuxiliaryBarVisibleContext, ContextKeyExpr.equals('viewLocation', ViewContainerLocationToString(ViewContainerLocation.AuxiliaryBar))),
order: 2
Expand All @@ -155,7 +155,7 @@ registerAction2(class extends SwitchCompositeViewAction {
constructor() {
super({
id: 'workbench.action.previousAuxiliaryBarView',
title: localize2('previousAuxiliaryBarView', 'Previous Secondary Side Bar View'),
title: localize2('previousAuxiliaryBarView', 'Previous PearAI Side Bar View'),
category: Categories.View,
f1: true
}, ViewContainerLocation.AuxiliaryBar, -1);
Expand All @@ -166,7 +166,7 @@ registerAction2(class extends SwitchCompositeViewAction {
constructor() {
super({
id: 'workbench.action.nextAuxiliaryBarView',
title: localize2('nextAuxiliaryBarView', 'Next Secondary Side Bar View'),
title: localize2('nextAuxiliaryBarView', 'Next PearAI Side Bar View'),
category: Categories.View,
f1: true
}, ViewContainerLocation.AuxiliaryBar, 1);
Expand Down
49 changes: 37 additions & 12 deletions src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { HiddenItemStrategy, WorkbenchToolBar } from '../../../../platform/actio
import { ActionViewItem, IActionViewItemOptions } from '../../../../base/browser/ui/actionbar/actionViewItems.js';
import { CompositeMenuActions } from '../../actions.js';
import { IHoverService } from '../../../../platform/hover/browser/hover.js';
import { AuxiliaryTitleBar } from './auxiliaryTitleBar.js';

export class AuxiliaryBarPart extends AbstractPaneCompositePart {

Expand Down Expand Up @@ -201,8 +202,8 @@ export class AuxiliaryBarPart extends AbstractPaneCompositePart {
actions.push(...[
new Separator(),
new SubmenuAction('workbench.action.panel.position', localize('activity bar position', "Activity Bar Position"), positionActions),
toAction({ id: ToggleSidebarPositionAction.ID, label: currentPositionRight ? localize('move second side bar left', "Move Secondary Side Bar Left") : localize('move second side bar right', "Move Secondary Side Bar Right"), run: () => this.commandService.executeCommand(ToggleSidebarPositionAction.ID) }),
toAction({ id: ToggleAuxiliaryBarAction.ID, label: localize('hide second side bar', "Hide Secondary Side Bar"), run: () => this.commandService.executeCommand(ToggleAuxiliaryBarAction.ID) })
toAction({ id: ToggleSidebarPositionAction.ID, label: currentPositionRight ? localize('move second side bar left', "Move PearAI Side Bar Left") : localize('move second side bar right', "Move PearAI Side Bar Right"), run: () => this.commandService.executeCommand(ToggleSidebarPositionAction.ID) }),
toAction({ id: ToggleAuxiliaryBarAction.ID, label: localize('hide second side bar', "Hide PearAI Side Bar"), run: () => this.commandService.executeCommand(ToggleAuxiliaryBarAction.ID) })
]);
}

Expand All @@ -224,22 +225,46 @@ export class AuxiliaryBarPart extends AbstractPaneCompositePart {

protected override createHeaderArea() {
const headerArea = super.createHeaderArea();

// Ensure header area has composite header class for styling
headerArea.classList.add('composite', 'header');

// Create and append the composite bar container first
const compositeBarContainer = $('.composite-bar-container');
headerArea.appendChild(compositeBarContainer);

// Create the global header container
const globalHeaderContainer = $('.auxiliary-bar-global-header');
headerArea.appendChild(globalHeaderContainer);

// Add auxillary header action
const menu = this.headerFooterCompositeBarDispoables.add(this.instantiationService.createInstance(CompositeMenuActions, MenuId.AuxiliaryBarHeader, undefined, undefined));
// Create our custom title bar container
const customTitleBarContainer = $('.custom-title-container');
headerArea.appendChild(customTitleBarContainer);

const toolBar = this.headerFooterCompositeBarDispoables.add(this.instantiationService.createInstance(WorkbenchToolBar, globalHeaderContainer, {
actionViewItemProvider: (action, options) => this.headerActionViewItemProvider(action, options),
orientation: ActionsOrientation.HORIZONTAL,
hiddenItemStrategy: HiddenItemStrategy.NoHide,
getKeyBinding: action => this.keybindingService.lookupKeybinding(action.id),
}));
// Create our custom title bar
this.headerFooterCompositeBarDispoables.add(
this.instantiationService.createInstance(AuxiliaryTitleBar, customTitleBarContainer)
);

// Add auxiliary header actions
const menu = this.headerFooterCompositeBarDispoables.add(
this.instantiationService.createInstance(CompositeMenuActions, MenuId.AuxiliaryBarHeader, undefined, undefined)
);

const toolBar = this.headerFooterCompositeBarDispoables.add(
this.instantiationService.createInstance(WorkbenchToolBar, globalHeaderContainer, {
actionViewItemProvider: (action, options) => this.headerActionViewItemProvider(action, options),
orientation: ActionsOrientation.HORIZONTAL,
hiddenItemStrategy: HiddenItemStrategy.NoHide,
getKeyBinding: action => this.keybindingService.lookupKeybinding(action.id),
})
);

toolBar.setActions(prepareActions(menu.getPrimaryActions()));
this.headerFooterCompositeBarDispoables.add(menu.onDidChange(() => toolBar.setActions(prepareActions(menu.getPrimaryActions()))));
this.headerFooterCompositeBarDispoables.add(menu.onDidChange(() =>
toolBar.setActions(prepareActions(menu.getPrimaryActions()))
));

headerArea.appendChild(globalHeaderContainer);
return headerArea;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Codicon } from '../../../../base/common/codicons.js';
import { Disposable } from '../../../../base/common/lifecycle.js';
import { ICommandService } from '../../../../platform/commands/common/commands.js';
import { EventType, addDisposableListener } from '../../../../base/browser/dom.js';

export class AuxiliaryTitleBar extends Disposable {
private container: HTMLElement;
private readonly iconLabels = [
{ icon: Codicon.layoutPanel, title: 'Toggle Panel', command: 'workbench.action.togglePanel' },
{ icon: Codicon.layoutSidebarRight, title: 'Toggle PearAI Sidebar', command: 'workbench.action.toggleAuxiliaryBar' },
{ icon: Codicon.layoutCentered, title: 'Toggle Centered Layout', command: 'workbench.action.toggleCenteredLayout' },
];

constructor(
parent: HTMLElement,
@ICommandService private readonly commandService: ICommandService
) {
super();

// Create the title bar container
this.container = document.createElement('div');
this.container.classList.add('auxiliary-custom-titlebar');

// Insert at the beginning of the parent
parent.insertBefore(this.container, parent.firstChild);

this.renderIcons();
}

private renderIcons(): void {
this.iconLabels.forEach(({ icon, title, command }) => {
const button = document.createElement('button');
button.classList.add('monaco-button', 'codicon', `codicon-${icon.id}`);
button.title = title;

this._register(addDisposableListener(button, EventType.CLICK, () => {
this.commandService.executeCommand(command);
}));

this.container.appendChild(button);
});
}

override dispose(): void {
super.dispose();
this.container.remove();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -94,3 +94,83 @@
.monaco-workbench .auxiliarybar.pane-composite-part > .title.has-composite-bar > .title-actions .monaco-action-bar .action-item {
max-width: 150px;
}

.monaco-workbench .part.auxiliarybar .composite.header {
display: flex;
flex-direction: column;
}

.monaco-workbench .part.auxiliarybar .auxiliary-bar-global-header {
order: 1;
}

.monaco-workbench .part.auxiliarybar .custom-title-container {
order: 2;
width: 100%;
display: flex;
flex-direction: column;
background-color: var(--vscode-sideBar-background);
border-bottom: 1px solid var(--vscode-sideBar-border);
}

.monaco-workbench .part.auxiliarybar .auxiliary-titlebar {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Styles for .auxiliary-titlebar and .auxiliary-custom-titlebar are nearly identical. Consider refactoring to reduce duplication.

display: flex;
align-items: center;
justify-content: flex-end;
padding: 4px 8px;
height: 35px;
box-sizing: border-box;
}

.monaco-workbench .part.auxiliarybar .auxiliary-titlebar button {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
background: none;
border-radius: 4px;
margin-left: 4px;
color: var(--vscode-sideBarTitle-foreground);
cursor: pointer;
}

.monaco-workbench .part.auxiliarybar .auxiliary-titlebar button:hover {
background-color: var(--vscode-toolbar-hoverBackground);
}

.monaco-workbench .part.auxiliarybar .auxiliary-titlebar button:active {
background-color: var(--vscode-toolbar-activeBackground);
}

.monaco-workbench .part.auxiliarybar .auxiliary-custom-titlebar {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 4px 8px;
height: 35px;
box-sizing: border-box;
}

.monaco-workbench .part.auxiliarybar .auxiliary-custom-titlebar button {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
background: none;
border-radius: 4px;
margin-left: 4px;
color: var(--vscode-sideBarTitle-foreground);
cursor: pointer;
}

.monaco-workbench .part.auxiliarybar .auxiliary-custom-titlebar button:hover {
background-color: var(--vscode-toolbar-hoverBackground);
}

.monaco-workbench .part.auxiliarybar .auxiliary-custom-titlebar button:active {
background-color: var(--vscode-toolbar-activeBackground);
}
2 changes: 1 addition & 1 deletion src/vs/workbench/browser/parts/paneCompositeBar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export class PaneCompositeBar extends Disposable {
private createMoveAction(viewContainer: ViewContainer, newLocation: ViewContainerLocation, defaultLocation: ViewContainerLocation): IAction {
return toAction({
id: `moveViewContainerTo${newLocation}`,
label: newLocation === ViewContainerLocation.Panel ? localize('panel', "Panel") : newLocation === ViewContainerLocation.Sidebar ? localize('sidebar', "Primary Side Bar") : localize('auxiliarybar', "Secondary Side Bar"),
label: newLocation === ViewContainerLocation.Panel ? localize('panel', "Panel") : newLocation === ViewContainerLocation.Sidebar ? localize('sidebar', "Primary Side Bar") : localize('auxiliarybar', "PearAI Side Bar"),
run: () => {
let index: number | undefined;
if (newLocation !== defaultLocation) {
Expand Down
Loading
Loading