From 6dcdac16159f937a2ae288c898d13879dc1aaa18 Mon Sep 17 00:00:00 2001 From: PKief Date: Mon, 21 May 2018 21:58:55 +0200 Subject: [PATCH] Set opacity of all icons --- package.json | 5 ++ package.nls.de.json | 3 +- package.nls.json | 3 +- src/commands/restoreConfig.ts | 1 + src/extension.ts | 2 +- ...change-detection.ts => changeDetection.ts} | 0 src/icons/generator/iconOpacity.ts | 83 +++++++++++++++++++ src/icons/generator/jsonGenerator.ts | 13 ++- src/models/icons/iconJsonOptions.ts | 1 + 9 files changed, 105 insertions(+), 6 deletions(-) rename src/helpers/{change-detection.ts => changeDetection.ts} (100%) create mode 100644 src/icons/generator/iconOpacity.ts diff --git a/package.json b/package.json index ad92afab62..df2776ceae 100644 --- a/package.json +++ b/package.json @@ -122,6 +122,11 @@ "default": "#90a4ae", "description": "%configuration.folders.color%" }, + "material-icon-theme.opacity": { + "type": "string", + "default": "1.0", + "description": "%configuration.opacity%" + }, "material-icon-theme.hidesExplorerArrows": { "type": "boolean", "default": false, diff --git a/package.nls.de.json b/package.nls.de.json index 84bee425a6..f783419b6b 100644 --- a/package.nls.de.json +++ b/package.nls.de.json @@ -15,5 +15,6 @@ "configuration.activeIconPack": "Icon Paket auswählen, die bestimme Icons aktivieren.", "configuration.folders.theme": "Art der Ordner Icons auswählen.", "configuration.folders.color": "Farbe der Ordner Icons verändern.", - "configuration.hidesExplorerArrows": "Pfeile vor den Ordnern deaktivieren." + "configuration.hidesExplorerArrows": "Pfeile vor den Ordnern deaktivieren.", + "configuration.opacity": "Deckkraft aller Icons verändern." } \ No newline at end of file diff --git a/package.nls.json b/package.nls.json index c9872b511c..2f3503b388 100644 --- a/package.nls.json +++ b/package.nls.json @@ -15,5 +15,6 @@ "configuration.activeIconPack": "Select an icon pack that enables specific icons.", "configuration.folders.theme": "Set the type for the folder icons.", "configuration.folders.color": "Change the color of the folder icons.", - "configuration.hidesExplorerArrows": "Hide explorer arrows before folder." + "configuration.hidesExplorerArrows": "Hide explorer arrows before folder.", + "configuration.opacity": "Change the opacity of all icons." } \ No newline at end of file diff --git a/src/commands/restoreConfig.ts b/src/commands/restoreConfig.ts index dc0406baec..7fe433957b 100644 --- a/src/commands/restoreConfig.ts +++ b/src/commands/restoreConfig.ts @@ -8,6 +8,7 @@ export const restoreDefaultConfig = () => { helpers.setThemeConfig('folders.theme', defaultOptions.folders.theme, true); helpers.setThemeConfig('folders.color', defaultOptions.folders.color, true); helpers.setThemeConfig('hidesExplorerArrows', defaultOptions.hidesExplorerArrows, true); + helpers.setThemeConfig('opacity', defaultOptions.opacity, true); helpers.setThemeConfig('files.associations', defaultOptions.files.associations, true); helpers.setThemeConfig('folders.associations', defaultOptions.folders.associations, true); helpers.setThemeConfig('languages.associations', defaultOptions.languages.associations, true); diff --git a/src/extension.ts b/src/extension.ts index 1357a9715b..0d9c02a985 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -2,7 +2,7 @@ import * as vscode from 'vscode'; import * as commands from './commands'; -import { detectConfigChanges } from './helpers/change-detection'; +import { detectConfigChanges } from './helpers/changeDetection'; import { checkThemeStatus } from './helpers/versioning'; import * as i18n from './i18n'; import { showStartMessages } from './messages/start'; diff --git a/src/helpers/change-detection.ts b/src/helpers/changeDetection.ts similarity index 100% rename from src/helpers/change-detection.ts rename to src/helpers/changeDetection.ts diff --git a/src/icons/generator/iconOpacity.ts b/src/icons/generator/iconOpacity.ts new file mode 100644 index 0000000000..ec6a7518ac --- /dev/null +++ b/src/icons/generator/iconOpacity.ts @@ -0,0 +1,83 @@ +import * as fs from 'fs'; +import * as path from 'path'; + +/** + * Changes the opacity of all icons in the set. + * @param opacity Opacity value + */ +export const setIconOpacity = (opacity: string) => { + if (!validateOpacityValue(opacity)) { + return Promise.reject('Invalid opacity value! Opacity must be a decimal number between 0 and 1!'); + } + + return new Promise((resolve, reject) => { + let iconsPath = path.join(__dirname, '..', '..', '..'); + const parentFolder = iconsPath.split(path.sep).pop(); + if (parentFolder === 'out') { + iconsPath = path.join(iconsPath, '..'); + } + iconsPath = path.join(iconsPath, 'icons'); + + // read all icon files from the icons folder + try { + fs.readdirSync(iconsPath).forEach(iconFileName => { + const svgFilePath = path.join(iconsPath, iconFileName); + + // Read SVG file + const svg = fs.readFileSync(svgFilePath, 'utf-8'); + + // Get the root element of the SVG file + const svgRootElement = getSVGRootElement(svg); + if (!svgRootElement) return; + + const updatedRootElement = addOpacityAttribute(svgRootElement, opacity); + const updatedSVG = svg.replace(/]*>/, updatedRootElement); + + fs.writeFileSync(svgFilePath, updatedSVG); + resolve(); + }); + } + catch (e) { + console.log(e); + reject(e); + } + resolve(); + }); +}; + +/** + * Validate the opacity value. + * @param opacity Opacity value + */ +export const validateOpacityValue = (opacity: string) => { + const pattern = new RegExp(/^([0]?\.\d+)|(1.0)$/); + return pattern.test(opacity); +}; + +/** + * Get the SVG root element. + * @param svg SVG file as string. + */ +const getSVGRootElement = (svg: string) => { + const result = new RegExp(/]*>/).exec(svg); + if (result.length > 0) { + return result[0]; + } else { + return undefined; + } +}; + +/** + * Add an opacity attribute to the SVG icon to control the opacity of the icon. + * @param svgRoot Root element of the SVG icon. + * @param opacity Opacity value. + */ +const addOpacityAttribute = (svgRoot: string, opacity: string) => { + const pattern = new RegExp(/opacity="[\d.]+"/); + // if the opacity attribute already exists + if (pattern.test(svgRoot)) { + return svgRoot.replace(pattern, `opacity="${opacity}"`); + } else { + return svgRoot.replace(/^ = if (err) { reject(err); } + const promises = []; if (options.folders.color) { - generateFolderIcons(options.folders.color).catch(e => reject(e)).then(() => { - resolve(iconJsonName); - }); + promises.push(generateFolderIcons(options.folders.color)); } + if (options.opacity) { + promises.push(setIconOpacity(options.opacity)); + } + Promise.all(promises).catch(e => reject(e)).then(() => { + resolve(iconJsonName); + }); }); }); }; @@ -55,6 +61,7 @@ export const getDefaultIconOptions = (): IconJsonOptions => ({ }, activeIconPack: 'angular', hidesExplorerArrows: false, + opacity: '1.0', files: { associations: {} }, languages: { associations: {} }, }); diff --git a/src/models/icons/iconJsonOptions.ts b/src/models/icons/iconJsonOptions.ts index 0e828519bd..6e216aef3e 100644 --- a/src/models/icons/iconJsonOptions.ts +++ b/src/models/icons/iconJsonOptions.ts @@ -1,6 +1,7 @@ export interface IconJsonOptions { activeIconPack?: string; hidesExplorerArrows?: boolean; + opacity?: string; folders?: { theme?: string; color?: string;