removed console logs
This commit is contained in:
parent
7d7ccf7298
commit
e4033c85e2
6 changed files with 166 additions and 108 deletions
|
@ -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
|
||||||
},
|
},
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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,8 +212,7 @@ 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,
|
||||||
|
@ -220,19 +220,19 @@ export const generateShadows = (input) => {
|
||||||
color: shadow ? '#000000' : '#FFFFFF',
|
color: shadow ? '#000000' : '#FFFFFF',
|
||||||
alpha: 0.2,
|
alpha: 0.2,
|
||||||
inset: true
|
inset: true
|
||||||
})
|
})
|
||||||
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
|
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
|
||||||
const inputInsetFakeBorders = [border(true, true), border(false, false)]
|
const inputInsetFakeBorders = [border(true, true), border(false, false)]
|
||||||
const hoverGlow = {
|
const hoverGlow = {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
blur: 4,
|
blur: 4,
|
||||||
spread: 0,
|
spread: 0,
|
||||||
color: '--faint',
|
color: '--faint',
|
||||||
alpha: 1
|
alpha: 1
|
||||||
}
|
}
|
||||||
|
|
||||||
const shadows = {
|
export const DEFAULT_SHADOWS = {
|
||||||
panel: [{
|
panel: [{
|
||||||
x: 1,
|
x: 1,
|
||||||
y: 1,
|
y: 1,
|
||||||
|
@ -285,9 +285,26 @@ export const generateShadows = (input) => {
|
||||||
spread: 0,
|
spread: 0,
|
||||||
color: '#000000',
|
color: '#000000',
|
||||||
alpha: 1
|
alpha: 1
|
||||||
}],
|
}]
|
||||||
|
}
|
||||||
|
export const generateShadows = (input, colors, mod) => {
|
||||||
|
const shadows = Object.entries({
|
||||||
|
...DEFAULT_SHADOWS,
|
||||||
...(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)
|
||||||
|
return composePreset(
|
||||||
|
colors,
|
||||||
generateRadii(input),
|
generateRadii(input),
|
||||||
generateShadows(input),
|
generateShadows(input, colors.theme.colors, colors.mod),
|
||||||
generateFonts(input)
|
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
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue