From 21b31cf599e3dd619694ca7b6b998494b18af770 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
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 235ccfbb..3f619572 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 8d9c3360..8fdd09de 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -8,42 +8,6 @@
<h2>{{$t('settings.theme')}}</h2>
<style-switcher></style-switcher>
</div>
- <div class="setting-item">
- <h3>Custom theme</h3>
- <p>Enter hex color codes (#aabbcc) into the text fields.</p>
- <div class="color-container">
- <div class="color-item">
- <label for="bgcolor" class="base04">Background</label>
- <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
- </div>
- <div class="color-item">
- <label for="fgcolor" class="base04">Foreground</label>
- <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
- </div>
- <div class="color-item">
- <label for="textcolor" class="base04">Text</label>
- <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
- </div>
- <div class="color-item">
- <label for="linkcolor" class="base04">Links</label>
- <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
- </div>
- </div>
- <div>
- <div class="panel">
- <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
- <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
- <h4>Content</h4>
- <br>
- A bunch of more content and
- <a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
- <br>
- <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
- </div>
- </div>
- </div>
- <button class="btn base02-background base04" @click="setCustomTheme">Submit</button>
- </div>
<div class="setting-item">
<h2>{{$t('settings.filtering')}}</h2>
<p>{{$t('settings.filtering_explanation')}}</p>
@@ -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;
- }
</style>
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index d265572d..8b769494 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 bfd8cf86..074b3830 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,7 +1,43 @@
<template>
- <select v-model="selected" class="style-switcher">
- <option v-for="style in availableStyles" >{{style}}</option>
- </select>
+ <div>
+ <select v-model="selected" class="style-switcher">
+ <option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
+ </select>
+ <h3>Custom theme</h3>
+ <p>Enter hex color codes (#aabbcc) into the text fields.</p>
+ <div class="color-container">
+ <div class="color-item">
+ <label for="bgcolor" class="base04">Background</label>
+ <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
+ </div>
+ <div class="color-item">
+ <label for="fgcolor" class="base04">Foreground</label>
+ <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
+ </div>
+ <div class="color-item">
+ <label for="textcolor" class="base04">Text</label>
+ <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
+ </div>
+ <div class="color-item">
+ <label for="linkcolor" class="base04">Links</label>
+ <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
+ </div>
+ </div>
+ <div>
+ <div class="panel">
+ <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
+ <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
+ <h4>Content</h4>
+ <br>
+ A bunch of more content and
+ <a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
+ <br>
+ <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
+ </div>
+ </div>
+ </div>
+ <button class="btn base02-background base04" @click="setCustomTheme">Submit</button>
+ </div>
</template>
<script src="./style_switcher.js"></script>
@@ -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;
+ }
</style>
diff --git a/src/modules/config.js b/src/modules/config.js
index 1811faa8..9a62905e 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 1633c433..bbb2c510 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 195ee046..8b596992 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 8190d2a7..e1d46f92 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 00000000..229cde39
--- /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" ]
+}