something works without exploding and i'm tired already
This commit is contained in:
Henry Jameson
parent
9d0bbe37e6
commit
f78a5158e1
9 changed files with 297 additions and 182 deletions
|
|
@ -18,6 +18,7 @@
|
|||
</transition>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<keep-alive>
|
||||
<tab-switcher>
|
||||
<div :label="$t('settings.general')" >
|
||||
<div class="setting-item">
|
||||
|
|
@ -146,6 +147,7 @@
|
|||
</div>
|
||||
|
||||
</tab-switcher>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
data () {
|
||||
|
|
@ -7,13 +10,23 @@ export default {
|
|||
selected: this.$store.state.config.theme,
|
||||
invalidThemeImported: false,
|
||||
bgColorLocal: '',
|
||||
bgOpacityLocal: 0,
|
||||
btnColorLocal: '',
|
||||
btnOpacityLocal: '',
|
||||
|
||||
textColorLocal: '',
|
||||
linkColorLocal: '',
|
||||
|
||||
panelColorLocal: undefined,
|
||||
panelOpacityLocal: undefined,
|
||||
topBarColorLocal: undefined,
|
||||
topBarOpacityLocal: undefined,
|
||||
|
||||
redColorLocal: '',
|
||||
blueColorLocal: '',
|
||||
greenColorLocal: '',
|
||||
orangeColorLocal: '',
|
||||
|
||||
btnRadiusLocal: '',
|
||||
inputRadiusLocal: '',
|
||||
panelRadiusLocal: '',
|
||||
|
|
@ -33,7 +46,48 @@ export default {
|
|||
})
|
||||
},
|
||||
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: {
|
||||
exportCurrentTheme () {
|
||||
|
|
@ -101,57 +155,62 @@ export default {
|
|||
b: parseInt(result[3], 16)
|
||||
} : 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', {
|
||||
name: 'customTheme',
|
||||
value: {
|
||||
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
|
||||
}})
|
||||
}
|
||||
this.$store.dispatch('setOption', {
|
||||
name: 'customTheme',
|
||||
value: this.currentTheme
|
||||
})
|
||||
},
|
||||
|
||||
normalizeLocalState (colors, radii) {
|
||||
this.bgColorLocal = rgbstr2hex(colors.bg)
|
||||
this.btnColorLocal = rgbstr2hex(colors.btn)
|
||||
this.textColorLocal = rgbstr2hex(colors.fg)
|
||||
this.linkColorLocal = rgbstr2hex(colors.link)
|
||||
normalizeLocalState (input) {
|
||||
const colors = input.colors || input
|
||||
const radii = input.radii || input
|
||||
let i = 0
|
||||
console.log('BENIS')
|
||||
console.log(colors)
|
||||
|
||||
this.redColorLocal = rgbstr2hex(colors.cRed)
|
||||
this.blueColorLocal = rgbstr2hex(colors.cBlue)
|
||||
this.greenColorLocal = rgbstr2hex(colors.cGreen)
|
||||
this.orangeColorLocal = rgbstr2hex(colors.cOrange)
|
||||
console.log(i++)
|
||||
this.bgColorLocal = rgb2hex(colors.bg)
|
||||
console.log(i++)
|
||||
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
|
||||
console.log(i++)
|
||||
this.inputRadiusLocal = radii.inputRadius || 4
|
||||
console.log(i++)
|
||||
this.panelRadiusLocal = radii.panelRadius || 10
|
||||
console.log(i++)
|
||||
this.avatarRadiusLocal = radii.avatarRadius || 5
|
||||
console.log(i++)
|
||||
this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
|
||||
console.log(i++)
|
||||
this.tooltipRadiusLocal = radii.tooltipRadius || 2
|
||||
console.log(i++)
|
||||
this.attachmentRadiusLocal = radii.attachmentRadius || 5
|
||||
console.log(i++)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -24,80 +24,73 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<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-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
|
||||
<div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
|
||||
<div class="avatar" :style="{
|
||||
'border-radius': avatarRadiusLocal + 'px'
|
||||
}">
|
||||
( ͡° ͜ʖ ͡°)
|
||||
</div>
|
||||
<h4>Content</h4>
|
||||
<br>
|
||||
A bunch of more content and
|
||||
<a :style="{ color: linkColorLocal }">a nice lil' link</a>
|
||||
<i :style="{ color: blueColorLocal }" class="icon-reply"/>
|
||||
<i :style="{ color: greenColorLocal }" class="icon-retweet"/>
|
||||
<i :style="{ color: redColorLocal }" class="icon-cancel"/>
|
||||
<i :style="{ color: orangeColorLocal }" class="icon-star"/>
|
||||
<br>
|
||||
<button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button>
|
||||
<div class="preview-container" :style="previewRules">
|
||||
<div class="panel dummy">
|
||||
<div class="panel-heading">Preview</div>
|
||||
<div class="panel-body theme-preview-content">
|
||||
<div class="avatar">
|
||||
( ͡° ͜ʖ ͡°)
|
||||
</div>
|
||||
<h4>Content</h4>
|
||||
<br>
|
||||
A bunch of more content and
|
||||
<a style="color: var(--link)">a nice lil' link</a>
|
||||
<i style="color: var(--cBlue)" class="icon-reply"/>
|
||||
<i style="color: var(--cGreen)" class="icon-retweet"/>
|
||||
<i style="color: var(--cRed)" class="icon-cancel"/>
|
||||
<i style="color: var(--cOrange)" class="icon-star"/>
|
||||
<br>
|
||||
<button class="btn">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-container">
|
||||
<p>{{$t('settings.theme_help')}}</p>
|
||||
<div class="color-item">
|
||||
<label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label>
|
||||
<input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal">
|
||||
<input id="bgcolor-t" class="theme-color-in" type="text" v-model="bgColorLocal">
|
||||
<h3>Basic colors!!</h3>
|
||||
<div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="bgOpacity" v-model="bgOpacityLocal" fallback="1"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="fgColor" v-model="btnColorLocal" :label="$t('settings.foreground')"/>
|
||||
<OpacityInput name="fgOpacity" v-model="btnOpacityLocal" fallback="1"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label>
|
||||
<input id="fgcolor" class="theme-color-cl" type="color" v-model="btnColorLocal">
|
||||
<input id="fgcolor-t" class="theme-color-in" type="text" v-model="btnColorLocal">
|
||||
|
||||
<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 class="color-item">
|
||||
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" label="Top bar"/>
|
||||
<OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label>
|
||||
<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 class="color-item">
|
||||
<label for="linkcolor" class="theme-color-lb">{{$t('settings.links')}}</label>
|
||||
<input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal">
|
||||
<input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal">
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label>
|
||||
<input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal">
|
||||
<input id="redcolor-t" class="theme-color-in" type="text" v-model="redColorLocal">
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="bluecolor" class="theme-color-lb">{{$t('settings.cBlue')}}</label>
|
||||
<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 class="color-item">
|
||||
<label for="greencolor" class="theme-color-lb">{{$t('settings.cGreen')}}</label>
|
||||
<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 class="color-item">
|
||||
<label for="orangecolor" class="theme-color-lb">{{$t('settings.cOrange')}}</label>
|
||||
<input id="orangecolor" class="theme-color-cl" type="color" v-model="orangeColorLocal">
|
||||
<input id="orangecolor-t" class="theme-color-in" type="text" v-model="orangeColorLocal">
|
||||
|
||||
<h3>Rainbows!!!</h3>
|
||||
<div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -161,7 +154,7 @@
|
|||
|
||||
.apply-container,
|
||||
.radius-container,
|
||||
.color-container,
|
||||
.color-container > div,
|
||||
.presets-container {
|
||||
display: flex;
|
||||
|
||||
|
|
@ -176,7 +169,7 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.color-container {
|
||||
.color-container > div{
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
@ -214,14 +207,30 @@
|
|||
.radius-item,
|
||||
.color-item {
|
||||
min-width: 20em;
|
||||
margin: 5px 6px 0 0;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 0;
|
||||
align-items: baseline;
|
||||
margin: 5px 6px 5px 0;
|
||||
|
||||
&:nth-child(2n+1) {
|
||||
margin-right: 7px;
|
||||
|
||||
}
|
||||
|
||||
.color, .opacity {
|
||||
display:flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--faint, $fallback--faint);
|
||||
}
|
||||
.opacity-control {
|
||||
margin-top: 5px;
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.radius-item {
|
||||
|
|
@ -243,44 +252,19 @@
|
|||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.theme-color-in {
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
.theme-radius-in {
|
||||
min-width: 1em;
|
||||
}
|
||||
|
||||
.theme-radius-in,
|
||||
.theme-color-in {
|
||||
.theme-radius-in {
|
||||
max-width: 7em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.theme-radius-lb,
|
||||
.theme-color-lb {
|
||||
flex: 2;
|
||||
min-width: 7em;
|
||||
}
|
||||
|
||||
.theme-radius-lb{
|
||||
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 {
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue