qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fixed shadow preview, added more safeguards for spread on separateInset shadows

Browse source
This commit is contained in:
Henry Jameson 2024-09-16 00:03:40 +03:00
parent aa7a336183
commit a0c303efb6
7 changed files with 56 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
changelog.d/better-shadow-control.fix Normal file
View file

@ -0,0 +1 @@
Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name.

12
src/components/color_input/color_input.vue
View file

@ -15,7 +15,7 @@
:model-value="present"
:disabled="disabled"
class="opt"
@update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
@update:modelValue="update(typeof modelValue === 'undefined' ? fallback : undefined)"
/>
<div
class="input color-input-field"
@ -28,7 +28,7 @@
type="text"
:value="modelValue || fallback"
:disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)"
@input="updateValue($event.target.value)"
>
<div
v-if="validColor"
@ -57,7 +57,7 @@
:value="modelValue || fallback"
:disabled="!present || disabled"
:class="{ disabled: !present || disabled }"
@input="$emit('update:modelValue', $event.target.value)"
@input="updateValue($event.target.value)"
>
</label>
</div>
@ -66,6 +66,7 @@
<script>
import Checkbox from '../checkbox/checkbox.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { throttle } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
@ -131,6 +132,11 @@ export default {
computedColor () {
return this.modelValue && this.modelValue.startsWith('--')
}
},
methods: {
updateValue: throttle(function (value) {
this.$emit('update:modelValue', value)
}, 100)
}
}
</script>

23
src/components/select/select.vue
View file

