From d52d1812273ff21bc0436dd261e8934c6010d52f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 12 Jan 2020 15:04:05 +0200 Subject: more fixes --- src/components/shadow_control/shadow_control.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src/components/shadow_control/shadow_control.js') diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index 44e4a22f..7e82b9c0 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -1,7 +1,6 @@ import ColorInput from '../color_input/color_input.vue' import OpacityInput from '../opacity_input/opacity_input.vue' -import { getCssShadow } from '../../services/style_setter/style_setter.js' -import { hex2rgb } from '../../services/color_convert/color_convert.js' +import { hex2rgb, getCssShadow } from '../../services/color_convert/color_convert.js' export default { // 'Value' and 'Fallback' can be undefined, but if they are -- cgit v1.2.3-70-g09d2 From 29a0b4a593219a54c01faa982be4752bcddfc7d0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Jan 2020 02:08:39 +0200 Subject: fix shadow and opacity --- src/components/shadow_control/shadow_control.js | 3 ++- src/components/style_switcher/style_switcher.js | 2 +- src/services/style_setter/style_setter.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) (limited to 'src/components/shadow_control/shadow_control.js') diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index 7e82b9c0..44e4a22f 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -1,6 +1,7 @@ import ColorInput from '../color_input/color_input.vue' import OpacityInput from '../opacity_input/opacity_input.vue' -import { hex2rgb, getCssShadow } from '../../services/color_convert/color_convert.js' +import { getCssShadow } from '../../services/style_setter/style_setter.js' +import { hex2rgb } from '../../services/color_convert/color_convert.js' export default { // 'Value' and 'Fallback' can be undefined, but if they are diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 34826f9f..98c2cbc5 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -117,7 +117,7 @@ export default { currentOpacity () { return Object.keys(DEFAULT_OPACITY) .map(key => [key, this[key + 'OpacityLocal']]) - .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}) + .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {}) }, currentRadii () { return { diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 61612cf4..c1a25101 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -76,7 +76,7 @@ export const applyTheme = (input, commit) => { commit('setOption', { name: 'colors', value: theme.colors }) } -const getCssShadow = (input, usesDropShadow) => { +export const getCssShadow = (input, usesDropShadow) => { if (input.length === 0) { return 'none' } -- cgit v1.2.3-70-g09d2 From e4033c85e2066d8a575a1cd8e5a59bb685a3adf0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 20 Jan 2020 00:34:49 +0200 Subject: removed console logs --- src/components/shadow_control/shadow_control.js | 15 ++ src/components/shadow_control/shadow_control.vue | 2 + src/components/style_switcher/style_switcher.js | 49 ++++--- src/components/style_switcher/style_switcher.vue | 2 +- src/services/style_setter/style_setter.js | 178 +++++++++++++---------- src/services/theme_data/theme_data.service.js | 28 +++- 6 files changed, 166 insertions(+), 108 deletions(-) (limited to 'src/components/shadow_control/shadow_control.js') diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index 44e4a22f..653d5a9b 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -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 () { return this.ready && this.selectedId > 0 }, diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index de8a42d1..efbb980e 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -191,6 +191,8 @@ v-model="selected.color" :disabled="!present" :label="$t('settings.style.common.color')" + :fallback="currentFallback.color" + :showOptionalTickbox="false" name="shadow" /> ({ ...acc, [ key + 'ColorLocal' ]: val }), {}), ...Object.keys(OPACITIES) - .map(key => console.log(key) || [key, '']) + .map(key => [key, '']) .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}), shadowSelected: undefined, @@ -134,7 +135,7 @@ export default { }, currentOpacity () { 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 }), {}) }, currentRadii () { @@ -224,7 +225,7 @@ export default { ].join(';') }, shadowsAvailable () { - return Object.keys(this.previewTheme.shadows).sort() + return Object.keys(DEFAULT_SHADOWS).sort() }, currentShadowOverriden: { get () { @@ -239,7 +240,7 @@ export default { } }, currentShadowFallback () { - return this.previewTheme.shadows[this.shadowSelected] + return (this.previewTheme.shadows || {})[this.shadowSelected] }, currentShadow: { 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) { if (parsed._pleroma_theme_version === 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) { this.clearRoundness() Object.entries(radii).forEach(([k, v]) => { @@ -454,14 +474,6 @@ export default { this.clearFonts() 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: { @@ -476,8 +488,9 @@ export default { }, shadowsLocal: { handler () { + if (Object.getOwnPropertyNames(this.previewColors).length === 1) return try { - this.previewShadows = generateShadows({ shadows: this.shadowsLocal }) + this.updatePreviewColorsAndShadows() this.shadowsInvalid = false } catch (e) { this.shadowsInvalid = true @@ -500,10 +513,7 @@ export default { }, currentColors () { try { - this.previewColors = generateColors({ - opacity: this.currentOpacity, - colors: this.currentColors - }) + this.updatePreviewColorsAndShadows() this.colorsInvalid = false } catch (e) { this.colorsInvalid = true @@ -512,10 +522,7 @@ export default { }, currentOpacity () { try { - this.previewColors = generateColors({ - opacity: this.currentOpacity, - colors: this.currentColors - }) + this.updatePreviewColorsAndShadows() } catch (e) { console.warn(e) } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index c8c02b8d..287d31b7 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -691,7 +691,7 @@ {{ $t('settings.style.switcher.clear_all') }} - { theme: { colors: htmlColors.solid, opacity - } + }, + mod } } @@ -211,83 +212,99 @@ export const generateFonts = (input) => { } } -export const generateShadows = (input) => { - const border = (top, shadow) => ({ - x: 0, - y: top ? 1 : -1, - blur: 0, +const border = (top, shadow) => ({ + x: 0, + y: top ? 1 : -1, + 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, - 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 = { + color: '#000000', + alpha: 0.6 + }], + topBar: [{ x: 0, y: 0, blur: 4, 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 - } - - const shadows = { - panel: [{ - x: 1, - y: 1, - blur: 4, - spread: 0, - color: '#000000', - alpha: 0.6 - }], - topBar: [{ - x: 0, - y: 0, - blur: 4, - spread: 0, - 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 - }], + }, ...buttonInsetFakeBorders], + buttonHover: [hoverGlow, ...buttonInsetFakeBorders], + buttonPressed: [hoverGlow, ...inputInsetFakeBorders], + input: [...inputInsetFakeBorders, { + x: 0, + y: 0, + blur: 2, + inset: true, + spread: 0, + color: '#000000', + alpha: 1 + }] +} +export const generateShadows = (input, colors, mod) => { + const shadows = Object.entries({ + ...DEFAULT_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 { rules: { @@ -325,12 +342,15 @@ export const composePreset = (colors, radii, shadows, fonts) => { } } -export const generatePreset = (input) => composePreset( - generateColors(input), - generateRadii(input), - generateShadows(input), - generateFonts(input) -) +export const generatePreset = (input) => { + const colors = generateColors(input) + return composePreset( + colors, + generateRadii(input), + generateShadows(input, colors.theme.colors, colors.mod), + generateFonts(input) + ) +} export const getThemes = () => { return window.fetch('/static/styles.json') @@ -362,7 +382,7 @@ export const getThemes = () => { export const setPreset = (val, commit) => { 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) => { const isV1 = Array.isArray(theme) const data = isV1 ? {} : theme.theme diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 9f010fdf..e4456b29 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -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 * 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 } } else if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) { - // Color references other color - const [variable, modifier] = sourceColor.split(/,/g).map(str => str.trim()) - const variableSlot = variable.substring(2) - targetColor = colors[variableSlot] || sourceColors[variableSlot] - if (modifier) { - targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb - } + targetColor = computeDynamicColor( + sourceColor, + variableSlot => colors[variableSlot] || sourceColors[variableSlot], + mod + ) } else if (typeof sourceColor === 'string' && sourceColor.startsWith('#')) { targetColor = convert(targetColor).rgb } -- cgit v1.2.3-70-g09d2 From 93dfb4d3524df14f730a3f0ad46ebb86ceb89984 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 20 Jan 2020 02:00:13 +0200 Subject: fix shadow picker preview, change hint --- src/components/shadow_control/shadow_control.js | 2 +- src/components/shadow_control/shadow_control.vue | 9 ++++++--- src/i18n/en.json | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) (limited to 'src/components/shadow_control/shadow_control.js') diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index 653d5a9b..bdfb4429 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -95,7 +95,7 @@ export default { }, style () { return this.ready ? { - boxShadow: getCssShadow(this.cValue) + boxShadow: getCssShadow(this.fallback) } : {} } } diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index c1db5b8f..815a9e59 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -199,9 +199,12 @@ v-model="selected.alpha" :disabled="!present" /> -

