forked from AkkomaGang/akkoma-fe
Move custom theming from settings to style-switcher, remove usage of custom .css files, use styles.json instead.
This commit is contained in:
shpuld
parent
e13c8c3fd2
commit
21b31cf599
9 changed files with 220 additions and 166 deletions
|
|
@ -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 })
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
4
static/styles.json
Normal file
4
static/styles.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070" ],
|
||||
"pleroma-light": [ "Pleroma Light", "#f2f4f6", "#d0d6db", "#304055", "#e46f0f" ]
|
||||
}
|
||||
Loading…
Reference in a new issue