From c8a9182f0a1b91e7bedfb525a59c2fd330927e79 Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Sat, 18 Apr 2020 15:43:02 +0200 Subject: [PATCH] define find widget codicons --- src/vs/editor/contrib/find/findWidget.ts | 35 +++++++++++-------- .../browser/find/simpleFindReplaceWidget.ts | 16 ++++----- 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/src/vs/editor/contrib/find/findWidget.ts b/src/vs/editor/contrib/find/findWidget.ts index 0e687ff2fc9..130fe7183e1 100644 --- a/src/vs/editor/contrib/find/findWidget.ts +++ b/src/vs/editor/contrib/find/findWidget.ts @@ -39,7 +39,15 @@ import { INotificationService } from 'vs/platform/notification/common/notificati import { IStorageKeysSyncRegistryService } from 'vs/platform/userDataSync/common/storageKeys'; import { Codicon, registerIcon } from 'vs/base/browser/ui/codicons/codicons'; -export const findSelectionIcon = registerIcon('find-selection', Codicon.selection); +const findSelectionIcon = registerIcon('find-selection', Codicon.selection); +const findCollapsedIcon = registerIcon('find-collapsed', Codicon.chevronRight); +const findExpandedIcon = registerIcon('find-expanded', Codicon.chevronDown); + +export const findCloseIcon = registerIcon('find-close', Codicon.close); +export const findReplaceIcon = registerIcon('find-replace', Codicon.replace); +export const findReplaceAllIcon = registerIcon('find-replace-all', Codicon.replaceAll); +export const findPreviousMatchIcon = registerIcon('find-previous-match', Codicon.arrowUp); +export const findNextMatchIcon = registerIcon('find-next-match', Codicon.arrowDown); export interface IFindController { replace(): void; @@ -470,8 +478,6 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas this._replaceAllBtn.setEnabled(this._isVisible && this._isReplaceVisible && findInputIsNonEmpty); dom.toggleClass(this._domNode, 'replaceToggled', this._isReplaceVisible); - this._toggleReplaceBtn.toggleClass('codicon-chevron-right', !this._isReplaceVisible); - this._toggleReplaceBtn.toggleClass('codicon-chevron-down', this._isReplaceVisible); this._toggleReplaceBtn.setExpanded(this._isReplaceVisible); let canReplace = !this._codeEditor.getOption(EditorOption.readOnly); @@ -993,7 +999,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas // Previous button this._prevBtn = this._register(new SimpleButton({ label: NLS_PREVIOUS_MATCH_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.PreviousMatchFindAction), - className: 'codicon codicon-arrow-up', + className: findPreviousMatchIcon.classNames, onTrigger: () => { this._codeEditor.getAction(FIND_IDS.PreviousMatchFindAction).run().then(undefined, onUnexpectedError); } @@ -1002,7 +1008,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas // Next button this._nextBtn = this._register(new SimpleButton({ label: NLS_NEXT_MATCH_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.NextMatchFindAction), - className: 'codicon codicon-arrow-down', + className: findNextMatchIcon.classNames, onTrigger: () => { this._codeEditor.getAction(FIND_IDS.NextMatchFindAction).run().then(undefined, onUnexpectedError); } @@ -1046,7 +1052,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas // Close button this._closeBtn = this._register(new SimpleButton({ label: NLS_CLOSE_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.CloseFindWidgetCommand), - className: 'codicon codicon-close', + className: findCloseIcon.classNames, onTrigger: () => { this._state.change({ isRevealed: false, searchScope: null }, false); }, @@ -1109,7 +1115,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas // Replace one button this._replaceBtn = this._register(new SimpleButton({ label: NLS_REPLACE_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.ReplaceOneAction), - className: 'codicon codicon-replace', + className: findReplaceIcon.classNames, onTrigger: () => { this._controller.replace(); }, @@ -1124,7 +1130,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas // Replace all button this._replaceAllBtn = this._register(new SimpleButton({ label: NLS_REPLACE_ALL_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.ReplaceAllAction), - className: 'codicon codicon-replace-all', + className: findReplaceAllIcon.classNames, onTrigger: () => { this._controller.replaceAll(); } @@ -1154,8 +1160,6 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas this._showViewZone(); } })); - this._toggleReplaceBtn.toggleClass('codicon-chevron-down', this._isReplaceVisible); - this._toggleReplaceBtn.toggleClass('codicon-chevron-right', !this._isReplaceVisible); this._toggleReplaceBtn.setExpanded(this._isReplaceVisible); // Widget @@ -1298,10 +1302,13 @@ export class SimpleButton extends Widget { public setExpanded(expanded: boolean): void { this._domNode.setAttribute('aria-expanded', String(!!expanded)); - } - - public toggleClass(className: string, shouldHaveIt: boolean): void { - dom.toggleClass(this._domNode, className, shouldHaveIt); + if (expanded) { + dom.removeClasses(this._domNode, findCollapsedIcon.classNames); + dom.addClasses(this._domNode, findExpandedIcon.classNames); + } else { + dom.removeClasses(this._domNode, findExpandedIcon.classNames); + dom.addClasses(this._domNode, findCollapsedIcon.classNames); + } } } diff --git a/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindReplaceWidget.ts b/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindReplaceWidget.ts index d065d55b317..a1ef216b498 100644 --- a/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindReplaceWidget.ts +++ b/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindReplaceWidget.ts @@ -12,7 +12,7 @@ import { Delayer } from 'vs/base/common/async'; import { KeyCode } from 'vs/base/common/keyCodes'; import { FindReplaceState, FindReplaceStateChangedEvent } from 'vs/editor/contrib/find/findState'; import { IMessage as InputBoxMessage } from 'vs/base/browser/ui/inputbox/inputBox'; -import { SimpleButton } from 'vs/editor/contrib/find/findWidget'; +import { SimpleButton, findCloseIcon, findNextMatchIcon, findPreviousMatchIcon, findReplaceIcon, findReplaceAllIcon } from 'vs/editor/contrib/find/findWidget'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { editorWidgetBackground, inputActiveOptionBorder, inputActiveOptionBackground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow, editorWidgetForeground } from 'vs/platform/theme/common/colorRegistry'; @@ -90,8 +90,6 @@ export abstract class SimpleFindReplaceWidget extends Widget { } } })); - this._toggleReplaceBtn.toggleClass('codicon-chevron-down', this._isReplaceVisible); - this._toggleReplaceBtn.toggleClass('codicon-chevron-right', !this._isReplaceVisible); this._toggleReplaceBtn.setExpanded(this._isReplaceVisible); this._domNode.appendChild(this._toggleReplaceBtn.domNode); @@ -147,7 +145,7 @@ export abstract class SimpleFindReplaceWidget extends Widget { this.prevBtn = this._register(new SimpleButton({ label: NLS_PREVIOUS_MATCH_BTN_LABEL, - className: 'codicon codicon-arrow-up', + className: findPreviousMatchIcon.classNames, onTrigger: () => { this.find(true); } @@ -155,7 +153,7 @@ export abstract class SimpleFindReplaceWidget extends Widget { this.nextBtn = this._register(new SimpleButton({ label: NLS_NEXT_MATCH_BTN_LABEL, - className: 'codicon codicon-arrow-down', + className: findNextMatchIcon.classNames, onTrigger: () => { this.find(false); } @@ -163,7 +161,7 @@ export abstract class SimpleFindReplaceWidget extends Widget { const closeBtn = this._register(new SimpleButton({ label: NLS_CLOSE_BTN_LABEL, - className: 'codicon codicon-close', + className: findCloseIcon.classNames, onTrigger: () => { this.hide(); } @@ -221,7 +219,7 @@ export abstract class SimpleFindReplaceWidget extends Widget { this._replaceBtn = this._register(new SimpleButton({ label: NLS_REPLACE_BTN_LABEL, - className: 'codicon codicon-replace', + className: findReplaceIcon.classNames, onTrigger: () => { this.replaceOne(); } @@ -230,7 +228,7 @@ export abstract class SimpleFindReplaceWidget extends Widget { // Replace all button this._replaceAllBtn = this._register(new SimpleButton({ label: NLS_REPLACE_ALL_BTN_LABEL, - className: 'codicon codicon-replace-all', + className: findReplaceAllIcon.classNames, onTrigger: () => { this.replaceAll(); } @@ -315,8 +313,6 @@ export abstract class SimpleFindReplaceWidget extends Widget { this._replaceAllBtn.setEnabled(this._isVisible && this._isReplaceVisible && findInputIsNonEmpty); dom.toggleClass(this._domNode, 'replaceToggled', this._isReplaceVisible); - this._toggleReplaceBtn.toggleClass('codicon-chevron-right', !this._isReplaceVisible); - this._toggleReplaceBtn.toggleClass('codicon-chevron-down', this._isReplaceVisible); this._toggleReplaceBtn.setExpanded(this._isReplaceVisible); } -- GitLab