therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update theme editor to have 4 colors, rewrite the color setter, change a LOT of base16 assignments for better consistency.

Browse source
This commit is contained in:
shpuld 2017-11-17 02:17:36 +02:00
parent ed84c6acc0
commit 44073e72fd
11 changed files with 122 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/settings/settings.js
View file

@ -13,6 +13,7 @@ const settings = {
hoverPreviewLocal: this.$store.state.config.hoverPreview,
bgColorLocal: '',
fgColorLocal: '',
textColorLocal: '',
linkColorLocal: ''
}
},
@ -24,6 +25,18 @@ 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) {
@ -39,12 +52,14 @@ const settings = {
}
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
}})
}

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

@ -1,6 +1,6 @@
<template>
<div class="settings panel panel-default base00-background">
<div class="panel-heading base01-background base04">
<div class="panel-heading base02-background base04">
{{$t('settings.settings')}}
</div>
<div class="panel-body">
@ -11,10 +11,38 @@
<div class="setting-item">
<h3>Custom theme</h3>
<p>Enter hex color codes (#aabbcc) into the text fields.</p>
<input type="text" placeholder="Background" v-model="bgColorLocal">
<input type="text" placeholder="Foreground" v-model="fgColorLocal">
<input type="text" placeholder="Highlight" v-model="linkColorLocal">
<button @click="setCustomTheme">Submit</button>
<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>
@ -86,4 +114,26 @@
.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>