Page MenuHomePhorge
Files F85826622

No OneTemporary
Actions

Authored By
Unknown
Size
35 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/select/select_motion.vue b/src/components/select/select_motion.vue
new file mode 100644
index 0000000000..1b9f4041a8
--- /dev/null
+++ b/src/components/select/select_motion.vue
@@ -0,0 +1,115 @@
+<template>
+ <div
+ class="SelectMotion btn-group"
+ >
+ <button
+ class="btn button-default"
+ :disabled="disabled || shadowsAreNull"
+ @click="add"
+ >
+ <FAIcon
+ fixed-width
+ icon="plus"
+ />
+ </button>
+ <button
+ class="btn button-default"
+ :disabled="disabled || !moveUpValid"
+ :class="{ disabled: disabled || !moveUpValid }"
+ @click="moveUp"
+ >
+ <FAIcon
+ fixed-width
+ icon="chevron-up"
+ />
+ </button>
+ <button
+ class="btn button-default"
+ :disabled="disabled || !moveDnValid"
+ :class="{ disabled: disabled || !moveDnValid }"
+ @click="moveDn"
+ >
+ <FAIcon
+ fixed-width
+ icon="chevron-down"
+ />
+ </button>
+ <button
+ class="btn button-default"
+ :disabled="disabled || !present"
+ :class="{ disabled: disabled || !present }"
+ @click="del"
+ >
+ <FAIcon
+ fixed-width
+ icon="times"
+ />
+ </button>
+ </div>
+</template>
+
+<script setup>
+import { computed, defineEmits, defineProps } from 'vue'
+
+const props = defineProps(['modelValue', 'selectedId', 'disabled', 'getAddValue'])
+const emit = defineEmits(['update:modelValue', 'update:selectedId'])
+
+const moveUpValid = computed(() => {
+ return props.selectedId > 0
+})
+
+const present = computed(() => props.modelValue[props.selectedId] != null)
+
+const moveUp = () => {
+ const newModel = [...props.modelValue]
+ const movable = newModel.splice(props.selectedId, 1)[0]
+ newModel.splice(props.selectedId - 1, 0, movable)
+
+ emit('update:modelValue', newModel)
+ emit('update:selectedId', props.selectedId - 1)
+}
+
+const moveDnValid = computed(() => {
+ return props.selectedId < props.modelValue.length - 1
+})
+const moveDn = () => {
+ const newModel = [...props.modelValue]
+ const movable = newModel.splice(props.selectedId.value, 1)[0]
+ newModel.splice(props.selectedId + 1, 0, movable)
+
+ emit('update:modelValue', newModel)
+ emit('update:selectedId', props.selectedId + 1)
+}
+
+const add = () => {
+ const newModel = [...props.modelValue]
+ newModel.push(props.getAddValue())
+ console.log(newModel)
+
+ emit('update:modelValue', newModel)
+ emit('update:selectedId', Math.max(newModel.length - 1, 0))
+}
+
+const del = () => {
+ const newModel = [...props.modelValue]
+ newModel.splice(props.selectedId, 1)
+
+ emit('update:modelValue', newModel)
+ emit('update:selectedId', newModel.length === 0 ? undefined : Math.max(props.selectedId - 1, 0))
+}
+</script>
+
+<style lang="scss">
+.SelectMotion {
+ flex: 0 0 auto;
+ display: grid;
+ grid-auto-columns: 1fr;
+ grid-auto-flow: column;
+ margin-top: 0.25em;
+
+ .button-default {
+ margin: 0;
+ padding: 0;
+ }
+}
+</style>
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 590624ffd7..7026f7afb3 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -1,282 +1,292 @@
<script src="./style_tab.js">
</script>
<template>
<div class="StyleTab">
<div class="setting-item heading">
<h2>{{ $t('settings.style.themes3.editor.title') }}</h2>
<button
class="btn button-default"
@click="clearTheme"
>
<FAIcon icon="file" />
{{ $t('settings.style.themes3.editor.new_style') }}
</button>
<button
class="btn button-default"
@click="importStyle"
>
<FAIcon icon="folder-open" />
{{ $t('settings.style.themes3.editor.load_style') }}
</button>
<button
class="btn button-default"
@click="exportStyle"
>
<FAIcon icon="floppy-disk" />
{{ $t('settings.style.themes3.editor.save_style') }}
</button>
</div>
<div class="setting-item metadata">
<ul class="setting-list">
<li>
<StringSetting v-model="name">
{{ $t('settings.style.themes3.editor.style_name') }}
</StringSetting>
</li>
<li>
<StringSetting v-model="author">
{{ $t('settings.style.themes3.editor.style_author') }}
</StringSetting>
</li>
<li>
<StringSetting v-model="license">
{{ $t('settings.style.themes3.editor.style_license') }}
</StringSetting>
</li>
<li>
<StringSetting v-model="website">
{{ $t('settings.style.themes3.editor.style_website') }}
</StringSetting>
</li>
</ul>
</div>
- <div class="setting-item component-editor">
- <div class="component-selector">
- <label for="component-selector">
- {{ $t('settings.style.themes3.editor.component_selector') }}
- {{ ' ' }}
- </label>
- <Select
- id="component-selector"
- v-model="selectedComponentKey"
- >
- <option
- v-for="key in componentKeys"
- :key="'component-' + key"
- :value="key"
- >
- {{ fallbackI18n($t(getFriendlyNamePath(componentsMap.get(key).name)), componentsMap.get(key).name) }}
- </option>
- </Select>
- </div>
+ <tab-switcher>
<div
- v-if="selectedComponentVariantsAll.length > 1"
- class="variant-selector"
+ class="setting-item component-editor"
+ key="component"
+ :label="$t('settings.style.themes3.editor.component_tab')"
>
- <label for="variant-selector">
- {{ $t('settings.style.themes3.editor.variant_selector') }}
- </label>
- <Select
- v-model="selectedVariant"
- >
- <option
- v-for="variant in selectedComponentVariantsAll"
- :key="'component-variant-' + variant"
- :value="variant"
+ <div class="component-selector">
+ <label for="component-selector">
+ {{ $t('settings.style.themes3.editor.component_selector') }}
+ {{ ' ' }}
+ </label>
+ <Select
+ id="component-selector"
+ v-model="selectedComponentKey"
>
- {{ fallbackI18n($t(getVariantPath(selectedComponentName, variant)), variant) }}
- </option>
- </Select>
- </div>
- <div
- v-if="selectedComponentStates.length > 0"
- class="state-selector"
- >
- <label>
- {{ $t('settings.style.themes3.editor.states_selector') }}
- </label>
- <ul
- class="state-selector-list"
+ <option
+ v-for="key in componentKeys"
+ :key="'component-' + key"
+ :value="key"
+ >
+ {{ fallbackI18n($t(getFriendlyNamePath(componentsMap.get(key).name)), componentsMap.get(key).name) }}
+ </option>
+ </Select>
+ </div>
+ <div
+ v-if="selectedComponentVariantsAll.length > 1"
+ class="variant-selector"
>
- <li
- v-for="state in selectedComponentStates"
- :key="'component-state-' + state"
+ <label for="variant-selector">
+ {{ $t('settings.style.themes3.editor.variant_selector') }}
+ </label>
+ <Select
+ v-model="selectedVariant"
>
- <Checkbox
- :value="selectedState.has(state)"
- @update:modelValue="(v) => updateSelectedStates(state, v)"
+ <option
+ v-for="variant in selectedComponentVariantsAll"
+ :key="'component-variant-' + variant"
+ :value="variant"
>
- {{ fallbackI18n($t(getStatePath(selectedComponentName, state)), state) }}
- </Checkbox>
- </li>
- </ul>
- </div>
- <div class="preview-container">
- <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
- <component
- :is="'style'"
- v-html="previewCss"
- />
- <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
- <ComponentPreview
- class="component-preview"
- :show-text="componentHas('Text')"
- :shadow-control="isShadowTabOpen"
- :preview-class="previewClass"
- :preview-style="editorHintStyle"
- :disabled="!editedSubShadow && typeof editedShadow !== 'string'"
- :shadow="editedSubShadow"
- @update:shadow="({ axis, value }) => updateSubShadow(axis, value)"
- />
- </div>
- <tab-switcher
- ref="tabSwitcher"
- class="component-settings"
- :on-switch="onTabSwitch"
- >
+ {{ fallbackI18n($t(getVariantPath(selectedComponentName, variant)), variant) }}
+ </option>
+ </Select>
+ </div>
<div
- key="main"
- class="editor-tab"
- :label="$t('settings.style.themes3.editor.main_tab')"
+ v-if="selectedComponentStates.length > 0"
+ class="state-selector"
>
- <ColorInput
- v-model="editedBackgroundColor"
- :disabled="!isBackgroundColorPresent"
- :label="$t('settings.style.themes3.editor.background')"
- />
- <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
- <Checkbox v-model="isBackgroundColorPresent" />
- </Tooltip>
- <OpacityInput
- v-model="editedOpacity"
- :disabled="!isOpacityPresent"
- :label="$t('settings.style.themes3.editor.opacity')"
+ <label>
+ {{ $t('settings.style.themes3.editor.states_selector') }}
+ </label>
+ <ul
+ class="state-selector-list"
+ >
+ <li
+ v-for="state in selectedComponentStates"
+ :key="'component-state-' + state"
+ >
+ <Checkbox
+ :value="selectedState.has(state)"
+ @update:modelValue="(v) => updateSelectedStates(state, v)"
+ >
+ {{ fallbackI18n($t(getStatePath(selectedComponentName, state)), state) }}
+ </Checkbox>
+ </li>
+ </ul>
+ </div>
+ <div class="preview-container">
+ <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
+ <component
+ :is="'style'"
+ v-html="previewCss"
/>
- <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
- <Checkbox v-model="isOpacityPresent" />
- </Tooltip>
- <ColorInput
- v-if="componentHas('Text')"
- v-model="editedTextColor"
- :label="$t('settings.style.themes3.editor.text_color')"
- :disabled="!isTextColorPresent"
+ <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
+ <ComponentPreview
+ class="component-preview"
+ :show-text="componentHas('Text')"
+ :shadow-control="isShadowTabOpen"
+ :preview-class="previewClass"
+ :preview-style="editorHintStyle"
+ :disabled="!editedSubShadow && typeof editedShadow !== 'string'"
+ :shadow="editedSubShadow"
+ @update:shadow="({ axis, value }) => updateSubShadow(axis, value)"
/>
- <Tooltip
- v-if="componentHas('Text')"
- :text="$t('settings.style.themes3.editor.include_in_rule')"
+ </div>
+ <tab-switcher
+ ref="tabSwitcher"
+ class="component-settings"
+ :on-switch="onTabSwitch"
+ >
+ <div
+ key="main"
+ class="editor-tab"
+ :label="$t('settings.style.themes3.editor.main_tab')"
>
- <Checkbox v-model="isTextColorPresent" />
- </Tooltip>
- <div class="style-control suboption">
- <label
- for="textAuto"
- class="label"
- :class="{ faint: !isTextAutoPresent }"
+ <ColorInput
+ v-model="editedBackgroundColor"
+ :disabled="!isBackgroundColorPresent"
+ :label="$t('settings.style.themes3.editor.background')"
+ />
+ <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+ <Checkbox v-model="isBackgroundColorPresent" />
+ </Tooltip>
+ <OpacityInput
+ v-model="editedOpacity"
+ :disabled="!isOpacityPresent"
+ :label="$t('settings.style.themes3.editor.opacity')"
+ />
+ <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+ <Checkbox v-model="isOpacityPresent" />
+ </Tooltip>
+ <ColorInput
+ v-if="componentHas('Text')"
+ v-model="editedTextColor"
+ :label="$t('settings.style.themes3.editor.text_color')"
+ :disabled="!isTextColorPresent"
+ />
+ <Tooltip
+ v-if="componentHas('Text')"
+ :text="$t('settings.style.themes3.editor.include_in_rule')"
+ >
+ <Checkbox v-model="isTextColorPresent" />
+ </Tooltip>
+ <div class="style-control suboption">
+ <label
+ for="textAuto"
+ class="label"
+ :class="{ faint: !isTextAutoPresent }"
+ >
+ {{ $t('settings.style.themes3.editor.text_auto.label') }}
+ </label>
+ <Select
+ id="textAuto"
+ v-model="editedTextAuto"
+ :disabled="!isTextAutoPresent"
+ >
+ <option value="no-preserve">
+ {{ $t('settings.style.themes3.editor.text_auto.no-preserve') }}
+ </option>
+ <option value="no-auto">
+ {{ $t('settings.style.themes3.editor.text_auto.no-auto') }}
+ </option>
+ <option value="preserve">
+ {{ $t('settings.style.themes3.editor.text_auto.preserve') }}
+ </option>
+ </Select>
+ </div>
+ <Tooltip
+ v-if="componentHas('Text')"
+ :text="$t('settings.style.themes3.editor.include_in_rule')"
>
- {{ $t('settings.style.themes3.editor.text_auto.label') }}
- </label>
- <Select
- id="textAuto"
- v-model="editedTextAuto"
- :disabled="!isTextAutoPresent"
+ <Checkbox v-model="isTextAutoPresent" />
+ </Tooltip>
+ <div>
+ <ContrastRatio :contrast="getContrast(editedBackgroundColor, editedTextColor)" />
+ </div>
+ <div>
+ <!-- spacer for missing checkbox -->
+ </div>
+ <ColorInput
+ v-if="componentHas('Link')"
+ v-model="editedLinkColor"
+ :label="$t('settings.style.themes3.editor.link_color')"
+ :disabled="!isLinkColorPresent"
+ />
+ <Tooltip
+ v-if="componentHas('Link')"
+ :text="$t('settings.style.themes3.editor.include_in_rule')"
>
- <option value="no-preserve">
- {{ $t('settings.style.themes3.editor.text_auto.no-preserve') }}
- </option>
- <option value="no-auto">
- {{ $t('settings.style.themes3.editor.text_auto.no-auto') }}
- </option>
- <option value="preserve">
- {{ $t('settings.style.themes3.editor.text_auto.preserve') }}
- </option>
- </Select>
+ <Checkbox v-model="isLinkColorPresent" />
+ </Tooltip>
+ <ColorInput
+ v-if="componentHas('Icon')"
+ v-model="editedIconColor"
+ :label="$t('settings.style.themes3.editor.icon_color')"
+ :disabled="!isIconColorPresent"
+ />
+ <Tooltip
+ v-if="componentHas('Icon')"
+ :text="$t('settings.style.themes3.editor.include_in_rule')"
+ >
+ <Checkbox v-model="isIconColorPresent" />
+ </Tooltip>
</div>
- <Tooltip
- v-if="componentHas('Text')"
- :text="$t('settings.style.themes3.editor.include_in_rule')"
+ <div
+ key="shadow"
+ class="editor-tab shadow-tab"
+ :label="$t('settings.style.themes3.editor.shadows_tab')"
>
- <Checkbox v-model="isTextAutoPresent" />
- </Tooltip>
- <div>
- <ContrastRatio :contrast="getContrast(editedBackgroundColor, editedTextColor)" />
- </div>
- <div>
- <!-- spacer for missing checkbox -->
+ <Checkbox
+ v-model="isShadowPresent"
+ class="style-control"
+ >
+ {{ $t('settings.style.themes3.editor.include_in_rule') }}
+ </checkbox>
+ <ShadowControl
+ v-model="editedShadow"
+ :disabled="!isShadowPresent"
+ :no-preview="true"
+ :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
+ @subShadowSelected="onSubShadow"
+ />
</div>
- <ColorInput
- v-if="componentHas('Link')"
- v-model="editedLinkColor"
- :label="$t('settings.style.themes3.editor.link_color')"
- :disabled="!isLinkColorPresent"
- />
- <Tooltip
- v-if="componentHas('Link')"
- :text="$t('settings.style.themes3.editor.include_in_rule')"
- >
- <Checkbox v-model="isLinkColorPresent" />
- </Tooltip>
- <ColorInput
- v-if="componentHas('Icon')"
- v-model="editedIconColor"
- :label="$t('settings.style.themes3.editor.icon_color')"
- :disabled="!isIconColorPresent"
- />
- <Tooltip
- v-if="componentHas('Icon')"
- :text="$t('settings.style.themes3.editor.include_in_rule')"
- >
- <Checkbox v-model="isIconColorPresent" />
- </Tooltip>
- </div>
- <div
- key="shadow"
- class="editor-tab shadow-tab"
- :label="$t('settings.style.themes3.editor.shadows_tab')"
- >
- <Checkbox
- v-model="isShadowPresent"
- class="style-control"
+ </tab-switcher>
+ </div>
+ <div
+ key="palette"
+ :label="$t('settings.style.themes3.editor.palette_tab')"
+ class="setting-item palette-editor"
+ >
+ <div class="label">
+ <label for="palette-selector">
+ {{ $t('settings.style.themes3.palette.label') }}
+ {{ ' ' }}
+ </label>
+ <Select
+ id="palette-selector"
+ v-model="editedPalette"
>
- {{ $t('settings.style.themes3.editor.include_in_rule') }}
- </checkbox>
- <ShadowControl
- v-model="editedShadow"
- :disabled="!isShadowPresent"
- :no-preview="true"
- :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
- @subShadowSelected="onSubShadow"
- />
+ <option
+ key="dark"
+ value="dark"
+ >
+ {{ $t('settings.style.themes3.palette.dark') }}
+ </option>
+ <option
+ key="light"
+ value="light"
+ >
+ {{ $t('settings.style.themes3.palette.light') }}
+ </option>
+ </Select>
</div>
- </tab-switcher>
- </div>
- <div class="setting-item palette-editor">
- <div class="label">
- <label for="palette-selector">
- {{ $t('settings.style.themes3.palette.label') }}
- {{ ' ' }}
- </label>
- <Select
- id="palette-selector"
- v-model="editedPalette"
- >
- <option
- key="dark"
- value="dark"
- >
- {{ $t('settings.style.themes3.palette.dark') }}
- </option>
- <option
- key="light"
- value="light"
- >
- {{ $t('settings.style.themes3.palette.light') }}
- </option>
- </Select>
+ <PaletteEditor v-model="palette" />
</div>
- <PaletteEditor v-model="palette" />
- </div>
+ </tab-switcher>
</div>
</template>
<style src="./style_tab.scss" lang="scss"></style>
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 2befb8ba25..fc227b5be8 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,168 +1,147 @@
import ColorInput from 'src/components/color_input/color_input.vue'
import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
import Select from 'src/components/select/select.vue'
+import SelectMotion from 'src/components/select/select_motion.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import Popover from 'src/components/popover/popover.vue'
import ComponentPreview from 'src/components/component_preview/component_preview.vue'
import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { throttle } from 'lodash'
import {
faTimes,
faChevronDown,
faChevronUp,
faPlus
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown,
faChevronUp,
faTimes,
faPlus
)
const toModel = (input) => {
if (typeof input === 'object') {
return {
x: 0,
y: 0,
blur: 0,
spread: 0,
inset: false,
color: '#000000',
alpha: 1,
...input
}
} else if (typeof input === 'string') {
return input
}
}
export default {
props: [
'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled'
],
emits: ['update:modelValue', 'subShadowSelected'],
data () {
return {
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)
}
},
components: {
ColorInput,
OpacityInput,
Select,
+ SelectMotion,
Checkbox,
Popover,
ComponentPreview
},
- beforeUpdate () {
- this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
- },
computed: {
selectedType: {
get () {
return typeof this.selected
},
set (newType) {
this.selected = toModel(newType === 'object' ? {} : '')
}
},
selected: {
get () {
const selected = this.cValue[this.selectedId]
- console.log('SELECTED', selected)
if (selected && typeof selected === 'object') {
return { ...selected }
} else if (typeof selected === 'string') {
return selected
}
return null
},
set (value) {
this.cValue[this.selectedId] = toModel(value)
this.$emit('update:modelValue', this.cValue)
}
},
present () {
return this.selected != null && !this.usingFallback
},
shadowsAreNull () {
return this.modelValue == null
},
currentFallback () {
return this.fallback?.[this.selectedId]
},
- moveUpValid () {
- return this.selectedId > 0
- },
- moveDnValid () {
- return this.selectedId < this.cValue.length - 1
- },
usingFallback () {
return this.modelValue == null
},
style () {
try {
if (this.separateInset) {
return {
filter: getCssShadowFilter(this.cValue),
boxShadow: getCssShadow(this.cValue, true)
}
}
return {
boxShadow: getCssShadow(this.cValue)
}
} catch (e) {
return {
border: '1px solid red'
}
}
}
},
watch: {
+ modelValue (value) {
+ if (!value) this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
+ },
selected (value) {
this.$emit('subShadowSelected', this.selectedId)
}
},
methods: {
+ getNewSubshadow () {
+ return toModel(this.selected)
+ },
+ onSelectChange (id) {
+ this.selectedId = id
+ },
getSubshadowLabel (shadow, index) {
if (typeof shadow === 'object') {
return shadow?.name ?? this.$t('settings.style.shadows.shadow_id', { value: index })
} else if (typeof shadow === 'string') {
return shadow || this.$t('settings.style.shadows.empty_expression')
}
},
updateProperty: throttle(function (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)
- this.$emit('update:modelValue', this.cValue)
- },
- del () {
- this.cValue.splice(this.selectedId, 1)
- this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
- this.$emit('update:modelValue', this.cValue)
- },
- moveUp () {
- const movable = this.cValue.splice(this.selectedId, 1)[0]
- this.cValue.splice(this.selectedId - 1, 0, movable)
- this.selectedId -= 1
- this.$emit('update:modelValue', this.cValue)
- },
- moveDn () {
- const movable = this.cValue.splice(this.selectedId, 1)[0]
- this.cValue.splice(this.selectedId + 1, 0, movable)
- this.selectedId += 1
- this.$emit('update:modelValue', this.cValue)
- }
+ }, 100)
}
}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 669de36e13..6a5cd18618 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -1,277 +1,238 @@
<template>
<div
class="label shadow-control"
:class="{ disabled: disabled || !present, '-no-preview': noPreview }"
>
<ComponentPreview
v-if="!noPreview"
class="shadow-preview"
:shadow-control="true"
:shadow="selected"
: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="disabled || shadowsAreNull"
>
<option
v-for="(shadow, index) in cValue"
:key="index"
:value="index"
:class="{ '-active': index === Number(selectedId) }"
>
{{ getSubshadowLabel(shadow, index) }}
</option>
</Select>
- <div
- class="id-control btn-group arrange-buttons"
- >
- <button
- class="btn button-default"
- :disabled="disabled || shadowsAreNull"
- @click="add"
- >
- <FAIcon
- fixed-width
- icon="plus"
- />
- </button>
- <button
- class="btn button-default"
- :disabled="disabled || !moveUpValid"
- :class="{ disabled: disabled || !moveUpValid }"
- @click="moveUp"
- >
- <FAIcon
- fixed-width
- icon="chevron-up"
- />
- </button>
- <button
- class="btn button-default"
- :disabled="disabled || !moveDnValid"
- :class="{ disabled: disabled || !moveDnValid }"
- @click="moveDn"
- >
- <FAIcon
- fixed-width
- icon="chevron-down"
- />
- </button>
- <button
- class="btn button-default"
- :disabled="disabled || !present"
- :class="{ disabled: disabled || !present }"
- @click="del"
- >
- <FAIcon
- fixed-width
- icon="times"
- />
- </button>
- </div>
+ <SelectMotion
+ class="arrange-buttons"
+ v-model="cValue"
+ :selectedId="selectedId"
+ :get-add-value="getNewSubshadow"
+ :disabled="disabled"
+ @update:selectedId="onSelectChange"
+ />
</div>
<div class="shadow-tweak">
<Select
v-model="selectedType"
:disabled="disabled || !present"
>
<option value="object">
{{ $t('settings.style.shadows.raw') }}
</option>
<option value="string">
{{ $t('settings.style.shadows.expression') }}
</option>
</Select>
<template v-if="selectedType === 'string'">
<textarea
v-model="selected"
class="input shadow-expression"
:disabled="disabled || shadowsAreNull"
:class="{disabled: disabled || shadowsAreNull}"
>
</textarea>
</template>
<template v-else-if="selectedType === 'object'">
<div
:class="{ disabled: disabled || !present }"
class="name-control style-control"
>
<label
for="name"
class="label"
:class="{ faint: disabled || !present }"
>
{{ $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"
:value="selected?.inset"
:disabled="disabled || !present"
name="inset"
class="input-inset input-boolean"
@input="e => updateProperty('inset', e.target.checked)"
>
<template #before>
{{ $t('settings.style.shadows.inset') }}
</template>
</Checkbox>
</div>
<div
:disabled="disabled || !present"
:class="{ disabled: disabled || !present }"
class="blur-control style-control"
>
<label
for="blur"
class="label"
:class="{ faint: disabled || !present }"
>
{{ $t('settings.style.shadows.blur') }}
</label>
<input
id="blur"
: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
: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
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"
: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
: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
:model-value="selected?.color"
:disabled="disabled || !present"
:label="$t('settings.style.common.color')"
:fallback="currentFallback?.color"
:show-optional-tickbox="false"
name="shadow"
@update:modelValue="e => updateProperty('color', e)"
/>
<OpacityInput
: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 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>
</template>
</div>
</div>
</template>
<script src="./shadow_control.js"></script>
<style src="./shadow_control.scss" lang="scss"></style>

File Metadata

Mime Type
text/x-diff
Expires
Fri, Oct 30, 8:33 AM (16 h, 32 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1799897
Default Alt Text
(35 KB)

Event Timeline