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

it works, now to clean it up

Browse source
This commit is contained in:
Henry Jameson 2018-11-19 18:15:27 +03:00
parent a5b4f31c12
commit a8180d03be
6 changed files with 108 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
import { set, delete as del } from 'vue'
import ColorInput from '../color_input/color_input.vue'
import ShadowControl from '../shadow_control/shadow_control.vue'
import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
@ -155,7 +156,7 @@ export default {
}
},
previewTheme () {
if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} }
if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
return this.preview.theme
},
previewContrast () {
@ -231,14 +232,30 @@ export default {
return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
},
shadowsAvailable () {
return Object.keys(this.preview.theme.shadows)
return Object.keys(this.previewTheme.shadows)
},
currentShadow () {
const fallback = this.preview.theme.shadows[this.shadowSelected];
return fallback ? {
fallback,
value: this.shadowsLocal[this.shadowSelected]
} : undefined
currentShadowOverriden: {
get () {
return this.currentShadow
},
set (val) {
if (val) {
set(this.shadowsLocal, this.shadowSelected, Object.assign({}, this.currentShadowFallback))
} else {
del(this.shadowsLocal, this.shadowSelected)
}
}
},
currentShadowFallback () {
return this.previewTheme.shadows[this.shadowSelected]
},
currentShadow: {
get () {
return this.shadowsLocal[this.shadowSelected]
},
set (v) {
set(this.shadowsLocal, this.shadowSelected, v)
}
}
},
components: {
@ -305,7 +322,10 @@ export default {
setCustomTheme () {
this.$store.dispatch('setOption', {
name: 'customTheme',
value: this.currentTheme
value: {
...this.currentTheme,
shadows: this.shadowsLocal
}
})
},

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

@ -1,49 +1,49 @@
<template>
<div>
<div class="presets-container">
<div>
{{$t('settings.presets')}}
<label for="style-switcher" class='select'>
<select id="style-switcher" v-model="selected" class="style-switcher">
<option v-for="style in availableStyles"
:value="style"
:style="{
backgroundColor: style[1],
color: style[3]
}">
{{style[0]}}
</option>
</select>
<i class="icon-down-open"/>
</label>
</div>
<div class="import-export">
<button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
<button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
<p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
</div>
</div>
<div class="preview-container">
<div class="panel dummy" :style="previewRules">
<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 class="presets-container">
<div>
{{$t('settings.presets')}}
<label for="style-switcher" class='select'>
<select id="style-switcher" v-model="selected" class="style-switcher">
<option v-for="style in availableStyles"
:value="style"
:style="{
backgroundColor: style[1],
color: style[3]
}">
{{style[0]}}
</option>
</select>
<i class="icon-down-open"/>
</label>
</div>
<div class="import-export">
<button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
<button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
<p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
</div>
</div>
<div class="preview-container">
<div class="panel dummy" :style="previewRules">
<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>
<p>{{$t('settings.theme_help')}}</p>
<tab-switcher>
@ -171,15 +171,29 @@
</div>
</div>
<div label="Shadow Realm" class="shadow-container">
<div class="shadow-selector">
<select id="style-switcher" v-model="shadowSelected" class="style-switcher">
<option v-for="shadow in shadowsAvailable"
:value="shadow">
{{shadow}}
</option>
</select>
<div>
Shadow
<label for="shadow-switcher" class="shadow-selector select">
<select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
<option v-for="shadow in shadowsAvailable"
:value="shadow">
{{shadow}}
</option>
</select>
<i class="icon-down-open"/>
</label>
<label for="override" class="label">
Override
</label>
<input
v-model="currentShadowOverriden"
name="override"
id="override"
class="input-override"
type="checkbox">
<label class="checkbox-label" for="override"></label>
</div>
<shadow-control v-if="currentShadow" :value="currentShadow.value" :fallback="currentShadow.fallback"/>
<shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
</div>
</tab-switcher>