Skip to content

Commit 28bcf9d

Browse files
bpaserobpasero
committed
theming - search viewlet
1 parent 9843623 commit 28bcf9d

File tree

4 files changed

+46
-79
lines changed

4 files changed

+46
-79
lines changed

‎src/vs/editor/browser/widget/diffEditorWidget.ts

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
'use strict';
77

88
import 'vs/css!./media/diffEditor';
9-
import * as nls from 'vs/nls';
109
import { RunOnceScheduler } from 'vs/base/common/async';
1110
import { Disposable } from 'vs/base/common/lifecycle';
1211
import * as objects from 'vs/base/common/objects';
@@ -33,8 +32,8 @@ import { ColorId, MetadataConsts, FontStyle } from 'vs/editor/common/modes';
3332
import Event, { Emitter } from 'vs/base/common/event';
3433
import * as editorOptions from 'vs/editor/common/config/editorOptions';
3534
import { registerThemingParticipant, IThemeService, ITheme, getThemeTypeSelector } from 'vs/platform/theme/common/themeService';
36-
import { registerColor, scrollbarShadow } from 'vs/platform/theme/common/colorRegistry';
37-
import { Color, RGBA } from 'vs/base/common/color';
35+
import { scrollbarShadow, diffInserted, diffRemoved, defaultInsertColor, defaultRemoveColor, diffInsertedOutline, diffRemovedOutline } from 'vs/platform/theme/common/colorRegistry';
36+
import { Color } from 'vs/base/common/color';
3837
import { OverviewRulerZone } from 'vs/editor/common/view/overviewZoneManager';
3938
import { IEditorWhitespace } from 'vs/editor/common/viewLayout/whitespaceComputer';
4039

@@ -1946,14 +1945,6 @@ function createFakeLinesDiv(): HTMLElement {
19461945
return r;
19471946
}
19481947

