removed console logs

This commit is contained in:
Henry Jameson 2020-01-20 00:34:49 +02:00
parent 7d7ccf7298
commit e4033c85e2
6 changed files with 166 additions and 108 deletions

View File

@ -61,6 +61,21 @@ export default {
} }
} }
}, },
currentFallback () {
if (this.ready && this.fallback.length > 0) {
return this.fallback[this.selectedId]
} else {
return {
x: 0,
y: 0,
blur: 0,
spread: 0,
inset: false,
color: '#000000',
alpha: 1
}
}
},
moveUpValid () { moveUpValid () {
return this.ready && this.selectedId > 0 return this.ready && this.selectedId > 0
}, },

View File

@ -191,6 +191,8 @@
v-model="selected.color" v-model="selected.color"
:disabled="!present" :disabled="!present"
:label="$t('settings.style.common.color')" :label="$t('settings.style.common.color')"
:fallback="currentFallback.color"
:showOptionalTickbox="false"
name="shadow" name="shadow"
/> />
<OpacityInput <OpacityInput

View File

@ -5,6 +5,7 @@ import {
getContrastRatioLayers getContrastRatioLayers
} from '../../services/color_convert/color_convert.js' } from '../../services/color_convert/color_convert.js'
import { import {
DEFAULT_SHADOWS,
generateColors, generateColors,
generateShadows, generateShadows,
generateRadii, generateRadii,
@ -76,7 +77,7 @@ export default {
.reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}), .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
...Object.keys(OPACITIES) ...Object.keys(OPACITIES)
.map(key => console.log(key) || [key, '']) .map(key => [key, ''])
.reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}), .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
shadowSelected: undefined, shadowSelected: undefined,
@ -134,7 +135,7 @@ export default {
}, },
currentOpacity () { currentOpacity () {
return Object.keys(OPACITIES) return Object.keys(OPACITIES)
.map(key => console.log(key) || [key, this[key + 'OpacityLocal']]) .map(key => [key, this[key + 'OpacityLocal']])
.reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {}) .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
}, },
currentRadii () { currentRadii () {
@ -224,7 +225,7 @@ export default {
].join(';') ].join(';')
}, },
shadowsAvailable () { shadowsAvailable () {
return Object.keys(this.previewTheme.shadows).sort() return Object.keys(DEFAULT_SHADOWS).sort()
}, },
currentShadowOverriden: { currentShadowOverriden: {
get () { get () {
@ -239,7 +240,7 @@ export default {
} }
}, },
currentShadowFallback () { currentShadowFallback () {
return this.previewTheme.shadows[this.shadowSelected] return (this.previewTheme.shadows || {})[this.shadowSelected]
}, },
currentShadow: { currentShadow: {
get () { get () {
@ -314,6 +315,17 @@ export default {
} }
}) })
}, },
updatePreviewColorsAndShadows () {
this.previewColors = generateColors({
opacity: this.currentOpacity,
colors: this.currentColors
})
this.previewShadows = generateShadows(
{ shadows: this.shadowsLocal },
this.previewColors.theme.colors,
this.previewColors.mod
)
},
onImport (parsed) { onImport (parsed) {
if (parsed._pleroma_theme_version === 1) { if (parsed._pleroma_theme_version === 1) {
this.normalizeLocalState(parsed, 1) this.normalizeLocalState(parsed, 1)
@ -435,6 +447,14 @@ export default {
}) })
} }
if (opacity && !this.keepOpacity) {
this.clearOpacity()
Object.entries(opacity).forEach(([k, v]) => {
if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
this[k + 'OpacityLocal'] = v
})
}
if (!this.keepRoundness) { if (!this.keepRoundness) {
this.clearRoundness() this.clearRoundness()
Object.entries(radii).forEach(([k, v]) => { Object.entries(radii).forEach(([k, v]) => {
@ -454,14 +474,6 @@ export default {
this.clearFonts() this.clearFonts()
this.fontsLocal = fonts this.fontsLocal = fonts
} }
if (opacity && !this.keepOpacity) {
this.clearOpacity()
Object.entries(opacity).forEach(([k, v]) => {
if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
this[k + 'OpacityLocal'] = v
})
}
} }
}, },
watch: { watch: {
@ -476,8 +488,9 @@ export default {
}, },
shadowsLocal: { shadowsLocal: {
handler () { handler () {
if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
try { try {
this.previewShadows = generateShadows({ shadows: this.shadowsLocal }) this.updatePreviewColorsAndShadows()
this.shadowsInvalid = false this.shadowsInvalid = false
} catch (e) { } catch (e) {
this.shadowsInvalid = true this.shadowsInvalid = true
@ -500,10 +513,7 @@ export default {
}, },
currentColors () { currentColors () {
try { try {
this.previewColors = generateColors({ this.updatePreviewColorsAndShadows()
opacity: this.currentOpacity,
colors: this.currentColors
})
this.colorsInvalid = false this.colorsInvalid = false
} catch (e) { } catch (e) {
this.colorsInvalid = true this.colorsInvalid = true
@ -512,10 +522,7 @@ export default {
}, },
currentOpacity () { currentOpacity () {
try { try {
this.previewColors = generateColors({ this.updatePreviewColorsAndShadows()
opacity: this.currentOpacity,
colors: this.currentColors
})
} catch (e) { } catch (e) {
console.warn(e) console.warn(e)
} }

View File

@ -691,7 +691,7 @@
{{ $t('settings.style.switcher.clear_all') }} {{ $t('settings.style.switcher.clear_all') }}
</button> </button>
</div> </div>
<shadow-control <ShadowControl
v-model="currentShadow" v-model="currentShadow"
:ready="!!currentShadowFallback" :ready="!!currentShadowFallback"
:fallback="currentShadowFallback" :fallback="currentShadowFallback"

View File

@ -1,7 +1,7 @@
import { times } from 'lodash' import { times } from 'lodash'
import { convert } from 'chromatism' import { convert } from 'chromatism'
import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js' import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js'
import { getColors } from '../theme_data/theme_data.service.js' import { getColors, computeDynamicColor } from '../theme_data/theme_data.service.js'
// While this is not used anymore right now, I left it in if we want to do custom // While this is not used anymore right now, I left it in if we want to do custom
// styles that aren't just colors, so user can pick from a few different distinct // styles that aren't just colors, so user can pick from a few different distinct
@ -139,7 +139,8 @@ export const generateColors = (themeData) => {
theme: { theme: {
colors: htmlColors.solid, colors: htmlColors.solid,
opacity opacity
} },
mod
} }
} }
@ -211,83 +212,99 @@ export const generateFonts = (input) => {
} }
} }
export const generateShadows = (input) => { const border = (top, shadow) => ({
const border = (top, shadow) => ({ x: 0,
x: 0, y: top ? 1 : -1,
y: top ? 1 : -1, blur: 0,
blur: 0, spread: 0,
color: shadow ? '#000000' : '#FFFFFF',
alpha: 0.2,
inset: true
})
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
const inputInsetFakeBorders = [border(true, true), border(false, false)]
const hoverGlow = {
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '--faint',
alpha: 1
}
export const DEFAULT_SHADOWS = {
panel: [{
x: 1,
y: 1,
blur: 4,
spread: 0, spread: 0,
color: shadow ? '#000000' : '#FFFFFF', color: '#000000',
alpha: 0.2, alpha: 0.6
inset: true }],
}) topBar: [{
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
const inputInsetFakeBorders = [border(true, true), border(false, false)]
const hoverGlow = {
x: 0, x: 0,
y: 0, y: 0,
blur: 4, blur: 4,
spread: 0, spread: 0,
color: '--faint', color: '#000000',
alpha: 0.6
}],
popup: [{
x: 2,
y: 2,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.5
}],
avatar: [{
x: 0,
y: 1,
blur: 8,
spread: 0,
color: '#000000',
alpha: 0.7
}],
avatarStatus: [],
panelHeader: [],
button: [{
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1 alpha: 1
} }, ...buttonInsetFakeBorders],
buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
const shadows = { buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
panel: [{ input: [...inputInsetFakeBorders, {
x: 1, x: 0,
y: 1, y: 0,
blur: 4, blur: 2,
spread: 0, inset: true,
color: '#000000', spread: 0,
alpha: 0.6 color: '#000000',
}], alpha: 1
topBar: [{ }]
x: 0, }
y: 0, export const generateShadows = (input, colors, mod) => {
blur: 4, const shadows = Object.entries({
spread: 0, ...DEFAULT_SHADOWS,
color: '#000000',
alpha: 0.6
}],
popup: [{
x: 2,
y: 2,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.5
}],
avatar: [{
x: 0,
y: 1,
blur: 8,
spread: 0,
color: '#000000',
alpha: 0.7
}],
avatarStatus: [],
panelHeader: [],
button: [{
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}, ...buttonInsetFakeBorders],
buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
input: [...inputInsetFakeBorders, {
x: 0,
y: 0,
blur: 2,
inset: true,
spread: 0,
color: '#000000',
alpha: 1
}],
...(input.shadows || {}) ...(input.shadows || {})
} }).reduce((shadowsAcc, [slotName, shadowdefs]) => {
const newShadow = shadowdefs.reduce((shadowAcc, def) => [
...shadowAcc,
{
...def,
color: rgb2hex(computeDynamicColor(
def.color,
(variableSlot) => convert(colors[variableSlot]).rgb,
mod
))
}
], [])
return { ...shadowsAcc, [slotName]: newShadow }
}, {})
return { return {
rules: { rules: {
@ -325,12 +342,15 @@ export const composePreset = (colors, radii, shadows, fonts) => {
} }
} }
export const generatePreset = (input) => composePreset( export const generatePreset = (input) => {
generateColors(input), const colors = generateColors(input)
generateRadii(input), return composePreset(
generateShadows(input), colors,
generateFonts(input) generateRadii(input),
) generateShadows(input, colors.theme.colors, colors.mod),
generateFonts(input)
)
}
export const getThemes = () => { export const getThemes = () => {
return window.fetch('/static/styles.json') return window.fetch('/static/styles.json')
@ -362,7 +382,7 @@ export const getThemes = () => {
export const setPreset = (val, commit) => { export const setPreset = (val, commit) => {
return getThemes() return getThemes()
.then((themes) => console.log(themes) || themes[val] ? themes[val] : themes['pleroma-dark']) .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
.then((theme) => { .then((theme) => {
const isV1 = Array.isArray(theme) const isV1 = Array.isArray(theme)
const data = isV1 ? {} : theme.theme const data = isV1 ? {} : theme.theme

View File

@ -697,6 +697,22 @@ export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) =
} }
}, {}) }, {})
/**
* Handle dynamic color
*/
export const computeDynamicColor = (sourceColor, getColor, mod) => {
if (typeof sourceColor !== 'string' || !sourceColor.startsWith('--')) return sourceColor
let targetColor = null
// Color references other color
const [variable, modifier] = sourceColor.split(/,/g).map(str => str.trim())
const variableSlot = variable.substring(2)
targetColor = getColor(variableSlot)
if (modifier) {
targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
}
return targetColor
}
/** /**
* THE function you want to use. Takes provided colors and opacities, mod * THE function you want to use. Takes provided colors and opacities, mod
* value and uses inheritance data to figure out color needed for the slot. * value and uses inheritance data to figure out color needed for the slot.
@ -728,13 +744,11 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
a: 0 a: 0
} }
} else if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) { } else if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) {
// Color references other color targetColor = computeDynamicColor(
const [variable, modifier] = sourceColor.split(/,/g).map(str => str.trim()) sourceColor,
const variableSlot = variable.substring(2) variableSlot => colors[variableSlot] || sourceColors[variableSlot],
targetColor = colors[variableSlot] || sourceColors[variableSlot] mod
if (modifier) { )
targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
}
} else if (typeof sourceColor === 'string' && sourceColor.startsWith('#')) { } else if (typeof sourceColor === 'string' && sourceColor.startsWith('#')) {
targetColor = convert(targetColor).rgb targetColor = convert(targetColor).rgb
} }