From 144d426864402606029157d8d0ac02c0e7e1912a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 24 Sep 2024 03:07:27 +0300 Subject: [PATCH] some initial work on theme editor --- .../settings_modal/helpers/setting.js | 24 ++- .../settings_modal/helpers/string_setting.vue | 1 + .../settings_modal/settings_modal.scss | 8 +- .../settings_modal_user_content.js | 4 + .../settings_modal_user_content.vue | 7 + .../tabs/style_tab/style_tab.js | 40 +++++ .../tabs/style_tab/style_tab.scss | 59 ++++++++ .../tabs/style_tab/style_tab.vue | 138 ++++++++++++++++++ src/i18n/en.json | 10 ++ 9 files changed, 283 insertions(+), 8 deletions(-) create mode 100644 src/components/settings_modal/tabs/style_tab/style_tab.js create mode 100644 src/components/settings_modal/tabs/style_tab/style_tab.scss create mode 100644 src/components/settings_modal/tabs/style_tab/style_tab.vue diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js index 3b3e6268..6c5dd76e 100644 --- a/src/components/settings_modal/helpers/setting.js +++ b/src/components/settings_modal/helpers/setting.js @@ -10,9 +10,13 @@ export default { ProfileSettingIndicator }, props: { + modelValue: { + type: String, + default: null + }, path: { type: [String, Array], - required: true + required: false }, disabled: { type: Boolean, @@ -68,7 +72,7 @@ export default { } }, created () { - if (this.realDraftMode && this.realSource !== 'admin') { + if (this.realDraftMode && (this.realSource !== 'admin' || this.path == null)) { this.draft = this.state } }, @@ -76,14 +80,14 @@ export default { draft: { // TODO allow passing shared draft object? get () { - if (this.realSource === 'admin') { + if (this.realSource === 'admin' || this.path == null) { return get(this.$store.state.adminSettings.draft, this.canonPath) } else { return this.localDraft } }, set (value) { - if (this.realSource === 'admin') { + if (this.realSource === 'admin' || this.path == null) { this.$store.commit('updateAdminDraft', { path: this.canonPath, value }) } else { this.localDraft = value @@ -91,6 +95,9 @@ export default { } }, state () { + if (this.path == null) { + return this.modelValue + } const value = get(this.configSource, this.canonPath) if (value === undefined) { return this.defaultState @@ -145,6 +152,9 @@ export default { return this.backendDescription?.suggestions }, shouldBeDisabled () { + if (this.path == null) { + return this.disabled + } const parentValue = this.parentPath !== undefined ? get(this.configSource, this.parentPath) : null return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false) }, @@ -159,6 +169,9 @@ export default { } }, configSink () { + if (this.path == null) { + return (k, v) => this.$emit('modelValue:update', v) + } switch (this.realSource) { case 'profile': return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v }) @@ -184,6 +197,7 @@ export default { return this.realSource === 'profile' }, isChanged () { + if (this.path == null) return false switch (this.realSource) { case 'profile': case 'admin': @@ -193,9 +207,11 @@ export default { } }, canonPath () { + if (this.path == null) return null return Array.isArray(this.path) ? this.path : this.path.split('.') }, isDirty () { + if (this.path == null) return false if (this.realSource === 'admin' && this.canonPath.length > 3) { return false // should not show draft buttons for "grouped" values } else { diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue index 7b30d1b9..fbea0b50 100644 --- a/src/components/settings_modal/helpers/string_setting.vue +++ b/src/components/settings_modal/helpers/string_setting.vue @@ -15,6 +15,7 @@ + {{ ' ' }} +
+ +
+import { ref, computed } from 'vue' + +import Select from 'src/components/select/select.vue' +import Checkbox from 'src/components/checkbox/checkbox.vue' +import StringSetting from '../../helpers/string_setting.vue' +// import Preview from '../theme_tab/theme_preview.vue' + +import { library } from '@fortawesome/fontawesome-svg-core' +import { faFloppyDisk, faFolderOpen, faFile } from '@fortawesome/free-solid-svg-icons' + +library.add( + faFile, + faFloppyDisk, + faFolderOpen +) + +const name = ref('') +const author = ref('') +const license = ref('') +const website = ref('') + +// Getting existing components +const componentsContext = require.context('src', true, /\.style.js(on)?$/) +const componentKeys = componentsContext.keys() + +const componentsMap = new Map( + componentKeys + .map( + key => [key, componentsContext(key).default] + ) +) +// const componentValues = componentsMap.values() + +// Initializing selected component and its computed descendants +const selectedComponentKey = ref(componentKeys[0]) +const selectedComponentValue = computed(() => componentsMap.get(selectedComponentKey.value)) + +// const selectedComponentName = computed(() => selectedComponent.value.name) +const selectedComponentVariants = computed(() => { + return new Set([...(Object.keys(selectedComponentValue.value.variants || {})), 'normal']) +}) +const selectedComponentStates = computed(() => { + return new Set([...(Object.keys(selectedComponentValue.value.states || {})), 'normal']) +}) + + + + + + diff --git a/src/i18n/en.json b/src/i18n/en.json index 423ce65e..1321e556 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -753,6 +753,16 @@ "update_preview": "Update preview", "themes3": { "define": "Override", + "editor": { + "title": "Style", + "new_style": "New", + "load_style": "Open", + "save_style": "Save", + "style_name": "Stylesheet name", + "style_author": "Made by", + "style_license": "License", + "style_website": "Website" + }, "hacks": { "underlay_overrides": "Change underlay", "underlay_override_mode_none": "Theme default",