From 9a6ed01a53ab9e8ef66e16b680096b778c879cdc Mon Sep 17 00:00:00 2001 From: Ziv Date: Tue, 7 Sep 2021 14:51:38 +0800 Subject: [PATCH] fix: optimize the Color Theme (#395) * fix: set the sidebar width as 230px * feat: add polyfill function for the colorTheme * feat: add default panel title color * fix: optimize the splitPane and scrollable styles * feat: add background color for the minimap * fix: optimize the colorTheme * test: update the Workbench snapshot * refactor: optimize the perfectColors function --- .../themes/monokai-color-theme.json | 1 + src/model/workbench/layout.ts | 2 +- src/services/theme/colorRegistry.ts | 6 ++ src/services/theme/helper.ts | 29 +++++++++- src/style/theme/menubar.scss | 3 +- src/style/theme/panel.scss | 6 +- .../__snapshots__/workbench.test.tsx.snap | 2 +- src/workbench/activityBar/style.scss | 3 +- src/workbench/menuBar/style.scss | 4 ++ src/workbench/panel/style.scss | 1 + src/workbench/style.scss | 55 ++++--------------- 11 files changed, 57 insertions(+), 55 deletions(-) diff --git a/src/extensions/theme-monokai/themes/monokai-color-theme.json b/src/extensions/theme-monokai/themes/monokai-color-theme.json index d2b2b366c..0b94c208d 100644 --- a/src/extensions/theme-monokai/themes/monokai-color-theme.json +++ b/src/extensions/theme-monokai/themes/monokai-color-theme.json @@ -16,6 +16,7 @@ "editor.selectionHighlightBackground": "#575b6180", "editor.selectionBackground": "#878b9180", "minimap.selectionHighlight": "#878b9180", + "minimap.background": "#272822", "editor.wordHighlightBackground": "#4a4a7680", "editor.wordHighlightStrongBackground": "#6a6a9680", "editor.lineHighlightBackground": "#3e3d32", diff --git a/src/model/workbench/layout.ts b/src/model/workbench/layout.ts index c15574e04..86ed7d65e 100644 --- a/src/model/workbench/layout.ts +++ b/src/model/workbench/layout.ts @@ -31,7 +31,7 @@ export class LayoutModel implements ILayout { public sidebar: ISidebarViewState; public menuBar: ViewVisibility; constructor( - splitPanePos: string[] = ['300px', 'auto'], + splitPanePos: string[] = ['230px', 'auto'], horizontalSplitPanePos = ['70%', 'auto'], activityBar = { hidden: false }, panel = { hidden: false, panelMaximized: false }, diff --git a/src/services/theme/colorRegistry.ts b/src/services/theme/colorRegistry.ts index f81b0e06f..a1d3e6ff7 100644 --- a/src/services/theme/colorRegistry.ts +++ b/src/services/theme/colorRegistry.ts @@ -69,6 +69,8 @@ const defaultVS = { 'panel.background': Color.white, 'panel.border': 'rgba(128, 128, 128, 0.35)', + 'panelTitle.activeForeground': 'rgb(66, 66, 66)', + 'panelTitle.activeBorder': 'rgb(66, 66, 66)', 'activityBar.background': 'rgb(51, 51, 51)', 'activityBar.activeBorder': '#fff', @@ -143,6 +145,8 @@ const defaultDark = { 'panel.background': 'rgb(30, 30, 30)', 'panel.border': '#3C3C3C', + 'panelTitle.activeBorder': 'rgb(231, 231, 231)', + 'panelTitle.activeForeground': 'rgb(231, 231, 231)', 'activityBar.background': 'rgb(51, 51, 51)', 'activityBar.activeBorder': '#fff', @@ -204,6 +208,8 @@ const defaultHc = { 'menu.separatorBackground': '#6FC3DF', 'panel.border': '#6FC3DF', + 'panelTitle.activeBorder': 'rgb(231, 231, 231)', + 'panelTitle.activeForeground': 'rgb(231, 231, 231)', 'activityBar.background': 'rgb(51, 51, 51)', 'activityBar.activeBorder': '#fff', diff --git a/src/services/theme/helper.ts b/src/services/theme/helper.ts index 81036b2a8..cc385f888 100644 --- a/src/services/theme/helper.ts +++ b/src/services/theme/helper.ts @@ -1,4 +1,5 @@ -import { IColorTheme } from 'mo/model/colorTheme'; +import { cloneDeep } from 'lodash'; +import { IColors, IColorTheme } from 'mo/model/colorTheme'; import { getBuiltInColors } from 'mo/services/theme/colorRegistry'; import { editor as MonacoEditor } from 'monaco-editor'; @@ -27,11 +28,35 @@ export function convertToCSSVars(colors: object) { `; } +/** + * Perfect the Color Theme, + * because some theme extensions not assign the fully, + * this function automatic helps to polyfill the color theme + * @param colors + * @returns colors + */ +function perfectColors(colors: IColors): IColors { + const nextColors = cloneDeep(colors); + const inheritMap = [ + ['minimap.background', 'editor.background'], + ['minimapSlider.background', 'scrollbarSlider.background'], + ['minimapSlider.hoverBackground', 'scrollbarSlider.hoverBackground'], + ['minimapSlider.activeBackground', 'scrollbarSlider.activeBackground'], + ]; + + inheritMap.forEach(([inheritSourceColor, inheritTargetColor]) => { + if (nextColors[inheritTargetColor]) { + nextColors[inheritSourceColor] = nextColors[inheritTargetColor]; + } + }); + return nextColors; +} + export function getThemeData( theme: IColorTheme ): MonacoEditor.IStandaloneThemeData { const builtInColors = getBuiltInColors(theme); - const colors = Object.assign({}, builtInColors, theme.colors); + const colors = perfectColors(Object.assign(builtInColors, theme.colors)); const convertColors = {}; for (const colorId in colors) { diff --git a/src/style/theme/menubar.scss b/src/style/theme/menubar.scss index 3b05c3e57..39dca1e58 100644 --- a/src/style/theme/menubar.scss +++ b/src/style/theme/menubar.scss @@ -3,8 +3,7 @@ // =============== MenuBar =============== // #{$menuBar} { background-color: var(--activityBar-background); - border-color: var(--activityBar-border); - color: var(--activityBar-foreground); + color: var(--activityBar-inactiveForeground); #{$menu} { &__item { diff --git a/src/style/theme/panel.scss b/src/style/theme/panel.scss index f0b231565..16d126d1c 100644 --- a/src/style/theme/panel.scss +++ b/src/style/theme/panel.scss @@ -6,10 +6,8 @@ border-color: var(--panel-border); &__header { - #{$tab}__item { - color: var(--panelTitle-inactiveForeground); - - &--active { + #{$tabs} { + #{$tab}__item--active { border-color: var(--panelTitle-activeBorder); color: var(--panelTitle-activeForeground); diff --git a/src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap b/src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap index 6d4a4d6a0..c1da26d07 100644 --- a/src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap +++ b/src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap @@ -69,7 +69,7 @@ exports[`Test Workbench Component Match The WorkbenchView snapshot 1`] = ` data-type="SplitPane" >
.scrollbar > .slider { + background: var(--scrollbarSlider-activeBackground); + /* stylelint-disable-next-line*/ + &:hover { + background: var(--scrollbarSlider-hoverBackground); + } + } } }