moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

it works, now to clean it up

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.scss
View File

@ -313,6 +313,7 @@ main-router {
border-radius: $fallback--panelRadius; border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius); border-radius: var(--panelRadius, $fallback--panelRadius);
box-shadow: 1px 1px 4px rgba(0,0,0,.6); box-shadow: 1px 1px 4px rgba(0,0,0,.6);
box-shadow: var(--panel-shadow);
} }
.panel-body:empty::before { .panel-body:empty::before {

6
src/components/shadow_control/shadow_control.js
View File

@ -9,6 +9,8 @@ export default {
'value', 'fallback' 'value', 'fallback'
], ],
data () { data () {
console.log('sdsa')
console.log(this.value, this.fallback)
return { return {
selectedId: 0, selectedId: 0,
cValue: this.value || this.fallback cValue: this.value || this.fallback
@ -36,6 +38,9 @@ export default {
const movable = this.cValue.splice(this.selectedId, 1)[0] const movable = this.cValue.splice(this.selectedId, 1)[0]
this.cValue.splice(this.selectedId + 1, 0, movable) this.cValue.splice(this.selectedId + 1, 0, movable)
this.selectedId += 1 this.selectedId += 1
},
update () {
this.$emit('input', this.cValue)
} }
}, },
computed: { computed: {
@ -67,7 +72,6 @@ export default {
return hex2rgb(this.selected.color) return hex2rgb(this.selected.color)
}, },
style () { style () {
console.log(StyleSetter.generateShadow(this.cValue))
return { return {
boxShadow: StyleSetter.generateShadow(this.cValue) boxShadow: StyleSetter.generateShadow(this.cValue)
} }

11
src/components/shadow_control/shadow_control.vue
View File

@ -5,6 +5,7 @@
<input <input
v-model="selected.y" v-model="selected.y"
:disabled="!present" :disabled="!present"
@input="update"
class="input-number" class="input-number"
type="number"> type="number">
<div class="wrap"> <div class="wrap">
@ -182,15 +183,15 @@
} }
.preview-window { .preview-window {
flex: 1; flex: 1;
background-color: white; background-color: #999999;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-image: background-image:
linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(45deg, #666666 25%, transparent 25%),
linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #666666 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(45deg, transparent 75%, #666666 75%),
linear-gradient(-45deg, transparent 75%, #808080 75%); linear-gradient(-45deg, transparent 75%, #666666 75%);
background-size: 20px 20px; background-size: 20px 20px;
background-position:0 0, 0 10px, 10px -10px, -10px 0; background-position:0 0, 0 10px, 10px -10px, -10px 0;

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 { 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 ColorInput from '../color_input/color_input.vue'
import ShadowControl from '../shadow_control/shadow_control.vue' import ShadowControl from '../shadow_control/shadow_control.vue'
import ContrastRatio from '../contrast_ratio/contrast_ratio.vue' import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
@ -155,7 +156,7 @@ export default {
} }
}, },
previewTheme () { previewTheme () {
if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} } if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
return this.preview.theme return this.preview.theme
}, },
previewContrast () { previewContrast () {
@ -231,14 +232,30 @@ export default {
return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';') return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
}, },
shadowsAvailable () { shadowsAvailable () {
return Object.keys(this.preview.theme.shadows) return Object.keys(this.previewTheme.shadows)
}, },
currentShadow () { currentShadowOverriden: {
const fallback = this.preview.theme.shadows[this.shadowSelected]; get () {
return fallback ? { return this.currentShadow
fallback, },
value: this.shadowsLocal[this.shadowSelected] set (val) {
} : undefined 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: { components: {
@ -305,7 +322,10 @@ export default {
setCustomTheme () { setCustomTheme () {
this.$store.dispatch('setOption', { this.$store.dispatch('setOption', {
name: 'customTheme', 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> <template>
<div> <div>
<div class="presets-container"> <div class="presets-container">
<div> <div>
{{$t('settings.presets')}} {{$t('settings.presets')}}
<label for="style-switcher" class='select'> <label for="style-switcher" class='select'>
<select id="style-switcher" v-model="selected" class="style-switcher"> <select id="style-switcher" v-model="selected" class="style-switcher">
<option v-for="style in availableStyles" <option v-for="style in availableStyles"
:value="style" :value="style"
:style="{ :style="{
backgroundColor: style[1], backgroundColor: style[1],
color: style[3] color: style[3]
}"> }">
{{style[0]}} {{style[0]}}
</option> </option>
</select> </select>
<i class="icon-down-open"/> <i class="icon-down-open"/>
</label> </label>
</div> </div>
<div class="import-export"> <div class="import-export">
<button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button> <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
<button class="btn" @click="importTheme">{{ $t('settings.import_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> <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
</div> </div>
</div> </div>
<div class="preview-container"> <div class="preview-container">
<div class="panel dummy" :style="previewRules"> <div class="panel dummy" :style="previewRules">
<div class="panel-heading">Preview</div> <div class="panel-heading">Preview</div>
<div class="panel-body theme-preview-content"> <div class="panel-body theme-preview-content">
<div class="avatar"> <div class="avatar">
( ͡° ͜ʖ ͡°) ( ͡° ͜ʖ ͡°)
</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: var(--link)">a nice lil' link</a> <a style="color: var(--link)">a nice lil' link</a>
<i style="color: var(--cBlue)" class="icon-reply"/> <i style="color: var(--cBlue)" class="icon-reply"/>
<i style="color: var(--cGreen)" class="icon-retweet"/> <i style="color: var(--cGreen)" class="icon-retweet"/>
<i style="color: var(--cRed)" class="icon-cancel"/> <i style="color: var(--cRed)" class="icon-cancel"/>
<i style="color: var(--cOrange)" class="icon-star"/> <i style="color: var(--cOrange)" class="icon-star"/>
<br> <br>
<button class="btn">Button</button> <button class="btn">Button</button>
</div>
</div> </div>
</div> </div>
</div>
<p>{{$t('settings.theme_help')}}</p> <p>{{$t('settings.theme_help')}}</p>
<tab-switcher> <tab-switcher>
@ -171,15 +171,29 @@
</div> </div>
</div> </div>
<div label="Shadow Realm" class="shadow-container"> <div label="Shadow Realm" class="shadow-container">
<div class="shadow-selector"> <div>
<select id="style-switcher" v-model="shadowSelected" class="style-switcher"> Shadow
<option v-for="shadow in shadowsAvailable" <label for="shadow-switcher" class="shadow-selector select">
:value="shadow"> <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
{{shadow}} <option v-for="shadow in shadowsAvailable"
</option> :value="shadow">
</select> {{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> </div>
<shadow-control v-if="currentShadow" :value="currentShadow.value" :fallback="currentShadow.fallback"/> <shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
</div> </div>
</tab-switcher> </tab-switcher>

3
src/services/style_setter/style_setter.js
View File

@ -72,7 +72,7 @@ const getTextColor = function (bg, text, preserve) {
} }
const setColors = (input, commit) => { const setColors = (input, commit) => {
const { colorRules, radiiRules, theme } = generatePreset(input) const { colorRules, radiiRules, shadowRules, theme } = 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'
@ -84,6 +84,7 @@ const setColors = (input, commit) => {
styleSheet.toString() styleSheet.toString()
styleSheet.insertRule(`body { ${colorRules} }`, 'index-max') styleSheet.insertRule(`body { ${colorRules} }`, 'index-max')
styleSheet.insertRule(`body { ${radiiRules} }`, 'index-max') styleSheet.insertRule(`body { ${radiiRules} }`, 'index-max')
styleSheet.insertRule(`body { ${shadowRules} }`, 'index-max')
body.style.display = 'initial' body.style.display = 'initial'
// commit('setOption', { name: 'colors', value: htmlColors }) // commit('setOption', { name: 'colors', value: htmlColors })