Merge branch 'shadow-control-2.0' into themes3-grand-finale-maybe
This commit is contained in:
commit
22d3c13135
17 changed files with 642 additions and 353 deletions
|
|
@ -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]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue