chore: Adds theme variants command to "Material Theme Settings"

This commit is contained in:
octod 2017-07-21 20:20:17 +02:00
parent aabf514ac9
commit 16029bade8
11 changed files with 144 additions and 103 deletions

View file

@ -3,19 +3,15 @@ import * as gulp from 'gulp';
import * as path from 'path'; import * as path from 'path';
import { CHARSET } from "../../extensions/consts/files"; import { CHARSET } from "../../extensions/consts/files";
import { IGenericObject } from "../../extensions/interfaces/igeneric-object";
import { IPackageJSON } from "../../extensions/interfaces/ipackage.json"; import { IPackageJSON } from "../../extensions/interfaces/ipackage.json";
import { IThemeIconsVariants } from "../interfaces/itheme-icons-variants"; import { IThemeIconsVariants } from "../interfaces/itheme-icons-variants";
import PATHS from '../../extensions/consts/paths' import PATHS from '../../extensions/consts/paths'
import { getDefaultValues } from "../../extensions/helpers/fs";
import { IDefaultsThemeVariantColours } from "../../extensions/interfaces/idefaults";
const PACKAGE_JSON: IPackageJSON = require(path.join(process.cwd(), './package.json')); const PACKAGE_JSON: IPackageJSON = require(path.join(process.cwd(), './package.json'));
let variants: IGenericObject<string> = { let variants: IDefaultsThemeVariantColours = getDefaultValues().themeVariantsColours;
Darker: '#424242',
Default: '#4A616C',
Light: '#90A4AE',
Palenight: '#4E5579'
}
function writeIconVariant(filepath: string, destpath: string, colour: string): void { function writeIconVariant(filepath: string, destpath: string, colour: string): void {
let regexp = new RegExp('.st0\{fill:(#[a-zA-Z0-9]{3,6})') let regexp = new RegExp('.st0\{fill:(#[a-zA-Z0-9]{3,6})')
@ -37,14 +33,15 @@ export default gulp.task('build:icons.variants', callback => {
let basepath: string = path.join(process.cwd(), contribute.path); let basepath: string = path.join(process.cwd(), contribute.path);
let basetheme: IThemeIconsVariants = require(basepath); let basetheme: IThemeIconsVariants = require(basepath);
let theme: IThemeIconsVariants = JSON.parse(JSON.stringify(basetheme)); let theme: IThemeIconsVariants = JSON.parse(JSON.stringify(basetheme));
let variant = variants[variantName];
theme.iconDefinitions._folder_dark.iconPath = theme.iconDefinitions._folder_dark.iconPath.replace('.svg', `${ variantName }.svg`); theme.iconDefinitions._folder_dark.iconPath = theme.iconDefinitions._folder_dark.iconPath.replace('.svg', `${ variantName }.svg`);
theme.iconDefinitions._file_folder.iconPath = theme.iconDefinitions._file_folder.iconPath.replace('.svg', `${ variantName }.svg`); theme.iconDefinitions._file_folder.iconPath = theme.iconDefinitions._file_folder.iconPath.replace('.svg', `${ variantName }.svg`);
theme.iconDefinitions["_file_folder-build"].iconPath = theme.iconDefinitions["_file_folder-build"].iconPath.replace('.svg', `${ variantName }.svg`); theme.iconDefinitions["_file_folder-build"].iconPath = theme.iconDefinitions["_file_folder-build"].iconPath.replace('.svg', `${ variantName }.svg`);
writeIconVariant(basetheme.iconDefinitions._folder_dark.iconPath, theme.iconDefinitions._folder_dark.iconPath, variants[variantName]); writeIconVariant(basetheme.iconDefinitions._folder_dark.iconPath, theme.iconDefinitions._folder_dark.iconPath, variant);
writeIconVariant(basetheme.iconDefinitions._file_folder.iconPath, theme.iconDefinitions._file_folder.iconPath, variants[variantName]); writeIconVariant(basetheme.iconDefinitions._file_folder.iconPath, theme.iconDefinitions._file_folder.iconPath, variant);
writeIconVariant(basetheme.iconDefinitions["_file_folder-build"].iconPath, theme.iconDefinitions["_file_folder-build"].iconPath, variants[variantName]); writeIconVariant(basetheme.iconDefinitions["_file_folder-build"].iconPath, theme.iconDefinitions["_file_folder-build"].iconPath, variant);
}); });
}); });

