Page MenuHomePhorge
Files F85828819

No OneTemporary
Actions

Authored By
Unknown
Size
7 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/select/select_motion.vue b/src/components/select/select_motion.vue
index be42b040d8..57ffd7c334 100644
--- a/src/components/select/select_motion.vue
+++ b/src/components/select/select_motion.vue
@@ -1,115 +1,113 @@
<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)
+ const newModel = [...props.modelValue, props.getAddValue()]
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/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 8eab5c9179..03797fc537 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,156 +1,155 @@
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',
'compact'
],
emits: ['update:modelValue', 'subShadowSelected'],
data () {
- console.log('MODEL VALUE', this.modelValue, this.fallback)
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)
+ selectedId: 0
}
},
components: {
ColorInput,
OpacityInput,
Select,
SelectMotion,
Checkbox,
Popover,
ComponentPreview
},
- beforeUpdate () {
- this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
- },
computed: {
+ cValue: {
+ get () {
+ return (this.modelValue ?? this.fallback ?? []).map(toModel)
+ },
+ set (newVal) {
+ this.$emit('update:modelValue', newVal)
+ }
+ },
selectedType: {
get () {
return typeof this.selected
},
set (newType) {
this.selected = toModel(newType === 'object' ? {} : '')
}
},
selected: {
get () {
const selected = this.cValue[this.selectedId]
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]
},
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)
}
}

File Metadata

Mime Type
text/x-diff
Expires
Sat, Oct 31, 11:39 AM (19 h, 1 s)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1801365
Default Alt Text
(7 KB)

Event Timeline