- {{ $t('settings.style.shadows.hint') }} -

+ + --variable,mod + diff --git a/src/i18n/en.json b/src/i18n/en.json index f7a26262..f624a1c5 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -452,7 +452,7 @@ "blur": "Blur", "spread": "Spread", "inset": "Inset", - "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.", + "hintV3": "For shadows you can also use the {0} notation to use other color slot.", "filter_hint": { "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.", "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.", -- cgit v1.2.3-70-g09d2 From 5c6046ea0aaa13c492ff1f5b7b05ab497b614570 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 17 Feb 2020 23:43:35 +0200 Subject: attempt to fix some bugs with shadows control --- src/components/shadow_control/shadow_control.js | 47 +++++++++++++------------ 1 file changed, 24 insertions(+), 23 deletions(-) (limited to 'src/components/shadow_control/shadow_control.js') diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index bdfb4429..f9e7b985 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -3,6 +3,17 @@ import OpacityInput from '../opacity_input/opacity_input.vue' import { getCssShadow } from '../../services/style_setter/style_setter.js' import { hex2rgb } from '../../services/color_convert/color_convert.js' +const toModel = (object = {}) => ({ + x: 0, + y: 0, + blur: 0, + spread: 0, + inset: false, + color: '#000000', + alpha: 1, + ...object +}) + export default { // 'Value' and 'Fallback' can be undefined, but if they are // initially vue won't detect it when they become something else @@ -15,7 +26,7 @@ export default { return { selectedId: 0, // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason) - cValue: this.value || this.fallback || [] + cValue: (this.value || this.fallback || []).map(toModel) } }, components: { @@ -24,12 +35,12 @@ export default { }, methods: { add () { - this.cValue.push(Object.assign({}, this.selected)) + this.cValue.push(toModel(this.selected)) this.selectedId = this.cValue.length - 1 }, del () { this.cValue.splice(this.selectedId, 1) - this.selectedId = this.cValue.length === 0 ? undefined : this.selectedId - 1 + this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0) }, moveUp () { const movable = this.cValue.splice(this.selectedId, 1)[0] @@ -46,34 +57,24 @@ export default { this.cValue = this.value || this.fallback }, computed: { + anyShadows () { + return this.cValue.length > 0 + }, + anyShadowsFallback () { + return this.fallback.length > 0 + }, selected () { - if (this.ready && this.cValue.length > 0) { + if (this.ready && this.anyShadows) { return this.cValue[this.selectedId] } else { - return { - x: 0, - y: 0, - blur: 0, - spread: 0, - inset: false, - color: '#000000', - alpha: 1 - } + return toModel({}) } }, currentFallback () { - if (this.ready && this.fallback.length > 0) { + if (this.ready && this.anyShadowsFallback) { return this.fallback[this.selectedId] } else { - return { - x: 0, - y: 0, - blur: 0, - spread: 0, - inset: false, - color: '#000000', - alpha: 1 - } + return toModel({}) } }, moveUpValid () { -- cgit v1.2.3-70-g09d2