Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

something works without exploding and i'm tired already

Browse source
This commit is contained in:
Henry Jameson 2018-10-02 21:43:58 +03:00
parent 9d0bbe37e6
commit f78a5158e1
9 changed files with 297 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -16,6 +16,7 @@
"dependencies": { "dependencies": {
"babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-lodash": "^3.2.11", "babel-plugin-lodash": "^3.2.11",
"chromatism": "^3.0.0",
"diff": "^3.0.1", "diff": "^3.0.1",
"karma-mocha-reporter": "^2.2.1", "karma-mocha-reporter": "^2.2.1",
"localforage": "^1.5.0", "localforage": "^1.5.0",

10
src/App.scss
View file

@ -51,7 +51,7 @@ a {
button { button {
user-select: none; user-select: none;
color: $fallback--fg; color: $fallback--fg;
color: var(--fg, $fallback--fg); color: var(--btnText, $fallback--fg);
background-color: $fallback--btn; background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn); background-color: var(--btn, $fallback--btn);
border: none; border: none;
@ -254,7 +254,7 @@ nav {
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--fg, $fallback--fg); background-color: var(--topBarText, $fallback--fg);
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -330,8 +330,9 @@ main-router {
padding: .6em .6em; padding: .6em .6em;
text-align: left; text-align: left;
line-height: 28px; line-height: 28px;
color: var(--panelText);
background-color: $fallback--btn; background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn); background-color: var(--panel, $fallback--btn);
align-items: baseline; align-items: baseline;
.title { .title {
@ -387,8 +388,9 @@ main-router {
nav { nav {
z-index: 1000; z-index: 1000;
color: var(--topBarText);
background-color: $fallback--btn; background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn); background-color: var(--topBar, $fallback--btn);
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
box-shadow: 0px 0px 4px rgba(0,0,0,.6); box-shadow: 0px 0px 4px rgba(0,0,0,.6);

2
src/components/settings/settings.vue
View file

@ -18,6 +18,7 @@
</transition> </transition>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<keep-alive>
<tab-switcher> <tab-switcher>
<div :label="$t('settings.general')" > <div :label="$t('settings.general')" >
<div class="setting-item"> <div class="setting-item">
@ -146,6 +147,7 @@
</div> </div>
</tab-switcher> </tab-switcher>
</keep-alive>
</div> </div>
</div> </div>
</template> </template>

137
src/components/style_switcher/style_switcher.js
View file

@ -1,4 +1,7 @@
import { rgbstr2hex } from '../../services/color_convert/color_convert.js' import { rgb2hex } from '../../services/color_convert/color_convert.js'
import ColorInput from '../color_input/color_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue'
import StyleSetter from '../../services/style_setter/style_setter.js'
export default { export default {
data () { data () {
@ -7,13 +10,23 @@ export default {
selected: this.$store.state.config.theme, selected: this.$store.state.config.theme,
invalidThemeImported: false, invalidThemeImported: false,
bgColorLocal: '', bgColorLocal: '',
bgOpacityLocal: 0,
btnColorLocal: '', btnColorLocal: '',
btnOpacityLocal: '',
textColorLocal: '', textColorLocal: '',
linkColorLocal: '', linkColorLocal: '',
panelColorLocal: undefined,
panelOpacityLocal: undefined,
topBarColorLocal: undefined,
topBarOpacityLocal: undefined,
redColorLocal: '', redColorLocal: '',
blueColorLocal: '', blueColorLocal: '',
greenColorLocal: '', greenColorLocal: '',
orangeColorLocal: '', orangeColorLocal: '',
btnRadiusLocal: '', btnRadiusLocal: '',
inputRadiusLocal: '', inputRadiusLocal: '',
panelRadiusLocal: '', panelRadiusLocal: '',
@ -33,7 +46,48 @@ export default {
}) })
}, },
mounted () { mounted () {
this.normalizeLocalState(this.$store.state.config.colors, this.$store.state.config.radii) this.normalizeLocalState(this.$store.state.config.customTheme)
},
computed: {
currentTheme () {
return {
colors: {
bg: this.bgColorLocal,
fg: this.textColorLocal,
panel: this.panelColorLocal,
topBar: this.topBarColorLocal,
btn: this.btnColorLocal,
link: this.linkColorLocal,
cRed: this.redColorLocal,
cBlue: this.blueColorLocal,
cGreen: this.greenColorLocal,
cOrange: this.orangeColorLocal
},
radii: {
btnRadius: this.btnRadiusLocal,
inputRadius: this.inputRadiusLocal,
panelRadius: this.panelRadiusLocal,
avatarRadius: this.avatarRadiusLocal,
avatarAltRadius: this.avatarAltRadiusLocal,
tooltipRadius: this.tooltipRadiusLocal,
attachmentRadius: this.attachmentRadiusLocal
}
}
},
previewRules () {
try {
const generated = StyleSetter.generatePreset(this.currentTheme.colors)
return [generated.colorRules, generated.radiiRules].join(';')
} catch (e) {
console.error('CATCH')
console.error(e)
return ''
}
}
},
components: {
ColorInput,
OpacityInput
}, },
methods: { methods: {
exportCurrentTheme () { exportCurrentTheme () {
@ -101,57 +155,62 @@ export default {
b: parseInt(result[3], 16) b: parseInt(result[3], 16)
} : null } : null
} }
const bgRgb = rgb(this.bgColorLocal)
const btnRgb = rgb(this.btnColorLocal)
const textRgb = rgb(this.textColorLocal)
const linkRgb = rgb(this.linkColorLocal)
const redRgb = rgb(this.redColorLocal)
const blueRgb = rgb(this.blueColorLocal)
const greenRgb = rgb(this.greenColorLocal)
const orangeRgb = rgb(this.orangeColorLocal)
if (bgRgb && btnRgb && linkRgb) {
this.$store.dispatch('setOption', { this.$store.dispatch('setOption', {
name: 'customTheme', name: 'customTheme',
value: { value: this.currentTheme
fg: btnRgb, })
bg: bgRgb,
text: textRgb,
link: linkRgb,
cRed: redRgb,
cBlue: blueRgb,
cGreen: greenRgb,
cOrange: orangeRgb,
btnRadius: this.btnRadiusLocal,
inputRadius: this.inputRadiusLocal,
panelRadius: this.panelRadiusLocal,
avatarRadius: this.avatarRadiusLocal,
avatarAltRadius: this.avatarAltRadiusLocal,
tooltipRadius: this.tooltipRadiusLocal,
attachmentRadius: this.attachmentRadiusLocal
}})
}
}, },
normalizeLocalState (colors, radii) { normalizeLocalState (input) {
this.bgColorLocal = rgbstr2hex(colors.bg) const colors = input.colors || input
this.btnColorLocal = rgbstr2hex(colors.btn) const radii = input.radii || input
this.textColorLocal = rgbstr2hex(colors.fg) let i = 0
this.linkColorLocal = rgbstr2hex(colors.link) console.log('BENIS')
console.log(colors)
this.redColorLocal = rgbstr2hex(colors.cRed) console.log(i++)
this.blueColorLocal = rgbstr2hex(colors.cBlue) this.bgColorLocal = rgb2hex(colors.bg)
this.greenColorLocal = rgbstr2hex(colors.cGreen) console.log(i++)
this.orangeColorLocal = rgbstr2hex(colors.cOrange) this.btnColorLocal = rgb2hex(colors.btn)
console.log(i++)
this.textColorLocal = rgb2hex(colors.text || colors.fg)
console.log(i++)
this.linkColorLocal = rgb2hex(colors.link)
console.log(i++)
this.panelColorLocal = colors.panel ? rgb2hex(colors.panel) : undefined
console.log(i++)
this.topBarColorLocal = colors.topBad ? rgb2hex(colors.topBar) : undefined
console.log(i++)
this.redColorLocal = rgb2hex(colors.cRed)
console.log(i++)
console.log('red')
console.log(colors.cRed)
console.log(this.redColorLocal)
this.blueColorLocal = rgb2hex(colors.cBlue)
console.log(i++)
console.log('blue', this.blueColorLocal, colors.cBlue)
this.greenColorLocal = rgb2hex(colors.cGreen)
console.log(i++)
this.orangeColorLocal = rgb2hex(colors.cOrange)
console.log(i++)
this.btnRadiusLocal = radii.btnRadius || 4 this.btnRadiusLocal = radii.btnRadius || 4
console.log(i++)
this.inputRadiusLocal = radii.inputRadius || 4 this.inputRadiusLocal = radii.inputRadius || 4
console.log(i++)
this.panelRadiusLocal = radii.panelRadius || 10 this.panelRadiusLocal = radii.panelRadius || 10
console.log(i++)
this.avatarRadiusLocal = radii.avatarRadius || 5 this.avatarRadiusLocal = radii.avatarRadius || 5
console.log(i++)
this.avatarAltRadiusLocal = radii.avatarAltRadius || 50 this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
console.log(i++)
this.tooltipRadiusLocal = radii.tooltipRadius || 2 this.tooltipRadiusLocal = radii.tooltipRadius || 2
console.log(i++)
this.attachmentRadiusLocal = radii.attachmentRadius || 5 this.attachmentRadiusLocal = radii.attachmentRadius || 5
console.log(i++)
} }
}, },
watch: { watch: {

134
src/components/style_switcher/style_switcher.vue
View file

@ -24,80 +24,73 @@
</div> </div>
</div> </div>
<div class="preview-container"> <div class="preview-container" :style="previewRules">
<div :style="{
'--btnRadius': btnRadiusLocal + 'px',
'--inputRadius': inputRadiusLocal + 'px',
'--panelRadius': panelRadiusLocal + 'px',
'--avatarRadius': avatarRadiusLocal + 'px',
'--avatarAltRadius': avatarAltRadiusLocal + 'px',
'--tooltipRadius': tooltipRadiusLocal + 'px',
'--attachmentRadius': attachmentRadiusLocal + 'px'
}">
<div class="panel dummy"> <div class="panel dummy">
<div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div> <div class="panel-heading">Preview</div>
<div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }"> <div class="panel-body theme-preview-content">
<div class="avatar" :style="{ <div class="avatar">
'border-radius': avatarRadiusLocal + 'px'
}">
( ͡° ͜ʖ ͡°) ( ͡° ͜ʖ ͡°)
</div> </div>
<h4>Content</h4> <h4>Content</h4>
<br> <br>
A bunch of more content and A bunch of more content and
<a :style="{ color: linkColorLocal }">a nice lil' link</a> <a style="color: var(--link)">a nice lil' link</a>
<i :style="{ color: blueColorLocal }" class="icon-reply"/> <i style="color: var(--cBlue)" class="icon-reply"/>
<i :style="{ color: greenColorLocal }" class="icon-retweet"/> <i style="color: var(--cGreen)" class="icon-retweet"/>
<i :style="{ color: redColorLocal }" class="icon-cancel"/> <i style="color: var(--cRed)" class="icon-cancel"/>
<i :style="{ color: orangeColorLocal }" class="icon-star"/> <i style="color: var(--cOrange)" class="icon-star"/>
<br> <br>
<button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button> <button class="btn">Button</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="color-container"> <div class="color-container">
<p>{{$t('settings.theme_help')}}</p> <p>{{$t('settings.theme_help')}}</p>
<h3>Basic colors!!</h3>
<div>
<div class="color-item"> <div class="color-item">
<label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label> <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
<input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal"> <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" fallback="1"/>
<input id="bgcolor-t" class="theme-color-in" type="text" v-model="bgColorLocal">
</div> </div>
<div class="color-item"> <div class="color-item">
<label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label> <ColorInput name="fgColor" v-model="btnColorLocal" :label="$t('settings.foreground')"/>
<input id="fgcolor" class="theme-color-cl" type="color" v-model="btnColorLocal"> <OpacityInput name="fgOpacity" v-model="btnOpacityLocal" fallback="1"/>
<input id="fgcolor-t" class="theme-color-in" type="text" v-model="btnColorLocal">
</div> </div>
<div class="color-item"> <div class="color-item">
<label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label> <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
<input id="textcolor" class="theme-color-cl" type="color" v-model="textColorLocal">
<input id="textcolor-t" class="theme-color-in" type="text" v-model="textColorLocal">
</div> </div>
<div class="color-item"> <div class="color-item">
<label for="linkcolor" class="theme-color-lb">{{$t('settings.links')}}</label> <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
<input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal"> </div>
<input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal"> </div>
<h3>More customs!</h3>
<div>
<div class="color-item">
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" label="Panel header"/>
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label> <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" label="Top bar"/>
<input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal"> <OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
<input id="redcolor-t" class="theme-color-in" type="text" v-model="redColorLocal"> </div>
</div>
<h3>Rainbows!!!</h3>
<div>
<div class="color-item">
<ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<label for="bluecolor" class="theme-color-lb">{{$t('settings.cBlue')}}</label> <ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
<input id="bluecolor" class="theme-color-cl" type="color" v-model="blueColorLocal">
<input id="bluecolor-t" class="theme-color-in" type="text" v-model="blueColorLocal">
</div> </div>
<div class="color-item"> <div class="color-item">
<label for="greencolor" class="theme-color-lb">{{$t('settings.cGreen')}}</label> <ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
<input id="greencolor" class="theme-color-cl" type="color" v-model="greenColorLocal">
<input id="greencolor-t" class="theme-color-in" type="green" v-model="greenColorLocal">
</div> </div>
<div class="color-item"> <div class="color-item">
<label for="orangecolor" class="theme-color-lb">{{$t('settings.cOrange')}}</label> <ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
<input id="orangecolor" class="theme-color-cl" type="color" v-model="orangeColorLocal"> </div>
<input id="orangecolor-t" class="theme-color-in" type="text" v-model="orangeColorLocal">
</div> </div>
</div> </div>
@ -161,7 +154,7 @@
.apply-container, .apply-container,
.radius-container, .radius-container,
.color-container, .color-container > div,
.presets-container { .presets-container {
display: flex; display: flex;
@ -176,7 +169,7 @@
flex-direction: column; flex-direction: column;
} }
.color-container { .color-container > div{
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
} }
@ -214,14 +207,30 @@
.radius-item, .radius-item,
.color-item { .color-item {
min-width: 20em; min-width: 20em;
margin: 5px 6px 0 0;
display:flex; display:flex;
flex-direction: column;
flex: 1 1 0; flex: 1 1 0;
&:nth-child(2n+1) {
margin-right: 7px;
}
.color, .opacity {
display:flex;
align-items: baseline; align-items: baseline;
margin: 5px 6px 5px 0; }
label { label {
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
} }
.opacity-control {
margin-top: 5px;
height: 12px;
line-height: 12px;
font-size: 12px;
}
} }
.radius-item { .radius-item {
@ -243,44 +252,19 @@
margin-left: 4px; margin-left: 4px;
} }
.theme-color-in {
min-width: 4em;
}
.theme-radius-in { .theme-radius-in {
min-width: 1em; min-width: 1em;
} }
.theme-radius-in, .theme-radius-in {
.theme-color-in {
max-width: 7em; max-width: 7em;
flex: 1; flex: 1;
} }
.theme-radius-lb,
.theme-color-lb {
flex: 2;
min-width: 7em;
}
.theme-radius-lb{ .theme-radius-lb{
max-width: 50em; max-width: 50em;
} }
.theme-color-lb {
max-width: 10em;
}
.theme-color-cl {
padding: 1px;
max-width: 8em;
height: 100%;
flex: 0;
min-width: 2em;
cursor: pointer;
max-height: 29px;
}
.theme-preview-content { .theme-preview-content {
padding: 20px; padding: 20px;
} }

1
src/lib/persisted_state.js
View file

@ -73,6 +73,7 @@ export default function createPersistedState ({
loaded = true loaded = true
} catch (e) { } catch (e) {
console.log("Couldn't load state") console.log("Couldn't load state")
console.error(e)
loaded = true loaded = true
} }
}) })

