From fc42fd21e5d8ecc1b07420e3bee0b0608ab274bb Mon Sep 17 00:00:00 2001 From: NGPixel Date: Sun, 2 Jul 2017 12:51:39 -0400 Subject: [PATCH] feat: Color Theme live preview --- client/js/app.js | 10 +++++++++- client/js/helpers/index.js | 1 - client/js/helpers/lodash.js | 4 +++- client/js/pages/admin-theme.component.js | 11 +++++++++++ client/scss/components/footer.scss | 1 + client/scss/components/nav.scss | 1 + client/scss/components/sidebar.scss | 2 ++ server/app/data.yml | 20 ++++++++++++++++++++ server/controllers/admin.js | 22 ++++++++++++++++++++++ server/views/common/footer.pug | 2 +- server/views/common/header.pug | 2 +- 11 files changed, 71 insertions(+), 5 deletions(-) diff --git a/client/js/app.js b/client/js/app.js index 397a399c..7c4b5899 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -22,6 +22,7 @@ import 'jquery-sticky' // ==================================== import helpers from './helpers' +import _ from './helpers/lodash' // ==================================== // Load Vue Components @@ -62,7 +63,7 @@ import sourceViewComponent from './pages/source-view.component.js' Vue.use(VueResource) Vue.use(VueClipboards) Vue.use(VueI18Next) -Vue.use(VueLodash, helpers._) +Vue.use(VueLodash, _) Vue.use(helpers) // ==================================== @@ -142,6 +143,13 @@ $(() => { store, i18n, el: '#root', + methods: { + changeTheme(opts) { + this.$el.className = `has-stickynav is-primary-${opts.primary} is-alternate-${opts.alt}` + this.$refs.header.className = `nav is-${opts.primary}` + this.$refs.footer.className = `footer is-${opts.footer}` + } + }, mounted() { $('a:not(.toc-anchor)').smoothScroll({ speed: 500, offset: -50 }) $('#header').sticky({ topSpacing: 0 }) diff --git a/client/js/helpers/index.js b/client/js/helpers/index.js index 6335809b..6f802e8b 100644 --- a/client/js/helpers/index.js +++ b/client/js/helpers/index.js @@ -1,7 +1,6 @@ 'use strict' const helpers = { - _: require('./lodash'), common: require('./common'), form: require('./form'), pages: require('./pages') diff --git a/client/js/helpers/lodash.js b/client/js/helpers/lodash.js index 5373a77b..218a1837 100644 --- a/client/js/helpers/lodash.js +++ b/client/js/helpers/lodash.js @@ -27,6 +27,7 @@ import reject from 'lodash/reject' import slice from 'lodash/slice' import split from 'lodash/split' import startCase from 'lodash/startCase' +import startsWith from 'lodash/startsWith' import toString from 'lodash/toString' import toUpper from 'lodash/toUpper' import trim from 'lodash/trim' @@ -35,7 +36,7 @@ import trim from 'lodash/trim' // Build lodash object // ==================================== -export default { +module.exports = { deburr, concat, cloneDeep, @@ -59,6 +60,7 @@ export default { slice, split, startCase, + startsWith, toString, toUpper, trim diff --git a/client/js/pages/admin-theme.component.js b/client/js/pages/admin-theme.component.js index 4cbafc2e..e70081bc 100644 --- a/client/js/pages/admin-theme.component.js +++ b/client/js/pages/admin-theme.component.js @@ -12,6 +12,17 @@ export default { codecolorize: 'true' } }, + watch: { + primary(val) { + this.$root.changeTheme(this.$data) + }, + alt(val) { + this.$root.changeTheme(this.$data) + }, + footer(val) { + this.$root.changeTheme(this.$data) + } + }, methods: { saveTheme() { let self = this diff --git a/client/scss/components/footer.scss b/client/scss/components/footer.scss index f4a86d9b..db2f66c2 100644 --- a/client/scss/components/footer.scss +++ b/client/scss/components/footer.scss @@ -12,6 +12,7 @@ right: 0; bottom: 0; left: 0; + transition: background-color 1s ease; ul { padding: 0; diff --git a/client/scss/components/nav.scss b/client/scss/components/nav.scss index 81698dfc..c5a76ff3 100644 --- a/client/scss/components/nav.scss +++ b/client/scss/components/nav.scss @@ -9,6 +9,7 @@ box-shadow: 0 2px 3px rgba(mc($primary, '500'), 0.2); z-index: 2; color: #FFF; + transition: background-color 1s ease; /* THEME OVERRIDE - START */ diff --git a/client/scss/components/sidebar.scss b/client/scss/components/sidebar.scss index 084f16ff..12849fba 100644 --- a/client/scss/components/sidebar.scss +++ b/client/scss/components/sidebar.scss @@ -5,6 +5,7 @@ width: 250px; max-width: 250px; min-height: calc(100vh - 120px); + transition: background-color 1s ease; aside { padding: 1px 0 15px 0; @@ -23,6 +24,7 @@ margin: 0 0 15px 0; text-align: center; box-shadow: 0 0 5px rgba(0,0,0,0.3); + transition: background-color 1s ease; i { margin-right: 5px; diff --git a/server/app/data.yml b/server/app/data.yml index 74fa4b79..3f1e66d2 100644 --- a/server/app/data.yml +++ b/server/app/data.yml @@ -64,6 +64,26 @@ defaults: code: dark: true colorize: true +colors: + - red + - pink + - purple + - deep-purple + - indigo + - blue + - light-blue + - cyan + - teal + - green + - light-green + - lime + - yellow + - amber + - orange + - deep-orange + - brown + - grey + - blue-grey langs: - id: en diff --git a/server/controllers/admin.js b/server/controllers/admin.js index 0af7cb15..b6f79ac6 100644 --- a/server/controllers/admin.js +++ b/server/controllers/admin.js @@ -271,4 +271,26 @@ router.get('/theme', (req, res) => { res.render('pages/admin/theme', { adminTab: 'theme' }) }) +router.post('/theme', (req, res) => { + if (res.locals.isGuest) { + return res.render('error-forbidden') + } + + if (!validator.isIn(req.body.primary, appdata.colors)) { + return res.status(406).json({ msg: 'Primary color is invalid.' }) + } else if (!validator.isIn(req.body.alt, appdata.colors)) { + return res.status(406).json({ msg: 'Alternate color is invalid.' }) + } else if (!validator.isIn(req.body.footer, appdata.colors)) { + return res.status(406).json({ msg: 'Footer color is invalid.' }) + } + + appconfig.theme.primary = req.body.primary + appconfig.theme.alt = req.body.alt + appconfig.theme.footer = req.body.footer + appconfig.theme.code.dark = req.body.codedark === 'true' + appconfig.theme.code.colorize = req.body.codecolorize === 'true' + + return res.json({ msg: 'OK' }) +}) + module.exports = router diff --git a/server/views/common/footer.pug b/server/views/common/footer.pug index a7f284d3..718432cf 100644 --- a/server/views/common/footer.pug +++ b/server/views/common/footer.pug @@ -1,4 +1,4 @@ -footer.footer(class=['is-' + appconfig.theme.footer]) +footer.footer(class=['is-' + appconfig.theme.footer], ref='footer') span = t('footer.poweredby') + ' ' a(href='https://github.com/Requarks/wiki') Wiki.js diff --git a/server/views/common/header.pug b/server/views/common/header.pug index dc7dacf7..ff6fa9e7 100644 --- a/server/views/common/header.pug +++ b/server/views/common/header.pug @@ -1,6 +1,6 @@ #header-container - nav.nav#header(class=['is-' + appconfig.theme.primary]) + nav.nav#header(class=['is-' + appconfig.theme.primary], ref='header') .nav-left block rootNavLeft a.nav-item(href='/')