commit: 8725de3e9179a52a3a085d4dfec6a84ecbd339af
parent a6863248bbffac9d8efddb00903ec631113df33f
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 6 Oct 2024 18:56:45 +0300
got it working again
Diffstat:
4 files changed, 145 insertions(+), 81 deletions(-)
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -60,6 +60,9 @@ export default {
ContrastRatio
},
setup () {
+ // All rules that are made by editor
+ const allEditedRules = reactive({})
+
// ## Meta stuff
const name = ref('')
const author = ref('')
@@ -80,6 +83,18 @@ export default {
// ## Palette stuff
const palettes = reactive([
{
+ name: 'dark',
+ bg: '#121a24',
+ fg: '#182230',
+ text: '#b9b9ba',
+ link: '#d8a070',
+ accent: '#d8a070',
+ cRed: '#FF0000',
+ cBlue: '#0095ff',
+ cGreen: '#0fa00f',
+ cOrange: '#ffa500'
+ },
+ {
name: 'light',
bg: '#f2f6f9',
fg: '#d6dfed',
@@ -91,18 +106,6 @@ export default {
cGreen: '#0fa00f',
cOrange: '#ffa500',
border: '#d8e6f9'
- },
- {
- name: 'dark',
- bg: '#121a24',
- fg: '#182230',
- text: '#b9b9ba',
- link: '#d8a070',
- accent: '#d8a070',
- cRed: '#FF0000',
- cBlue: '#0095ff',
- cGreen: '#0fa00f',
- cOrange: '#ffa500'
}
])
const selectedPaletteId = ref(0)
@@ -225,9 +228,6 @@ export default {
return root
})
- // All rules that are made by editor
- const allEditedRules = reactive({})
-
// Checkging whether component can support some "directives" which
// are actually virtual subcomponents, i.e. Text, Link etc
const componentHas = (subComponent) => {
@@ -395,9 +395,52 @@ export default {
return null
}
})
+ const editorFriendlyToOriginal = computed(() => {
+ const resultRules = []
+
+ const convert = (component, data = {}, parent) => {
+ const variants = Object.entries(data || {})
+
+ variants.forEach(([variant, variantData]) => {
+ const states = Object.entries(variantData)
+
+ states.forEach(([jointState, stateData]) => {
+ const state = jointState.split(/:/g)
+ const result = {
+ component,
+ variant,
+ state,
+ directives: stateData.directives || {}
+ }
+
+ if (parent) {
+ result.parent = {
+ component: parent
+ }
+ }
+
+ resultRules.push(result)
+
+ // Currently we only support single depth for simplicity's sake
+ if (!parent) {
+ Object.entries(stateData._children || {}).forEach(([cName, child]) => convert(cName, child, component))
+ }
+ })
+ })
+ }
+
+ convert(selectedComponentName.value, allEditedRules[selectedComponentName.value])
+
+ return resultRules
+ })
+
const updatePreview = () => {
try {
const { name, ...paletteData } = selectedPalette.value
+ // This normally would be handled by Root but since we pass something
+ // else we have to make do ourselves
+ paletteData.accent = paletteData.accent || paletteData.link
+ paletteData.link = paletteData.link || paletteData.accent
const rules = init({
inputRuleset: editorFriendlyToOriginal.value,
initialStaticVars: {
@@ -414,6 +457,7 @@ export default {
console.error('Could not compile preview theme', e)
}
}
+
const updateSelectedComponent = () => {
selectedVariant.value = 'normal'
selectedState.clear()
@@ -421,6 +465,7 @@ export default {
}
updateSelectedComponent()
+ // export and import
watch(
allEditedRules,
updatePreview
@@ -441,50 +486,9 @@ export default {
updateSelectedComponent
)
- // export and import
- const editorFriendlyToOriginal = computed(() => {
- const resultRules = []
-
- const convert = (component, data = {}, parent) => {
- const variants = Object.entries(data || {})
-
- variants.forEach(([variant, variantData]) => {
- const states = Object.entries(variantData)
-
- states.forEach(([jointState, stateData]) => {
- const state = jointState.split(/:/g)
- const result = {
- component,
- variant,
- state,
- directives: stateData.directives || {}
- }
-
- if (parent) {
- result.parent = {
- component: parent
- }
- }
-
- resultRules.push(result)
-
- // Currently we only support single depth for simplicity's sake
- if (!parent) {
- Object.entries(stateData._children || {}).forEach(([cName, child]) => convert(cName, child, component))
- }
- })
- })
- }
-
- convert(selectedComponentName.value, allEditedRules[selectedComponentName.value])
-
- return resultRules
- })
-
// ## Variables
const allCustomVirtualDirectives = [...componentsMap.values()]
.map(c => {
- console.log(c.defaultRules.filter(c => c.component === 'Root'))
return c
.defaultRules
.filter(c => c.component === 'Root')
@@ -504,6 +508,17 @@ export default {
const virtualDirectives = reactive(allCustomVirtualDirectives)
const selectedVirtualDirectiveId = ref(0)
const selectedVirtualDirective = computed(() => virtualDirectives[selectedVirtualDirectiveId.value])
+ const selectedVirtualDirectiveParsed = computed({
+ get () {
+ switch (selectedVirtualDirective.value.valType) {
+ case 'shadow':
+ return {}
+ default:
+ return null
+ }
+ }
+ })
+
const getNewDirective = () => ({
name: 'newDirective',
valType: 'generic',
@@ -512,8 +527,10 @@ export default {
// ## Export and Import
const styleExporter = newExporter({
- filename: 'pleroma.palette.json',
- getExportedObject: () => exportStyleData
+ filename: name.value || 'pleroma_theme',
+ mime: 'text/plain',
+ extension: 'piss',
+ getExportedObject: () => exportStyleData.value
})
const exportStyleData = computed(() => {
return [
@@ -591,6 +608,7 @@ export default {
virtualDirectives,
selectedVirtualDirective,
selectedVirtualDirectiveId,
+ selectedVirtualDirectiveParsed,
getNewDirective,
// ## Export and Import
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -87,34 +87,32 @@
}
}
- .palette-editor {
+ .list-editor {
display: grid;
grid-template-areas:
"label editor"
"selector editor"
- "motion editor";
+ "movement editor";
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 0.5em;
- .palette-editor-edit {
+ .list-edit-area {
grid-area: editor;
}
- .palette-selector {
+ .list-select {
+ grid-area: selector;
+ margin: 0;
+
&-label {
font-weight: bold;
grid-area: label;
margin: 0;
}
- }
-
- .palette-list {
- grid-area: selector;
- margin: 0;
&-movement {
- grid-area: motion;
+ grid-area: movement;
margin: 0;
}
}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -258,10 +258,10 @@
<div
key="palette"
:label="$t('settings.style.themes3.editor.palette_tab')"
- class="setting-item palette-editor"
+ class="setting-item list-editor"
>
<label
- class="palette-selector-label"
+ class="list-select-label"
for="palette-selector"
>
{{ $t('settings.style.themes3.palette.label') }}
@@ -269,9 +269,9 @@
</label>
<Select
id="palette-selector"
- v-model="editedPalette"
- class="palette-list"
- size="9"
+ v-model="selectedPaletteId"
+ class="list-select"
+ size="10"
>
<option
v-for="(p, index) in palettes"
@@ -282,17 +282,58 @@
</option>
</Select>
<SelectMotion
- class="palette-list-movement"
+ class="list-select-movement"
v-model="palettes"
- :selected-id="editedPalette"
:get-add-value="getNewPalette"
- @update:selectedId="e => editedPalette = e"
+ :selected-id="selectedPaletteId"
+ @update:selectedId="e => selectedPaletteId = e"
/>
<PaletteEditor
- class="palette-editor-edit"
- v-model="palette"
+ class="list-edit-area"
+ v-model="selectedPalette"
/>
</div>
+ <div
+ key="variables"
+ :label="$t('settings.style.themes3.editor.variables_tab')"
+ class="setting-item list-editor"
+ >
+ <label
+ class="list-select-label"
+ for="variables-selector"
+ >
+ {{ $t('settings.style.themes3.variables.label') }}
+ {{ ' ' }}
+ </label>
+ <Select
+ id="variables-selector"
+ v-model="selectedVirtualDirectiveId"
+ class="list-select"
+ size="9"
+ >
+ <option
+ v-for="(p, index) in virtualDirectives"
+ :key="p.name"
+ :value="index"
+ >
+ {{ p.name }}
+ </option>
+ </Select>
+ <SelectMotion
+ class="list-select-movement"
+ v-model="virtualDirectives"
+ :selected-id="selectedVirtualDirectiveId"
+ :get-add-value="getNewVirtualDirective"
+ @update:selectedId="e => selectedVirtualDirectiveId = e"
+ />
+ <div class="list-edit-area">
+ <ShadowControl
+ v-if="selectedVirtualDirective.valType === 'shadow'"
+ v-model="selectedVirtualDirective.value"
+ />
+ {{ selectedVirtualDirective.valType }}
+ </div>
+ </div>
</tab-switcher>
</div>
</template>
diff --git a/src/services/export_import/export_import.js b/src/services/export_import/export_import.js
@@ -2,15 +2,22 @@ import utf8 from 'utf8'
export const newExporter = ({
filename = 'data',
+ mime = 'application/json',
+ extension = '.json',
getExportedObject
}) => ({
exportData () {
- const stringified = utf8.encode(JSON.stringify(getExportedObject(), null, 2)) // Pretty-print and indent with 2 spaces
+ let stringified
+ if (mime === 'application/json') {
+ stringified = utf8.encode(JSON.stringify(getExportedObject(), null, 2)) // Pretty-print and indent with 2 spaces
+ } else {
+ stringified = utf8.encode(getExportedObject()) // Pretty-print and indent with 2 spaces
+ }
// Create an invisible link with a data url and simulate a click
const e = document.createElement('a')
- e.setAttribute('download', `${filename}.json`)
- e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
+ e.setAttribute('download', `${filename}.${extension}`)
+ e.setAttribute('href', `data:${mime};base64, ${window.btoa(stringified)}`)
e.style.display = 'none'
document.body.appendChild(e)
