Skip to content

Commit

Permalink
Address feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@kenneth-marut-work
kenneth-marut-work committed Feb 21, 2022
1 parent 40f04a2 commit 2b7781a
Show file tree
Hide file tree
Showing 14 changed files with 140 additions and 108 deletions.
24 changes: 23 additions & 1 deletion packages/core/src/browser/common-frontend-contribution.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1761,6 +1761,12 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
hc: 'focusBorder'
}, description: "The color of the row's top and bottom border when the row is focused."
},
// Toolbar Action colors should be aligned with https://code.visualstudio.com/api/references/theme-color#action-colors
{
id: 'toolbar.hoverBackground', defaults: {
dark: '#5a5d5e50', light: '#b8b8b850', hc: undefined
}, description: 'Toolbar background when hovering over actions using the mouse.'
},

// Theia Variable colors
{
Expand Down Expand Up @@ -2042,7 +2048,23 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
hc: 'editorWidget.background',
},
description: 'Background color of breadcrumb item picker'
}
},
{
id: 'mainToolbar.background',
defaults: {
dark: Color.lighten('activityBar.background', 0.1),
light: Color.darken('activityBar.background', 0.1),
hc: Color.lighten('activityBar.background', 0.1),
},
description: 'Background color of shell\'s global toolbar'
},
{
id: 'mainToolbar.foreground', defaults: {
dark: Color.darken('activityBar.foreground', 0.1),
light: Color.lighten('activityBar.foreground', 0.1),
hc: Color.lighten('activityBar.foreground', 0.1),
}, description: 'Foreground color of active toolbar item',
},
);
}
}
2 changes: 1 addition & 1 deletion packages/core/src/browser/style/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ blockquote {
}

.action-item:hover {
background-color: rgba(50%, 50%, 50%, 0.2);
background-color: var(--theia-toolbar-hoverBackground);
}

button.theia-button, .theia-button {
Expand Down
8 changes: 4 additions & 4 deletions packages/toolbar/src/browser/abstract-main-toolbar-contribution.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ import { ReactTabBarToolbarContribution, ToolbarAlignment } from './main-toolbar

@injectable()
export abstract class AbstractMainToolbarContribution implements ReactTabBarToolbarContribution {
@inject(KeybindingRegistry) protected readonly keybindingRegistry: KeybindingRegistry;
@inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
@inject(CommandService) protected readonly commandService: CommandService;

abstract id: string;
abstract column: ToolbarAlignment;
abstract priority: number;
Expand All @@ -30,10 +34,6 @@ export abstract class AbstractMainToolbarContribution implements ReactTabBarTool
protected didChangeEmitter = new Emitter<void>();
readonly onDidChange = this.didChangeEmitter.event;

@inject(KeybindingRegistry) protected readonly keybindingRegistry: KeybindingRegistry;
@inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
@inject(CommandService) protected readonly commandService: CommandService;

abstract render(): React.ReactNode;

toJSON(): { id: string; group: string } {
Expand Down
44 changes: 15 additions & 29 deletions packages/toolbar/src/browser/easy-search-toolbar-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

import { CommandContribution, CommandRegistry, CommandService, MenuContribution, MenuModelRegistry } from '@theia/core';
import { Command, CommandContribution, CommandRegistry, CommandService, MenuContribution, MenuModelRegistry, nls } from '@theia/core';
import { ContextMenuRenderer, quickCommand } from '@theia/core/lib/browser';
import { inject, injectable, interfaces } from '@theia/core/shared/inversify';
import * as React from '@theia/core/shared/react';
Expand All @@ -29,32 +29,26 @@ import {
ToolbarAlignment,
} from './main-toolbar-interfaces';

export const SEARCH_FOR_FILE = {
id: 'main.toolbar.search.for.file',
category: 'Search',
label: 'Search for a File',
};

export const FIND_IN_WORKSPACE_ROOT = {
export const FIND_IN_WORKSPACE_ROOT = Command.toLocalizedCommand({
id: 'main.toolbar.find.in.workspace.root',
category: 'Search',
label: 'Search Workspace Root for Text',
};
}, 'theia/toolbar/searchWorkspaceRootForText', nls.getDefaultKey('Search'));

@injectable()
export class EasySearchToolbarItem extends AbstractMainToolbarContribution
implements CommandContribution,
MenuContribution {
id = 'easy-search-toolbar-widget';
column = ToolbarAlignment.RIGHT;
priority = 1;
newGroup = true;

@inject(CommandService) protected readonly commandService: CommandService;
@inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
@inject(SearchInWorkspaceQuickInputService) protected readonly searchPickService: SearchInWorkspaceQuickInputService;
@inject(WorkspaceService) protected readonly workspaceService: WorkspaceService;

id = 'easy-search-toolbar-widget';
column = ToolbarAlignment.RIGHT;
priority = 1;
newGroup = true;

protected handleOnClick = (e: ReactInteraction<HTMLSpanElement>): void => this.doHandleOnClick(e);
protected doHandleOnClick(e: ReactInteraction<HTMLSpanElement>): void {
e.stopPropagation();
Expand All @@ -63,6 +57,7 @@ export class EasySearchToolbarItem extends AbstractMainToolbarContribution
const { bottom } = toolbar.getBoundingClientRect();
const { left } = e.currentTarget.getBoundingClientRect();
this.contextMenuRenderer.render({
includeAnchorArg: false,
menuPath: MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU,
anchor: { x: left, y: bottom },
});
Expand All @@ -74,9 +69,9 @@ export class EasySearchToolbarItem extends AbstractMainToolbarContribution
<div
role='button'
tabIndex={0}
className='icon-wrapper'
className='icon-wrapper action-item item enabled'
onClick={this.handleOnClick}
title='Search for files, text, commands, and more... '
title={nls.localize('theia/toolbar/search/icon', 'Search for files, text, commands, and more...')}
>
<div
className='codicon codicon-search'
Expand All @@ -103,37 +98,28 @@ export class EasySearchToolbarItem extends AbstractMainToolbarContribution
}
},
});
registry.registerCommand(SEARCH_FOR_FILE, {
execute: () => {
this.commandService.executeCommand(quickFileOpen.id);
},
});
}

