From 1f9029f45751a5e2f3df2bf8963542b29624225f Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 13 Jan 2018 18:59:49 -0800 Subject: [PATCH] finish theme engine --- bin/build-sass.js | 14 +++-- package-lock.json | 10 ++++ package.json | 2 + routes/_utils/themeEngine.js | 15 ++++++ routes/settings/instances/[instanceName].html | 54 +++++++++++++------ routes/settings/instances/add.html | 31 ++++++----- scss/global.scss | 48 ++++++++++------- scss/themes/_base.scss | 2 +- scss/themes/scarlet.scss | 2 +- templates/2xx.html | 13 +++++ 10 files changed, 135 insertions(+), 56 deletions(-) create mode 100644 routes/_utils/themeEngine.js diff --git a/bin/build-sass.js b/bin/build-sass.js index 1c38da2..721c2ab 100755 --- a/bin/build-sass.js +++ b/bin/build-sass.js @@ -10,6 +10,7 @@ const pify = require('pify') const writeFile = pify(fs.writeFile.bind(fs)) const readdir = pify(fs.readdir.bind(fs)) const render = pify(sass.render.bind(sass)) +const now = require('performance-now') const globalScss = path.join(__dirname, '../scss/global.scss') const defaultThemeScss = path.join(__dirname, '../scss/themes/_default.scss') @@ -19,9 +20,15 @@ const themesScssDir = path.join(__dirname, '../scss/themes') const assetsDir = path.join(__dirname, '../assets') function doWatch() { + var start = now() chokidar.watch(scssDir).on('change', debounce(() => { - compileGlobalSass() - compileThemesSass() + console.log('Recompiling SCSS...') + Promise.all([ + compileGlobalSass(), + compileThemesSass() + ]).then(() => { + console.log('Recompiled SCSS in ' + (now() - start) + 'ms') + }) }, 500)) chokidar.watch() } @@ -41,7 +48,8 @@ async function compileThemesSass() { let files = (await readdir(themesScssDir)).filter(file => !path.basename(file).startsWith('_')) await Promise.all(files.map(async file => { let res = await render({file: path.join(themesScssDir, file)}) - await writeFile(path.join(assetsDir, path.basename(file).replace(/\.scss$/, '.css')), res.css, 'utf8') + let outputFilename = 'theme-' + path.basename(file).replace(/\.scss$/, '.css') + await writeFile(path.join(assetsDir, outputFilename), res.css, 'utf8') })) } diff --git a/package-lock.json b/package-lock.json index 0bfd6dc..d4c57a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1803,6 +1803,11 @@ "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.1.tgz", "integrity": "sha1-0eJkOzipTXWDtHkGDmxK/8lAcfg=" }, + "fg-loadcss": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/fg-loadcss/-/fg-loadcss-2.0.1.tgz", + "integrity": "sha512-gFtSJjMMt9it0OhXz4wJQT46/LFUrJ2Db6U/fLtwClBEMEEjmVPSWSYrbGCyFwy47Cd4ULOpR+HSWXVkUKciaQ==" + }, "filename-regex": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz", @@ -4806,6 +4811,11 @@ "sha.js": "2.4.9" } }, + "performance-now": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", + "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" + }, "pify": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", diff --git a/package.json b/package.json index dc1e8a7..9e9307b 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "css-loader": "^0.28.7", "express": "^4.16.2", "extract-text-webpack-plugin": "^3.0.2", + "fg-loadcss": "^2.0.1", "font-awesome-svg-png": "^1.2.2", "glob": "^7.1.2", "idb": "^2.0.4", @@ -27,6 +28,7 @@ "node-fetch": "^1.7.3", "node-sass": "^4.7.2", "npm-run-all": "^4.1.2", + "performance-now": "^2.1.0", "pify": "^3.0.0", "sapper": "^0.3.1", "serve-static": "^1.13.1", diff --git a/routes/_utils/themeEngine.js b/routes/_utils/themeEngine.js new file mode 100644 index 0000000..6d0b2be --- /dev/null +++ b/routes/_utils/themeEngine.js @@ -0,0 +1,15 @@ +import { loadCSS } from 'fg-loadcss'; + +export function switchToTheme(themeName) { + let CL = document.body.classList + for (let i = 0; i < CL.length; i++) { + let clazz = CL.item(i) + if (clazz.startsWith('theme-')) { + CL.remove(clazz) + } + } + if (themeName !== 'default') { + CL.add(`theme-${themeName}`) + loadCSS(`/theme-${themeName}.css`) + } +} \ No newline at end of file diff --git a/routes/settings/instances/[instanceName].html b/routes/settings/instances/[instanceName].html index ddfe80d..d6f918b 100644 --- a/routes/settings/instances/[instanceName].html +++ b/routes/settings/instances/[instanceName].html @@ -7,23 +7,30 @@