View file

@ -3,7 +3,9 @@ import * as vscode from 'vscode';
import {IAccentCustomProperty} from '../../interfaces/iaccent-custom-property'; import {IAccentCustomProperty} from '../../interfaces/iaccent-custom-property';
import { IDefaults } from "../../interfaces/idefaults"; import { IDefaults } from "../../interfaces/idefaults";
import {IGenericObject} from '../../interfaces/igeneric-object'; import {IGenericObject} from '../../interfaces/igeneric-object';
import { updateAccent } from "../../helpers/settings"; import { updateAccent, isMaterialTheme, isMaterialThemeIcons } from "../../helpers/settings";
import { getCurrentThemeID, getCurrentThemeIconsID, askForWindowReload } from "../../helpers/vscode";
import { THEME_ICONS } from "../theme-icons/index";
const REGEXP_HEX: RegExp = /^#([0-9A-F]{6}|[0-9A-F]{8})$/i; const REGEXP_HEX: RegExp = /^#([0-9A-F]{6}|[0-9A-F]{8})$/i;
@ -90,10 +92,14 @@ function isValidColour(colour: string | null | undefined): boolean {
*/ */
function setWorkbenchOptions(accentSelected: string | undefined, config: any): void { function setWorkbenchOptions(accentSelected: string | undefined, config: any): void {
vscode.workspace.getConfiguration().update('workbench.colorCustomizations', config, true).then(() => { vscode.workspace.getConfiguration().update('workbench.colorCustomizations', config, true).then(() => {
// let message: string = accentSelected !== undefined ? `${ accentSelected } set` : `Accents removed`; let themeID = getCurrentThemeID()
let themeIconsID = getCurrentThemeIconsID()
updateAccent(accentSelected); updateAccent(accentSelected);
// vscode.window.showInformationMessage(message).then(() => {
// }); if (isMaterialTheme(themeID) && isMaterialThemeIcons(themeIconsID)) {
THEME_ICONS().then(() => askForWindowReload());
}
}, reason => { }, reason => {
vscode.window.showErrorMessage(reason); vscode.window.showErrorMessage(reason);
}); });
@ -105,10 +111,8 @@ function setWorkbenchOptions(accentSelected: string | undefined, config: any): v
export const THEME_ACCENTS_SETTER = () => { export const THEME_ACCENTS_SETTER = () => {
// shows the quick pick dropdown // shows the quick pick dropdown
let options: string[] = Object.keys(themeConfigCommon.accents); let options: string[] = Object.keys(themeConfigCommon.accents);
// let customColourKey: string = 'Custom colour';
let purgeColourKey: string = 'Remove accents'; let purgeColourKey: string = 'Remove accents';
// options.push(customColourKey);
options.push(purgeColourKey); options.push(purgeColourKey);
vscode.window.showQuickPick(options).then(accentSelected => { vscode.window.showQuickPick(options).then(accentSelected => {
@ -117,19 +121,6 @@ export const THEME_ACCENTS_SETTER = () => {
let config: any = vscode.workspace.getConfiguration().get('workbench.colorCustomizations'); let config: any = vscode.workspace.getConfiguration().get('workbench.colorCustomizations');
switch(accentSelected) { switch(accentSelected) {
// case customColourKey:
// vscode.window.showInputBox().then(colourCode => {
// if (colourCode === null || colourCode === undefined) return;
// if (colourCode && !isValidColour(colourCode)) {
// vscode.window.showWarningMessage('Invalid colour set, aborting.');
// return;
// }
// assignColorCustomizations(colourCode, config);
// setWorkbenchOptions(accentSelected, config);
// });
// break;
case purgeColourKey: case purgeColourKey:
assignColorCustomizations(undefined, config); assignColorCustomizations(undefined, config);
setWorkbenchOptions(undefined, config); setWorkbenchOptions(undefined, config);
@ -137,7 +128,6 @@ export const THEME_ACCENTS_SETTER = () => {
default: default:
assignColorCustomizations(themeConfigCommon.accents[accentSelected], config); assignColorCustomizations(themeConfigCommon.accents[accentSelected], config);
setWorkbenchOptions(accentSelected, config); setWorkbenchOptions(accentSelected, config);
// assignIconTheme(accentSelected);
break; break;
} }
}); });

View file

@ -1,63 +1,55 @@
import * as fs from 'fs'; import * as fs from 'fs';
import * as vscode from 'vscode';
import { getAbsolutePath, getDefaultValues, getThemeIconsByContributeID, getThemeIconsContribute } from "../../helpers/fs"; import { getAbsolutePath, getDefaultValues, getThemeIconsByContributeID, getThemeIconsContribute } from "../../helpers/fs";
import { getCurrentThemeID, getCurrentThemeIconsID, reloadWindow } from "../../helpers/vscode"; import { getCurrentThemeIconsID } from "../../helpers/vscode";
import { getCustomSettings, isAccent, shouldReloadWindow } from "../../helpers/settings"; import { getCustomSettings, isAccent, isMaterialThemeIcons } from "../../helpers/settings";
import { CHARSET } from "../../consts/files"; import { CHARSET } from "../../consts/files";
import { IPackageJSONThemeIcons } from "../../interfaces/ipackage.json"; import { IPackageJSONThemeIcons } from "../../interfaces/ipackage.json";
import { IThemeIcons } from "../../interfaces/itheme-icons"; import { IThemeIcons } from "../../interfaces/itheme-icons";
export const THEME_CHANGE_LISTENER = () => { export const THEME_ICONS = () => {
vscode.workspace.onDidChangeConfiguration(() => { let deferred: any = {};
let themeID: string = getCurrentThemeID(); let promise = new Promise((resolve, reject) => {
let themeIconsID: string = getCurrentThemeIconsID(); deferred.resolve = resolve;
deferred.reject = reject;
});
let themeIconsID: string = getCurrentThemeIconsID();
if (themeIconsID && /material-theme/i.test(themeIconsID)) { if (isMaterialThemeIcons(themeIconsID)) {
let customSettings = getCustomSettings(); let customSettings = getCustomSettings();
let defaults = getDefaultValues(); let defaults = getDefaultValues();
let accentName = customSettings.accent; let accentName = customSettings.accent;
let variantNames: string[] = themeID.split('Material Theme'); let variantName: string = customSettings.themeColours === undefined ? '' : customSettings.themeColours;
let variantName: string = variantNames[1] === undefined ? '' : variantNames[1].trim(); let themeContribute: IPackageJSONThemeIcons = getThemeIconsContribute(themeIconsID);
let themeContribute: IPackageJSONThemeIcons = getThemeIconsContribute(themeIconsID); let theme: IThemeIcons = getThemeIconsByContributeID(themeIconsID);
let theme: IThemeIcons = getThemeIconsByContributeID(themeIconsID); let themepath: string = getAbsolutePath(themeContribute.path);
let themepath: string = getAbsolutePath(themeContribute.path);
if (isAccent(accentName, defaults)) { if (isAccent(accentName, defaults)) {
let _accentName = accentName.replace(/\s+/, '-'); let _accentName = accentName.replace(/\s+/, '-');
theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath.replace('.svg', `.accent.${ _accentName }.svg`); theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath.replace('.svg', `.accent.${ _accentName }.svg`);
theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath.replace('.svg', `.accent.${ _accentName }.svg`); theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath.replace('.svg', `.accent.${ _accentName }.svg`);
} else { } else {
theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath; theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath;
theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath; theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath;
}
theme.iconDefinitions._folder_dark.iconPath = defaults.icons.theme.iconDefinitions._folder_dark.iconPath.replace('.svg', `${ variantName }.svg`);
theme.iconDefinitions._file_folder.iconPath = defaults.icons.theme.iconDefinitions._file_folder.iconPath.replace('.svg', `${ variantName }.svg`);
theme.iconDefinitions._folder_dark_build.iconPath = defaults.icons.theme.iconDefinitions._folder_dark_build.iconPath.replace('.svg', `${ variantName }.svg`);
theme.iconDefinitions["_file_folder-build"].iconPath = defaults.icons.theme.iconDefinitions["_file_folder-build"].iconPath.replace('.svg', `${ variantName }.svg`);
fs.writeFile(themepath, JSON.stringify(theme), { encoding: CHARSET }, (error) => {
if (error) {
deferred.reject(error);
return;
} }
theme.iconDefinitions._folder_dark.iconPath = defaults.icons.theme.iconDefinitions._folder_dark.iconPath.replace('.svg', `${ variantName }.svg`); deferred.resolve();
theme.iconDefinitions._file_folder.iconPath = defaults.icons.theme.iconDefinitions._file_folder.iconPath.replace('.svg', `${ variantName }.svg`); });
theme.iconDefinitions._folder_dark_build.iconPath = defaults.icons.theme.iconDefinitions._folder_dark_build.iconPath.replace('.svg', `${ variantName }.svg`); } else {
theme.iconDefinitions["_file_folder-build"].iconPath = defaults.icons.theme.iconDefinitions["_file_folder-build"].iconPath.replace('.svg', `${ variantName }.svg`); deferred.reject();
}
fs.writeFile(themepath, JSON.stringify(theme), { encoding: CHARSET }, (error) => { return promise;
if (error) {
console.trace(error);
return;
}
const PROMPT_MESSAGE: string = 'Material Theme requires VS Code reload in order to display icons correctly.';
const PROMPT_MESSAGE_CONFIRM: string = 'Ok, reload';
const PROMPT_MESSAGE_CANCEL: string = 'I will do it later';
if (shouldReloadWindow(themeID, themeIconsID)) {
vscode.window.showInformationMessage(PROMPT_MESSAGE, PROMPT_MESSAGE_CONFIRM, PROMPT_MESSAGE_CANCEL).then((response) => {
if (response === PROMPT_MESSAGE_CONFIRM) {
reloadWindow();
}
}, (error) => {
console.log(error);
});
}
});
}
});
} }

View file

@ -0,0 +1,37 @@
import * as vscode from 'vscode';
import { getDefaultValues, getPackageJSON, getAbsolutePath } from "../../helpers/fs";
import { setCustomSettings, getCustomSettings } from "../../helpers/settings";
import { THEME_ICONS } from "../theme-icons/index";
import * as fs from "fs";
import { CHARSET } from "../../consts/files";
import { reloadWindow } from "../../helpers/vscode";
export const THEME_VARIANT = () => {
let defaults = getDefaultValues();
let options: string[] = Object.keys(defaults.themeVariants);
let packageJSON = getPackageJSON();
options = options.filter(i => i !== packageJSON.contributes.themes[0].path);
vscode.window.showQuickPick(options).then((response: string) => {
let customSettings = getCustomSettings();
let themepath: string = defaults.themeVariants[response];
let themeUITheme: string = defaults.themeVariantsUITheme[response];
customSettings.themeColours = response;
packageJSON.contributes.themes[0].path = themepath;
packageJSON.contributes.themes[0].uiTheme = themeUITheme;
fs.writeFile(getAbsolutePath('./package.json'), JSON.stringify(packageJSON, null, 2), { encoding: CHARSET }, (error) => {
if (error) {
console.trace(error);
return;
}
setCustomSettings(customSettings);
THEME_ICONS().then(() => reloadWindow()).catch(error => console.trace(error));
});
});
}

View file

@ -42,9 +42,21 @@
} }
}, },
"themeVariants": { "themeVariants": {
"Darker": "./themes/Material-Theme-Darker.json",
"Default": "./themes/Material-Theme-Default.json",
"Light": "./themes/Material-Theme-Lighter.json",
"Palenight": "./themes/Material-Theme-Palenight.json"
},
"themeVariantsColours": {
"Darker": "#424242", "Darker": "#424242",
"Default": "#4A616C", "Default": "#4A616C",
"Light": "#90A4AE", "Light": "#90A4AE",
"Palenight": "#4E5579" "Palenight": "#4E5579"
},
"themeVariantsUITheme": {
"Darker": "vs-dark",
"Default": "vs-dark",
"Light": "vs",
"Palenight": "vs-dark"
} }
} }

