Merge branch 'shadow-control-2.0' into themes3-grand-finale-maybe

This commit is contained in:
Henry Jameson 2024-09-24 18:09:44 +03:00
commit 22d3c13135
17 changed files with 642 additions and 353 deletions

View file

@ -314,7 +314,18 @@ export default {
},
set (val) {
if (val) {
this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
this.shadowsLocal[this.shadowSelected] = (this.currentShadowFallback || [])
.map(s => ({
name: null,
x: 0,
y: 0,
blur: 0,
spread: 0,
inset: false,
color: '#000000',
alpha: 1,
...s
}))
} else {
delete this.shadowsLocal[this.shadowSelected]
}

View file

@ -25,7 +25,9 @@
margin-bottom: 5px;
.label {
margin-right: 1em;
flex: 1;
line-height: 2;
}
.opt {
@ -48,15 +50,14 @@
&[type="range"] {
flex: 1;
min-width: 3em;
align-self: flex-start;
min-width: 2em;
align-self: center;
margin: 0 0.5em;
}
}
&.disabled {
input,
select {
opacity: 0.5;
&[type="checkbox"] + i {
height: 1.1em;
align-self: center;
}
}
}

View file

@ -123,10 +123,13 @@
</div>
</div>
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<component :is="'style'" v-html="themeV3Preview"/>
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
<preview id="theme-preview"/>
<!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
<component
:is="'style'"
v-html="themeV3Preview"
/>
<!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
<preview id="theme-preview" />
<div>
<button
@ -934,24 +937,14 @@
</Select>
</div>
<div class="override">
<label
for="override"
class="label"
>
{{ $t('settings.style.shadows.override') }}
</label>
{{ ' ' }}
<input
<Checkbox
id="override"
v-model="currentShadowOverriden"
name="override"
class="input-override"
type="checkbox"
>
<label
class="checkbox-label"
for="override"
/>
{{ $t('settings.style.shadows.override') }}
</Checkbox>
</div>
<button
class="btn button-default"
@ -962,38 +955,10 @@
</div>
<ShadowControl
v-model="currentShadow"
:ready="!!currentShadowFallback"
:separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
:fallback="currentShadowFallback"
/>
<div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
<i18n-t
scope="global"
keypath="settings.style.shadows.filter_hint.always_drop_shadow"
tag="p"
>
<code>filter: drop-shadow()</code>
</i18n-t>
<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
<i18n-t
scope="global"
keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
tag="p"
>
<code>drop-shadow</code>
<code>spread-radius</code>
<code>inset</code>
</i18n-t>
<i18n-t
scope="global"
keypath="settings.style.shadows.filter_hint.inset_classic"
tag="p"
>
<code>box-shadow</code>
</i18n-t>
<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
</div>
</div>
<div
:label="$t('settings.style.fonts._tab_label')"
class="fonts-container"