@ -27,11 +27,6 @@
label.Select {
padding: 0;
&.disabled,
&:disabled {
background-color: var(--background);
}
select {
appearance: none;
background: transparent;
@ -52,7 +47,7 @@ label.Select {
padding: 0.2em;
option {
background: transparent;
background-color: transparent;
&.-active {
color: var(--selectionText);
@ -62,6 +57,22 @@ label.Select {
}
}
&.disabled,
&:disabled {
background-color: var(--background);
opacity: 1; /* override browser */
select {
&[multiple],
&[size] {
option.-active {
color: var(--text);
background: transparent;
}
}
}
}
.select-down-icon {
position: absolute;
top: 0;

1
src/components/settings_modal/tabs/theme_tab/theme_tab.js
View file

@ -339,7 +339,6 @@ export default {
return this.shadowsLocal[this.shadowSelected]
},
set (v) {
console.log('TT', v)
this.shadowsLocal[this.shadowSelected] = v
}
},

31
src/components/shadow_control/shadow_control.js
View file

@ -4,8 +4,8 @@ import Select from 'src/components/select/select.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import Popover from 'src/components/popover/popover.vue'
import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { throttle } from 'lodash'
import {
faTimes,
faChevronDown,
@ -41,7 +41,7 @@ export default {
lightGrid: false,
selectedId: 0,
// TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
cValue: (this.modelValue || this.fallback || []).map(toModel)
cValue: (this.modelValue ?? this.fallback ?? []).map(toModel)
}
},
components: {
@ -52,7 +52,7 @@ export default {
Popover
},
beforeUpdate () {
this.cValue = (this.modelValue || this.fallback || []).map(toModel)
this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
},
computed: {
selected () {
@ -68,12 +68,6 @@ export default {
shadowsAreNull () {
return this.modelValue == null
},
anyShadows () {
return this.cValue.length > 0
},
anyShadowsFallback () {
return this.fallback.length > 0
},
currentFallback () {
return this.fallback?.[this.selectedId]
},
@ -86,27 +80,28 @@ export default {
usingFallback () {
return this.modelValue == null
},
rgb () {
return hex2rgb(this.selected.color)
},
style () {
if (!this.ready) return {}
console.log(this.separateInset)
if (this.separateInset) {
return {
filter: getCssShadowFilter(this.fallback),
boxShadow: getCssShadow(this.fallback, true)
filter: getCssShadowFilter(this.cValue),
boxShadow: getCssShadow(this.cValue, true)
}
}
return {
boxShadow: getCssShadow(this.fallback)
boxShadow: getCssShadow(this.cValue)
}
}
},
methods: {
updateProperty (prop, value) {
updateProperty: throttle(function (prop, value) {
console.log(prop, value)
this.cValue[this.selectedId][prop] = value
if (prop === 'inset' && value === false && this.separateInset) {
this.cValue[this.selectedId].spread = 0
}
this.$emit('update:modelValue', this.cValue)
},
}, 100),
add () {
this.cValue.push(toModel(this.selected))
this.selectedId = Math.max(this.cValue.length - 1, 0)

1
src/components/shadow_control/shadow_control.scss
View file

@ -22,7 +22,6 @@
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-gap: 0.125em;
margin-top: 0.25em;
.button-default {

34
src/components/shadow_control/shadow_control.vue
View file

@ -56,7 +56,7 @@
@input="e => updateProperty('x', e.target.value)"
>
<Checkbox
id="inset"
id="lightGrid"
v-model="lightGrid"
:disabled="!present"
name="lightGrid"
@ -83,7 +83,7 @@
</option>
</Select>
<div
class="id-control arrange-buttons"
class="id-control btn-group arrange-buttons"
>
<button
class="btn button-default"
@ -132,12 +132,11 @@
</div>
<div class="shadow-tweak">
<div
:disabled="!present"
:class="{ disabled: !present }"
class="name-control style-control"
>
<label
for="spread"
for="name"
class="label"
:class="{ faint: !present }"
>
@ -163,7 +162,7 @@
:disabled="!present"
name="inset"
class="input-inset input-boolean"
@input="e => updateProperty('inset', e.target.value)"
@input="e => updateProperty('inset', e.target.checked)"
>
<template #before>
{{ $t('settings.style.shadows.inset') }}
@ -176,7 +175,7 @@
class="blur-control style-control"
>
<label
for="spread"
for="blur"
class="label"
:class="{ faint: !present }"
>
@ -205,22 +204,21 @@
>
</div>
<div
:disabled="!present"
class="spread-control style-control"
:class="{ disabled: !present }"
:class="{ disabled: !present || (separateInset && !selected?.inset) }"
>
<label
for="spread"
class="label"
:class="{ faint: !present }"
:class="{ faint: !present || (separateInset && !selected?.inset) }"
>
{{ $t('settings.style.shadows.spread') }}
</label>
<input
id="spread"
:value="selected?.spread"
:disabled="!present"
:class="{ disabled: !present }"
:disabled="!present || (separateInset && !selected?.inset)"
:class="{ disabled: !present || (separateInset && !selected?.inset) }"
name="spread"
class="input input-range"
type="range"
@ -230,26 +228,26 @@
>
<input
:value="selected?.spread"
:disabled="!present"
:class="{ disabled: !present }"
:disabled="{ disabled: !present || (separateInset && !selected?.inset) }"
:class="{ disabled: !present || (separateInset && !selected?.inset) }"
class="input input-number"
type="number"
@input="e => updateProperty('spread', e.target.value)"
>
</div>
<ColorInput
:modelValue="selected?.color"
:model-value="selected?.color"
:disabled="!present"
:label="$t('settings.style.common.color')"
:fallback="currentFallback?.color"
:show-optional-tickbox="false"
name="shadow"
@update:modelValue="e => updateProperty('color', e.target.value)"
@update:modelValue="e => updateProperty('color', e)"
/>
<OpacityInput
:modelValue="selected?.alpha"
:model-value="selected?.alpha"
:disabled="!present"
@update:modelValue="e => updateProperty('alpha', e.target.value)"
@update:modelValue="e => updateProperty('alpha', e)"
/>
<i18n-t
scope="global"
@ -260,8 +258,8 @@
<code>--variable,mod</code>
</i18n-t>
<Popover
trigger="hover"
v-if="separateInset"
trigger="hover"
>
<template #trigger>
<div