From 82cfb4587b4ac595d466acd8b2802358bd1dc38a Mon Sep 17 00:00:00 2001 From: Alessio Occhipinti Date: Fri, 18 May 2018 13:47:22 +0200 Subject: [PATCH] Small refactor + UX improvements [WIP] (#190) * chore: small cleanup helper * chore: adding interfaces for icon variants * feat: You can now switch between Material Theme icons * chore: helpers small fix * chore(helpers): small fix helpers * refactor: refactoring fixIcons command, ready for new prop autoFix * refactor: accentsSetter command, ready for autoFix prop * chore: added new exports file for all commands * refactor: main theme file, ready for autoFix prop * chore: added listener also when changing iconTheme * feat: autoApplyIcons added as option and toggleApplyIcons as command * chore: added check for autoApplyIcons flag. Removed listen icon change * feat: Notification shows up when the window needs reload * chore: Update CTA's * chore: Make consistent indent guides and add support to editorIndentGuide.activeBackground Close #188 * chore: fix check on CTA ok * chore: split up configurationChange and changelog (added to commands) * chore: small change settings method * feat: Now the theme will auto fix if needed on change icons theme --- .gulp/index.ts | 1 + .gulp/tasks/icons-variants-json.ts | 37 +++++ extensions/commands/accents-setter/index.ts | 68 ++++----- extensions/commands/index.ts | 4 + extensions/commands/show-changelog/index.ts | 28 ++++ extensions/commands/theme-icons/index.ts | 140 +++++++++--------- .../commands/toggle-apply-icons/index.ts | 11 ++ extensions/defaults.json | 6 + extensions/helpers/configuration-change.ts | 42 ++++++ extensions/helpers/fs.ts | 9 ++ extensions/helpers/messages.ts | 14 ++ extensions/helpers/settings.ts | 19 ++- ...{changelog.ts => should-show-changelog.ts} | 28 +--- extensions/interfaces/idefaults.ts | 11 ++ .../interfaces/itheme-custom-properties.ts | 2 + extensions/material.theme.config.ts | 42 +++--- package.json | 38 ++++- src/themes/settings/specific/darker-hc.json | 2 +- src/themes/settings/specific/darker.json | 2 +- src/themes/settings/specific/default-hc.json | 2 +- src/themes/settings/specific/default.json | 2 +- src/themes/settings/specific/lighter-hc.json | 4 +- src/themes/settings/specific/lighter.json | 4 +- src/themes/settings/specific/ocean-hc.json | 4 +- src/themes/settings/specific/ocean.json | 4 +- .../settings/specific/palenight-hc.json | 4 +- src/themes/settings/specific/palenight.json | 4 +- src/themes/theme-template-color-theme.json | 3 +- 28 files changed, 343 insertions(+), 192 deletions(-) create mode 100644 .gulp/tasks/icons-variants-json.ts create mode 100644 extensions/commands/index.ts create mode 100644 extensions/commands/show-changelog/index.ts create mode 100644 extensions/commands/toggle-apply-icons/index.ts create mode 100644 extensions/helpers/configuration-change.ts create mode 100644 extensions/helpers/messages.ts rename extensions/helpers/{changelog.ts => should-show-changelog.ts} (64%) diff --git a/.gulp/index.ts b/.gulp/index.ts index 6e2342e..1822ea2 100644 --- a/.gulp/index.ts +++ b/.gulp/index.ts @@ -2,6 +2,7 @@ export * from './tasks/icons'; export * from './tasks/icons-accents'; export * from './tasks/icons-variants'; +export * from './tasks/icons-variants-json'; export * from './tasks/themes'; export * from './tasks/watcher'; export * from './tasks/changelog-title'; diff --git a/.gulp/tasks/icons-variants-json.ts b/.gulp/tasks/icons-variants-json.ts new file mode 100644 index 0000000..2bf9717 --- /dev/null +++ b/.gulp/tasks/icons-variants-json.ts @@ -0,0 +1,37 @@ +import * as fs from 'fs'; +import * as gulp from 'gulp'; + +import {resolve} from 'path'; +import {IDefaultsThemeIconVariant} from './../../extensions/interfaces/idefaults'; +import {getDefaultValues, getVariantIcons} from './../../extensions/helpers/fs'; +import {PATHS} from '../../extensions/consts/paths'; +import {CHARSET} from '../../extensions/consts/files'; + +/** + * For each ThemeIconVariant create a Material-Theme-Icons-{variant}.json + * depends on default Material-Theme-Icons.json + */ +export default gulp.task('build:icons.variants-json', callback => { + try { + const variants: IDefaultsThemeIconVariant = getDefaultValues().themeIconVariants; + const defaults = fs.readFileSync(resolve(`${PATHS.THEMES}/Material-Theme-Icons.json`), 'utf8'); + Object.keys(variants).forEach(variantName => { + const jsonDefaults = JSON.parse(defaults); + + getVariantIcons().forEach(iconname => { + const newIconPath = jsonDefaults.iconDefinitions[iconname].iconPath.replace('.svg', `${variantName}.svg`); + jsonDefaults.iconDefinitions[iconname].iconPath = newIconPath; + + fs.writeFileSync( + `${PATHS.THEMES}/Material-Theme-Icons-${variantName}.json`, + JSON.stringify(jsonDefaults), + {encoding: CHARSET} + ); + }); + }); + } catch (error) { + return callback(error); + } + + callback(); +}); diff --git a/extensions/commands/accents-setter/index.ts b/extensions/commands/accents-setter/index.ts index 63dd2ca..263367c 100644 --- a/extensions/commands/accents-setter/index.ts +++ b/extensions/commands/accents-setter/index.ts @@ -4,16 +4,8 @@ import {IAccentCustomProperty} from './../../interfaces/iaccent-custom-property' import {IGenericObject} from './../../interfaces/igeneric-object'; import { updateAccent, - isMaterialTheme, - isMaterialThemeIcons } from './../../helpers/settings'; -import { - getCurrentThemeID, - getCurrentThemeIconsID, - reloadWindow -} from './../../helpers/vscode'; import {getDefaultValues} from './../../helpers/fs'; -import {THEME_ICONS} from './../theme-icons/index'; const REGEXP_HEX: RegExp = /^#([0-9A-F]{6}|[0-9A-F]{8})$/i; @@ -62,11 +54,11 @@ const accentsProperties: IGenericObject = { alpha: 100, value: undefined }, - "editor.findWidgetResizeBorder": { + 'editor.findWidgetResizeBorder': { alpha: 100, value: undefined }, - "editorWidget.border": { + 'editorWidget.border': { alpha: 100, value: undefined } @@ -101,47 +93,37 @@ const isValidColour = (colour: string | null | undefined): boolean => /** * Sets workbench options */ -const setWorkbenchOptions = (accentSelected: string | undefined, config: any): void => { - vscode.workspace.getConfiguration().update('workbench.colorCustomizations', config, true).then(() => { - const themeID = getCurrentThemeID(); - const themeIconsID = getCurrentThemeIconsID(); - - updateAccent(accentSelected).then(() => { - if (isMaterialTheme(themeID) && isMaterialThemeIcons(themeIconsID)) { - THEME_ICONS().then(() => reloadWindow()); - } - }); - }, reason => { - vscode.window.showErrorMessage(reason); - }); -}; +const setWorkbenchOptions = (accentSelected: string | undefined, config: any): Thenable => + vscode.workspace.getConfiguration().update('workbench.colorCustomizations', config, true) + .then(() => updateAccent(accentSelected), + reason => vscode.window.showErrorMessage(reason)); /** * VSCode command */ -export const THEME_ACCENTS_SETTER = () => { +export default async (): Promise => { const themeConfigCommon = getDefaultValues(); - // shows the quick pick dropdown - const options: string[] = Object.keys(themeConfigCommon.accents); const purgeColourKey: string = 'Remove accents'; + const options: string[] = Object.keys(themeConfigCommon.accents).concat(purgeColourKey); - options.push(purgeColourKey); + // shows the quick pick dropdown and wait response + const accentSelected = await vscode.window.showQuickPick(options); - vscode.window.showQuickPick(options).then(accentSelected => { - if (accentSelected === null || accentSelected === undefined) { - return; - } + if (accentSelected === null || accentSelected === undefined) { + Promise.resolve(null); + } - const config: any = vscode.workspace.getConfiguration().get('workbench.colorCustomizations'); + const config: any = vscode.workspace.getConfiguration().get('workbench.colorCustomizations'); + + switch (accentSelected) { + case purgeColourKey: + assignColorCustomizations(undefined, config); + await setWorkbenchOptions(undefined, config); + return Promise.resolve(true); + default: + assignColorCustomizations(themeConfigCommon.accents[accentSelected], config); + await setWorkbenchOptions(accentSelected, config); + return Promise.resolve(true); + } - switch (accentSelected) { - case purgeColourKey: - assignColorCustomizations(undefined, config); - setWorkbenchOptions(undefined, config); - break; - default: - assignColorCustomizations(themeConfigCommon.accents[accentSelected], config); - setWorkbenchOptions(accentSelected, config); - } - }); }; diff --git a/extensions/commands/index.ts b/extensions/commands/index.ts new file mode 100644 index 0000000..cf23827 --- /dev/null +++ b/extensions/commands/index.ts @@ -0,0 +1,4 @@ +export {default as accentsSetter} from './accents-setter'; +export {default as fixIcons} from './theme-icons'; +export {default as toggleApplyIcons} from './toggle-apply-icons'; +export {default as showChangelog} from './show-changelog'; diff --git a/extensions/commands/show-changelog/index.ts b/extensions/commands/show-changelog/index.ts new file mode 100644 index 0000000..c7920ed --- /dev/null +++ b/extensions/commands/show-changelog/index.ts @@ -0,0 +1,28 @@ +import * as path from 'path'; +import * as vscode from 'vscode'; + +import {PATHS} from './../../consts/paths'; + +const previewFile = (): void => { + const uri = vscode.Uri.file(path.join(PATHS.VSIX_DIR, './CHANGELOG.md')); + vscode.commands.executeCommand('markdown.showPreview', uri); +}; + +export default (): void => { + const extname: string = 'vscode.markdown'; + const md = vscode.extensions.getExtension(extname); + + if (md === undefined) { + console.warn(`Ext not found ${ extname }`); + return; + } + + if (md.isActive) { + return previewFile(); + } + + md.activate() + .then(() => previewFile(), + reason => console.warn(reason) + ); +}; diff --git a/extensions/commands/theme-icons/index.ts b/extensions/commands/theme-icons/index.ts index 725a0a6..563fd7d 100644 --- a/extensions/commands/theme-icons/index.ts +++ b/extensions/commands/theme-icons/index.ts @@ -6,20 +6,21 @@ import { getDefaultValues, getThemeIconsByContributeID, getThemeIconsContribute, - getVariantIcons + getIconVariantFromTheme } from './../../helpers/fs'; import { isAccent, - isMaterialThemeIcons, - getCustomSettings + getCustomSettings, + isMaterialTheme, + setCustomSetting } from './../../helpers/settings'; -import {getCurrentThemeIconsID, getCurrentThemeID} from './../../helpers/vscode'; +import {getCurrentThemeID, setIconsID, getCurrentThemeIconsID, reloadWindow} from './../../helpers/vscode'; import {CHARSET} from './../../consts/files'; import {IPackageJSONThemeIcons} from './../../interfaces/ipackage.json'; import {IThemeIconsIconPath, IThemeIcons} from './../../interfaces/itheme-icons'; -const getIconDefinition = (definitions: any, iconname: string): IThemeIconsIconPath => { - return (definitions as any)[iconname]; +const getIconDefinition = (definitions: any, iconName: string): IThemeIconsIconPath => { + return (definitions as any)[iconName]; }; /** @@ -29,80 +30,73 @@ const replaceIconPathWithAccent = (iconPath: string, accentName: string): string return iconPath.replace('.svg', `.accent.${ accentName }.svg`); }; -const getVariantFromColor = (color: string): string => { - switch (true) { - case color === undefined || color === 'Material Theme': - return 'Default'; - case color === 'Material Theme High Contrast': - return 'Default High Contrast'; - case color.includes('Material Theme Lighter'): - return 'Light'; - default: - return color.replace(/Material Theme /gi, ''); - } -}; - -export const THEME_ICONS = () => { +/** + * Fix icons when flag auto-fix is active and current theme is Material + */ +export default async () => { const deferred: any = {}; const promise = new Promise((resolve, reject) => { deferred.resolve = resolve; deferred.reject = reject; }); - const themeIconsID: string = getCurrentThemeIconsID(); - if (isMaterialThemeIcons(themeIconsID)) { - const themeID = getCurrentThemeID(); - const customSettings = getCustomSettings(); - const defaults = getDefaultValues(); - const accentName = customSettings.accent; - const variantName: string = getVariantFromColor(themeID); + // Current theme id set on VSCode ("label" of the package.json) + const themeLabel = getCurrentThemeID(); - const themeContribute: IPackageJSONThemeIcons = getThemeIconsContribute(themeIconsID); - const theme: IThemeIcons = getThemeIconsByContributeID(themeIconsID); - const themepath: string = getAbsolutePath(themeContribute.path); - - if (isAccent(accentName, defaults)) { - const realAccentName = accentName.replace(/\s+/, '-'); - getAccentableIcons().forEach(iconname => { - const distIcon = getIconDefinition(theme.iconDefinitions, iconname); - const outIcon = getIconDefinition(defaults.icons.theme.iconDefinitions, iconname); - - if (typeof distIcon === 'object' && typeof outIcon === 'object') { - distIcon.iconPath = replaceIconPathWithAccent(outIcon.iconPath, realAccentName); - } - }); - - } else { - getAccentableIcons().forEach(iconname => { - const distIcon = getIconDefinition(theme.iconDefinitions, iconname); - const outIcon = getIconDefinition(defaults.icons.theme.iconDefinitions, iconname); - - distIcon.iconPath = outIcon.iconPath; - }); - } - - getVariantIcons().forEach(iconname => { - const distIcon = getIconDefinition(theme.iconDefinitions, iconname); - const outIcon = getIconDefinition(defaults.icons.theme.iconDefinitions, iconname); - - if (distIcon && outIcon) { - distIcon.iconPath = outIcon.iconPath.replace('.svg', `${ variantName }.svg`); - } - }); - - fs.writeFile(themepath, JSON.stringify(theme), { - encoding: CHARSET - }, err => { - if (err) { - deferred.reject(err); - return; - } - - deferred.resolve(); - }); - } else { - deferred.resolve(); + // If this method was called without Material Theme set, just return + if (!isMaterialTheme(themeLabel)) { + return deferred.resolve(); } - return promise; + await setCustomSetting('fixIconsRunning', true); + + const DEFAULTS = getDefaultValues(); + const CUSTOM_SETTINGS = getCustomSettings(); + + const materialIconVariantID: string | null = getIconVariantFromTheme(themeLabel); + const currentThemeIconsID: string = getCurrentThemeIconsID(); + const newThemeIconsID = materialIconVariantID ? + `eq-material-theme-icons-${materialIconVariantID}` : 'eq-material-theme-icons'; + + // Just set the correct Material Theme icons variant if wasn't + // Or also change the current icons set to the Material Theme icons variant + // (this is intended: this command was called directly or `autoFix` flag was already checked by other code) + if (currentThemeIconsID !== newThemeIconsID) { + await setIconsID(newThemeIconsID); + } + + // package.json iconThemes object for the current icons set + const themeIconsContribute: IPackageJSONThemeIcons = getThemeIconsContribute(newThemeIconsID); + // Actual json file of the icons theme (eg. Material-Theme-Icons-Darker.json) + const theme: IThemeIcons = getThemeIconsByContributeID(newThemeIconsID); + + const newIconPath = (outIcon: IThemeIconsIconPath) => isAccent(CUSTOM_SETTINGS.accent, DEFAULTS) ? + replaceIconPathWithAccent(outIcon.iconPath, CUSTOM_SETTINGS.accent.replace(/\s+/, '-')) : outIcon.iconPath; + + getAccentableIcons().forEach(iconName => { + const distIcon = getIconDefinition(theme.iconDefinitions, iconName); + const outIcon = getIconDefinition(DEFAULTS.icons.theme.iconDefinitions, iconName); + + if (typeof distIcon === 'object' && typeof outIcon === 'object') { + distIcon.iconPath = newIconPath(outIcon); + } + }); + + // Path of the icons theme .json + const themePath: string = getAbsolutePath(themeIconsContribute.path); + fs.writeFile(themePath, JSON.stringify(theme), { + encoding: CHARSET + }, async err => { + if (err) { + deferred.reject(err); + return; + } + + await setCustomSetting('fixIconsRunning', false); + deferred.resolve(); + }); + + return promise + .then(() => reloadWindow()) + .catch((error: NodeJS.ErrnoException) => console.trace(error)); }; diff --git a/extensions/commands/toggle-apply-icons/index.ts b/extensions/commands/toggle-apply-icons/index.ts new file mode 100644 index 0000000..adb0cc9 --- /dev/null +++ b/extensions/commands/toggle-apply-icons/index.ts @@ -0,0 +1,11 @@ +import * as vscode from 'vscode'; + +export default async (): Promise => { + // shows the quick pick dropdown and wait response + const optionSelected = await vscode.window.showQuickPick(['Enable', 'Disable']); + const isEnable = optionSelected === 'Enable'; + + return Promise.resolve(vscode.workspace + .getConfiguration().update('materialTheme.autoApplyIcons', isEnable, true) + ); +}; diff --git a/extensions/defaults.json b/extensions/defaults.json index c853863..2d5b58a 100644 --- a/extensions/defaults.json +++ b/extensions/defaults.json @@ -145,6 +145,12 @@ } } }, + "themeIconVariants": { + "Darker": "eq-material-theme-icons-darker", + "Light": "eq-material-theme-icons-light", + "Palenight": "eq-material-theme-icons-palenight", + "Ocean": "eq-material-theme-icons-ocean" + }, "themeVariants": { "Darker": "./themes/Material-Theme-Darker.json", "Darker High Contrast": "./themes/Material-Theme-Darker-High-Contrast.json", diff --git a/extensions/helpers/configuration-change.ts b/extensions/helpers/configuration-change.ts new file mode 100644 index 0000000..ef1e1aa --- /dev/null +++ b/extensions/helpers/configuration-change.ts @@ -0,0 +1,42 @@ +import { + ConfigurationChangeEvent +} from 'vscode'; +import {getCustomSettings, isMaterialThemeIcons, isAutoApplyEnable, isMaterialTheme} from './settings'; +import {getCurrentThemeIconsID, getCurrentThemeID} from './vscode'; + +import * as ThemeCommands from './../commands'; +import {infoMessage} from './messages'; + +const icons = () => isAutoApplyEnable() ? ThemeCommands.fixIcons() : infoMessage(); + +const onIconsChanged = () => { + const customSettings = getCustomSettings(); + if (customSettings.fixIconsRunning) { + return; + } + + const currentIconsTheme = getCurrentThemeIconsID(); + if (isMaterialThemeIcons(currentIconsTheme)) { + return icons(); + } +}; + +const onThemeChanged = () => { + const currentTheme = getCurrentThemeID(); + if (isMaterialTheme(currentTheme)) { + return icons(); + } +}; + +export const onChangeConfiguration = (event: ConfigurationChangeEvent) => { + const isColorTheme = event.affectsConfiguration('workbench.colorTheme'); + const isIconTheme = event.affectsConfiguration('workbench.iconTheme'); + + if (isIconTheme) { + return onIconsChanged(); + } + + if (isColorTheme) { + return onThemeChanged(); + } +}; diff --git a/extensions/helpers/fs.ts b/extensions/helpers/fs.ts index 986a847..688baea 100644 --- a/extensions/helpers/fs.ts +++ b/extensions/helpers/fs.ts @@ -52,6 +52,15 @@ export function getThemeIconsContribute(ID: string): IPackageJSONThemeIcons { return contributes[0] !== undefined ? contributes[0] : null; } +/** + * Icon variant name from theme name + */ +export function getIconVariantFromTheme(theme: string): string { + const {themeIconVariants} = getDefaultValues(); + const found = Object.keys(themeIconVariants).find(variant => theme.includes(variant)); + return found ? found.toLowerCase() : null; +} + /** * Gets package JSON */ diff --git a/extensions/helpers/messages.ts b/extensions/helpers/messages.ts new file mode 100644 index 0000000..a33a2af --- /dev/null +++ b/extensions/helpers/messages.ts @@ -0,0 +1,14 @@ +import { + window as Window +} from 'vscode'; + +import * as ThemeCommands from './../commands'; + +const INFO_MESSAGE = 'You should reload the window for full activate the Material Theme.'; +const OPTIONS = {ok: 'Reload now', cancel: 'Cancel'}; + +export const infoMessage = async () => { + if (await Window.showInformationMessage(INFO_MESSAGE, OPTIONS.ok, OPTIONS.cancel) === OPTIONS.ok) { + ThemeCommands.fixIcons(); + } +}; diff --git a/extensions/helpers/settings.ts b/extensions/helpers/settings.ts index e5b5f48..1c2073b 100644 --- a/extensions/helpers/settings.ts +++ b/extensions/helpers/settings.ts @@ -18,11 +18,18 @@ export function getCustomSettings(): IThemeCustomProperties { return vscode.workspace.getConfiguration().get('materialTheme', {}); } +/** + * Get autoApplyIcons + */ +export function isAutoApplyEnable(): boolean { + return vscode.workspace.getConfiguration().get('materialTheme.autoApplyIcons', true); +} + /** * Checks if a given string could be an accent */ export function isAccent(accentName: string, defaults: IDefaults): boolean { - return Object.keys(defaults.accents).filter(name => name === accentName).length > 0; + return Boolean(Object.keys(defaults.accents).find(name => name === accentName)); } /** @@ -30,7 +37,7 @@ export function isAccent(accentName: string, defaults: IDefaults): boolean { */ export function isMaterialTheme(themeName: string): boolean { const packageJSON = getPackageJSON(); - return packageJSON.contributes.themes.filter(contrib => contrib.label === themeName).length > 0; + return Boolean(packageJSON.contributes.themes.find(contrib => contrib.label === themeName)); } /** @@ -38,20 +45,20 @@ export function isMaterialTheme(themeName: string): boolean { */ export function isMaterialThemeIcons(themeIconsName: string): boolean { const packageJSON = getPackageJSON(); - return packageJSON.contributes.iconThemes.filter(contribute => contribute.id === themeIconsName).length > 0; + return Boolean(packageJSON.contributes.iconThemes.find(contribute => contribute.id === themeIconsName)); } /** * Sets a custom property in custom settings */ -export function setCustomSetting(settingName: string, value: any): Thenable { - return vscode.workspace.getConfiguration().update(`materialTheme.${settingName}`, value, true); +export function setCustomSetting(settingName: string, value: any): Thenable { + return vscode.workspace.getConfiguration().update(`materialTheme.${settingName}`, value, true).then(() => settingName); } /** * Updates accent name */ -export function updateAccent(accentName: string): Thenable { +export function updateAccent(accentName: string): Thenable { const prevAccent = getAccent(); return setCustomSetting('accentPrevious', prevAccent) .then(() => setCustomSetting('accent', accentName)); diff --git a/extensions/helpers/changelog.ts b/extensions/helpers/should-show-changelog.ts similarity index 64% rename from extensions/helpers/changelog.ts rename to extensions/helpers/should-show-changelog.ts index cdd8fe6..f05b780 100644 --- a/extensions/helpers/changelog.ts +++ b/extensions/helpers/should-show-changelog.ts @@ -1,15 +1,8 @@ import * as path from 'path'; -import * as vscode from 'vscode'; import {IDefaults} from './../interfaces/idefaults'; import {getDefaultValues, getPackageJSON, writeFile} from './fs'; -import {PATHS} from './../consts/paths'; - -const previewFile = (): void => { - const uri = vscode.Uri.file(path.join(PATHS.VSIX_DIR, './CHANGELOG.md')); - vscode.commands.executeCommand('markdown.showPreview', uri); -}; const splitVersion = (input: string): {major: number; minor: number; patch: number} => { const [major, minor, patch] = input.split('.').map(i => parseInt(i, 10)); @@ -19,26 +12,7 @@ const splitVersion = (input: string): {major: number; minor: number; patch: numb const writeDefaults = (defaults: IDefaults) => writeFile(path.join('./extensions/defaults.json'), JSON.stringify(defaults, null, 2)); -export const showChangelog = (): void => { - const extname: string = 'vscode.markdown'; - const md = vscode.extensions.getExtension(extname); - - if (md === undefined) { - console.warn(`Ext not found ${ extname }`); - return; - } - - if (md.isActive) { - return previewFile(); - } - - md.activate() - .then(() => previewFile(), - reason => console.warn(reason) - ); -}; - -export const shouldShowChangelog = (): boolean => { +export default (): boolean => { const defaults = getDefaultValues(); const packageJSON = getPackageJSON(); diff --git a/extensions/interfaces/idefaults.ts b/extensions/interfaces/idefaults.ts index e989c20..799799e 100644 --- a/extensions/interfaces/idefaults.ts +++ b/extensions/interfaces/idefaults.ts @@ -4,6 +4,7 @@ export interface IDefaults { changelog: IChangelog; icons: IDefaultsThemeIcons; themeVariants: IDefaultsThemeVariant; + themeIconVariants: IDefaultsThemeIconVariant; themeVariantsColours: IDefaultsThemeVariant; themeVariantsUITheme: IDefaultsThemeVariant; variantsIcons: string[]; @@ -54,4 +55,14 @@ export interface IDefaultsThemeVariant { Light: string; LightHighContrast: string; PalenightHighContrast: string; + Ocean: string; + OceanHighContrast: string; +} + +export interface IDefaultsThemeIconVariant { + [index: string]: string; + Darker: string; + Light: string; + Palenight: string; + Ocean: string; } diff --git a/extensions/interfaces/itheme-custom-properties.ts b/extensions/interfaces/itheme-custom-properties.ts index 4d7a858..a836c2d 100644 --- a/extensions/interfaces/itheme-custom-properties.ts +++ b/extensions/interfaces/itheme-custom-properties.ts @@ -1,4 +1,6 @@ export interface IThemeCustomProperties { accent?: string; accentPrevious?: string; + autoApplyIcons?: boolean; + fixIconsRunning?: boolean; } diff --git a/extensions/material.theme.config.ts b/extensions/material.theme.config.ts index a1f5c40..8466755 100644 --- a/extensions/material.theme.config.ts +++ b/extensions/material.theme.config.ts @@ -3,28 +3,17 @@ import { commands as Commands } from 'vscode'; -import {THEME_ACCENTS_SETTER} from './commands/accents-setter/index'; -import {THEME_ICONS} from './commands/theme-icons/index'; -import {shouldShowChangelog, showChangelog} from './helpers/changelog'; -import {reloadWindow, getCurrentThemeID, setIconsID} from './helpers/vscode'; - -const isMaterialTheme = (currentTheme: string): boolean => - currentTheme.includes('Material Theme'); +import * as ThemeCommands from './commands'; +import {isAutoApplyEnable} from './helpers/settings'; +import {onChangeConfiguration} from './helpers/configuration-change'; +import {infoMessage} from './helpers/messages'; +import shouldShowChangelog from './helpers/should-show-changelog'; export function activate() { const config = Workspace.getConfiguration(); // Listen on set theme: when the theme is Material Theme, just adjust icon and accent. - Workspace.onDidChangeConfiguration(event => { - const isColorTheme = event.affectsConfiguration('workbench.colorTheme'); - const currentTheme = getCurrentThemeID(); - // tslint:disable-next-line:early-exit - if (isColorTheme && isMaterialTheme(currentTheme)) { - setIconsID('eq-material-theme-icons') - .then(() => THEME_ICONS().catch(error => console.trace(error))) - .then(() => reloadWindow()); - } - }); + Workspace.onDidChangeConfiguration(onChangeConfiguration); // Delete old configuration, must remove with next major release if (config.has('materialTheme.cache.workbench')) { @@ -32,15 +21,18 @@ export function activate() { } if (shouldShowChangelog()) { - showChangelog(); + ThemeCommands.showChangelog(); } // Registering commands - Commands.registerCommand('materialTheme.setAccent', () => THEME_ACCENTS_SETTER()); - Commands.registerCommand('materialTheme.fixIcons', () => - THEME_ICONS() - .then(() => reloadWindow()) - .catch(err => console.trace(err)) - ); - Commands.registerCommand('materialTheme.showChangelog', () => showChangelog()); + Commands.registerCommand('materialTheme.setAccent', async () => { + const wasSet = await ThemeCommands.accentsSetter(); + + if (wasSet) { + return isAutoApplyEnable() ? ThemeCommands.fixIcons() : infoMessage(); + } + }); + Commands.registerCommand('materialTheme.fixIcons', () => ThemeCommands.fixIcons()); + Commands.registerCommand('materialTheme.toggleApplyIcons', () => ThemeCommands.toggleApplyIcons()); + Commands.registerCommand('materialTheme.showChangelog', () => ThemeCommands.showChangelog()); } diff --git a/package.json b/package.json index a14a015..cd506c3 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ } }, "scripts": { - "build": "yarn build-icons && yarn build-themes && yarn build-icons-accents && yarn build-icons-variants", + "build": "yarn build-icons && yarn build-themes && yarn build-icons-accents && yarn build-icons-variants && yarn build-icons-variants-json", "minimize-icons": "mkdir icons && svgo -f src/icons/svgs -o icons/", "minimize-json": "json-minify themes/.material-theme-icons.tmp > themes/Material-Theme-Icons.json && yarn remove-icons-tmp", "remove-icons": "rimraf icons && rimraf themes/Material-Theme-Icons.json", @@ -36,6 +36,7 @@ "build-icons": "yarn remove-icons && yarn minimize-icons && yarn gulp build:icons && yarn minimize-json", "build-icons-accents": "yarn gulp build:icons.accents", "build-icons-variants": "yarn gulp build:icons.variants", + "build-icons-variants-json": "yarn gulp build:icons.variants-json", "build-themes": "yarn gulp build:themes", "build-ts": "tsc -p ./tsconfig.json", "test": "tslint **.ts", @@ -52,6 +53,11 @@ "main": "./extensions/material.theme.config.js", "contributes": { "commands": [ + { + "command": "materialTheme.toggleApplyIcons", + "title": "Toggle icons auto-apply ", + "category": "🎨 Material Theme" + }, { "command": "materialTheme.setAccent", "title": "Set accent color", @@ -79,6 +85,16 @@ "materialTheme.accentPrevious": { "type": "string", "description": "Previous accent color selected" + }, + "materialTheme.autoApplyIcons": { + "type": "boolean", + "description": "Enable/disable auto-apply of Material Theme icons", + "default": true + }, + "materialTheme.fixIconsRunning": { + "type": "boolean", + "description": "For checking if the command is currently acting", + "default": false } } }, @@ -139,6 +155,26 @@ "id": "eq-material-theme-icons", "label": "Material Theme Icons", "path": "./themes/Material-Theme-Icons.json" + }, + { + "id": "eq-material-theme-icons-darker", + "label": "Material Theme Icons Darker", + "path": "./themes/Material-Theme-Icons-Darker.json" + }, + { + "id": "eq-material-theme-icons-palenight", + "label": "Material Theme Icons Palenight", + "path": "./themes/Material-Theme-Icons-Palenight.json" + }, + { + "id": "eq-material-theme-icons-ocean", + "label": "Material Theme Icons Ocean", + "path": "./themes/Material-Theme-Icons-Ocean.json" + }, + { + "id": "eq-material-theme-icons-light", + "label": "Material Theme Icons Light", + "path": "./themes/Material-Theme-Icons-Light.json" } ] }, diff --git a/src/themes/settings/specific/darker-hc.json b/src/themes/settings/specific/darker-hc.json index 55e75ce..f8c3e08 100644 --- a/src/themes/settings/specific/darker-hc.json +++ b/src/themes/settings/specific/darker-hc.json @@ -13,7 +13,7 @@ "findHighlight": "#FFCC00", "foreground": "#EEFFFF", "focusBorder": "#FFFFFF", - "guides": "#42424270", + "guides": "#424242", "lineNumbers": "#424242", "invisibles": "#65737E", "lineHighlight": "#000000", diff --git a/src/themes/settings/specific/darker.json b/src/themes/settings/specific/darker.json index 9424a34..9bb7181 100644 --- a/src/themes/settings/specific/darker.json +++ b/src/themes/settings/specific/darker.json @@ -11,7 +11,7 @@ "findHighlight": "#FFCC00", "foreground": "#EEFFFF", "focusBorder": "#FFFFFF", - "guides": "#42424270", + "guides": "#424242", "lineNumbers": "#424242", "invisibles": "#65737E", "lineHighlight": "#000000", diff --git a/src/themes/settings/specific/default-hc.json b/src/themes/settings/specific/default-hc.json index 33ea46e..d3035ea 100644 --- a/src/themes/settings/specific/default-hc.json +++ b/src/themes/settings/specific/default-hc.json @@ -13,7 +13,7 @@ "findHighlight": "#FFCC00", "foreground": "#EEFFFF", "focusBorder": "#FFFFFF", - "guides": "#37474F80", + "guides": "#37474F", "lineNumbers": "#37474F", "invisibles": "#65737E", "lineHighlight": "#000000", diff --git a/src/themes/settings/specific/default.json b/src/themes/settings/specific/default.json index b3059f1..9042608 100644 --- a/src/themes/settings/specific/default.json +++ b/src/themes/settings/specific/default.json @@ -11,7 +11,7 @@ "findHighlight": "#FFCC00", "foreground": "#EEFFFF", "focusBorder": "#FFFFFF", - "guides": "#37474F80", + "guides": "#37474F", "lineNumbers": "#37474F", "invisibles": "#65737E", "lineHighlight": "#000000", diff --git a/src/themes/settings/specific/lighter-hc.json b/src/themes/settings/specific/lighter-hc.json index c96e4c5..9788c97 100644 --- a/src/themes/settings/specific/lighter-hc.json +++ b/src/themes/settings/specific/lighter-hc.json @@ -13,7 +13,7 @@ "findHighlight": "#FFCC00", "foreground": "#90A4AE", "focusBorder": "#FFFFFF", - "guides": "#B0BEC570", + "guides": "#B0BEC5", "lineNumbers": "#CFD8DC", "invisibles": "#E7EAEC", "lineHighlight": "#CCD7DA", @@ -44,4 +44,4 @@ "violet": "#945EB8" } } -} \ No newline at end of file +} diff --git a/src/themes/settings/specific/lighter.json b/src/themes/settings/specific/lighter.json index 207daf7..6ccfff2 100644 --- a/src/themes/settings/specific/lighter.json +++ b/src/themes/settings/specific/lighter.json @@ -11,7 +11,7 @@ "findHighlight": "#FFCC00", "foreground": "#90A4AE", "focusBorder": "#FFFFFF", - "guides": "#B0BEC570", + "guides": "#B0BEC5", "lineNumbers": "#CFD8DC", "invisibles": "#E7EAEC", "lineHighlight": "#CCD7DA", @@ -44,4 +44,4 @@ "violet": "#945EB8" } } -} \ No newline at end of file +} diff --git a/src/themes/settings/specific/ocean-hc.json b/src/themes/settings/specific/ocean-hc.json index 7adecdf..068caf0 100644 --- a/src/themes/settings/specific/ocean-hc.json +++ b/src/themes/settings/specific/ocean-hc.json @@ -11,7 +11,7 @@ "findHighlight": "#FFCC00", "foreground": "#8F93A2", "focusBorder": "#FFFFFF", - "guides": "#3B3F5150", + "guides": "#3B3F51", "lineNumbers": "#3B3F5180", "invisibles": "#80869E50", "lineHighlight": "#000000", @@ -44,4 +44,4 @@ "violet": "#bb80b3" } } -} \ No newline at end of file +} diff --git a/src/themes/settings/specific/ocean.json b/src/themes/settings/specific/ocean.json index a0b7cbe..afe91d3 100644 --- a/src/themes/settings/specific/ocean.json +++ b/src/themes/settings/specific/ocean.json @@ -11,7 +11,7 @@ "findHighlight": "#FFCC00", "foreground": "#8F93A2", "focusBorder": "#FFFFFF", - "guides": "#3B3F5150", + "guides": "#3B3F51", "lineNumbers": "#3B3F5180", "invisibles": "#80869E50", "lineHighlight": "#000000", @@ -44,4 +44,4 @@ "violet": "#bb80b3" } } -} \ No newline at end of file +} diff --git a/src/themes/settings/specific/palenight-hc.json b/src/themes/settings/specific/palenight-hc.json index 324f912..72d3922 100644 --- a/src/themes/settings/specific/palenight-hc.json +++ b/src/themes/settings/specific/palenight-hc.json @@ -13,7 +13,7 @@ "findHighlight": "#FFCC00", "foreground": "#A6ACCD", "focusBorder": "#FFFFFF", - "guides": "#4E557980", + "guides": "#4E5579", "lineNumbers": "#3A3F58", "invisibles": "#4E5579", "lineHighlight": "#000000", @@ -44,4 +44,4 @@ "violet": "#bb80b3" } } -} \ No newline at end of file +} diff --git a/src/themes/settings/specific/palenight.json b/src/themes/settings/specific/palenight.json index 8d9f211..f60b56c 100644 --- a/src/themes/settings/specific/palenight.json +++ b/src/themes/settings/specific/palenight.json @@ -11,7 +11,7 @@ "findHighlight": "#FFCC00", "foreground": "#A6ACCD", "focusBorder": "#FFFFFF", - "guides": "#4E557980", + "guides": "#4E5579", "lineNumbers": "#3A3F58", "invisibles": "#4E5579", "lineHighlight": "#000000", @@ -44,4 +44,4 @@ "violet": "#bb80b3" } } -} \ No newline at end of file +} diff --git a/src/themes/theme-template-color-theme.json b/src/themes/theme-template-color-theme.json index d4f22f6..337d6c2 100644 --- a/src/themes/theme-template-color-theme.json +++ b/src/themes/theme-template-color-theme.json @@ -706,7 +706,8 @@ "editorOverviewRuler.border": "{{variant.scheme.background}}", "editorHoverWidget.background": "{{variant.scheme.background}}", "editorHoverWidget.border": "{{variant.scheme.inputBorder}}", - "editorIndentGuide.background": "{{variant.scheme.guides}}", + "editorIndentGuide.background": "{{variant.scheme.guides}}70", + "editorIndentGuide.activeBackground": "{{variant.scheme.guides}}", "editorGroupHeader.tabsBackground": "{{variant.scheme.background}}", "editorGroup.border": "{{variant.scheme.shadow}}", "editorGutter.modifiedBackground": "{{variant.scheme.base.blue}}60",