View file

@ -96,7 +96,7 @@ export function shouldReloadWindow(themeColour: string, themeIcons: string): boo
let customSettings = getCustomSettings(); let customSettings = getCustomSettings();
return customSettings.themeColours !== themeColour || customSettings.themeIcons !== themeIcons || customSettings.accent !== customSettings.accentPrevious; return customSettings.accent !== customSettings.accentPrevious;
} }
/** /**
@ -105,7 +105,7 @@ export function shouldReloadWindow(themeColour: string, themeIcons: string): boo
* @param {string} accentName * @param {string} accentName
*/ */
export function updateAccent(accentName: string): Thenable<void> { export function updateAccent(accentName: string): Thenable<void> {
let config: IThemeCustomProperties = {}; let config: IThemeCustomProperties = getCustomSettings();
let prevaccent = getAccent(); let prevaccent = getAccent();
if (prevaccent !== undefined && prevaccent !== accentName) { if (prevaccent !== undefined && prevaccent !== accentName) {

View file

@ -1,5 +1,20 @@
import * as vscode from 'vscode' import * as vscode from 'vscode'
export function askForWindowReload(): Thenable<void> {
const PROMPT_MESSAGE: string = 'Material Theme requires VS Code reload in order to display icons correctly.';
const PROMPT_MESSAGE_CONFIRM: string = 'Ok, reload';
const PROMPT_MESSAGE_CANCEL: string = 'I will do it later';
return vscode.window.showInformationMessage(PROMPT_MESSAGE, PROMPT_MESSAGE_CONFIRM, PROMPT_MESSAGE_CANCEL).then((response) => {
if (response === PROMPT_MESSAGE_CONFIRM) {
reloadWindow();
}
}, (error) => {
console.log(error);
});
}
/** /**
* Gets your current theme ID * Gets your current theme ID
* @export * @export

View file

@ -2,6 +2,8 @@ export interface IDefaults {
accents: IAccents; accents: IAccents;
icons: IDefaultsThemeIcons; icons: IDefaultsThemeIcons;
themeVariants: IDefaultsThemeVariant; themeVariants: IDefaultsThemeVariant;
themeVariantsColours: IDefaultsThemeVariantColours;
themeVariantsUITheme: IDefaultsThemeVariantUITheme;
} }
export interface IAccents { export interface IAccents {
@ -35,8 +37,17 @@ export interface IDefaultsThemeIcons {
} }
export interface IDefaultsThemeVariant { export interface IDefaultsThemeVariant {
[index: string]: string;
Darker: string; Darker: string;
Default: string; Default: string;
Light: string; Light: string;
Palenight: string; Palenight: string;
} }
export interface IDefaultsThemeVariantColours extends IDefaultsThemeVariant {
}
export interface IDefaultsThemeVariantUITheme extends IDefaultsThemeVariant {
}

View file

@ -2,15 +2,16 @@ import * as vscode from 'vscode';
import { IGenericObject } from "./interfaces/igeneric-object"; import { IGenericObject } from "./interfaces/igeneric-object";
import { THEME_ACCENTS_SETTER } from "./commands/accents-setter/index"; import { THEME_ACCENTS_SETTER } from "./commands/accents-setter/index";
import { THEME_CHANGE_LISTENER } from "./commands/theme-icons/index"; import { THEME_VARIANT } from "./commands/theme-variant/index";
enum Commands { enum Commands {
ACCENTS, ACCENTS,
COLOR_THEME COLOUR_VARIANT
} }
const OPTIONS: IGenericObject<number> = { const OPTIONS: IGenericObject<number> = {
'Change accent color': Commands.ACCENTS 'Change accent color': Commands.ACCENTS,
'Change color variant': Commands.COLOUR_VARIANT
} }
export function activate(context: vscode.ExtensionContext) { export function activate(context: vscode.ExtensionContext) {
@ -23,11 +24,12 @@ export function activate(context: vscode.ExtensionContext) {
case Commands.ACCENTS: case Commands.ACCENTS:
THEME_ACCENTS_SETTER(); THEME_ACCENTS_SETTER();
break; break;
case Commands.COLOUR_VARIANT:
THEME_VARIANT();
break;
} }
}); });
}); });
THEME_CHANGE_LISTENER();
context.subscriptions.push(command); context.subscriptions.push(command);
} }

View file

@ -66,22 +66,7 @@
{ {
"label": "Material Theme", "label": "Material Theme",
"uiTheme": "vs-dark", "uiTheme": "vs-dark",
"path": "./themes/Material-Theme-Default.json"
},
{
"label": "Material Theme Darker",
"uiTheme": "vs-dark",
"path": "./themes/Material-Theme-Darker.json" "path": "./themes/Material-Theme-Darker.json"
},
{
"label": "Material Theme Palenight",
"uiTheme": "vs-dark",
"path": "./themes/Material-Theme-Palenight.json"
},
{
"label": "Material Theme Lighter",
"uiTheme": "vs",
"path": "./themes/Material-Theme-Lighter.json"
} }
], ],
"iconThemes": [ "iconThemes": [

File diff suppressed because one or more lines are too long