microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-07-07 17:44:05 -05:00
Code Issues Packages Projects Releases 177 Wiki Activity

[theme] rename editorFindWidgetBackground to editorWidgetBackground, add editorWidgetShadow and use in findOptionsWidget

Browse Source
This commit is contained in:
Martin Aeschlimann
2017-04-12 16:25:20 +02:00
parent 8ae90c012e
commit 59a41a7cd6
7 changed files with 33 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/theme-abyss/themes/abyss-color-theme.json
View File

@@ -280,7 +280,7 @@
"editorMarkerNavigationError": "#FF0000",
"editorMarkerNavigationWarning": "#00FF00",
"editorFindWidgetBackground": "#262641",
"editorWidgetBackground": "#262641",
// Workbench Colors
"tabsContainerBackground": "#1c1c2a",

2
extensions/theme-solarized-light/themes/solarized-light-color-theme.json
View File

@@ -303,7 +303,7 @@
"activityBarBackground": "#DDD6C1",
"activityBarDragAndDropBackground": "#EEE8D5",
"activityBadgeBackground": "#B58900",
"editorFindWidgetBackground": "#EEE8D5",
"editorWidgetBackground": "#EEE8D5",
"inputBoxBackground": "#DDD6C1",
"inputBoxForeground": "#586E75",
"inputBoxActiveOptionBorder": "#2AA19899",

20
src/vs/editor/contrib/find/browser/findOptionsWidget.css
View File

@@ -1,20 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-editor .findOptionsWidget {
background-color: #EFEFF2;
box-shadow: 0 2px 8px #A8A8A8;
}
.monaco-editor.vs-dark .findOptionsWidget {
background-color: #2D2D30;
box-shadow: 0 2px 8px #000;
}
.monaco-editor.hc-black .findOptionsWidget {
border: 2px solid #6FC3DF;
background: #0C141F;
box-shadow: none;
}

23
src/vs/editor/contrib/find/browser/findOptionsWidget.ts
View File

@@ -5,7 +5,6 @@
'use strict';
import 'vs/css!./findOptionsWidget';
import * as dom from 'vs/base/browser/dom';
import { Widget } from 'vs/base/browser/ui/widget';
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
@@ -14,8 +13,8 @@ import { FIND_IDS } from 'vs/editor/contrib/find/common/findModel';
import { FindReplaceState } from 'vs/editor/contrib/find/common/findState';
import { CaseSensitiveCheckbox, WholeWordsCheckbox } from 'vs/base/browser/ui/findinput/findInputCheckboxes';
import { RunOnceScheduler } from 'vs/base/common/async';
import { IThemeService, ITheme } from "vs/platform/theme/common/themeService";
import { inputActiveOptionBorder } from "vs/platform/theme/common/colorRegistry";
import { IThemeService, ITheme, registerThemingParticipant } from "vs/platform/theme/common/themeService";
import { inputActiveOptionBorder, editorWidgetBackground, highContrastBorder, editorWidgetShadow } from "vs/platform/theme/common/colorRegistry";
export class FindOptionsWidget extends Widget implements IOverlayWidget {
@@ -170,3 +169,21 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
this.wholeWords.style(inputStyles);
}
}
registerThemingParticipant((theme, collector) => {
let widgetBackground = theme.getColor(editorWidgetBackground);
if (widgetBackground) {
collector.addRule(`.monaco-editor.${theme.selector} .findOptionsWidget { background-color: ${widgetBackground}; }`);
}
let widgetShadow = theme.getColor(editorWidgetShadow);
if (widgetShadow) {
collector.addRule(`.monaco-editor.${theme.selector} .findOptionsWidget { box-shadow: 0 2px 8px ${widgetShadow}; }`);
}
let hcBorder = theme.getColor(highContrastBorder);
if (hcBorder) {
collector.addRule(`.monaco-editor.${theme.selector} .findOptionsWidget { border: 2px solid ${hcBorder}; }`);
}
});

