hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

variables work + i18n cleanup

Browse source
This commit is contained in:
Henry Jameson 2024-10-09 09:59:37 +03:00
commit 5a2080570f
4 changed files with 73 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -20,7 +20,7 @@ import {
getCssRules,
getScopedVersion
} from 'src/services/theme_data/css_utils.js'
import { serialize } from 'src/services/theme_data/iss_serializer.js'
import { serializeShadow, serialize } from 'src/services/theme_data/iss_serializer.js'
import { parseShadow /* , deserialize */ } from 'src/services/theme_data/iss_deserializer.js'
import {
// rgb2hex,
@ -537,7 +537,33 @@ export default {
})
const virtualDirectives = reactive(allCustomVirtualDirectives)
const selectedVirtualDirectiveId = ref(0)
const selectedVirtualDirective = computed(() => virtualDirectives[selectedVirtualDirectiveId.value])
const selectedVirtualDirective = computed({
get () {
return virtualDirectives[selectedVirtualDirectiveId.value]
},
set (value) {
console.log('SET', value)
virtualDirectives[selectedVirtualDirectiveId.value].value = value
}
})
const selectedVirtualDirectiveValType = computed({
get () {
return virtualDirectives[selectedVirtualDirectiveId.value].valType
},
set (value) {
virtualDirectives[selectedVirtualDirectiveId.value].valType = value
switch (value) {
case 'shadow':
virtualDirectives[selectedVirtualDirectiveId.value].value = '0 0 0 #000000'
break
case 'color':
virtualDirectives[selectedVirtualDirectiveId.value].value = '#000000'
break
default:
virtualDirectives[selectedVirtualDirectiveId.value].value = 'none'
}
}
})
const selectedVirtualDirectiveParsed = computed({
get () {
switch (selectedVirtualDirective.value.valType) {
@ -550,8 +576,21 @@ export default {
return normalizeShadows(splitShadow)
}
}
case 'color':
console.log('COLOR', selectedVirtualDirective.value.value)
return selectedVirtualDirective.value.value
default:
return null
return selectedVirtualDirective.value.value
}
},
set (value) {
switch (selectedVirtualDirective.value.valType) {
case 'shadow': {
virtualDirectives[selectedVirtualDirectiveId.value].value = value.map(x => serializeShadow(x)).join(', ')
break
}
default:
virtualDirectives[selectedVirtualDirectiveId.value].value = value
}
}
})
@ -684,6 +723,7 @@ export default {
selectedVirtualDirective,
selectedVirtualDirectiveId,
selectedVirtualDirectiveParsed,
selectedVirtualDirectiveValType,
getNewDirective,
// ## Export and Import

29
src/components/settings_modal/tabs/style_tab/style_tab.vue
View file

@ -321,7 +321,7 @@
class="list-select-label"
for="variables-selector"
>
{{ $t('settings.style.themes3.variables.label') }}
{{ $t('settings.style.themes3.editor.variables.label') }}
{{ ' ' }}
</label>
<Select
@ -351,7 +351,7 @@
class="variable-name-label"
for="variables-selector"
>
{{ $t('settings.style.themes3.variables.name_label') }}
{{ $t('settings.style.themes3.editor.variables.name_label') }}
{{ ' ' }}
</label>
<input
@ -362,25 +362,34 @@
class="variable-type-label"
for="variables-selector"
>
{{ $t('settings.style.themes3.variables.type_label') }}
{{ $t('settings.style.themes3.editor.variables.type_label') }}
{{ ' ' }}
</label>
<Select
v-model="selectedVirtualDirective.valType"
v-model="selectedVirtualDirectiveValType"
>
<option value='shadow'>
{{ $t('settings.style.themes3.variables.type_label') }}
shadow</option>
<option value='shadow'>color</option>
<option value='shadow'>generic</option>
{{ $t('settings.style.themes3.editor.variables.type_shadow') }}
</option>
<option value='color'>
{{ $t('settings.style.themes3.editor.variables.type_color') }}
</option>
<option value='generic'>
{{ $t('settings.style.themes3.editor.variables.type_generic') }}
</option>
</Select>
</div>
<ShadowControl
v-if="selectedVirtualDirective.valType === 'shadow'"
v-if="selectedVirtualDirectiveValType === 'shadow'"
v-model="selectedVirtualDirectiveParsed"
:compact="true"
/>
</div>
<ColorInput
v-if="selectedVirtualDirectiveValType === 'color'"
v-model="selectedVirtualDirectiveParsed"
:label="$t('settings.style.themes3.editor.variables.virtual_color')"
/>
</div>
</div>
</tab-switcher>
</div>