From 21b31cf599e3dd619694ca7b6b998494b18af770 Mon Sep 17 00:00:00 2001 From: shpuld Date: Fri, 17 Nov 2017 17:24:42 +0200 Subject: [PATCH] Move custom theming from settings to style-switcher, remove usage of custom .css files, use styles.json instead. --- src/components/settings/settings.js | 46 +----- src/components/settings/settings.vue | 58 -------- .../style_switcher/style_switcher.js | 65 +++++++- .../style_switcher/style_switcher.vue | 64 +++++++- src/modules/config.js | 5 +- src/services/style_setter/style_setter.js | 140 +++++++++++------- static/config.json | 2 +- static/css/base16-pleroma-dark.css | 2 +- static/styles.json | 4 + 9 files changed, 220 insertions(+), 166 deletions(-) create mode 100644 static/styles.json diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 235ccfbb27..3f6195723a 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -11,10 +11,6 @@ const settings = { autoLoadLocal: this.$store.state.config.autoLoad, streamingLocal: this.$store.state.config.streaming, hoverPreviewLocal: this.$store.state.config.hoverPreview, - bgColorLocal: '', - fgColorLocal: '', - textColorLocal: '', - linkColorLocal: '' } }, components: { @@ -25,46 +21,8 @@ const settings = { return this.$store.state.users.currentUser } }, - mounted() { - const rgbstr2hex = (rgb) => { - if (rgb[0] === '#') - return rgb - rgb = rgb.match(/\d+/g) - return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}` - } - this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00']) - this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02']) - this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05']) - this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors['base08']) - }, - methods: { - setCustomTheme () { - if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) { - // reset to picked themes - } - const rgb = (hex) => { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : null - } - const bgRgb = rgb(this.bgColorLocal) - const fgRgb = rgb(this.fgColorLocal) - const textRgb = rgb(this.textColorLocal) - const linkRgb = rgb(this.linkColorLocal) - if (bgRgb && fgRgb && linkRgb) { - console.log('all colors ok') - this.$store.dispatch('setOption', { name: 'customTheme', value: { - fg: fgRgb, - bg: bgRgb, - text: textRgb, - link: linkRgb - }}) - } - } - }, + + watch: { hideAttachmentsLocal (value) { this.$store.dispatch('setOption', { name: 'hideAttachments', value }) diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 8d9c33607e..8fdd09deb6 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -8,42 +8,6 @@

{{$t('settings.theme')}}

-
-

Custom theme

-

Enter hex color codes (#aabbcc) into the text fields.

-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
Preview
-
-

Content

-
- A bunch of more content and - a nice lil' link -
- -
-
-
- -

{{$t('settings.filtering')}}

{{$t('settings.filtering_explanation')}}

@@ -114,26 +78,4 @@ .setting-list { list-style-type: none; } - - .color-container { - display: flex; - } - - .color-item { - max-width: 7em; - display:flex; - flex-wrap:wrap; - } - - .theme-color-in { - max-width: 6em; - border-radius: 2px; - border: 0; - padding: 5px; - margin: 5px 0 5px 0; - } - - .theme-preview-content { - padding: 20px; - } diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index d265572dd6..8b769494d5 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,19 +1,76 @@ +import { map, compose } from 'lodash' + export default { data () { return { availableStyles: [], - selected: this.$store.state.config.theme + selected: this.$store.state.config.theme, + bgColorLocal: '', + fgColorLocal: '', + textColorLocal: '', + linkColorLocal: '' } }, created () { const self = this - window.fetch('/static/css/themes.json') + + window.fetch('/static/styles.json') .then((data) => data.json()) - .then((themes) => { self.availableStyles = themes }) + .then((themes) => { + console.log(themes) + self.availableStyles = themes + }) + }, + mounted() { + const rgbstr2hex = (rgb) => { + if (rgb[0] === '#') + return rgb + rgb = rgb.match(/\d+/g) + return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}` + } + this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00']) + this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02']) + console.log(this.$store.state.config.colors['base02']) + console.log(this.fgColorLocal) + this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05']) + this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors['base08']) + }, + methods: { + setCustomTheme () { + if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) { + // reset to picked themes + } + const rgb = (hex) => { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null + } + const bgRgb = rgb(this.bgColorLocal) + const fgRgb = rgb(this.fgColorLocal) + const textRgb = rgb(this.textColorLocal) + const linkRgb = rgb(this.linkColorLocal) + if (bgRgb && fgRgb && linkRgb) { + console.log('all colors ok') + this.$store.dispatch('setOption', { name: 'customTheme', value: { + fg: fgRgb, + bg: bgRgb, + text: textRgb, + link: linkRgb + }}) + } + } }, watch: { selected () { - this.$store.dispatch('setOption', { name: 'theme', value: this.selected }) + console.log(this.selected) + this.bgColorLocal = this.selected[1] + this.fgColorLocal = this.selected[2] + this.textColorLocal = this.selected[3] + this.linkColorLocal = this.selected[4] + //this.$store.dispatch('setOption', { name: 'theme', value: this.selected }) } } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index bfd8cf8648..074b38301a 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,7 +1,43 @@ @@ -10,4 +46,26 @@ .style-switcher { margin-right: 1em; } + + .color-container { + display: flex; + } + + .color-item { + max-width: 7em; + display:flex; + flex-wrap:wrap; + } + + .theme-color-in { + max-width: 6em; + border-radius: 2px; + border: 0; + padding: 5px; + margin: 5px 0 5px 0; + } + + .theme-preview-content { + padding: 20px; + } diff --git a/src/modules/config.js b/src/modules/config.js index 1811faa82f..9a62905e47 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -31,11 +31,10 @@ const config = { dispatch('setPageTitle') break case 'theme': - const fullPath = `/static/css/${value}` - StyleSetter.setStyle(fullPath, null, commit) + StyleSetter.setPreset(value, commit) break case 'customTheme': - StyleSetter.setStyle(null, value, commit) + StyleSetter.setColors(value, commit) } } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 1633c43378..bbb2c5108b 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -1,6 +1,10 @@ import { times, map } from 'lodash' -const setStyle = (href, col, commit) => { +// While this is not used anymore right now, I left it in if we want to do custom +// styles that aren't just colors, so user can pick from a few different distinct +// styles as well as set their own colors in the future. + +const setStyle = (href, commit) => { /*** What's going on here? I want to make it easy for admins to style this application. To have @@ -49,61 +53,93 @@ const setStyle = (href, col, commit) => { body.style.display = 'initial' } - const rgb2hex = (r, g, b) => { - [r, g, b] = map([r, g, b], (val) => { - val = val < 0 ? 0 : val - val = val > 255 ? 255 : val - return val + cssEl.addEventListener('load', setDynamic) +} + +const rgb2hex = (r, g, b) => { + [r, g, b] = map([r, g, b], (val) => { + val = Math.ceil(val) + val = val < 0 ? 0 : val + val = val > 255 ? 255 : val + return val + }) + return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}` +} + +const setColors = (col, commit) => { + const head = document.head + const body = document.body + body.style.display = 'none' + + const styleEl = document.createElement('style') + head.appendChild(styleEl) + const styleSheet = styleEl.sheet + + const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b) + let colors = {} + + let mod = 10 + if (isDark) { + mod = mod * -1 + } + colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background + colors['base01'] = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg + colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons + colors['base03'] = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders + colors['base04'] = rgb2hex(col.text.r + mod * 2, col.text.g + mod * 2, col.text.b + mod * 2) // faint text + colors['base05'] = rgb2hex(col.text.r, col.text.g, col.text.b) // text + colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text + colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2) + colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b) // links + + times(9, (n) => { + const color = colors[`base0${8 - n}`] + styleSheet.insertRule(`.base0${8 - n} { color: ${color}`, 'index-max') + styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max') + }) + + commit('setOption', { name: 'colors', value: colors }) + + styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max') + styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max') + styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max') + styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max') + body.style.display = 'initial' +} + +const hex2rgb = (hex) => { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null +} + +const setPreset = (val, commit) => { + window.fetch('/static/styles.json') + .then((data) => data.json()) + .then((themes) => { + const theme = themes[val] ? themes[val] : themes[0] + const bgRgb = hex2rgb(theme[1]) + const fgRgb = hex2rgb(theme[2]) + const textRgb = hex2rgb(theme[3]) + const linkRgb = hex2rgb(theme[4]) + const col = { + bg: bgRgb, + fg: fgRgb, + text: textRgb, + link: linkRgb + } + console.log(col) + setColors(col, commit) }) - return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}` - } - - const setColors = () => { - const styleEl = document.createElement('style') - head.appendChild(styleEl) - const styleSheet = styleEl.sheet - - const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b) - let colors = {} - - let mod = 10 - if (isDark) { - mod = mod * -1 - } - colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background - colors['base01'] = rgb2hex(col.bg.r - mod, col.bg.g - mod, col.bg.b - mod) // hilighted bg - colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons - colors['base03'] = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders - colors['base04'] = rgb2hex(col.text.r + mod, col.text.g + mod, col.text.b + mod) // faint text - colors['base05'] = rgb2hex(col.text.r, col.text.g, col.text.b) // text - colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text - colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2) - colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b) // links - - times(9, (n) => { - const color = colors[`base0${n}`] - styleSheet.insertRule(`.base0${n} { color: ${color}`, 'index-max') - styleSheet.insertRule(`.base0${n}-background { background-color: ${color}`, 'index-max') - }) - - commit('setOption', { name: 'colors', value: colors }) - - styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max') - styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max') - styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max') - styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max') - console.log(styleSheet) - body.style.display = 'initial' - } - if (col) { - setColors() - } else { - cssEl.addEventListener('load', setDynamic) - } } const StyleSetter = { - setStyle + setStyle, + setPreset, + setColors } export default StyleSetter diff --git a/static/config.json b/static/config.json index 195ee04690..8b596992c8 100644 --- a/static/config.json +++ b/static/config.json @@ -1,6 +1,6 @@ { "name": "Pleroma FE", - "theme": "base16-pleroma-dark.css", + "theme": "pleroma-dark", "background": "/static/bg.jpg", "logo": "/static/logo.png", "registrationOpen": false diff --git a/static/css/base16-pleroma-dark.css b/static/css/base16-pleroma-dark.css index 8190d2a78e..e1d46f9270 100644 --- a/static/css/base16-pleroma-dark.css +++ b/static/css/base16-pleroma-dark.css @@ -17,7 +17,7 @@ .base00 { color: #161c20; } .base01 { color: #282e32; } -.base02 { color: #36393e; } +.base02 { color: #343a3f; } .base03 { color: #4e5256; } .base04 { color: #ababab; } .base05 { color: #b9b9b9; } diff --git a/static/styles.json b/static/styles.json new file mode 100644 index 0000000000..229cde39c0 --- /dev/null +++ b/static/styles.json @@ -0,0 +1,4 @@ +{ + "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070" ], + "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#d0d6db", "#304055", "#e46f0f" ] +}