From e6132eadbc78a0f22d49fc615f58c45ad0045fcf Mon Sep 17 00:00:00 2001 From: Sandeep Somavarapu Date: Mon, 29 Aug 2016 13:43:20 +0200 Subject: [PATCH] group feature specific styling rules #11095 --- .../themes/electron-browser/editorStyles.ts | 105 +++++++----------- 1 file changed, 42 insertions(+), 63 deletions(-) diff --git a/src/vs/workbench/services/themes/electron-browser/editorStyles.ts b/src/vs/workbench/services/themes/electron-browser/editorStyles.ts index bef0f9c2d59f3..49b22eca99906 100644 --- a/src/vs/workbench/services/themes/electron-browser/editorStyles.ts +++ b/src/vs/workbench/services/themes/electron-browser/editorStyles.ts @@ -69,17 +69,15 @@ export class EditorStylesContribution { public contributeStyles(themeId: string, themeDocument: IThemeDocument): string[] { let cssRules = []; let editorStyleRules = [ - new EditorBackgroundStyleRule(), - new EditorForegroundStyleRule(), - new EditorSelectionStyleRule(), - new EditorSelectionHighlightStyleRule(), - new EditorWordHighlightStyleRule(), - new EditorWordHighlightStrongStyleRule(), - new EditorFindLineHighlightStyleRule(), - new EditorCurrentLineHighlightStyleRule(), - new EditorCursorStyleRule(), - new EditorWhiteSpaceStyleRule(), - new EditorIndentGuidesStyleRule() + new EditorBackgroundStyleRules(), + new EditorForegroundStyleRules(), + new EditorCursorStyleRules(), + new EditorWhiteSpaceStyleRules(), + new EditorIndentGuidesStyleRules(), + new EditorCurrentLineHighlightStyleRules(), + new EditorSelectionStyleRules(), + new EditorWordHighlightStyleRules(), + new EditorFindStyleRules() ]; let editorStyles = new EditorStyles(themeId, themeDocument); if (editorStyles.hasEditorStyleSettings()) { @@ -99,9 +97,14 @@ interface EditorStyleSettings { invisibles?: string; guide?: string; lineHighlight?: string; + selection?: string; selectionHighlight?: string; + findLineHighlight?: string; + findMatch?: string; + currentFindMatch?: string; + wordHighlight?: string; wordHighlightStrong?: string; } @@ -133,24 +136,32 @@ class EditorStyles { } abstract class EditorStyleRule { + + protected addBackgroundColorRule(editorStyles: EditorStyles, selector: string, color: string | Color, rules: string[]): void { + if (color) { + color = color instanceof Color ? color : new Color(color); + rules.push(`.monaco-editor.${editorStyles.getThemeSelector()} ${selector} { background-color: ${color}; }`); + } + } + public abstract getCssRules(editorStyles: EditorStyles): string[]; } -class EditorBackgroundStyleRule extends EditorStyleRule { +class EditorBackgroundStyleRules extends EditorStyleRule { public getCssRules(editorStyles: EditorStyles): string[] { let cssRules = []; let themeSelector = editorStyles.getThemeSelector(); if (editorStyles.getEditorStyleSettings().background) { let background = new Color(editorStyles.getEditorStyleSettings().background); - cssRules.push(`.monaco-editor.${themeSelector} .monaco-editor-background { background-color: ${background}; }`); - cssRules.push(`.monaco-editor.${themeSelector} .glyph-margin { background-color: ${background}; }`); + this.addBackgroundColorRule(editorStyles, '.monaco-editor-background', background, cssRules); + this.addBackgroundColorRule(editorStyles, '.glyph-margin', background, cssRules); cssRules.push(`.${themeSelector} .monaco-workbench .monaco-editor-background { background-color: ${background}; }`); } return cssRules; } } -class EditorForegroundStyleRule extends EditorStyleRule { +class EditorForegroundStyleRules extends EditorStyleRule { public getCssRules(editorStyles: EditorStyles): string[] { let cssRules = []; let themeSelector = editorStyles.getThemeSelector(); @@ -162,80 +173,48 @@ class EditorForegroundStyleRule extends EditorStyleRule { } } -class EditorSelectionStyleRule extends EditorStyleRule { +class EditorSelectionStyleRules extends EditorStyleRule { public getCssRules(editorStyles: EditorStyles): string[] { let cssRules = []; - let themeSelector = editorStyles.getThemeSelector(); if (editorStyles.getEditorStyleSettings().selection) { let selection = new Color(editorStyles.getEditorStyleSettings().selection); - cssRules.push(`.monaco-editor.${themeSelector} .focused .selected-text { background-color: ${selection}; }`); - cssRules.push(`.monaco-editor.${themeSelector} .selected-text { background-color: ${selection.transparent(0.5)}; }`); + this.addBackgroundColorRule(editorStyles, '.focused .selected-text', selection, cssRules); + this.addBackgroundColorRule(editorStyles, '.selected-text', selection.transparent(0.5), cssRules); } - return cssRules; - } -} -class EditorSelectionHighlightStyleRule extends EditorStyleRule { - public getCssRules(editorStyles: EditorStyles): string[] { - let cssRules = []; - let themeSelector = editorStyles.getThemeSelector(); - if (editorStyles.getEditorStyleSettings().selectionHighlight) { - let selection = new Color(editorStyles.getEditorStyleSettings().selectionHighlight); - cssRules.push(`.monaco-editor.${themeSelector} .selectionHighlight { background-color: ${selection}; }`); - } + this.addBackgroundColorRule(editorStyles, '.selectionHighlight', editorStyles.getEditorStyleSettings().selectionHighlight, cssRules); return cssRules; } } -class EditorWordHighlightStyleRule extends EditorStyleRule { +class EditorWordHighlightStyleRules extends EditorStyleRule { public getCssRules(editorStyles: EditorStyles): string[] { let cssRules = []; - let themeSelector = editorStyles.getThemeSelector(); - if (editorStyles.getEditorStyleSettings().wordHighlight) { - let selection = new Color(editorStyles.getEditorStyleSettings().wordHighlight); - cssRules.push(`.monaco-editor.${themeSelector} .wordHighlight { background-color: ${selection}; }`); - } - return cssRules; - } -} - -class EditorWordHighlightStrongStyleRule extends EditorStyleRule { - public getCssRules(editorStyles: EditorStyles): string[] { - let cssRules = []; - let themeSelector = editorStyles.getThemeSelector(); - if (editorStyles.getEditorStyleSettings().wordHighlightStrong) { - let selection = new Color(editorStyles.getEditorStyleSettings().wordHighlightStrong); - cssRules.push(`.monaco-editor.${themeSelector} .wordHighlightStrong { background-color: ${selection}; }`); - } + this.addBackgroundColorRule(editorStyles, '.wordHighlight', editorStyles.getEditorStyleSettings().wordHighlight, cssRules); + this.addBackgroundColorRule(editorStyles, '.wordHighlightStrong', editorStyles.getEditorStyleSettings().wordHighlightStrong, cssRules); return cssRules; } } -class EditorFindLineHighlightStyleRule extends EditorStyleRule { +class EditorFindStyleRules extends EditorStyleRule { public getCssRules(editorStyles: EditorStyles): string[] { let cssRules = []; - let themeSelector = editorStyles.getThemeSelector(); - if (editorStyles.getEditorStyleSettings().findLineHighlight) { - let selection = new Color(editorStyles.getEditorStyleSettings().findLineHighlight); - cssRules.push(`.monaco-editor.${themeSelector} .findLineHighlight { background-color: ${selection}; }`); - } + this.addBackgroundColorRule(editorStyles, '.findLineHighlight', editorStyles.getEditorStyleSettings().findLineHighlight, cssRules); + this.addBackgroundColorRule(editorStyles, '.findMatch', editorStyles.getEditorStyleSettings().findMatch, cssRules); + this.addBackgroundColorRule(editorStyles, '.currentFindMatch', editorStyles.getEditorStyleSettings().currentFindMatch, cssRules); return cssRules; } } -class EditorCurrentLineHighlightStyleRule extends EditorStyleRule { +class EditorCurrentLineHighlightStyleRules extends EditorStyleRule { public getCssRules(editorStyles: EditorStyles): string[] { let cssRules = []; - let themeSelector = editorStyles.getThemeSelector(); - if (editorStyles.getEditorStyleSettings().lineHighlight) { - let lineHighlight = new Color(editorStyles.getEditorStyleSettings().lineHighlight); - cssRules.push(`.monaco-editor.${themeSelector} .current-line { background-color: ${lineHighlight}; border:0; }`); - } + this.addBackgroundColorRule(editorStyles, '.current-line', editorStyles.getEditorStyleSettings().lineHighlight, cssRules); return cssRules; } } -class EditorCursorStyleRule extends EditorStyleRule { +class EditorCursorStyleRules extends EditorStyleRule { public getCssRules(editorStyles: EditorStyles): string[] { let cssRules = []; let themeSelector = editorStyles.getThemeSelector(); @@ -248,7 +227,7 @@ class EditorCursorStyleRule extends EditorStyleRule { } } -class EditorWhiteSpaceStyleRule extends EditorStyleRule { +class EditorWhiteSpaceStyleRules extends EditorStyleRule { public getCssRules(editorStyles: EditorStyles): string[] { let cssRules = []; let themeSelector = editorStyles.getThemeSelector(); @@ -260,7 +239,7 @@ class EditorWhiteSpaceStyleRule extends EditorStyleRule { } } -class EditorIndentGuidesStyleRule extends EditorStyleRule { +class EditorIndentGuidesStyleRules extends EditorStyleRule { public getCssRules(editorStyles: EditorStyles): string[] { let cssRules = []; let themeSelector = editorStyles.getThemeSelector();