12
src/services/color_convert/color_convert.js
View file

@ -1,6 +1,10 @@
import { map } from 'lodash' import { map } from 'lodash'
const rgb2hex = (r, g, b) => { const rgb2hex = (r, g, b) => {
console.log(r)
if (typeof r === 'object') {
({ r, g, b } = r)
}
[r, g, b] = map([r, g, b], (val) => { [r, g, b] = map([r, g, b], (val) => {
val = Math.ceil(val) val = Math.ceil(val)
val = val < 0 ? 0 : val val = val < 0 ? 0 : val
@ -27,8 +31,16 @@ const rgbstr2hex = (rgb) => {
return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}` return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
} }
const mixrgb = (a, b) => {
return Object.keys(a).reduce((acc, k) => {
acc[k] = (a[k] + b[k]) / 2
return acc
}, {})
}
export { export {
rgb2hex, rgb2hex,
hex2rgb, hex2rgb,
mixrgb,
rgbstr2hex rgbstr2hex
} }

134
src/services/style_setter/style_setter.js
View file

@ -1,5 +1,6 @@
import { times } from 'lodash' import { times } from 'lodash'
import { rgb2hex, hex2rgb } from '../color_convert/color_convert.js' import { brightness, invertLightness, convert } from 'chromatism'
import { rgb2hex, hex2rgb, mixrgb } from '../color_convert/color_convert.js'
// While this is not used anymore right now, I left it in if we want to do custom // 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 that aren't just colors, so user can pick from a few different distinct
@ -53,7 +54,23 @@ const setStyle = (href, commit) => {
cssEl.addEventListener('load', setDynamic) cssEl.addEventListener('load', setDynamic)
} }
const setColors = (col, commit) => { const rgb2rgba = function (rgba) {
return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
}
const getTextColor = function (bg, text) {
const bgIsLight = convert(bg).hsl.l > 50
const textIsLight = convert(text).hsl.l > 50
if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
return Object.assign(base, invertLightness(text).rgb)
}
return text
}
const setColors = (input, commit) => {
const { colorRules, radiiRules, col } = generatePreset(input)
const head = document.head const head = document.head
const body = document.body const body = document.body
body.style.display = 'none' body.style.display = 'none'
@ -62,51 +79,83 @@ const setColors = (col, commit) => {
head.appendChild(styleEl) head.appendChild(styleEl)
const styleSheet = styleEl.sheet 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 radii = {}
const mod = isDark ? -10 : 10
colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
colors.lightBg = 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.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
colors.input = `rgba(${col.fg.r}, ${col.fg.g}, ${col.fg.b}, .5)`
colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders
colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b) // text
colors.lightFg = rgb2hex(col.text.r - mod * 5, col.text.g - mod * 5, col.text.b - mod * 5) // strong text
colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
colors.link = rgb2hex(col.link.r, col.link.g, col.link.b) // links
colors.icon = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
colors.cBlue = col.cBlue && rgb2hex(col.cBlue.r, col.cBlue.g, col.cBlue.b)
colors.cRed = col.cRed && rgb2hex(col.cRed.r, col.cRed.g, col.cRed.b)
colors.cGreen = col.cGreen && rgb2hex(col.cGreen.r, col.cGreen.g, col.cGreen.b)
colors.cOrange = col.cOrange && rgb2hex(col.cOrange.r, col.cOrange.g, col.cOrange.b)
colors.cAlertRed = col.cRed && `rgba(${col.cRed.r}, ${col.cRed.g}, ${col.cRed.b}, .5)`
radii.btnRadius = col.btnRadius
radii.inputRadius = col.inputRadius
radii.panelRadius = col.panelRadius
radii.avatarRadius = col.avatarRadius
radii.avatarAltRadius = col.avatarAltRadius
radii.tooltipRadius = col.tooltipRadius
radii.attachmentRadius = col.attachmentRadius
styleSheet.toString() styleSheet.toString()
styleSheet.insertRule(`body { ${Object.entries(colors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';')} }`, 'index-max') styleSheet.insertRule(`body { ${colorRules} }`, 'index-max')
styleSheet.insertRule(`body { ${Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';')} }`, 'index-max') styleSheet.insertRule(`body { ${radiiRules} }`, 'index-max')
body.style.display = 'initial' body.style.display = 'initial'
commit('setOption', { name: 'colors', value: colors }) // commit('setOption', { name: 'colors', value: htmlColors })
commit('setOption', { name: 'radii', value: radii }) // commit('setOption', { name: 'radii', value: radii })
commit('setOption', { name: 'customTheme', value: col }) commit('setOption', { name: 'customTheme', value: col })
} }
const generatePreset = (input) => {
const radii = input.radii || {
btnRadius: input.btnRadius,
inputRadius: input.inputRadius,
panelRadius: input.panelRadius,
avatarRadius: input.avatarRadius,
avatarAltRadius: input.avatarAltRadius,
tooltipRadius: input.tooltipRadius,
attachmentRadius: input.attachmentRadius
}
const colors = {}
const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
if (typeof v === 'object') {
acc[k] = v
} else {
acc[k] = hex2rgb(v)
}
return acc
}, {})
colors.fg = col.fg || col.text // text
colors.text = col.fg || col.text // text
colors.lightFg = col.fg || col.text // text
colors.bg = col.bg // background
colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb // hilighted bg
console.log(colors.bg)
console.log(colors.lightBg)
colors.btn = col.btn || { r: 0, g: 0, b: 0 }
colors.btnText = getTextColor(colors.btn, colors.text)
colors.panel = col.panel || col.btn
colors.panelText = getTextColor(colors.panel, colors.text)
colors.topBar = col.topBar || col.btn
colors.topBarText = getTextColor(colors.topBar, colors.text)
colors.input = col.input || Object.assign({ a: 0.5 }, col.btn)
colors.border = col.btn // borders
colors.faint = col.faint || Object.assign({ a: 0.5 }, col.text)
colors.link = col.link // links
colors.icon = mixrgb(colors.bg, colors.text) // icons
colors.cBlue = col.cBlue
colors.cRed = col.cRed
colors.cGreen = col.cGreen
colors.cOrange = col.cOrange
colors.cAlertRed = col.cAlertRed || Object.assign({ a: 0.5 }, col.cRed)
const htmlColors = Object.entries(colors)
.reduce((acc, [k, v]) => {
if (!v) return acc
acc[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
return acc
}, {})
return {
colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
col
}
}
const setPreset = (val, commit) => { const setPreset = (val, commit) => {
window.fetch('/static/styles.json') window.fetch('/static/styles.json')
.then((data) => data.json()) .then((data) => data.json())
@ -148,7 +197,8 @@ const setPreset = (val, commit) => {
const StyleSetter = { const StyleSetter = {
setStyle, setStyle,
setPreset, setPreset,
setColors setColors,
generatePreset
} }
export default StyleSetter export default StyleSetter

4
yarn.lock
View file

@ -1205,6 +1205,10 @@ chokidar@^1.0.0, chokidar@^1.4.1:
optionalDependencies: optionalDependencies:
fsevents "^1.0.0" fsevents "^1.0.0"
chromatism@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/chromatism/-/chromatism-3.0.0.tgz#a7249d353c1e4f3577e444ac41171c4e2e624b12"
chromedriver@^2.21.2: chromedriver@^2.21.2:
version "2.35.0" version "2.35.0"
resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-2.35.0.tgz#c103ba2fb3d1671f666058159f5cbaa816902e4d" resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-2.35.0.tgz#c103ba2fb3d1671f666058159f5cbaa816902e4d"