chore: icons variants themes based on current Material Theme.

This commit is contained in:
OctoD 2017-06-16 20:44:10 +02:00
parent 1fe8b851f2
commit 2012046243
8 changed files with 153 additions and 5 deletions

View file

@ -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);
}

View file

@ -3,6 +3,7 @@ export * from './tasks/changelog';
export * from './tasks/bump'; export * from './tasks/bump';
export * from './tasks/icons'; export * from './tasks/icons';
export * from './tasks/icons-accents'; export * from './tasks/icons-accents';
export * from './tasks/icons-variants';
export * from './tasks/themes'; export * from './tasks/themes';
export * from './tasks/watcher'; export * from './tasks/watcher';

View file

@ -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;
}
}

View file

@ -5,6 +5,7 @@ import * as path from 'path';
import { IPackageJSON, IPackageJSONThemeIcons } from "../interfaces/ipackage.json"; import { IPackageJSON, IPackageJSONThemeIcons } from "../interfaces/ipackage.json";
import { MESSAGE_GENERATED, MESSAGE_ICON_ACCENTS_ERROR } from "../consts/log"; import { MESSAGE_GENERATED, MESSAGE_ICON_ACCENTS_ERROR } from "../consts/log";
import { addContributeIconTheme, writePackageJSON } from "../helpers/contribute-icon-theme";
import { CHARSET } from "../consts/files"; import { CHARSET } from "../consts/files";
import { IThemeConfigCommons } from '../../extensions/interfaces/icommons'; import { IThemeConfigCommons } from '../../extensions/interfaces/icommons';
@ -47,7 +48,7 @@ function replaceNameWithAccent(name: string, accentName: string): string {
* @param {string} colour * @param {string} colour
* @returns {string} * @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) => { 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('#', ''); colour = colour.replace('#', '');
@ -109,12 +110,12 @@ export default gulp.task('build:icons.accents', cb => {
fs.writeFileSync(themePath, JSON.stringify(themecopy)); 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)); 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) { } catch (error) {
// http://ragefaces.memesoftware.com/faces/large/misc-le-fu-l.png // http://ragefaces.memesoftware.com/faces/large/misc-le-fu-l.png

View file

@ -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<string> = {
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();
});

9
.vscode/launch.json vendored
View file

@ -4,6 +4,15 @@
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{
"type": "node",
"request": "launch",
"name": "Gulp build-icons-variants",
"program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js",
"args": [
"build:icons.variants"
]
},
{ {
"type": "node", "type": "node",
"request": "launch", "request": "launch",

View file

@ -75,9 +75,11 @@ function accentedThemeName(accentName: string): string {
* @param accentName * @param accentName
*/ */
function assignIconTheme(accentName: string | undefined): void { function assignIconTheme(accentName: string | undefined): void {
let accentValue: string;
let cacheKey: string = 'materialTheme.cache.workbench.iconTheme'; let cacheKey: string = 'materialTheme.cache.workbench.iconTheme';
let cache: any = vscode.workspace.getConfiguration().inspect(cacheKey); 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) { if (!cache.globalValue && accentName !== undefined) {
vscode.workspace.getConfiguration().update(cacheKey, vscode.workspace.getConfiguration().get('workbench.iconTheme'), true).then(() => {}, reason => vscode.window.showErrorMessage(reason)); 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); vscode.workspace.getConfiguration().update(cacheKey, undefined, true);
} else if (accentName !== undefined) { } else if (accentName !== undefined) {
accentValue = accentedThemeName(accentName); 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 => { vscode.workspace.getConfiguration().update('workbench.iconTheme', accentValue, true).then(() => {}, reason => {

View file

@ -23,13 +23,14 @@
"vscode": "^1.12.0" "vscode": "^1.12.0"
}, },
"scripts": { "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-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", "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": "rimraf icons && rimraf themes/Material-Theme-Icons.json",
"remove-icons-tmp": "rimraf themes/.material-theme-icons.tmp", "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": "npm run remove-icons && npm run minimize-icons && gulp build:icons && npm run minimize-json",
"build-icons-accents": "gulp build:icons.accents", "build-icons-accents": "gulp build:icons.accents",
"build-icons-variants": "gulp build:icons.variants",
"build-themes": "gulp build:themes", "build-themes": "gulp build:themes",
"release": "npm run bump && npm run changelog", "release": "npm run bump && npm run changelog",
"postinstall": "node ./node_modules/vscode/bin/install", "postinstall": "node ./node_modules/vscode/bin/install",