Page MenuHomePhorge
Files F85830562

No OneTemporary
Actions

Authored By
Unknown
Size
13 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 9b946e906c..451180f437 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,128 +1,128 @@
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 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 = (object = {}) => ({
x: 0,
y: 0,
blur: 0,
spread: 0,
inset: false,
color: '#000000',
alpha: 1,
...object
})
export default {
props: [
- 'modelValue', 'fallback', 'separateInset', 'noPreview'
+ 'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled'
],
emits: ['update:modelValue'],
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,
Checkbox,
Popover,
ComponentPreview
},
beforeUpdate () {
this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
},
computed: {
selected () {
const selected = this.cValue[this.selectedId]
if (selected) {
return { ...selected }
}
return null
},
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 () {
if (this.separateInset) {
return {
filter: getCssShadowFilter(this.cValue),
boxShadow: getCssShadow(this.cValue, true)
}
}
return {
boxShadow: getCssShadow(this.cValue)
}
}
},
methods: {
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)
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)
}
}
}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 7b587d4c55..007cf2a19a 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -1,256 +1,256 @@
<template>
<div
class="label shadow-control"
- :class="{ disabled: !present, '-no-preview': noPreview }"
+ :class="{ disabled: disabled || !present, '-no-preview': noPreview }"
>
<ComponentPreview
v-if="!noPreview"
class="shadow-preview"
:shadow-control="true"
:shadow="selected"
:preview-style="style"
- :disabled="!present"
+ :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"
>
<option
v-for="(shadow, index) in cValue"
:key="index"
:value="index"
:class="{ '-active': index === Number(selectedId) }"
>
{{ shadow?.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
</option>
</Select>
<div
class="id-control btn-group arrange-buttons"
>
<button
class="btn button-default"
- :disabled="shadowsAreNull"
+ :disabled="disabled || shadowsAreNull"
@click="add"
>
<FAIcon
fixed-width
icon="plus"
/>
</button>
<button
class="btn button-default"
- :disabled="!moveUpValid"
- :class="{ disabled: !moveUpValid }"
+ :disabled="disabled || !moveUpValid"
+ :class="{ disabled: disabled || !moveUpValid }"
@click="moveUp"
>
<FAIcon
fixed-width
icon="chevron-up"
/>
</button>
<button
class="btn button-default"
- :disabled="!moveDnValid"
- :class="{ disabled: !moveDnValid }"
+ :disabled="disabled || !moveDnValid"
+ :class="{ disabled: disabled || !moveDnValid }"
@click="moveDn"
>
<FAIcon
fixed-width
icon="chevron-down"
/>
</button>
<button
class="btn button-default"
- :disabled="!present"
- :class="{ disabled: !present }"
+ :disabled="disabled || !present"
+ :class="{ disabled: disabled || !present }"
@click="del"
>
<FAIcon
fixed-width
icon="times"
/>
</button>
</div>
</div>
<div class="shadow-tweak">
<div
- :class="{ disabled: !present }"
+ :class="{ disabled: disabled || !present }"
class="name-control style-control"
>
<label
for="name"
class="label"
- :class="{ faint: !present }"
+ :class="{ faint: disabled || !present }"
>
{{ $t('settings.style.shadows.name') }}
</label>
<input
id="name"
:value="selected?.name"
- :disabled="!present"
- :class="{ disabled: !present }"
+ :disabled="disabled || !present"
+ :class="{ disabled: disabled || !present }"
name="name"
class="input input-string"
@input="e => updateProperty('name', e.target.value)"
>
</div>
<div
- :disabled="!present"
+ :disabled="disabled || !present"
class="inset-control style-control"
>
<Checkbox
id="inset"
:value="selected?.inset"
- :disabled="!present"
+ :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="!present"
- :class="{ disabled: !present }"
+ :disabled="disabled || !present"
+ :class="{ disabled: disabled || !present }"
class="blur-control style-control"
>
<label
for="blur"
class="label"
- :class="{ faint: !present }"
+ :class="{ faint: disabled || !present }"
>
{{ $t('settings.style.shadows.blur') }}
</label>
<input
id="blur"
:value="selected?.blur"
- :disabled="!present"
- :class="{ disabled: !present }"
+ :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"
- :disabled="!present"
- :class="{ disabled: !present }"
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: !present || (separateInset && !selected?.inset) }"
+ :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
>
<label
for="spread"
class="label"
- :class="{ faint: !present || (separateInset && !selected?.inset) }"
+ :class="{ faint: disabled || !present || (separateInset && !selected?.inset) }"
>
{{ $t('settings.style.shadows.spread') }}
</label>
<input
id="spread"
:value="selected?.spread"
- :disabled="!present || (separateInset && !selected?.inset)"
- :class="{ disabled: !present || (separateInset && !selected?.inset) }"
+ :disabled="disabled || !present || (separateInset && !selected?.inset)"
+ :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
name="spread"
class="input input-number -small"
type="range"
max="20"
min="-20"
@input="e => updateProperty('spread', e.target.value)"
>
<input
:value="selected?.spread"
- :disabled="{ disabled: !present || (separateInset && !selected?.inset) }"
- :class="{ disabled: !present || (separateInset && !selected?.inset) }"
+ :disabled="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
+ :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
class="input input-number -small"
type="number"
@input="e => updateProperty('spread', e.target.value)"
>
</div>
<ColorInput
:model-value="selected?.color"
- :disabled="!present"
+ :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="!present"
+ :disabled="disabled || !present"
@update:modelValue="e => updateProperty('alpha', e)"
/>
<i18n-t
scope="global"
keypath="settings.style.shadows.hintV3"
- :class="{ faint: !present }"
+ :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 src="./shadow_control.scss" lang="scss"></style>

File Metadata

Mime Type
text/x-diff
Expires
Sun, Nov 1, 5:28 AM (17 h, 7 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1802538
Default Alt Text
(13 KB)

Event Timeline