From 00b4b0df1e0e09356da1c7bcceb53c097bc39afd Mon Sep 17 00:00:00 2001 From: OctoD Date: Mon, 12 Jun 2017 19:49:50 +0200 Subject: [PATCH] chore: Drafts accented icon themes --- .gulp/consts/log.ts | 1 + .gulp/index.ts | 1 + .gulp/interfaces/ipackage.json.ts | 54 ++++++++++ .gulp/interfaces/itheme-icons-accents.ts | 10 ++ .gulp/tasks/icons-accents.ts | 132 +++++++++++++++++++++++ .vscode/launch.json | 9 ++ extensions/accents-setter/index.ts | 26 ++--- package.json | 3 +- 8 files changed, 222 insertions(+), 14 deletions(-) create mode 100644 .gulp/interfaces/ipackage.json.ts create mode 100644 .gulp/interfaces/itheme-icons-accents.ts create mode 100644 .gulp/tasks/icons-accents.ts diff --git a/.gulp/consts/log.ts b/.gulp/consts/log.ts index d9bada2..bc933ba 100644 --- a/.gulp/consts/log.ts +++ b/.gulp/consts/log.ts @@ -2,5 +2,6 @@ export const HR: string = '\n————————————————— export const MESSAGE_BUMP_ERROR: string = ' There was an issue bumping version:\n'; export const MESSAGE_BUMP_SUCCESS: string = ' Finished successfully\n'; export const MESSAGE_ICON_ERROR: string = 'There is an error with JSON generated for icons'; +export const MESSAGE_ICON_ACCENTS_ERROR: string = 'Failed to create accents icon themes, please read the log file.'; export const MESSAGE_GENERATED: string = 'Generated'; export const MESSAGE_THEME_VARIANT_PARSE_ERROR: string = 'Error when parsing json for theme variants'; \ No newline at end of file diff --git a/.gulp/index.ts b/.gulp/index.ts index 2c2d4bb..25c2eb4 100644 --- a/.gulp/index.ts +++ b/.gulp/index.ts @@ -2,6 +2,7 @@ export * from './tasks/changelog'; export * from './tasks/bump'; export * from './tasks/icons'; +export * from './tasks/icons-accents'; export * from './tasks/themes'; export * from './tasks/watcher'; diff --git a/.gulp/interfaces/ipackage.json.ts b/.gulp/interfaces/ipackage.json.ts new file mode 100644 index 0000000..2ec43cd --- /dev/null +++ b/.gulp/interfaces/ipackage.json.ts @@ -0,0 +1,54 @@ +import { IGenericObject } from '../../extensions/interfaces/igeneric-object'; + +export interface IPackageJSONBadge { + description: string; + href: string; + url: string; +} + +export interface IPackageJSONContributes { + commands: IPackageJSONCommand[]; + iconThemes: IPackageJSONThemeIcons[]; + themes: IPackageJSONTheme[]; +} + +export interface IPackageJSONCommand { + category: string; + command: string; + title: string; +} + +export interface IPackageJSONTheme { + label: string; + path: string; + uiTheme: string; +} + +export interface IPackageJSONThemeIcons { + id: string; + label: string; + path: string; +} + +export interface IPackageJSON { + "activationEvents": string[] + "badges": IPackageJSONBadge[]; + "contributes": IPackageJSONContributes; + "bugs": IGenericObject; + "categories": string[]; + "description": string; + "displayName": string; + "engines": IGenericObject; + "galleryBanner": IGenericObject; + "homepage": string; + "icon": string; + "license": string; + "main": string; + "name": string; + "preview": boolean; + "publisher": string; + "repository": IGenericObject; + "scripts": IGenericObject; + "version": string; + "devDependencies": IGenericObject; +} \ No newline at end of file diff --git a/.gulp/interfaces/itheme-icons-accents.ts b/.gulp/interfaces/itheme-icons-accents.ts new file mode 100644 index 0000000..a6acb63 --- /dev/null +++ b/.gulp/interfaces/itheme-icons-accents.ts @@ -0,0 +1,10 @@ +interface IIconObject { + iconPath: string +} + +export interface IThemeIconsAccents { + iconDefinitions: { + _folder_open: IIconObject; + _folder_open_build: IIconObject; + } +} \ No newline at end of file diff --git a/.gulp/tasks/icons-accents.ts b/.gulp/tasks/icons-accents.ts new file mode 100644 index 0000000..cc83304 --- /dev/null +++ b/.gulp/tasks/icons-accents.ts @@ -0,0 +1,132 @@ +import * as fs from 'fs'; +import * as gulp from 'gulp'; +import * as gutil from 'gulp-util'; +import * as path from 'path'; + +import { IPackageJSON, IPackageJSONThemeIcons } from "../interfaces/ipackage.json"; +import { MESSAGE_GENERATED, MESSAGE_ICON_ACCENTS_ERROR } from "../consts/log"; + +import { CHARSET } from "../consts/files"; +import { IThemeConfigCommons } from '../../extensions/interfaces/icommons'; +import { IThemeIconsAccents } from "../interfaces/itheme-icons-accents"; +import PATHS from '../consts/paths' + +const BASE_ICON_THEME_PATH: string = path.join(process.cwd(), PATHS.THEMES, './Material-Theme-Icons.json'); +const THEME_COMMONS: IThemeConfigCommons = require('../../extensions/accents-setter/commons.json'); +const PACKAGE_JSON: IPackageJSON = require('../../package.json'); + +const PACKAGE_JSON_ICON_THEME: IPackageJSONThemeIcons = { + id: "material-theme-icons", + label: "Material Theme Icons", + path: "./themes/Material-Theme-Icons.json" +} + +/** + * Gets file path + * @param {string} filename + * @returns {string} + */ +function getFilepath(filename: string): string { + return path.join(PATHS.THEMES, filename); +} + +/** + * Icon theme name + * @param {string} accentName + * @returns {string} + */ +function makefileName(accentName: string): string { + return `./Material-Theme-Icons-${ accentName }.json`; +} + +/** + * Normalizes icon path + * @param {string} iconPath + * @returns {string} + */ +function normalizeIconPath(iconPath: string): string { + return path.join(process.cwd(), PATHS.ICONS, iconPath); +} + +/** + * Replaces a file name with the accented filename + * @param {string} name + * @param {string} accentName + * @returns {string} + */ +function replaceNameWithAccent(name: string, accentName: string): string { + return name.replace('.svg', `.accent.${ accentName }.svg`); +} + +/** + * Replaces a SVG colour + * + * @param {string} filecontent + * @param {string} colour + * @returns {string} + */ +function replaceSVGColour(filecontent: string, colour: string): string { + return filecontent.replace(/\.st0\s{0,}\{fill:#([a-zA-Z0-9]{6});\}/, ($0, $1) => $0.replace($1, colour)); +} + +/** + * Replaces white spaces in accents' names + * @param {string} input + * @returns {string} + */ +function replaceWhiteSpaces(input: string): string { + return input.replace(/\s+/g, '-'); +} + +/** + * Writes a new svg file + * @param {string} fromFile + * @param {string} toFile + * @param {string} accentColour + */ +function writeSVGIcon(fromFile: string, toFile: string, accent: string): void { + let fileContent: string = fs.readFileSync(normalizeIconPath(fromFile), CHARSET); + let content: string = replaceSVGColour(normalizeIconPath(fileContent), THEME_COMMONS.accents[accent]); + toFile = normalizeIconPath(toFile); + + fs.writeFileSync(toFile, content); +} + +// Exports task to index.ts +export default gulp.task('build:icons.accents', cb => { + let basetheme: IThemeIconsAccents; + + PACKAGE_JSON.contributes.iconThemes = [ PACKAGE_JSON_ICON_THEME ]; + + try { + basetheme = require(BASE_ICON_THEME_PATH); + + Object.keys(THEME_COMMONS.accents).forEach(key => { + let iconName = replaceWhiteSpaces(key); + let themecopy: IThemeIconsAccents = JSON.parse(JSON.stringify(basetheme)); + let themePath: string = getFilepath(makefileName(key)); + + themecopy.iconDefinitions._folder_open.iconPath = replaceNameWithAccent(basetheme.iconDefinitions._folder_open.iconPath, iconName); + themecopy.iconDefinitions._folder_open_build.iconPath = replaceNameWithAccent(basetheme.iconDefinitions._folder_open_build.iconPath, iconName); + + writeSVGIcon(basetheme.iconDefinitions._folder_open.iconPath, themecopy.iconDefinitions._folder_open.iconPath, THEME_COMMONS.accents[key]); + writeSVGIcon(basetheme.iconDefinitions._folder_open_build.iconPath, themecopy.iconDefinitions._folder_open_build.iconPath, THEME_COMMONS.accents[key]); + + fs.writeFileSync(themePath, JSON.stringify(themecopy)); + + PACKAGE_JSON + + gutil.log(gutil.colors.green(MESSAGE_GENERATED, themePath)); + }); + + fs.writeFileSync(path.join(process.cwd(), './package.test.json'), JSON.stringify(PACKAGE_JSON, null, 2), CHARSET); + + } catch (error) { + // http://ragefaces.memesoftware.com/faces/large/misc-le-fu-l.png + gutil.log(gutil.colors.red(MESSAGE_ICON_ACCENTS_ERROR)); + cb(error); + return; + } + + cb(); +}); \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json index 4018e4c..68a8c62 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", + "program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js", + "args": [ + "build:icons.accents" + ] + }, { "name": "Launch Extension", "type": "extensionHost", diff --git a/extensions/accents-setter/index.ts b/extensions/accents-setter/index.ts index 7f53f83..084242f 100644 --- a/extensions/accents-setter/index.ts +++ b/extensions/accents-setter/index.ts @@ -93,10 +93,10 @@ function setWorkbenchOptions(accentSelected: string, config: any): void { export const THEME_ACCENTS_SETTER = () => { // shows the quick pick dropdown let options: string[] = Object.keys(themeConfigCommon.accents); - let customColourKey: string = 'Custom colour'; + // let customColourKey: string = 'Custom colour'; let purgeColourKey: string = 'Remove accents'; - options.push(customColourKey); + // options.push(customColourKey); options.push(purgeColourKey); vscode.window.showQuickPick(options).then(accentSelected => { @@ -105,19 +105,19 @@ export const THEME_ACCENTS_SETTER = () => { let config: any = vscode.workspace.getConfiguration().get('workbench.colorCustomizations'); switch(accentSelected) { - case customColourKey: - vscode.window.showInputBox().then(colourCode => { - if (colourCode === null || colourCode === undefined) return; + // 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; - } + // if (colourCode && !isValidColour(colourCode)) { + // vscode.window.showWarningMessage('Invalid colour set, aborting.'); + // return; + // } - assignColorCustomizations(colourCode, config); - setWorkbenchOptions(accentSelected, config); - }); - break; + // assignColorCustomizations(colourCode, config); + // setWorkbenchOptions(accentSelected, config); + // }); + // break; case purgeColourKey: assignColorCustomizations(undefined, config); setWorkbenchOptions(accentSelected, config); diff --git a/package.json b/package.json index eef12bc..5722bf8 100644 --- a/package.json +++ b/package.json @@ -23,12 +23,13 @@ "vscode": "^1.12.0" }, "scripts": { - "build": "npm run build-icons && npm run build-themes", + "build": "npm run build-icons && npm run build-themes && npm run build-icons-accents", "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-themes": "gulp build:themes", "release": "npm run bump && npm run changelog", "postinstall": "node ./node_modules/vscode/bin/install",