From 2012046243b0f022c3193bc3df6f5a6b5295996e Mon Sep 17 00:00:00 2001 From: OctoD Date: Fri, 16 Jun 2017 20:44:10 +0200 Subject: [PATCH] chore: icons variants themes based on current Material Theme. --- .gulp/helpers/contribute-icon-theme.ts | 46 +++++++++++++++ .gulp/index.ts | 1 + .gulp/interfaces/itheme-icons-variants.ts | 12 ++++ .gulp/tasks/icons-accents.ts | 7 ++- .gulp/tasks/icons-variants.ts | 70 +++++++++++++++++++++++ .vscode/launch.json | 9 +++ extensions/accents-setter/index.ts | 10 +++- package.json | 3 +- 8 files changed, 153 insertions(+), 5 deletions(-) create mode 100644 .gulp/helpers/contribute-icon-theme.ts create mode 100644 .gulp/interfaces/itheme-icons-variants.ts create mode 100644 .gulp/tasks/icons-variants.ts diff --git a/.gulp/helpers/contribute-icon-theme.ts b/.gulp/helpers/contribute-icon-theme.ts new file mode 100644 index 0000000..6982fb8 --- /dev/null +++ b/.gulp/helpers/contribute-icon-theme.ts @@ -0,0 +1,46 @@ +import * as fs from 'fs' +import * as path from 'path' + +import { IPackageJSON, IPackageJSONThemeIcons } from "../interfaces/ipackage.json"; + +import { CHARSET } from "../consts/files"; + +/** + * @export + * @param {string} id + * @param {string} label + * @param {string} path + * @param {IPackageJSON} topackage + * @returns {IPackageJSON} + */ +export function addContributeIconTheme(id: string, label: string, path: string, topackage: IPackageJSON): IPackageJSON { + let contribute: IPackageJSONThemeIcons = { id, label, path }; + + if (id === null || id === undefined) { + throw new TypeError(`addContributeIconTheme: variable id must be a string, got ${ Object.prototype.toString.call(id) }`); + } + + if (label === null || label === undefined) { + throw new TypeError(`addContributeIconTheme: variable label must be a string, got ${ Object.prototype.toString.call(label) }`); + } + + if (path === null || path === undefined) { + throw new TypeError(`addContributeIconTheme: variable path must be a string, got ${ Object.prototype.toString.call(path) }`); + } + + if (topackage === null || topackage === undefined) { + throw new TypeError(`addContributeIconTheme: variable topackage must be a string, got ${ Object.prototype.toString.call(topackage) }`); + } + + topackage.contributes.iconThemes.push(contribute); + + return topackage; +} + +/** + * @export + * @param {IPackageJSON} packageJSON + */ +export function writePackageJSON(packageJSON: IPackageJSON): void { + fs.writeFileSync(path.join(process.cwd(), './package.json'), JSON.stringify(packageJSON, null, 2), CHARSET); +} \ No newline at end of file diff --git a/.gulp/index.ts b/.gulp/index.ts index 25c2eb4..01c90db 100644 --- a/.gulp/index.ts +++ b/.gulp/index.ts @@ -3,6 +3,7 @@ export * from './tasks/changelog'; export * from './tasks/bump'; export * from './tasks/icons'; export * from './tasks/icons-accents'; +export * from './tasks/icons-variants'; export * from './tasks/themes'; export * from './tasks/watcher'; diff --git a/.gulp/interfaces/itheme-icons-variants.ts b/.gulp/interfaces/itheme-icons-variants.ts new file mode 100644 index 0000000..0f9cad9 --- /dev/null +++ b/.gulp/interfaces/itheme-icons-variants.ts @@ -0,0 +1,12 @@ +export interface IThemeIconsVariantsItem { + iconPath: string; +} + +export interface IThemeIconsVariants { + iconDefinitions: { + "_folder_dark": IThemeIconsVariantsItem; + "_folder_dark-build": IThemeIconsVariantsItem; + "_file_folder": IThemeIconsVariantsItem; + "_file_folder-build": IThemeIconsVariantsItem; + } +} \ No newline at end of file diff --git a/.gulp/tasks/icons-accents.ts b/.gulp/tasks/icons-accents.ts index 25790b5..07cb42b 100644 --- a/.gulp/tasks/icons-accents.ts +++ b/.gulp/tasks/icons-accents.ts @@ -5,6 +5,7 @@ import * as path from 'path'; import { IPackageJSON, IPackageJSONThemeIcons } from "../interfaces/ipackage.json"; import { MESSAGE_GENERATED, MESSAGE_ICON_ACCENTS_ERROR } from "../consts/log"; +import { addContributeIconTheme, writePackageJSON } from "../helpers/contribute-icon-theme"; import { CHARSET } from "../consts/files"; import { IThemeConfigCommons } from '../../extensions/interfaces/icommons'; @@ -47,7 +48,7 @@ function replaceNameWithAccent(name: string, accentName: string): string { * @param {string} colour * @returns {string} */ -function replaceSVGColour(filecontent: string, colour: string): string { +export function replaceSVGColour(filecontent: string, colour: string): string { return filecontent.replace(new RegExp('.st0\{fill:#([a-zA-Z0-9]{6})\}|path fill="#([a-zA-Z0-9]{6})"'), ($0, $1, $2) => { colour = colour.replace('#', ''); @@ -109,12 +110,12 @@ export default gulp.task('build:icons.accents', cb => { fs.writeFileSync(themePath, JSON.stringify(themecopy)); - PACKAGE_JSON.contributes.iconThemes.push({ id, label, path: themepathJSON }); + addContributeIconTheme(id, label, themepathJSON, PACKAGE_JSON); gutil.log(gutil.colors.green(MESSAGE_GENERATED, themePath)); }); - fs.writeFileSync(path.join(process.cwd(), './package.json'), JSON.stringify(PACKAGE_JSON, null, 2), CHARSET); + writePackageJSON(PACKAGE_JSON); } catch (error) { // http://ragefaces.memesoftware.com/faces/large/misc-le-fu-l.png diff --git a/.gulp/tasks/icons-variants.ts b/.gulp/tasks/icons-variants.ts new file mode 100644 index 0000000..d867c23 --- /dev/null +++ b/.gulp/tasks/icons-variants.ts @@ -0,0 +1,70 @@ +import * as fs from 'fs'; +import * as gulp from 'gulp'; +import * as path from 'path'; + +import { addContributeIconTheme, writePackageJSON } from "../helpers/contribute-icon-theme"; + +import { CHARSET } from "../consts/files"; +import { IGenericObject } from "../../extensions/interfaces/igeneric-object"; +import { IPackageJSON } from "../interfaces/ipackage.json"; +import { IThemeIconsVariants } from "../interfaces/itheme-icons-variants"; +import PATHS from '../../extensions/consts/paths' + +const PACKAGE_JSON: IPackageJSON = require(path.join(process.cwd(), './package.json')); + +let variants: IGenericObject = { + Darker: '#424242', + Default: '#4A616C', + Light: '#90A4AE', + Palenight: '#4E5579' +} + +function writeIconVariant(filepath: string, destpath: string, colour: string): void { + let regexp = new RegExp('.st0\{opacity:.16;fill:(#[a-zA-Z0-9]{3,6})') + + filepath = path.join(process.cwd(), PATHS.ICONS, filepath); + destpath = path.join(process.cwd(), PATHS.ICONS, destpath); + fs.writeFileSync(destpath, fs.readFileSync(filepath, CHARSET).replace(regexp, ($0, $1) => $0.replace($1, colour)), CHARSET) ; +} + + +export default gulp.task('build:icons.variants', callback => { + try { + Object.keys(variants).forEach(variantName => { + PACKAGE_JSON.contributes.iconThemes.forEach(contribute => { + let regexpCheck: RegExp = new RegExp(Object.keys(variants).join('|'), 'i'); + + if (regexpCheck.test(contribute.path) || regexpCheck.test(contribute.id)) return; + + let basepath: string = path.join(process.cwd(), contribute.path); + let basetheme: IThemeIconsVariants = require(basepath); + let themepath: string = path.join(process.cwd(), contribute.path.replace('.json', `.${ variantName }.json`)); + let theme: IThemeIconsVariants = JSON.parse(JSON.stringify(basetheme)); + + let contributeID: string = `${ contribute.id }-${ variantName.toLowerCase() }`; + let contributeLabel: string = `${ contribute.label } - ${ variantName }` + let contributePath: string = path.relative(process.cwd(), themepath); + + 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-build"].iconPath = theme.iconDefinitions["_file_folder-build"].iconPath.replace('.svg', `${ variantName }.svg`); + + fs.writeFileSync(themepath, JSON.stringify(theme), CHARSET); + + writeIconVariant(basetheme.iconDefinitions._folder_dark.iconPath, theme.iconDefinitions._folder_dark.iconPath, variants[variantName]); + writeIconVariant(basetheme.iconDefinitions._file_folder.iconPath, theme.iconDefinitions._file_folder.iconPath, variants[variantName]); + writeIconVariant(basetheme.iconDefinitions["_file_folder-build"].iconPath, theme.iconDefinitions["_file_folder-build"].iconPath, variants[variantName]); + + addContributeIconTheme(contributeID, contributeLabel, contributePath, PACKAGE_JSON); + }); + }); + + writePackageJSON(PACKAGE_JSON); + + } catch (error) { + callback(error); + return; + } + + callback(); +}); \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json index 68a8c62..acc9440 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -4,6 +4,15 @@ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Gulp build-icons-variants", + "program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js", + "args": [ + "build:icons.variants" + ] + }, { "type": "node", "request": "launch", diff --git a/extensions/accents-setter/index.ts b/extensions/accents-setter/index.ts index f615e88..bc9d667 100644 --- a/extensions/accents-setter/index.ts +++ b/extensions/accents-setter/index.ts @@ -75,9 +75,11 @@ function accentedThemeName(accentName: string): string { * @param accentName */ function assignIconTheme(accentName: string | undefined): void { + let accentValue: string; let cacheKey: string = 'materialTheme.cache.workbench.iconTheme'; let cache: any = vscode.workspace.getConfiguration().inspect(cacheKey); - let accentValue: string; + let currentTheme: any = vscode.workspace.getConfiguration().inspect('workbench.colorTheme'); + let materialThemeName: string = 'Material Theme'; if (!cache.globalValue && accentName !== undefined) { vscode.workspace.getConfiguration().update(cacheKey, vscode.workspace.getConfiguration().get('workbench.iconTheme'), true).then(() => {}, reason => vscode.window.showErrorMessage(reason)); @@ -88,6 +90,12 @@ function assignIconTheme(accentName: string | undefined): void { vscode.workspace.getConfiguration().update(cacheKey, undefined, true); } else if (accentName !== undefined) { accentValue = accentedThemeName(accentName); + + if (!!currentTheme.globalValue && currentTheme.globalValue.indexOf(materialThemeName) >= 0) { + let variantName: string | undefined = currentTheme.globalValue.split(materialThemeName)[1]; + + accentValue = `${ accentValue }-${ !!variantName ? variantName.trim().toLowerCase() : 'default' }`; + } } vscode.workspace.getConfiguration().update('workbench.iconTheme', accentValue, true).then(() => {}, reason => { diff --git a/package.json b/package.json index b02f55b..a425167 100644 --- a/package.json +++ b/package.json @@ -23,13 +23,14 @@ "vscode": "^1.12.0" }, "scripts": { - "build": "npm run build-icons && npm run build-themes && npm run build-icons-accents", + "build": "npm run build-icons && npm run build-themes && npm run build-icons-accents && npm run build-icons-variants", "minimize-icons": "svgo -f src/icons/svgs -o icons", "minimize-json": "json-minify themes/.material-theme-icons.tmp > themes/Material-Theme-Icons.json && npm run remove-icons-tmp", "remove-icons": "rimraf icons && rimraf themes/Material-Theme-Icons.json", "remove-icons-tmp": "rimraf themes/.material-theme-icons.tmp", "build-icons": "npm run remove-icons && npm run minimize-icons && gulp build:icons && npm run minimize-json", "build-icons-accents": "gulp build:icons.accents", + "build-icons-variants": "gulp build:icons.variants", "build-themes": "gulp build:themes", "release": "npm run bump && npm run changelog", "postinstall": "node ./node_modules/vscode/bin/install",