9
src/vs/editor/contrib/find/browser/findWidget.css
View File

@@ -284,15 +284,6 @@
animation-name: inherit !important;
}
/* Theming */
.monaco-editor .find-widget {
box-shadow: 0 2px 8px #A8A8A8;
}
.monaco-editor.vs-dark .find-widget {
box-shadow: 0 2px 8px #000;
}
.monaco-editor.hc-black .find-widget .previous,
.monaco-editor.vs-dark .find-widget .previous {
background-image: url('images/previous-inverse.svg');

11
src/vs/editor/contrib/find/browser/findWidget.ts
View File

@@ -26,7 +26,7 @@ import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/c
import { CONTEXT_FIND_INPUT_FOCUSSED } from 'vs/editor/contrib/find/common/findController';
import { ITheme, registerThemingParticipant, IThemeService } from 'vs/platform/theme/common/themeService';
import { Color } from 'vs/base/common/color';
import { editorFindRangeHighlight, editorFindMatch, editorFindMatchHighlight, highContrastOutline, highContrastBorder, inputBackground as findInputBackground, editorFindWidgetBackground, inputActiveOptionBorder } from "vs/platform/theme/common/colorRegistry";
import { editorFindRangeHighlight, editorFindMatch, editorFindMatchHighlight, highContrastOutline, highContrastBorder, inputBackground as findInputBackground, editorWidgetBackground, inputActiveOptionBorder, editorWidgetShadow } from "vs/platform/theme/common/colorRegistry";
export interface IFindController {
replace(): void;
@@ -803,9 +803,14 @@ registerThemingParticipant((theme, collector) => {
addBackgroundColorRule('.find-widget .monaco-findInput', inputBackground);
addBackgroundColorRule('.find-widget .replace-input', inputBackground);
let widgetBackground = theme.getColor(editorFindWidgetBackground);
let widgetBackground = theme.getColor(editorWidgetBackground);
addBackgroundColorRule('.find-widget', widgetBackground);
let widgetShadow = theme.getColor(editorWidgetShadow);
if (widgetShadow) {
collector.addRule(`.monaco-editor.${theme.selector} .find-widget { box-shadow: 0 2px 8px ${widgetShadow}; }`);
}
let hcOutline = theme.getColor(highContrastOutline);
if (hcOutline) {
collector.addRule(`.monaco-editor.${theme.selector} .findScope { border: 1px dashed ${hcOutline.transparent(0.4)}; }`);
@@ -814,7 +819,7 @@ registerThemingParticipant((theme, collector) => {
}
let hcBorder = theme.getColor(highContrastBorder);
if (hcBorder) {
collector.addRule(`.monaco-editor.${theme.selector} .find-widget { border: 2px solid ${hcBorder}; box-shadow: none; }`);
collector.addRule(`.monaco-editor.${theme.selector} .find-widget { border: 2px solid ${hcBorder}; }`);
}
});

4
src/vs/platform/theme/common/colorRegistry.ts
View File

@@ -179,7 +179,9 @@ export const editorLinkForeground = registerColor('editorLinkForeground', { dark
/**
* Find widget
*/
export const editorFindWidgetBackground = registerColor('editorFindWidgetBackground', { dark: '#2D2D30', light: '#EFEFF2', hc: '#0C141F' }, nls.localize('editorFindWidgetBackground', 'Find widget background.'));
export const editorWidgetBackground = registerColor('editorWidgetBackground', { dark: '#2D2D30', light: '#EFEFF2', hc: '#0C141F' }, nls.localize('editorWidgetBackground', 'Background color of editor widgets, such as find/replace.'));
export const editorWidgetShadow = registerColor('editorWidgetShadow', { dark: '#000000', light: '#A8A8A8', hc: null }, nls.localize('editorWidgetShadow', 'Shadow color of editor widgets such as find/replace.'));
// ----- color functions