1949-
const defaultInsertColor = Color.fromRGBA(new RGBA(155, 185, 85, 255 * 0.2));
1950-
const defaultRemoveColor = Color.fromRGBA(new RGBA(255, 0, 0, 255 * 0.2));
1951-
1952-
export const diffInserted = registerColor('diffEditor.insertedTextBackground', { dark: defaultInsertColor, light: defaultInsertColor, hc: null }, nls.localize('diffEditorInserted', 'Background color for text that got inserted.'));
1953-
export const diffRemoved = registerColor('diffEditor.removedTextBackground', { dark: defaultRemoveColor, light: defaultRemoveColor, hc: null }, nls.localize('diffEditorRemoved', 'Background color for text that got removed.'));
1954-
export const diffInsertedOutline = registerColor('diffEditor.insertedTextBorder', { dark: null, light: null, hc: '#33ff2eff' }, nls.localize('diffEditorInsertedOutline', 'Outline color for the text that got inserted.'));
1955-
export const diffRemovedOutline = registerColor('diffEditor.removedTextBorder', { dark: null, light: null, hc: '#FF008F' }, nls.localize('diffEditorRemovedOutline', 'Outline color for text that got removed.'));
1956-
19571948
registerThemingParticipant((theme, collector) => {
19581949
let added = theme.getColor(diffInserted);
19591950
if (added) {

‎src/vs/platform/theme/common/colorRegistry.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
import platform = require('vs/platform/platform');
88
import { IJSONSchema } from 'vs/base/common/jsonSchema';
9-
import { Color } from 'vs/base/common/color';
9+
import { Color, RGBA } from 'vs/base/common/color';
1010
import { ITheme } from 'vs/platform/theme/common/themeService';
1111

1212
import nls = require('vs/nls');
@@ -243,6 +243,18 @@ export const editorHoverBorder = registerColor('editorHoverWidget.border', { lig
243243
*/
244244
export const editorActiveLinkForeground = registerColor('editorLink.activeForeground', { dark: '#4E94CE', light: Color.blue, hc: Color.cyan }, nls.localize('activeLinkForeground', 'Color of active links.'));
245245

246+
/**
247+
* Diff Editor Colors
248+
*/
249+
export const defaultInsertColor = Color.fromRGBA(new RGBA(155, 185, 85, 255 * 0.2));
250+
export const defaultRemoveColor = Color.fromRGBA(new RGBA(255, 0, 0, 255 * 0.2));
251+
252+
export const diffInserted = registerColor('diffEditor.insertedTextBackground', { dark: defaultInsertColor, light: defaultInsertColor, hc: null }, nls.localize('diffEditorInserted', 'Background color for text that got inserted.'));
253+
export const diffRemoved = registerColor('diffEditor.removedTextBackground', { dark: defaultRemoveColor, light: defaultRemoveColor, hc: null }, nls.localize('diffEditorRemoved', 'Background color for text that got removed.'));
254+
255+
export const diffInsertedOutline = registerColor('diffEditor.insertedTextBorder', { dark: null, light: null, hc: '#33ff2eff' }, nls.localize('diffEditorInsertedOutline', 'Outline color for the text that got inserted.'));
256+
export const diffRemovedOutline = registerColor('diffEditor.removedTextBorder', { dark: null, light: null, hc: '#FF008F' }, nls.localize('diffEditorRemovedOutline', 'Outline color for text that got removed.'));
257+
246258
// ----- color functions
247259

248260
export function darken(colorValue: ColorValue, factor: number): ColorFunction {

‎src/vs/workbench/parts/search/browser/media/searchviewlet.css

Lines changed: 1 addition & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -203,28 +203,6 @@
203203
font-style: italic;
204204
}
205205

206-
.search-viewlet .checkbox {
207-
display: inline-block;
208-
visibility: hidden;
209-
border: 1px solid rgba(128, 128, 128, 0.5);
210-
width: 0;
211-
height: 12px;
212-
margin-right: 0;
213-
position: relative;
214-
top: 2px;
215-
transition: width 150ms, margin-right 150ms ease-in;
216-
}
217-
218-
.search-viewlet .linematch .checkbox.checked {
219-
background-position: -66px -150px;
220-
}
221-
222-
.search-viewlet .select .linematch .checkbox {
223-
visibility: visible;
224-
width: 12px;
225-
margin-right: 4px;
226-
}
227-
228206
.search-viewlet .query-clear {
229207
background: url("action-query-clear.svg") center center no-repeat;
230208
}
@@ -354,62 +332,27 @@
354332
background: url('excludeSettings-dark.svg') center center no-repeat;
355333
}
356334

357-
.search-viewlet .findInFileMatch,
358-
.monaco-editor .findInFileMatch {
359-
background-color: rgba(234, 92, 0, 0.3);
360-
animation-duration: 0;
361-
animation-name: inherit !important;
362-
}
363-
364335
.search-viewlet .replace.findInFileMatch {
365336
text-decoration: line-through;
366-
background-color: rgba(255, 0, 0, 0.2);
367337
}
368338

369339
.search-viewlet .findInFileMatch,
370340
.search-viewlet .replaceMatch {
371341
white-space: pre;
372342
}
373343

374-
.search-viewlet .replaceMatch {
375-
background-color: rgba(155, 185, 85, 0.5);
376-
}
377-
378344
.hc-black .monaco-workbench .search-viewlet .replaceMatch,
379-
.hc-black .monaco-workbench .search-viewlet .findInFileMatch,
380-
.monaco-editor.hc-black .findInFileMatch {
345+
.hc-black .monaco-workbench .search-viewlet .findInFileMatch {
381346
background: none !important;
382-
border: 1px dotted #f38518;
383347
box-sizing: border-box;
384348
}
385349

386-
.hc-black .monaco-workbench .search-viewlet .replace.findInFileMatch {
387-
border: 1px dashed #FF008F;
388-
}
389-
390-
.hc-black .monaco-workbench .search-viewlet .replaceMatch {
391-
border: 1px dashed rgb(51, 255, 46);
392-
}
393-
394350
.monaco-workbench .search-viewlet a.prominent {
395351
text-decoration: underline;
396352
}
397353

398354
/* Theming */
399355

400-
.search-viewlet .highlight {
401-
color: black;
402-
background-color: rgba(234, 92, 0, 0.3);
403-
}
404-
405-
.vs .search-viewlet .filematch .name {
406-
color: #1E1E1E;
407-
}
408-
409-
.vs .search-viewlet .monaco-tree.focused .monaco-tree-row.selected .filematch .name {
410-
color: #FFF;
411-
}
412-
413356
.vs .search-viewlet .search-widget .toggle-replace-button:hover {
414357
background-color: rgba(0, 0, 0, 0.1) !important;
415358
}
@@ -426,10 +369,6 @@
426369
background-image: url('expando-expanded.svg');
427370
}
428371

429-
.vs-dark .search-viewlet .monaco-tree .filematch .name {
430-
color: #FFF;
431-
}
432-
433372
.vs-dark .search-viewlet .query-clear {
434373
background: url("action-query-clear-dark.svg") center center no-repeat;
435374
}
@@ -440,7 +379,6 @@
440379
}
441380

442381
.vs-dark .search-viewlet .message {
443-
color: #FFF;
444382
opacity: .5;
445383
}
446384

‎src/vs/workbench/parts/search/browser/searchViewlet.ts

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ import { OpenFolderAction, OpenFileFolderAction } from 'vs/workbench/browser/act
5757
import * as Constants from 'vs/workbench/parts/search/common/constants';
5858
import { IListService } from 'vs/platform/list/browser/listService';
5959
import { IThemeService, ITheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
60-
import { editorFindMatchHighlight } from 'vs/platform/theme/common/colorRegistry';
60+
import { editorFindMatchHighlight, diffInserted, diffRemoved, diffInsertedOutline, diffRemovedOutline, activeContrastBorder } from 'vs/platform/theme/common/colorRegistry';
6161
import FileResultsNavigation from 'vs/workbench/browser/fileResultsNavigation';
6262
import { attachListStyler } from 'vs/platform/theme/common/styler';
6363
import { IOutputService } from 'vs/workbench/parts/output/common/output';
@@ -1369,9 +1369,35 @@ export class SearchViewlet extends Viewlet {
13691369
}
13701370

13711371
registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
1372-
let matchHighlightColor = theme.getColor(editorFindMatchHighlight);
1372+
const matchHighlightColor = theme.getColor(editorFindMatchHighlight);
13731373
if (matchHighlightColor) {
1374-
collector.addRule(`.search-viewlet .findInFileMatch { background-color: ${matchHighlightColor}; }`);
1375-
collector.addRule(`.search-viewlet .highlight { background-color: ${matchHighlightColor}; }`);
1374+
collector.addRule(`.monaco-workbench .search-viewlet .findInFileMatch { background-color: ${matchHighlightColor}; }`);
1375+
}
1376+
1377+
const diffInsertedColor = theme.getColor(diffInserted);
1378+
if (diffInsertedColor) {
1379+
collector.addRule(`.monaco-workbench .search-viewlet .replaceMatch { background-color: ${diffInsertedColor}; }`);
1380+
}
1381+
1382+
const diffRemovedColor = theme.getColor(diffRemoved);
1383+
if (diffRemovedColor) {
1384+
collector.addRule(`.monaco-workbench .search-viewlet .replace.findInFileMatch { background-color: ${diffRemovedColor}; }`);
1385+
}
1386+
1387+
const diffInsertedOutlineColor = theme.getColor(diffInsertedOutline);
1388+
if (diffInsertedOutlineColor) {
1389+
collector.addRule(`.monaco-workbench .search-viewlet .replaceMatch:not(:empty) { border: 1px dashed ${diffInsertedOutlineColor}; }`);
1390+
}
1391+
1392+
const diffRemovedOutlineColor = theme.getColor(diffRemovedOutline);
1393+
if (diffRemovedOutlineColor) {
1394+
collector.addRule(`.monaco-workbench .search-viewlet .replace.findInFileMatch { border: 1px dashed ${diffRemovedOutlineColor}; }`);
1395+
}
1396+
1397+
const activeContrastBorderColor = theme.getColor(activeContrastBorder);
1398+
if (activeContrastBorderColor) {
1399+
collector.addRule(`
1400+
.monaco-workbench .search-viewlet .findInFileMatch { border: 1px dashed ${activeContrastBorderColor}; }
1401+
`);
13761402
}
13771403
});

0 commit comments

Comments
 (0)