Skip to content

Commit

Permalink
group feature specific styling rules #11095
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandy081
sandy081 committed Aug 29, 2016
1 parent 332908b commit e6132ea
Showing 1 changed file with 42 additions and 63 deletions.
105 changes: 42 additions & 63 deletions src/vs/workbench/services/themes/electron-browser/editorStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()) {
Expand All @@ -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;
}
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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();
Expand Down

0 comments on commit e6132ea

Please sign in to comment.