{{params.instanceName}}

{{#if currentUser}} -

Logged in as:

-
- - @{{currentUser.acct}} - {{currentUser.display_name}} -
-

Theme:

-
- {{#each themes as theme}} -
- - -
- {{/each}} -
+

Logged in as:

+
+ + @{{currentUser.acct}} + {{currentUser.display_name}} +
+

Theme:

+
+ {{#each themes as theme}} +
+ + +
+ {{/each}} +
+ +
+ + +
{{/if}} @@ -54,6 +61,15 @@ .theme-chooser label { margin: 2px 10px 0; } + .instance-actions { + width: 100%; + display: flex; + justify-content: right; + } + .instance-actions button { + margin: 0 20px; + flex-basis: 100%; + } \ No newline at end of file diff --git a/scss/global.scss b/scss/global.scss index 0333f7a..71e0566 100644 --- a/scss/global.scss +++ b/scss/global.scss @@ -62,29 +62,37 @@ button { border: 1px solid var(--button-border); cursor: pointer; color: var(--button-text); + + &:hover { + background: var(--button-bg-hover); + } + + &:active { + background: var(--button-bg-active); + } + + &[disabled] { + opacity: 0.35; + pointer-events: none; + cursor: not-allowed; + } + + &.primary { + border: 1px solid var(--button-primary-border); + background: var(--button-primary-bg); + color: var(--button-primary-text); + + &:hover { + background: var(--button-primary-bg-hover); + } + + &:active { + background: var(--button-primary-bg-active); + } + } } -button:hover { - background: var(--button-bg-hover); -} -button:active { - background: var(--button-bg-active); -} - -button.primary { - border: 1px solid var(--button-primary-border); - background: var(--button-primary-bg); - color: var(--button-primary-text); -} - -button.primary:hover { - background: var(--button-primary-bg-hover); -} - -button.primary:active { - background: var(--button-primary-bg-active); -} p, label, input { font-size: 1.3em; diff --git a/scss/themes/_base.scss b/scss/themes/_base.scss index dd16efe..46eb95d 100644 --- a/scss/themes/_base.scss +++ b/scss/themes/_base.scss @@ -46,4 +46,4 @@ --settings-list-item-border: $border-color; --settings-list-item-bg-active: darken($main-bg-color, 10%); --settings-list-item-bg-hover: darken($main-bg-color, 2%); -} \ No newline at end of file +} diff --git a/scss/themes/scarlet.scss b/scss/themes/scarlet.scss index 66399af..305699e 100644 --- a/scss/themes/scarlet.scss +++ b/scss/themes/scarlet.scss @@ -7,6 +7,6 @@ $secondary-text-color: white; @import "_base.scss"; -body.theme-crimson { +body.theme-scarlet { @include baseTheme() } diff --git a/templates/2xx.html b/templates/2xx.html index 4de9b55..35e7256 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -25,6 +25,19 @@ %sapper.head% +