From bad4baa5e66ab09fce9c495e4707b5d6f2ad25eb Mon Sep 17 00:00:00 2001 From: gcholette Date: Wed, 17 Nov 2021 22:50:29 -0500 Subject: [PATCH 1/5] feat: add custom css sheet support, add params for glow effect, update base theme --- package.json | 36 +++- src/core/commands.ts | 24 ++- src/core/config.ts | 6 + src/core/constants.ts | 5 +- src/core/file-man.ts | 15 +- src/core/injectable/themes/base-theme.js | 12 -- src/core/injectable/themes/base.css | 70 +++++++ .../injectable/themes/retro-glow-theme.js | 167 --------------- src/core/injectable/themes/retro-glow.css | 194 ++++++++++++++++++ src/core/theme-man.ts | 12 ++ src/core/util.ts | 2 + src/extension.ts | 6 +- tsconfig.json | 43 ++-- 13 files changed, 367 insertions(+), 225 deletions(-) create mode 100644 src/core/config.ts delete mode 100644 src/core/injectable/themes/base-theme.js create mode 100644 src/core/injectable/themes/base.css delete mode 100644 src/core/injectable/themes/retro-glow-theme.js create mode 100644 src/core/injectable/themes/retro-glow.css create mode 100644 src/core/theme-man.ts diff --git a/package.json b/package.json index 5a217d7..f1904e6 100644 --- a/package.json +++ b/package.json @@ -14,30 +14,46 @@ "Other" ], "activationEvents": [ - "onCommand:vscode-aesthetics.enableAll", - "onCommand:vscode-aesthetics.enableGlow" + "onCommand:vscode-aesthetics.applyBase", + "onCommand:vscode-aesthetics.applyCustom" ], "main": "./out/extension.js", "contributes": { "commands": [ { - "command": "vscode-aesthetics.enableAll", - "title": "VS Code Aesthetics: Enable All" + "command": "vscode-aesthetics.applyBase", + "title": "VS Code Aesthetics: Apply base theme" }, { - "command": "vscode-aesthetics.enableGlow", - "title": "VS Code Aesthetics: Enable Code Glow" + "command": "vscode-aesthetics.applyCustom", + "title": "VS Code Aesthetics: Apply custom CSS theme" } - ] + ], + "configuration": { + "title": "VS Code Aesthetics", + "properties": { + "vscodeAesthetics.customPath": { + "type": "string", + "default": "", + "description": "Set the full absolute path for the custom CSS file" + }, + "vscodeAesthetics.enableGlow": { + "type": "boolean", + "default": true, + "description": "Define if the text glass/glow effect is on." + } + } + } }, "scripts": { "vscode:prepublish": "npm run compile", - "compile": "tsc -p ./", + "compile": "tsc -p ./ && npm run copy-files", "watch": "tsc -watch -p ./", "pretest": "npm run compile && npm run lint", "lint": "eslint src --ext ts", "test": "node ./out/test/runTest.js", - "package": "vsce package" + "package": "vsce package", + "copy-files": "copyfiles -u 1 src/**/*.css out/" }, "devDependencies": { "@types/glob": "^7.1.4", @@ -47,9 +63,11 @@ "@typescript-eslint/eslint-plugin": "^5.1.0", "@typescript-eslint/parser": "^5.1.0", "@vscode/test-electron": "^1.6.2", + "copyfiles": "^2.4.1", "eslint": "^8.1.0", "glob": "^7.1.7", "mocha": "^9.1.3", + "tsc-hooks": "^1.1.1", "typescript": "^4.4.4", "vsce": "^2.3.0" }, diff --git a/src/core/commands.ts b/src/core/commands.ts index 7fe8c7b..d1a0ff5 100644 --- a/src/core/commands.ts +++ b/src/core/commands.ts @@ -1,12 +1,22 @@ import injectFile from "./file-man" -import { cssInjectorPath, msgs, retroGlowTheme } from "./constants" -import { toast } from "./util" +import { + baseThemePath, + msgs +} from "./constants" +import { errorToast, formatPath, toast } from "./util" +import config from "./config" -export function enableAll() { - injectFile(cssInjectorPath, retroGlowTheme) - toast(msgs.enable_all) +export function applyBase() { + injectFile(baseThemePath) + toast(msgs.enable_base) } -export function enableGlow() { - toast(msgs.enable_glow) +export function applyCustom() { + const customPath = formatPath(config.customPath()) + if (customPath.length > 0) { + injectFile(customPath) + toast(msgs.enable_base) + } else { + errorToast("No path provided in settings.") + } } diff --git a/src/core/config.ts b/src/core/config.ts new file mode 100644 index 0000000..c819311 --- /dev/null +++ b/src/core/config.ts @@ -0,0 +1,6 @@ +import { getConfig } from "./util"; + +export default { + customPath: (): string => getConfig().customPath, + enableGlow: (): string => getConfig().enableGlow +} \ No newline at end of file diff --git a/src/core/constants.ts b/src/core/constants.ts index fb4fb36..724b032 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -6,6 +6,7 @@ const app_prefix = "[VS Code Aesthetics]" export const msgs = { enable_all: `${app_prefix} Enable All activated.`, enable_glow: `${app_prefix} Enable Glow activated.`, + enable_base: `${app_prefix} Enable Base Theme activated.`, success_inject: `${app_prefix} Aesthetics succesfully added, reload VS Code to take effect.`, error_inject: `${app_prefix} An error occured, could not add files.`, @@ -18,8 +19,8 @@ export const injectedFileName = "vscode-aesthetics.js" export const localInjectablePath = __dirname + formatPath("/injectable") export const themePath = localInjectablePath + formatPath("/themes") export const injectorPath = localInjectablePath + formatPath("/injectors") -export const baseThemePath = themePath + formatPath("/base-theme.js") -export const retroGlowTheme = themePath + formatPath("/retro-glow-theme.js") +export const baseThemePath = themePath + formatPath("/base.css") +export const retroGlowTheme = themePath + formatPath("/retro-glow.css") export const cssInjectorPath = injectorPath + formatPath("/css-injector.js") export const appDirectory = path.dirname(require?.main?.filename || '') export const workbenchPath = diff --git a/src/core/file-man.ts b/src/core/file-man.ts index 219c9c1..f9399ac 100644 --- a/src/core/file-man.ts +++ b/src/core/file-man.ts @@ -7,6 +7,7 @@ import { scriptPath, workbenchHtml, } from "./constants" +import { generateTheme } from "./theme-man" import { toast } from "./util" const fs = require("fs") @@ -27,11 +28,12 @@ function generateHtmlTag( return `` } -function buildFile(injectorFilePath: string, themeFilePath: string): void { +function buildFile(cssFilePath: string): void { // upload file mentionned in tag inside workbench directory - const cssInjectorFileContents = fs.readFileSync(injectorFilePath, "utf-8") - const themeFileContents = fs.readFileSync(themeFilePath, "utf-8") - const consolidatedFileContents = `${themeFileContents}${cssInjectorFileContents}` + const cssInjectorFileContents = fs.readFileSync(cssInjectorPath, "utf-8") + const themeFileContents = fs.readFileSync(cssFilePath, "utf-8") + const theme = generateTheme(themeFileContents) + const consolidatedFileContents = `const customCssStr = \`${theme}\`;\n\n${cssInjectorFileContents}` fs.writeFileSync(scriptPath, consolidatedFileContents, "utf-8") } @@ -43,12 +45,11 @@ function insertHtmlTag(tag: HtmlTag): void { } export default function injectFile( - injectorFilePath: string = cssInjectorPath, - themeFilePath: string = baseThemePath + cssFilePath: string = baseThemePath ) { const tag = generateHtmlTag() - buildFile(injectorFilePath, themeFilePath) + buildFile(cssFilePath) insertHtmlTag(tag) // check if tag was successfully applied to html diff --git a/src/core/injectable/themes/base-theme.js b/src/core/injectable/themes/base-theme.js deleted file mode 100644 index 64b3860..0000000 --- a/src/core/injectable/themes/base-theme.js +++ /dev/null @@ -1,12 +0,0 @@ -const customCssStr = ` -/* text editor */ -.view-lines.monaco-mouse-cursor-text { - background: linear-gradient( 90deg, #00000020, #ffffff06)!important; -} - -/* minimap */ -.minimap.slider-mouseover .minimap-decorations-layer { - box-shadow: inset 0px 0px 8px 0px #f70268a3; -} -` - diff --git a/src/core/injectable/themes/base.css b/src/core/injectable/themes/base.css new file mode 100644 index 0000000..4d67ca6 --- /dev/null +++ b/src/core/injectable/themes/base.css @@ -0,0 +1,70 @@ +@keyframes breathingBackground { + 0% { + background-position: 25% 75%; + } + + 50% { + background-position: 75% 25%; + } + + 100% { + background-position: 25% 75%; + } +} + +@keyframes breathingBackground2 { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 50% 0%; + } + + 100% { + background-position: 0% 50%; + } +} + +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active::after { + background: linear-gradient(90deg, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan); + background-size: 2000% 2000%; + animation: breathingbg infinite 75s steps(1220); + opacity: 1; + content: ''; + z-index: 10; + position: absolute; + left: 0; + right: 0; + bottom: -1px; + height: 4px; +} + +.statusbar::after { + content: ''; + background: linear-gradient(90deg, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan); + background-size: 2000% 2000%; + animation: breathingBackground2 infinite 60s steps(1220); + bottom: 21px; + width: calc(100% + 100px); + height: 3px; + right: -3px; + position: absolute; +} + +.monaco-workbench .activitybar>.content .monaco-action-bar .badge .badge-content { + color: black !important; + background: linear-gradient(45deg, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan); + background-size: 2000% 2000%; + animation: breathingBackground2 infinite 60s steps(1220); +} + +.monaco-grid-branch-node>.monaco-split-view2>.sash-container>.monaco-sash.vertical::after { + content: ''; + background: linear-gradient(0deg, transparent, #9d00ff, transparent); + bottom: 0px; + width: 1px; + height: calc(100%); + right: 0; + position: absolute; +} \ No newline at end of file diff --git a/src/core/injectable/themes/retro-glow-theme.js b/src/core/injectable/themes/retro-glow-theme.js deleted file mode 100644 index e962d44..0000000 --- a/src/core/injectable/themes/retro-glow-theme.js +++ /dev/null @@ -1,167 +0,0 @@ -const color1 = '#270963' -const customCssStr = ` - /* dots */ - .monaco-workbench .activitybar>.content .monaco-action-bar .badge .badge-content { - color: black!important; - background: linear-gradient(90deg, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan); - background-size: 2000% 2000%; - animation: breathingbg2 infinite 60s steps(1220); - } - /* active tab */ - .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active { - background: linear-gradient(30deg, #170542, #300188f2)!important; - position: sticky; - } - /* active tab bottom line */ - .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active::after { - /*background: linear-gradient(90deg, rgba(255,0,172,1) 0%, rgba(255,235,0,1) 100%) !important; */ - background: linear-gradient(90deg, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan); - background-size: 2000% 2000%; - animation: breathingbg infinite 75s steps(1220); - opacity: 1; - content: ''; - z-index: 10; - position: absolute; - left: 0; - right: 0; - bottom: -1px; - height: 4px; - } - /* force transparence in left menu */ - .monaco-list.list_id_1 .monaco-list-rows { - background: transparent; - } - @keyframes breathingbg { - 0% { - background-position: 25% 75%; - } - 50% { - background-position: 75% 25%; - } - 100% { - background-position: 25% 75%; - } - } - @keyframes breathingbg2 { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 50% 0%; - } - 100% { - background-position: 0% 50%; - } - } - .part.activitybar.left { - background: linear-gradient( 45deg, ${color1}50 3%, transparent 51%); - } - .view-line { - /*text-shadow: 0px 0px 3px;*/ - text-shadow: -9px 20px 22px; - } - .monaco-list-rows { - background: transparent!important; - } - /* file explorer */ - .explorer-folders-view.file-icon-themable-tree.show-file-icons.align-icons-and-twisties { - padding: 14px 0px 0px 0px; - } - .monaco-list-row.selected { - background: #ffffff10!important; - background-color: #ffffff10!important; - } - .monaco-list-row.selected:hover { - background: #ffffff10!important; - background-color: #ffffff10!important; - } - .monaco-list-row:hover { - background: #ffffff10!important; - background-color: #ffffff10!important; - } - .monaco-list.list_id_1.mouse-support.selection-none:before { - outline: none!important; - } - * { - outline: none!important; - } - *:focus { - outline: none!important; - } - .monaco-breadcrumbs { - background-color: #030d22; - background: linear-gradient(45deg, #ff00ff45, #ffa5002e, #00ffff30);j - } - .monaco-sash.vertical::after { - content: ''; - background: linear-gradient(0deg, cyan, magenta, orange, cyan, magenta, orange, cyan, magenta, orange); - animation: breathingbg infinite 60s steps(240); - background-size: 400% 400%; - bottom: 0px; - width: 1px; - height: calc(100%); - right: 0; - position: absolute; - } - .monaco-grid-branch-node>.monaco-split-view2>.sash-container>.monaco-sash.vertical::after { - content: ''; - background: linear-gradient(0deg, transparent, #9d00ff, transparent); - bottom: 0px; - width: 1px; - height: calc(100%); - right: 0; - position: absolute; - } - .integrated-terminal>.monaco-split-view2>.sash-container>.monaco-sash.vertical::after { - content: ''; - background: linear-gradient(0deg, cyan, magenta, orange, cyan, magenta, orange, cyan, magenta, orange); - background-size: 400% 400%; - bottom: 0px; - width: 1px; - height: calc(100%); - right: 0; - position: absolute; - animation: breathingbg infinite 60s steps(240); - } - .monaco-sash.vertical.disabled::after { - background: none; - box-shadow: none; - } - @keyframes multicolor { - 0% { - background: cyan; - } - 25% { - background: magenta; - } - 50% { - background: yellow; - } - 75% { - background: green; - } - 100% { - background: cyan; - } - } - .statusbar::after { - content: ''; - background: linear-gradient(90deg, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan,orange, magenta, cyan); - background-size: 2000% 2000%; - animation: breathingbg2 infinite 60s steps(1220); - bottom: 21px; - width: calc(100% + 100px); - height: 5px; - right: -3px; - position: absolute; - } - .monaco-list:before { - outline: none!important; - } - .monaco-list:before:focus { - outline: none!important; - } - .monaco-workbench .monaco-scrollable-element > .shadow.top { - box-shadow: rgb(141 37 255 / 34%) 0px 11px 6px -6px inset; - } -` diff --git a/src/core/injectable/themes/retro-glow.css b/src/core/injectable/themes/retro-glow.css new file mode 100644 index 0000000..c5770ff --- /dev/null +++ b/src/core/injectable/themes/retro-glow.css @@ -0,0 +1,194 @@ +.monaco-workbench .activitybar>.content .monaco-action-bar .badge .badge-content { + color: black !important; + background: linear-gradient(90deg, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan); + background-size: 2000% 2000%; + animation: breathingBackground2 infinite 60s steps(1220); +} + +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active { + background: linear-gradient(30deg, #170542, #300188f2) !important; + position: sticky; +} + +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active::after { + /*background: linear-gradient(90deg, rgba(255,0,172,1) 0%, rgba(255,235,0,1) 100%) !important; */ + background: linear-gradient(90deg, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan); + background-size: 2000% 2000%; + animation: breathingBackground infinite 75s steps(1220); + opacity: 1; + content: ''; + z-index: 10; + position: absolute; + left: 0; + right: 0; + bottom: -1px; + height: 4px; +} + +/* force transparence in left menu */ +.monaco-list.list_id_1 .monaco-list-rows { + background: transparent; +} + +@keyframes breathingBackground { + 0% { + background-position: 25% 75%; + } + + 50% { + background-position: 75% 25%; + } + + 100% { + background-position: 25% 75%; + } +} + +@keyframes breathingBackground2 { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 50% 0%; + } + + 100% { + background-position: 0% 50%; + } +} + +.part.activitybar.left { + background: linear-gradient(45deg, #27096350 3%, transparent 51%); +} + +.view-line { + /*text-shadow: 0px 0px 3px;*/ + text-shadow: -9px 20px 22px; +} + +.monaco-list-rows { + background: transparent !important; +} + +/* file explorer */ +.explorer-folders-view.file-icon-themable-tree.show-file-icons.align-icons-and-twisties { + padding: 14px 0px 0px 0px; +} + +.monaco-list-row.selected { + background: #ffffff10 !important; + background-color: #ffffff10 !important; +} + +.monaco-list-row.selected:hover { + background: #ffffff10 !important; + background-color: #ffffff10 !important; +} + +.monaco-list-row:hover { + background: #ffffff10 !important; + background-color: #ffffff10 !important; +} + +.monaco-list.list_id_1.mouse-support.selection-none:before { + outline: none !important; +} + +* { + outline: none !important; +} + +*:focus { + outline: none !important; +} + +.monaco-breadcrumbs { + background-color: #030d22; + background: linear-gradient(45deg, #ff00ff45, #ffa5002e, #00ffff30); +} + +.monaco-sash.vertical::after { + content: ''; + background: linear-gradient(0deg, cyan, magenta, orange, cyan, magenta, orange, cyan, magenta, orange); + animation: breathingBackground infinite 60s steps(240); + background-size: 400% 400%; + bottom: 0px; + width: 1px; + height: calc(100%); + right: 0; + position: absolute; +} + +.monaco-grid-branch-node>.monaco-split-view2>.sash-container>.monaco-sash.vertical::after { + content: ''; + background: linear-gradient(0deg, transparent, #9d00ff, transparent); + bottom: 0px; + width: 1px; + height: calc(100%); + right: 0; + position: absolute; +} + +.integrated-terminal>.monaco-split-view2>.sash-container>.monaco-sash.vertical::after { + content: ''; + background: linear-gradient(0deg, cyan, magenta, orange, cyan, magenta, orange, cyan, magenta, orange); + background-size: 400% 400%; + bottom: 0px; + width: 1px; + height: calc(100%); + right: 0; + position: absolute; + animation: breathingBackground infinite 60s steps(240); +} + +.monaco-sash.vertical.disabled::after { + background: none; + box-shadow: none; +} + +@keyframes multicolor { + 0% { + background: cyan; + } + + 25% { + background: magenta; + } + + 50% { + background: yellow; + } + + 75% { + background: green; + } + + 100% { + background: cyan; + } +} + +.statusbar::after { + content: ''; + background: linear-gradient(90deg, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan); + background-size: 2000% 2000%; + animation: breathingBackground2 infinite 60s steps(1220); + bottom: 21px; + width: calc(100% + 100px); + height: 5px; + right: -3px; + position: absolute; +} + +.monaco-list:before { + outline: none !important; +} + +.monaco-list:before:focus { + outline: none !important; +} + +.monaco-workbench .monaco-scrollable-element>.shadow.top { + box-shadow: rgb(141 37 255 / 34%) 0px 11px 6px -6px inset; +} \ No newline at end of file diff --git a/src/core/theme-man.ts b/src/core/theme-man.ts new file mode 100644 index 0000000..63fe1f1 --- /dev/null +++ b/src/core/theme-man.ts @@ -0,0 +1,12 @@ +import config from "./config"; + +const textGlowCss = `.view-line {text-shadow: 13px 13px 22px;}` + +export function generateTheme(theme: string): string { + const enableGlow = config.enableGlow() + if (enableGlow) { + return `${textGlowCss}${theme}` + } else { + return theme + } +} \ No newline at end of file diff --git a/src/core/util.ts b/src/core/util.ts index 9a49f19..d498b4c 100644 --- a/src/core/util.ts +++ b/src/core/util.ts @@ -10,6 +10,8 @@ export const errorToast = vscode.window.showErrorMessage export const debugToast = (x: string) => vscode.window.showInformationMessage(msgs.debug(x)) +export const getConfig = () => vscode.workspace.getConfiguration("vscodeAesthetics") || {} + export function formatPath (path: string): string { if (isWindows) { return path.replace('/', '\\') diff --git a/src/extension.ts b/src/extension.ts index 6529f3c..a216bcf 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -1,11 +1,11 @@ import * as vscode from "vscode" -import { enableAll, enableGlow } from "./core/commands" +import { applyBase, applyCustom } from "./core/commands" import { registerCommand } from "./core/util" export function activate(context: vscode.ExtensionContext) { const registeredCommands = [ - registerCommand("vscode-aesthetics.enableAll", enableAll), - registerCommand("vscode-aesthetics.enableGlow", enableGlow), + registerCommand("vscode-aesthetics.applyBase", applyBase), + registerCommand("vscode-aesthetics.applyCustom", applyCustom) ] registeredCommands.forEach((cmd) => context.subscriptions.push(cmd)) diff --git a/tsconfig.json b/tsconfig.json index dc23a95..48ab2fd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,19 +1,26 @@ { - "compilerOptions": { - "module": "commonjs", - "target": "ES2020", - "outDir": "out", - "lib": [ - "ES2020" - ], - "sourceMap": true, - "rootDir": "src", - "strict": true, - "allowJs": true - }, - "exclude": [ - "node_modules", - ".vscode-test", - "./out/**/*" - ] -} + "compilerOptions": { + "module": "commonjs", + "target": "ES2020", + "outDir": "out", + "lib": [ + "ES2020" + ], + "noImplicitUseStrict": true, + "alwaysStrict": false, + "sourceMap": false, + "rootDir": "src", + "strict": true, + "allowJs": true + }, + "exclude": [ + "node_modules", + ".vscode-test" + ], + "include": [ + "./src/**/*" + ], + "hooks": [ + "copy-files" + ] +} \ No newline at end of file From ea8d6198b852fc26d6f6c0eda0528474ffdbae5a Mon Sep 17 00:00:00 2001 From: gcholette Date: Wed, 17 Nov 2021 23:19:47 -0500 Subject: [PATCH 2/5] feat: 0.2.0 - update messages and workflows --- package.json | 2 +- src/core/commands.ts | 14 ++++++++------ src/core/constants.ts | 6 ++---- src/core/file-man.ts | 10 ++++------ src/core/util.ts | 1 + 5 files changed, 16 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index f1904e6..469946d 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "vscode-aesthetics", "displayName": "vscode-aesthetics", "description": "", - "version": "0.1.0", + "version": "0.2.0", "repository": { "type": "git", "url": "git+https://github.com/gcholette/vscode-aesthetics.git" diff --git a/src/core/commands.ts b/src/core/commands.ts index d1a0ff5..ccacac8 100644 --- a/src/core/commands.ts +++ b/src/core/commands.ts @@ -1,14 +1,16 @@ import injectFile from "./file-man" -import { - baseThemePath, - msgs -} from "./constants" -import { errorToast, formatPath, toast } from "./util" +import { baseThemePath, msgs } from "./constants" +import { errorToast, formatPath, reloadWindow, toast } from "./util" import config from "./config" export function applyBase() { injectFile(baseThemePath) - toast(msgs.enable_base) + .then(() => { + toast(msgs.success_inject).then(() => { + reloadWindow() + }) + }) + .catch((e) => errorToast('Error: Application did not succeed')) } export function applyCustom() { diff --git a/src/core/constants.ts b/src/core/constants.ts index 724b032..173f05c 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -4,10 +4,8 @@ import { formatPath } from "./util" const app_prefix = "[VS Code Aesthetics]" export const msgs = { - enable_all: `${app_prefix} Enable All activated.`, - enable_glow: `${app_prefix} Enable Glow activated.`, - enable_base: `${app_prefix} Enable Base Theme activated.`, - success_inject: `${app_prefix} Aesthetics succesfully added, reload VS Code to take effect.`, + enable_base: `${app_prefix} Base Theme Applied.`, + success_inject: `${app_prefix} Success, window will reload to take effect.`, error_inject: `${app_prefix} An error occured, could not add files.`, debug: (x: string) => `${app_prefix} [DEBUG] ${x}`, diff --git a/src/core/file-man.ts b/src/core/file-man.ts index f9399ac..eb848a0 100644 --- a/src/core/file-man.ts +++ b/src/core/file-man.ts @@ -8,7 +8,7 @@ import { workbenchHtml, } from "./constants" import { generateTheme } from "./theme-man" -import { toast } from "./util" +import { reloadWindow, toast } from "./util" const fs = require("fs") type HtmlTag = string @@ -44,9 +44,7 @@ function insertHtmlTag(tag: HtmlTag): void { fs.writeFileSync(workbenchHtml, newFileContents, "utf-8") } -export default function injectFile( - cssFilePath: string = baseThemePath -) { +export default function injectFile(cssFilePath: string = baseThemePath): Promise { const tag = generateHtmlTag() buildFile(cssFilePath) @@ -55,8 +53,8 @@ export default function injectFile( // check if tag was successfully applied to html const postWorkbenchContents = fs.readFileSync(workbenchHtml, "utf-8") if (postWorkbenchContents.includes(tag)) { - toast(msgs.success_inject) + return Promise.resolve() } else { - toast(msgs.error_inject) + return Promise.reject() } } diff --git a/src/core/util.ts b/src/core/util.ts index d498b4c..4521ba3 100644 --- a/src/core/util.ts +++ b/src/core/util.ts @@ -9,6 +9,7 @@ export const toast = vscode.window.showInformationMessage export const errorToast = vscode.window.showErrorMessage export const debugToast = (x: string) => vscode.window.showInformationMessage(msgs.debug(x)) +export const reloadWindow = () => executeCommand("workbench.action.reloadWindow") export const getConfig = () => vscode.workspace.getConfiguration("vscodeAesthetics") || {} From 365d96e658c17bd284c85dc7ab9cff29208e47cc Mon Sep 17 00:00:00 2001 From: gcholette Date: Wed, 17 Nov 2021 23:33:33 -0500 Subject: [PATCH 3/5] feat: add uninstall theme, remove tsc-hook --- package.json | 8 ++++++-- src/core/commands.ts | 11 +++++++++-- src/core/constants.ts | 1 + src/core/file-man.ts | 6 ++++++ src/extension.ts | 5 +++-- tsconfig.json | 3 --- 6 files changed, 25 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 469946d..e2cd68d 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ ], "activationEvents": [ "onCommand:vscode-aesthetics.applyBase", - "onCommand:vscode-aesthetics.applyCustom" + "onCommand:vscode-aesthetics.applyCustom", + "onCommand:vscode-aesthetics.uninstall" ], "main": "./out/extension.js", "contributes": { @@ -27,6 +28,10 @@ { "command": "vscode-aesthetics.applyCustom", "title": "VS Code Aesthetics: Apply custom CSS theme" + }, + { + "command": "vscode-aesthetics.uninstall", + "title": "VS Code Aesthetics: Uninstall Theme" } ], "configuration": { @@ -67,7 +72,6 @@ "eslint": "^8.1.0", "glob": "^7.1.7", "mocha": "^9.1.3", - "tsc-hooks": "^1.1.1", "typescript": "^4.4.4", "vsce": "^2.3.0" }, diff --git a/src/core/commands.ts b/src/core/commands.ts index ccacac8..095b684 100644 --- a/src/core/commands.ts +++ b/src/core/commands.ts @@ -1,4 +1,4 @@ -import injectFile from "./file-man" +import injectFile, { removeHtmlTag } from "./file-man" import { baseThemePath, msgs } from "./constants" import { errorToast, formatPath, reloadWindow, toast } from "./util" import config from "./config" @@ -10,7 +10,7 @@ export function applyBase() { reloadWindow() }) }) - .catch((e) => errorToast('Error: Application did not succeed')) + .catch((e) => errorToast("Error: Application did not succeed")) } export function applyCustom() { @@ -22,3 +22,10 @@ export function applyCustom() { errorToast("No path provided in settings.") } } + +export function uninstallTheme() { + removeHtmlTag() + toast(msgs.success_uninstall).then(() => { + reloadWindow() + }) +} diff --git a/src/core/constants.ts b/src/core/constants.ts index 173f05c..7085c0d 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -6,6 +6,7 @@ const app_prefix = "[VS Code Aesthetics]" export const msgs = { enable_base: `${app_prefix} Base Theme Applied.`, success_inject: `${app_prefix} Success, window will reload to take effect.`, + success_uninstall: `${app_prefix} Theme uninstalled, window will reload to take effect.`, error_inject: `${app_prefix} An error occured, could not add files.`, debug: (x: string) => `${app_prefix} [DEBUG] ${x}`, diff --git a/src/core/file-man.ts b/src/core/file-man.ts index eb848a0..a640211 100644 --- a/src/core/file-man.ts +++ b/src/core/file-man.ts @@ -44,6 +44,12 @@ function insertHtmlTag(tag: HtmlTag): void { fs.writeFileSync(workbenchHtml, newFileContents, "utf-8") } +export function removeHtmlTag(): void { + const workbenchHtmlContents = fs.readFileSync(workbenchHtml, "utf-8") + const newFileContents = workbenchHtmlContents.replace(//, '') + fs.writeFileSync(workbenchHtml, newFileContents, "utf-8") +} + export default function injectFile(cssFilePath: string = baseThemePath): Promise { const tag = generateHtmlTag() diff --git a/src/extension.ts b/src/extension.ts index a216bcf..bdfdf65 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -1,11 +1,12 @@ import * as vscode from "vscode" -import { applyBase, applyCustom } from "./core/commands" +import { applyBase, applyCustom, uninstallTheme } from "./core/commands" import { registerCommand } from "./core/util" export function activate(context: vscode.ExtensionContext) { const registeredCommands = [ registerCommand("vscode-aesthetics.applyBase", applyBase), - registerCommand("vscode-aesthetics.applyCustom", applyCustom) + registerCommand("vscode-aesthetics.applyCustom", applyCustom), + registerCommand("vscode-aesthetics.uninstall", uninstallTheme) ] registeredCommands.forEach((cmd) => context.subscriptions.push(cmd)) diff --git a/tsconfig.json b/tsconfig.json index 48ab2fd..d4adb50 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,8 +19,5 @@ ], "include": [ "./src/**/*" - ], - "hooks": [ - "copy-files" ] } \ No newline at end of file From d90c3b69907af056c32109a580228cd7caff844e Mon Sep 17 00:00:00 2001 From: gcholette Date: Wed, 17 Nov 2021 23:33:57 -0500 Subject: [PATCH 4/5] 0.2.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e2cd68d..e78a10f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "vscode-aesthetics", "displayName": "vscode-aesthetics", "description": "", - "version": "0.2.0", + "version": "0.2.1", "repository": { "type": "git", "url": "git+https://github.com/gcholette/vscode-aesthetics.git" From 0ba9fca94f1c6a6a533e6847373658b1e5bf6077 Mon Sep 17 00:00:00 2001 From: gcholette Date: Wed, 17 Nov 2021 23:37:05 -0500 Subject: [PATCH 5/5] fix: animation not working --- src/core/injectable/themes/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/injectable/themes/base.css b/src/core/injectable/themes/base.css index 4d67ca6..d7d39bc 100644 --- a/src/core/injectable/themes/base.css +++ b/src/core/injectable/themes/base.css @@ -29,7 +29,7 @@ .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active::after { background: linear-gradient(90deg, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan); background-size: 2000% 2000%; - animation: breathingbg infinite 75s steps(1220); + animation: breathingBackground infinite 75s steps(1220); opacity: 1; content: ''; z-index: 10;