registerMenus(registry: MenuModelRegistry): void {
registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
commandId: quickCommand.id,
label: 'Find a Command',
label: nls.localize('theia/toolbar/search/findACommand', 'Find a Command'),
order: 'a',
});
registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
commandId: SEARCH_FOR_FILE.id,
commandId: quickFileOpen.id,
order: 'b',
label: nls.localize('theia/toolbar/search/searchForAFile', 'Search for a file')
});
registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
commandId: SearchInWorkspaceCommands.OPEN_SIW_WIDGET.id,
label: 'Search Entire Workspace For Text',
label: nls.localize('theia/toolbar/search/searchWorkspaceForText', 'Search Entire Workspace for Text'),
order: 'c',
});
registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
commandId: FIND_IN_WORKSPACE_ROOT.id,
order: 'd',
});
registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
commandId: 'languages.workspace.symbol',
label: 'Search for a Symbol',
order: 'e',
});
}
}

Expand Down
25 changes: 17 additions & 8 deletions packages/toolbar/src/browser/main-toolbar-command-quick-input-service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

import { Command, CommandRegistry, CommandService } from '@theia/core';
import { Command, CommandRegistry, CommandService, nls } from '@theia/core';
import { QuickCommandService, QuickInputService, QuickPickItem } from '@theia/core/lib/browser';
import { injectable, inject } from '@theia/core/shared/inversify';
import { MainToolbarIconDialogFactory } from './main-toolbar-icon-selector-dialog';
Expand All @@ -35,22 +35,31 @@ export class MainToolbarCommandQuickInputService {
protected iconClass: string | undefined;
protected commandToAdd: Command | undefined;

protected columnQuickPickItems: QuickPickItem[] = [ToolbarAlignment.LEFT, ToolbarAlignment.CENTER, ToolbarAlignment.RIGHT]
.map(column => ({
label: `${column.toUpperCase()} Column`,
id: column,
}));
protected columnQuickPickItems: QuickPickItem[] = [
{
label: nls.localize('theia/toolbar/leftColumn', 'Left Column'),
id: ToolbarAlignment.LEFT,
},
{
label: nls.localize('theia/toolbar/centerColumn', 'Center Column'),
id: ToolbarAlignment.CENTER,
},
{
label: nls.localize('theia/toolbar/rightColumn', 'Right Column'),
id: ToolbarAlignment.RIGHT
},
];

openIconDialog(): void {
this.quickPickItems = this.generateCommandsList();
this.quickInputService.showQuickPick(this.quickPickItems, {
placeholder: 'Find a command to add to the toolbar',
placeholder: nls.localize('theia/toolbar/addCommandPlaceholder', 'Find a command to add to the toolbar'),
});
}

protected openColumnQP(): Promise<QuickPickItem> {
return this.quickInputService.showQuickPick(this.columnQuickPickItems, {
placeholder: 'Where would you like the command added?',
placeholder: nls.localize('theia/toolbar/toolbarLocationPlaceholder', 'Where would you like the command added?')
});
}

Expand Down
52 changes: 29 additions & 23 deletions packages/toolbar/src/browser/main-toolbar-constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,46 +14,53 @@
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

import { MenuPath } from '@theia/core';
import { Command, MenuPath, nls } from '@theia/core';
import { CommonCommands } from '@theia/core/lib/browser';
import URI from '@theia/core/lib/common/uri';
import { UserStorageUri } from '@theia/userstorage/lib/browser';

export namespace MainToolbarCommands {
export const TOGGLE_MAIN_TOOLBAR = {
export const TOGGLE_MAIN_TOOLBAR = Command.toLocalizedCommand({
id: 'main.toolbar.view.toggle',
category: 'View',
category: CommonCommands.VIEW_CATEGORY,
label: 'Toggle Main Toolbar',
};
export const REMOVE_COMMAND_FROM_TOOLBAR = {
}, 'theia/toolbar/toggleToolbar', nls.getDefaultKey(CommonCommands.VIEW_CATEGORY));

export const REMOVE_COMMAND_FROM_TOOLBAR = Command.toLocalizedCommand({
id: 'main.toolbar.remove.command',
category: 'Edit',
category: 'Toolbar',
label: 'Remove Command From Toolbar',
};
export const INSERT_GROUP_LEFT = {
}, 'theia/toolbar/removeCommand');

export const INSERT_GROUP_LEFT = Command.toLocalizedCommand({
id: 'main.toolbar.insert.group.left',
category: 'Edit',
category: 'Toolbar',
label: 'Insert Group Separator (Left)',
};
export const INSERT_GROUP_RIGHT = {
}, 'theia/toolbar/insertGroupLeft');

export const INSERT_GROUP_RIGHT = Command.toLocalizedCommand({
id: 'main.toolbar.insert.group.right',
category: 'Edit',
category: 'Toolbar',
label: 'Insert Group Separator (Right)',
};
export const ADD_COMMAND_TO_TOOLBAR = {
}, 'theia/toolbar/insertGroupRight');

export const ADD_COMMAND_TO_TOOLBAR = Command.toLocalizedCommand({
id: 'main.toolbar.add.command',
category: 'Edit',
category: 'Toolbar',
label: 'Add Command to Toolbar',
};
export const RESET_TOOLBAR = {
}, 'theia/toolbar/addCommand');

export const RESET_TOOLBAR = Command.toLocalizedCommand({
id: 'main.toolbar.restore.defaults',
category: 'Toolbar',
label: 'Restore Toolbar Defaults',
};
export const CUSTOMIZE_TOOLBAR = {
}, 'theia/toolbar/restoreDefaults');

export const CUSTOMIZE_TOOLBAR = Command.toLocalizedCommand({
id: 'main.toolbar.customize.toolbar',
category: 'Toolbar',
label: 'Customize Toolbar (Open JSON)',
};
}, 'theia/toolbar/openJSON');
}

export const UserToolbarURI = Symbol('UserToolbarURI');
Expand All @@ -66,8 +73,7 @@ export namespace MainToolbarMenus {

export type ReactInteraction<T = Element, U = MouseEvent> = React.MouseEvent<T, U> | React.KeyboardEvent<T>;
export namespace ReactKeyboardEvent {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function is(obj: any): obj is React.KeyboardEvent {
return typeof obj === 'object' && 'key' in obj;
export function is(obj: unknown): obj is React.KeyboardEvent {
return typeof obj === 'object' && !!obj && 'key' in obj;
}
}
2 changes: 1 addition & 1 deletion packages/toolbar/src/browser/main-toolbar-controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ export class MainToolbarController {
}

async clearAll(): Promise<boolean> {
return this.withBusy<boolean>(async () => this.storageProvider.clearAll());
return this.withBusy<boolean>(() => this.storageProvider.clearAll());
}

async openOrCreateJSONFile(doOpen = false): Promise<Widget | undefined> {
Expand Down
20 changes: 10 additions & 10 deletions packages/toolbar/src/browser/main-toolbar-icon-selector-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ import * as ReactDOM from '@theia/core/shared/react-dom';
import { injectable, interfaces, inject, postConstruct } from '@theia/core/shared/inversify';
import debounce = require('@theia/core/shared/lodash.debounce');
import { ReactDialog } from '@theia/core/lib/browser/dialogs/react-dialog';
import { DEFAULT_SCROLL_OPTIONS, DialogProps, Message } from '@theia/core/lib/browser';
import { Command, Disposable } from '@theia/core';
import { DEFAULT_SCROLL_OPTIONS, Dialog, DialogProps, Message } from '@theia/core/lib/browser';
import { Command, Disposable, nls } from '@theia/core';
import { FileService } from '@theia/filesystem/lib/browser/file-service';
import { Deferred } from '@theia/core/lib/common/promise-util';
import PerfectScrollbar from 'perfect-scrollbar';
Expand Down Expand Up @@ -117,8 +117,8 @@ export class MainToolbarIconSelectorDialog extends ReactDialog<string | undefine
return (
<div className='icon-selector-options'>
<div className='icon-set-selector-wrapper'>
Icon Set:
{' '}
{nls.localize('theia/toolbar/iconSet', 'Icon Set')}
{': '}
<select
className='main-toolbar-icon-select theia-select'
onChange={this.handleSelectOnChange}
Expand All @@ -131,14 +131,14 @@ export class MainToolbarIconSelectorDialog extends ReactDialog<string | undefine
<div className='icon-fuzzy-filter'>
<input
ref={this.assignFilterRef}
placeholder='Filter Icons'
placeholder={nls.localize('theia/toolbar/filterIcons', 'Filter Icons')}
type='text'
className='icon-filter-input theia-input'
onChange={this.debounceHandleSearch}
spellCheck={false}
/>
</div>
</div>
</div >
);
}

Expand Down Expand Up @@ -166,7 +166,7 @@ export class MainToolbarIconSelectorDialog extends ReactDialog<string | undefine
<div className={`${this.activeIconPrefix} ${icon}`} />
</div>
))
: <div className='search-placeholder'>The search returned no results</div>}
: <div className='search-placeholder'>nls.localizeByDefault('No results found')</div>}
</div>
</div>
);
Expand Down Expand Up @@ -247,7 +247,7 @@ export class MainToolbarIconSelectorDialog extends ReactDialog<string | undefine
onClick={this.doAccept}
>
<span>
Use Default Icon:
{`${nls.localize('theia/toolbar/useDefaultIcon', 'Use Default Icon')}:`}
</span>
<div className={`main-toolbar-default-icon ${this.toolbarCommand.iconClass}`} />
</button>
Expand All @@ -260,14 +260,14 @@ export class MainToolbarIconSelectorDialog extends ReactDialog<string | undefine
className='theia-button main'
onClick={this.doAccept}
>
Select Icon
{nls.localize('theia/toolbar/selectIcon', 'Select Icon')}
</button>
<button
type='button'
className='theia-button secondary'
onClick={this.doClose}
>
Cancel
{Dialog.CANCEL}
</button>

</div>
Expand Down
Loading

0 comments on commit 2b7781a

Please sign in to comment.