aboutsummaryrefslogtreecommitdiff
path: root/src/components/shadow_control/shadow_control.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/shadow_control/shadow_control.vue')
-rw-r--r--src/components/shadow_control/shadow_control.vue356
1 files changed, 143 insertions, 213 deletions
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index c3b956cd..e1d20191 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -1,91 +1,51 @@
<template>
<div
- class="shadow-control"
- :class="{ disabled: !present }"
+ class="label shadow-control"
+ :class="{ disabled: disabled || !present, '-no-preview': noPreview }"
>
- <div class="shadow-preview-container">
- <div
- :disabled="!present"
- class="y-shift-control"
- >
- <input
- v-model="selected.y"
- :disabled="!present"
- class="input input-number"
- type="number"
- >
- <div class="wrap">
- <input
- v-model="selected.y"
- :disabled="!present"
- class="input input-range"
- type="range"
- max="20"
- min="-20"
- >
- </div>
- </div>
- <div class="preview-window">
- <div
- class="preview-block"
- :style="style"
- />
- </div>
- <div
- :disabled="!present"
- class="x-shift-control"
+ <ComponentPreview
+ v-if="!noPreview"
+ class="shadow-preview"
+ :shadow-control="true"
+ :shadow="selected"
+ :preview-style="style"
+ :disabled="disabled || !present"
+ @update:shadow="({ axis, value }) => updateProperty(axis, value)"
+ />
+ <div class="shadow-switcher">
+ <Select
+ id="shadow-list"
+ v-model="selectedId"
+ class="shadow-list"
+ size="10"
+ :disabled="shadowsAreNull"
>
- <input
- v-model="selected.x"
- :disabled="!present"
- class="input input-number"
- type="number"
+ <option
+ v-for="(shadow, index) in cValue"
+ :key="index"
+ :value="index"
+ :class="{ '-active': index === Number(selectedId) }"
>
- <div class="wrap">
- <input
- v-model="selected.x"
- :disabled="!present"
- class="input input-range"
- type="range"
- max="20"
- min="-20"
- >
- </div>
- </div>
- </div>
-
- <div class="shadow-tweak">
+ {{ shadow?.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
+ </option>
+ </Select>
<div
- :disabled="usingFallback"
- class="id-control style-control"
+ class="id-control btn-group arrange-buttons"
>
- <Select
- id="shadow-switcher"
- v-model="selectedId"
- class="shadow-switcher"
- :disabled="!ready || usingFallback"
- >
- <option
- v-for="(shadow, index) in cValue"
- :key="index"
- :value="index"
- >
- {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
- </option>
- </Select>
<button
class="btn button-default"
- :disabled="!ready || !present"
- @click="del"
+ :disabled="disabled || shadowsAreNull"
+ @click="add"
>
<FAIcon
fixed-width
- icon="times"
+ icon="plus"
/>
</button>
<button
class="btn button-default"
- :disabled="!moveUpValid"
+ :disabled="disabled || !moveUpValid"
+ :class="{ disabled: disabled || !moveUpValid }"
@click="moveUp"
>
<FAIcon
@@ -95,7 +55,8 @@
</button>
<button
class="btn button-default"
- :disabled="!moveDnValid"
+ :disabled="disabled || !moveDnValid"
+ :class="{ disabled: disabled || !moveDnValid }"
@click="moveDn"
>
<FAIcon
@@ -105,222 +66,191 @@
</button>
<button
class="btn button-default"
- :disabled="usingFallback"
- @click="add"
+ :disabled="disabled || !present"
+ :class="{ disabled: disabled || !present }"
+ @click="del"
>
<FAIcon
fixed-width
- icon="plus"
+ icon="times"
/>
</button>
</div>
+ </div>
+ <div class="shadow-tweak">
<div
- :disabled="!present"
- class="inset-control style-control"
+ :class="{ disabled: disabled || !present }"
+ class="name-control style-control"
>
<label
- for="inset"
+ for="name"
class="label"
+ :class="{ faint: disabled || !present }"
>
- {{ $t('settings.style.shadows.inset') }}
+ {{ $t('settings.style.shadows.name') }}
</label>
<input
+ id="name"
+ :value="selected?.name"
+ :disabled="disabled || !present"
+ :class="{ disabled: disabled || !present }"
+ name="name"
+ class="input input-string"
+ @input="e => updateProperty('name', e.target.value)"
+ >
+ </div>
+ <div
+ :disabled="disabled || !present"
+ class="inset-control style-control"
+ >
+ <Checkbox
id="inset"
- v-model="selected.inset"
- :disabled="!present"
+ :value="selected?.inset"
+ :disabled="disabled || !present"
name="inset"
- class="input -checkbox input-inset visible-for-screenreader-only"
- type="checkbox"
+ class="input-inset input-boolean"
+ @input="e => updateProperty('inset', e.target.checked)"
>
- <label
- class="checkbox-label"
- for="inset"
- :aria-hidden="true"
- />
+ <template #before>
+ {{ $t('settings.style.shadows.inset') }}
+ </template>
+ </Checkbox>
</div>
<div
- :disabled="!present"
+ :disabled="disabled || !present"
+ :class="{ disabled: disabled || !present }"
class="blur-control style-control"
>
<label
- for="spread"
+ for="blur"
class="label"
+ :class="{ faint: disabled || !present }"
>
{{ $t('settings.style.shadows.blur') }}
</label>
<input
id="blur"
- v-model="selected.blur"
- :disabled="!present"
+ :value="selected?.blur"
+ :disabled="disabled || !present"
+ :class="{ disabled: disabled || !present }"
name="blur"
class="input input-range"
type="range"
max="20"
min="0"
+ @input="e => updateProperty('blur', e.target.value)"
>
<input
- v-model="selected.blur"
- :disabled="!present"
- class="input input-number"
+ :value="selected?.blur"
+ class="input input-number -small"
+ :disabled="disabled || !present"
+ :class="{ disabled: disabled || !present }"
type="number"
min="0"
+ @input="e => updateProperty('blur', e.target.value)"
>
</div>
<div
- :disabled="!present"
class="spread-control style-control"
+ :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
>
<label
for="spread"
class="label"
+ :class="{ faint: disabled || !present || (separateInset && !selected?.inset) }"
>
{{ $t('settings.style.shadows.spread') }}
</label>
<input
id="spread"
- v-model="selected.spread"
- :disabled="!present"
+ :value="selected?.spread"
+ :disabled="disabled || !present || (separateInset && !selected?.inset)"
+ :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
name="spread"
class="input input-range"
type="range"
max="20"
min="-20"
+ @input="e => updateProperty('spread', e.target.value)"
>
<input
- v-model="selected.spread"
- :disabled="!present"
- class="input input-number"
+ :value="selected?.spread"
+ class="input input-number -small"
+ :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
+ :disabled="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
type="number"
+ @input="e => updateProperty('spread', e.target.value)"
>
</div>
<ColorInput
- v-model="selected.color"
- :disabled="!present"
+ :model-value="selected?.color"
+ :disabled="disabled || !present"
:label="$t('settings.style.common.color')"
- :fallback="currentFallback.color"
+ :fallback="currentFallback?.color"
:show-optional-tickbox="false"
name="shadow"
+ @update:modelValue="e => updateProperty('color', e)"
/>
<OpacityInput
- v-model="selected.alpha"
- :disabled="!present"
+ :model-value="selected?.alpha"
+ :disabled="disabled || !present"
+ @update:modelValue="e => updateProperty('alpha', e)"
/>
<i18n-t
scope="global"
keypath="settings.style.shadows.hintV3"
+ :class="{ faint: disabled || !present }"
tag="p"
>
<code>--variable,mod</code>
</i18n-t>
+ <Popover
+ v-if="separateInset"
+ trigger="hover"
+ >
+ <template #trigger>
+ <div
+ class="inset-alert alert warning"
+ >
+ <FAIcon icon="exclamation-triangle" />
+ &nbsp;
+ {{ $t('settings.style.shadows.filter_hint.avatar_inset_short') }}
+ </div>
+ </template>
+ <template #content>
+ <div class="inset-tooltip">
+ <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>
+ </template>
+ </Popover>
</div>
</div>
</template>
<script src="./shadow_control.js"></script>
-<style lang="scss">
-.shadow-control {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- margin-bottom: 1em;
-
- .shadow-preview-container,
- .shadow-tweak {
- margin: 5px 6px 0 0;
- }
-
- .shadow-preview-container {
- flex: 0;
- display: flex;
- flex-wrap: wrap;
-
- input[type="number"] {
- width: 5em;
- min-width: 2em;
- }
-
- .x-shift-control,
- .y-shift-control {
- display: flex;
- flex: 0;
-
- &[disabled="disabled"] * {
- opacity: 0.5;
- }
- }
-
- .x-shift-control {
- align-items: flex-start;
- }
-
- .x-shift-control .wrap,
- input[type="range"] {
- margin: 0;
- width: 15em;
- height: 2em;
- }
-
- .y-shift-control {
- flex-direction: column;
- align-items: flex-end;
-
- .wrap {
- width: 2em;
- height: 15em;
- }
-
- input[type="range"] {
- transform-origin: 1em 1em;
- transform: rotate(90deg);
- }
- }
-
- .preview-window {
- flex: 1;
- background-color: #999;
- display: flex;
- align-items: center;
- justify-content: center;
- background-image:
- linear-gradient(45deg, #666 25%, transparent 25%),
- linear-gradient(-45deg, #666 25%, transparent 25%),
- linear-gradient(45deg, transparent 75%, #666 75%),
- linear-gradient(-45deg, transparent 75%, #666 75%);
- background-size: 20px 20px;
- background-position: 0 0, 0 10px, 10px -10px, -10px 0;
- border-radius: var(--roundness);
-
- .preview-block {
- width: 33%;
- height: 33%;
- border-radius: var(--roundness);
- }
- }
- }
-
- .shadow-tweak {
- flex: 1;
- min-width: 280px;
-
- .id-control {
- align-items: stretch;
-
- .shadow-switcher {
- flex: 1;
- }
-
- .shadow-switcher,
- .btn {
- min-width: 1px;
- margin-right: 5px;
- }
-
- .btn {
- padding: 0 0.4em;
- margin: 0 0.1em;
- }
- }
- }
-}
-</style>
+<style src="./shadow_control.scss" lang="scss"></style>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 04:05:48 +0000