cleanup and optimization
This commit is contained in:
Henry Jameson
parent
a8180d03be
commit
56fec664a9
7 changed files with 216 additions and 155 deletions
|
|
@ -313,7 +313,7 @@ main-router {
|
|||
border-radius: $fallback--panelRadius;
|
||||
border-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
|
||||
box-shadow: var(--panel-shadow);
|
||||
box-shadow: var(--panelShadow);
|
||||
}
|
||||
|
||||
.panel-body:empty::before {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,13 @@
|
|||
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'
|
||||
import { getCssShadow } from '../../services/style_setter/style_setter.js'
|
||||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
||||
import { set } from 'vue'
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'value', 'fallback'
|
||||
],
|
||||
data () {
|
||||
console.log('sdsa')
|
||||
console.log(this.value, this.fallback)
|
||||
return {
|
||||
selectedId: 0,
|
||||
cValue: this.value || this.fallback
|
||||
|
|
@ -38,9 +35,6 @@ export default {
|
|||
const movable = this.cValue.splice(this.selectedId, 1)[0]
|
||||
this.cValue.splice(this.selectedId + 1, 0, movable)
|
||||
this.selectedId += 1
|
||||
},
|
||||
update () {
|
||||
this.$emit('input', this.cValue)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -73,7 +67,7 @@ export default {
|
|||
},
|
||||
style () {
|
||||
return {
|
||||
boxShadow: StyleSetter.generateShadow(this.cValue)
|
||||
boxShadow: getCssShadow(this.cValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<input
|
||||
v-model="selected.y"
|
||||
:disabled="!present"
|
||||
@input="update"
|
||||
class="input-number"
|
||||
type="number">
|
||||
<div class="wrap">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,23 @@
|
|||
import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
|
||||
import { set, delete as del } from 'vue'
|
||||
import { generateColors, generateShadows, generateRadii, composePreset } from '../../services/style_setter/style_setter.js'
|
||||
import ColorInput from '../color_input/color_input.vue'
|
||||
import ShadowControl from '../shadow_control/shadow_control.vue'
|
||||
import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
|
||||
import OpacityInput from '../opacity_input/opacity_input.vue'
|
||||
import StyleSetter from '../../services/style_setter/style_setter.js'
|
||||
import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
|
||||
|
||||
const v1OnlyNames = [
|
||||
'bg',
|
||||
'fg',
|
||||
'text',
|
||||
'link',
|
||||
'cRed',
|
||||
'cGreen',
|
||||
'cBlue',
|
||||
'cOrange'
|
||||
].map(_ => _ + 'ColorLocal')
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -53,14 +64,14 @@ export default {
|
|||
faintOpacityLocal: undefined,
|
||||
faintLinkColorLocal: undefined,
|
||||
|
||||
shadowSelected: undefined,
|
||||
shadowsLocal: {},
|
||||
|
||||
cRedColorLocal: '',
|
||||
cBlueColorLocal: '',
|
||||
cGreenColorLocal: '',
|
||||
cOrangeColorLocal: '',
|
||||
|
||||
shadowSelected: undefined,
|
||||
shadowsLocal: {},
|
||||
|
||||
btnRadiusLocal: '',
|
||||
inputRadiusLocal: '',
|
||||
panelRadiusLocal: '',
|
||||
|
|
@ -86,9 +97,8 @@ export default {
|
|||
selectedVersion () {
|
||||
return Array.isArray(this.selected) ? 1 : 2
|
||||
},
|
||||
currentTheme () {
|
||||
currentColors () {
|
||||
return {
|
||||
colors: {
|
||||
bg: this.bgColorLocal,
|
||||
text: this.textColorLocal,
|
||||
link: this.linkColorLocal,
|
||||
|
|
@ -122,8 +132,10 @@ export default {
|
|||
cBlue: this.cBlueColorLocal,
|
||||
cGreen: this.cGreenColorLocal,
|
||||
cOrange: this.cOrangeColorLocal
|
||||
}
|
||||
},
|
||||
opacity: {
|
||||
currentOpacity () {
|
||||
return {
|
||||
bg: this.bgOpacityLocal,
|
||||
btn: this.btnOpacityLocal,
|
||||
input: this.inputOpacityLocal,
|
||||
|
|
@ -131,36 +143,44 @@ export default {
|
|||
topBar: this.topBarOpacityLocal,
|
||||
border: this.borderOpacityLocal,
|
||||
faint: this.faintOpacityLocal
|
||||
}
|
||||
},
|
||||
radii: {
|
||||
btnRadius: this.btnRadiusLocal,
|
||||
inputRadius: this.inputRadiusLocal,
|
||||
panelRadius: this.panelRadiusLocal,
|
||||
avatarRadius: this.avatarRadiusLocal,
|
||||
avatarAltRadius: this.avatarAltRadiusLocal,
|
||||
tooltipRadius: this.tooltipRadiusLocal,
|
||||
attachmentRadius: this.attachmentRadiusLocal
|
||||
currentRadii () {
|
||||
return {
|
||||
btn: this.btnRadiusLocal,
|
||||
input: this.inputRadiusLocal,
|
||||
panel: this.panelRadiusLocal,
|
||||
avatar: this.avatarRadiusLocal,
|
||||
avatarAlt: this.avatarAltRadiusLocal,
|
||||
tooltip: this.tooltipRadiusLocal,
|
||||
attachment: this.attachmentRadiusLocal
|
||||
}
|
||||
},
|
||||
previewColors () {
|
||||
if (this.currentColors.bg) {
|
||||
return generateColors({
|
||||
opacity: this.currentOpacity,
|
||||
colors: this.currentColors
|
||||
})
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
previewRadii () {
|
||||
return generateRadii(this.currentRadii)
|
||||
},
|
||||
previewShadows () {
|
||||
return generateShadows({ shadows: this.shadowsLocal })
|
||||
},
|
||||
preview () {
|
||||
try {
|
||||
if (!this.currentTheme.colors.bg) {
|
||||
return {}
|
||||
}
|
||||
return StyleSetter.generatePreset(this.currentTheme)
|
||||
} catch (e) {
|
||||
console.error('CATCH')
|
||||
console.error(e)
|
||||
return {}
|
||||
}
|
||||
return composePreset(this.previewColors, this.previewRadii, this.previewShadows)
|
||||
},
|
||||
previewTheme () {
|
||||
if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
|
||||
if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
|
||||
return this.preview.theme
|
||||
},
|
||||
previewContrast () {
|
||||
if (!this.previewTheme.colors) return {}
|
||||
if (!this.previewTheme.colors.bg) return {}
|
||||
const colors = this.previewTheme.colors
|
||||
const opacity = this.previewTheme.opacity
|
||||
if (!colors.bg) return {}
|
||||
|
|
@ -228,19 +248,19 @@ export default {
|
|||
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
|
||||
},
|
||||
previewRules () {
|
||||
if (!this.preview.colorRules) return ''
|
||||
return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
|
||||
if (!this.preview.rules) return ''
|
||||
return [...Object.values(this.preview.rules), 'color: var(--text)'].join(';')
|
||||
},
|
||||
shadowsAvailable () {
|
||||
return Object.keys(this.previewTheme.shadows)
|
||||
},
|
||||
currentShadowOverriden: {
|
||||
get () {
|
||||
return this.currentShadow
|
||||
return !!this.currentShadow
|
||||
},
|
||||
set (val) {
|
||||
if (val) {
|
||||
set(this.shadowsLocal, this.shadowSelected, Object.assign({}, this.currentShadowFallback))
|
||||
set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))
|
||||
} else {
|
||||
del(this.shadowsLocal, this.shadowSelected)
|
||||
}
|
||||
|
|
@ -270,7 +290,12 @@ export default {
|
|||
const stringified = JSON.stringify({
|
||||
// To separate from other random JSON files and possible future theme formats
|
||||
_pleroma_theme_version: 2,
|
||||
theme: this.currentTheme
|
||||
theme: {
|
||||
shadows: this.shadowsLocal,
|
||||
opacity: this.currentOpacity,
|
||||
colors: this.currentColors,
|
||||
radii: this.currentRadii
|
||||
}
|
||||
}, null, 2) // Pretty-print and indent with 2 spaces
|
||||
|
||||
// Create an invisible link with a data url and simulate a click
|
||||
|
|
@ -323,47 +348,22 @@ export default {
|
|||
this.$store.dispatch('setOption', {
|
||||
name: 'customTheme',
|
||||
value: {
|
||||
...this.currentTheme,
|
||||
shadows: this.shadowsLocal
|
||||
shadows: this.shadowsLocal,
|
||||
opacity: this.currentOpacity,
|
||||
colors: this.currentColors,
|
||||
radii: this.currentRadii
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// Clears all the extra stuff when loading V1 theme
|
||||
clearV1 () {
|
||||
this.bgOpacityLocal = undefined
|
||||
this.fgOpacityLocal = undefined
|
||||
|
||||
this.fgTextColorLocal = undefined
|
||||
this.fgLinkColorLocal = undefined
|
||||
|
||||
this.btnColorLocal = undefined
|
||||
this.btnTextColorLocal = undefined
|
||||
this.btnOpacityLocal = undefined
|
||||
|
||||
this.inputColorLocal = undefined
|
||||
this.inputTextColorLocal = undefined
|
||||
this.inputOpacityLocal = undefined
|
||||
|
||||
this.panelColorLocal = undefined
|
||||
this.panelTextColorLocal = undefined
|
||||
this.panelFaintColorLocal = undefined
|
||||
this.panelOpacityLocal = undefined
|
||||
|
||||
this.topBarColorLocal = undefined
|
||||
this.topBarTextColorLocal = undefined
|
||||
this.topBarLinkColorLocal = undefined
|
||||
this.topBarOpacityLocal = undefined
|
||||
|
||||
this.borderColorLocal = undefined
|
||||
this.borderOpacityLocal = undefined
|
||||
|
||||
this.faintColorLocal = undefined
|
||||
this.faintOpacityLocal = undefined
|
||||
this.faintLinkColorLocal = undefined
|
||||
|
||||
this.alertErrorColorLocal = undefined
|
||||
|
||||
this.badgeNotificationColorLocal = undefined
|
||||
Object.keys(this.$data)
|
||||
.filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
|
||||
.filter(_ => !v1OnlyNames.includes(_))
|
||||
.forEach(key => {
|
||||
set(this.$data, key, undefined)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { set, delete as del } from 'vue'
|
||||
import StyleSetter from '../services/style_setter/style_setter.js'
|
||||
import { setPreset, setColors } from '../services/style_setter/style_setter.js'
|
||||
|
||||
const browserLocale = (window.navigator.language || 'en').split('-')[0]
|
||||
|
||||
|
|
@ -51,10 +51,10 @@ const config = {
|
|||
commit('setOption', {name, value})
|
||||
switch (name) {
|
||||
case 'theme':
|
||||
StyleSetter.setPreset(value, commit)
|
||||
setPreset(value, commit)
|
||||
break
|
||||
case 'customTheme':
|
||||
StyleSetter.setColors(value, commit)
|
||||
setColors(value, commit)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { set } from 'vue'
|
||||
import StyleSetter from '../services/style_setter/style_setter.js'
|
||||
import { setPreset } from '../services/style_setter/style_setter.js'
|
||||
|
||||
const defaultState = {
|
||||
// Stuff from static/config.json and apiConfig
|
||||
|
|
@ -54,7 +54,7 @@ const instance = {
|
|||
dispatch('setPageTitle')
|
||||
break
|
||||
case 'theme':
|
||||
StyleSetter.setPreset(value, commit)
|
||||
setPreset(value, commit)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ const getTextColor = function (bg, text, preserve) {
|
|||
}
|
||||
|
||||
const setColors = (input, commit) => {
|
||||
const { colorRules, radiiRules, shadowRules, theme } = generatePreset(input)
|
||||
const { rules, theme } = generatePreset(input)
|
||||
const head = document.head
|
||||
const body = document.body
|
||||
body.style.display = 'none'
|
||||
|
|
@ -81,10 +81,11 @@ const setColors = (input, commit) => {
|
|||
head.appendChild(styleEl)
|
||||
const styleSheet = styleEl.sheet
|
||||
|
||||
console.log(rules)
|
||||
styleSheet.toString()
|
||||
styleSheet.insertRule(`body { ${colorRules} }`, 'index-max')
|
||||
styleSheet.insertRule(`body { ${radiiRules} }`, 'index-max')
|
||||
styleSheet.insertRule(`body { ${shadowRules} }`, 'index-max')
|
||||
styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max')
|
||||
styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max')
|
||||
styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max')
|
||||
body.style.display = 'initial'
|
||||
|
||||
// commit('setOption', { name: 'colors', value: htmlColors })
|
||||
|
|
@ -93,7 +94,8 @@ const setColors = (input, commit) => {
|
|||
commit('setOption', { name: 'colors', value: theme.colors })
|
||||
}
|
||||
|
||||
const generateShadow = (input) => {
|
||||
const getCssShadow = (input) => {
|
||||
console.log(input)
|
||||
// >shad
|
||||
return input.map((shad) => [
|
||||
shad.x,
|
||||
|
|
@ -106,27 +108,8 @@ const generateShadow = (input) => {
|
|||
]).join(' ')).join(', ')
|
||||
}
|
||||
|
||||
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 shadows = {
|
||||
panel: [{
|
||||
x: 1,
|
||||
y: 1,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 0.6
|
||||
}],
|
||||
...(input.shadows || {})
|
||||
}
|
||||
const generateColors = (input) => {
|
||||
console.log(input.opacity)
|
||||
const colors = {}
|
||||
const opacity = Object.assign({
|
||||
alert: 0.5,
|
||||
|
|
@ -138,7 +121,7 @@ const generatePreset = (input) => {
|
|||
}
|
||||
return acc
|
||||
}, {}))
|
||||
|
||||
console.log(colors, opacity)
|
||||
const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
|
||||
if (typeof v === 'object') {
|
||||
acc[k] = v
|
||||
|
|
@ -205,7 +188,11 @@ const generatePreset = (input) => {
|
|||
colors[k + 'Link'].a = v
|
||||
colors['panelFaint'].a = v
|
||||
}
|
||||
if (colors[k]) {
|
||||
colors[k].a = v
|
||||
} else {
|
||||
console.error('Wrong key ' + k)
|
||||
}
|
||||
})
|
||||
|
||||
const htmlColors = Object.entries(colors)
|
||||
|
|
@ -215,20 +202,99 @@ const generatePreset = (input) => {
|
|||
acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
|
||||
return acc
|
||||
}, { complete: {}, solid: {} })
|
||||
|
||||
return {
|
||||
colorRules: Object.entries(htmlColors.complete).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(';'),
|
||||
shadowRules: Object.entries(shadows).filter(([k, v]) => v).map(([k, v]) => `--${k}-shadow: ${generateShadow(v)}`).join(';'),
|
||||
rules: {
|
||||
colors: Object.entries(htmlColors.complete)
|
||||
.filter(([k, v]) => v)
|
||||
.map(([k, v]) => `--${k}: ${v}`)
|
||||
.join(';')
|
||||
},
|
||||
theme: {
|
||||
colors: htmlColors.solid,
|
||||
shadows,
|
||||
opacity,
|
||||
opacity
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const generateRadii = (input) => {
|
||||
const inputRadii = input.radii || {
|
||||
btn: input.btnRadius,
|
||||
input: input.inputRadius,
|
||||
panel: input.panelRadius,
|
||||
avatar: input.avatarRadius,
|
||||
avatarAlt: input.avatarAltRadius,
|
||||
tooltip: input.tooltipRadius,
|
||||
attachment: input.attachmentRadius
|
||||
}
|
||||
|
||||
const radii = {
|
||||
btn: 4,
|
||||
input: 4,
|
||||
panel: 10,
|
||||
avatar: 5,
|
||||
avatarAlt: 50,
|
||||
tooltip: 2,
|
||||
attachment: 5,
|
||||
...inputRadii
|
||||
}
|
||||
|
||||
return {
|
||||
rules: {
|
||||
radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
|
||||
},
|
||||
theme: {
|
||||
radii
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const generateShadows = (input) => {
|
||||
const shadows = {
|
||||
panel: [{
|
||||
x: 1,
|
||||
y: 1,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 0.6
|
||||
}],
|
||||
...(input.shadows || {})
|
||||
}
|
||||
console.log('benis')
|
||||
|
||||
return {
|
||||
rules: {
|
||||
shadows: Object.entries(shadows).filter(([k, v]) => v).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';')
|
||||
},
|
||||
theme: {
|
||||
shadows
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const composePreset = (colors, radii, shadows) => {
|
||||
return {
|
||||
rules: {
|
||||
...shadows.rules,
|
||||
...colors.rules,
|
||||
...radii.rules
|
||||
},
|
||||
theme: {
|
||||
...shadows.theme,
|
||||
...colors.theme,
|
||||
...radii.theme
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const generatePreset = (input) => {
|
||||
const shadows = generateShadows(input)
|
||||
const colors = generateColors(input)
|
||||
const radii = generateRadii(input)
|
||||
|
||||
return composePreset(colors, radii, shadows)
|
||||
}
|
||||
|
||||
const setPreset = (val, commit) => {
|
||||
window.fetch('/static/styles.json')
|
||||
.then((data) => data.json())
|
||||
|
|
@ -267,13 +333,15 @@ const setPreset = (val, commit) => {
|
|||
})
|
||||
}
|
||||
|
||||
const StyleSetter = {
|
||||
export {
|
||||
setStyle,
|
||||
setPreset,
|
||||
setColors,
|
||||
getTextColor,
|
||||
generateColors,
|
||||
generateRadii,
|
||||
generateShadows,
|
||||
generatePreset,
|
||||
generateShadow
|
||||
composePreset,
|
||||
getCssShadow
|
||||
}
|
||||
|
||||
export default StyleSetter
|
||||
|
|
|
|||
Loading…
Reference in a new issue