commit: 13838a75a9b5b0f2b59fa5b10675952e1b7cae11
parent 20e6382df6354f1df457d152467922967e7f37c5
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Oct 2024 02:16:55 +0300
import of v2 on appearance tab works now
Diffstat:
5 files changed, 71 insertions(+), 25 deletions(-)
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
@@ -8,6 +8,7 @@ import FontControl from 'src/components/font_control/font_control.vue'
import { normalizeThemeData } from 'src/modules/interface'
+import { newImporter } from 'src/services/export_import/export_import.js'
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
import { init } from 'src/services/theme_data/theme_data_3.service.js'
import {
@@ -33,6 +34,12 @@ const AppearanceTab = {
return {
availableStyles: [],
availablePalettes: [],
+ themeImporter: newImporter({
+ accept: '.json, .piss',
+ validator: this.importValidator,
+ onImport: this.onImport,
+ onImportFailure: this.onImportFailure
+ }),
palettesKeys: [
'background',
'foreground',
@@ -184,7 +191,6 @@ const AppearanceTab = {
},
methods: {
updateFont (key, value) {
- console.log(key, value)
this.$store.dispatch('setOption', {
name: 'theme3hacks',
value: {
@@ -196,6 +202,26 @@ const AppearanceTab = {
}
})
},
+ importTheme () {
+ this.themeImporter.importData()
+ },
+ onImport (parsed, filename) {
+ if (filename.endsWith('.json')) {
+ this.$store.dispatch('setThemeCustom', parsed.source || parsed.theme)
+ this.$store.dispatch('applyTheme')
+ }
+
+ // this.loadTheme(parsed, 'file', forceSource)
+ },
+ onImportFailure (result) {
+ this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+ },
+ importValidator (parsed, filename) {
+ if (filename.endsWith('.json')) {
+ const version = parsed._pleroma_theme_version
+ return version >= 1 || version <= 2
+ }
+ },
isThemeActive (key) {
const { theme } = this.mergedConfig
return key === theme
@@ -208,6 +234,9 @@ const AppearanceTab = {
const { palette } = this.mergedConfig
return key === palette
},
+ importStyle () {
+
+ },
setTheme (name) {
this.$store.dispatch('setTheme', name)
this.$store.dispatch('applyTheme')
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -5,6 +5,21 @@
margin: 1em;
}
+ .setting-item {
+ padding-bottom: 0;
+
+ &.heading {
+ display: grid;
+ align-items: baseline;
+ grid-template-columns: 1fr auto auto auto;
+ grid-gap: 0.5em;
+
+ h2 {
+ flex: 1 0 auto;
+ }
+ }
+ }
+
.palettes {
display: grid;
grid-template-columns: 1fr 1fr;
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -3,8 +3,17 @@
class="appearance-tab"
:label="$t('settings.general')"
>
- <div class="setting-item">
+ <div class="setting-item heading">
<h2>{{ $t('settings.theme') }}</h2>
+ <button
+ class="btn button-default"
+ @click="importTheme"
+ >
+ <FAIcon icon="folder-open" />
+ {{ $t('settings.style.themes3.editor.load_style') }}
+ </button>
+ </div>
+ <div class="setting-item">
<ul
ref="themeList"
class="theme-list"
diff --git a/src/modules/interface.js b/src/modules/interface.js
@@ -347,33 +347,24 @@ const interfaceMod = {
let majorVersionUsed
console.log(
- 'USER V3',
- userPaletteName,
- userStyleName
+ `USER V3 palette: ${userPaletteName}, style: ${userStyleName} `
)
console.log(
- 'USER V2',
- userThemeV2Name,
- userThemeV2Source,
- userThemeV2Snapshot
+ `USER V2 name: ${userThemeV2Name}, source: ${userThemeV2Source}, snapshot: ${userThemeV2Snapshot}`
)
- console.log(
- 'INST V3',
- instancePaletteName,
- instanceStyleName
- )
- console.log(
- 'INST V2',
- instanceThemeV2Name
- )
+ console.log(`INST V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
+ console.log('INST V2 theme: ' + instanceThemeV2Name)
if (userPaletteName || userPaletteCustomData ||
userStyleName || userStyleCustomData ||
- instancePaletteName ||
- instanceStyleName ||
- (instanceThemeV2Name == null &&
- userThemeV2Name == null)
+ (
+ // User V2 overrides instance V3
+ (instancePaletteName ||
+ instanceStyleName) &&
+ instanceThemeV2Name == null &&
+ userThemeV2Name == null
+ )
) {
// Palette and/or style overrides V2 themes
instanceThemeV2Name = null
diff --git a/src/services/export_import/export_import.js b/src/services/export_import/export_import.js
@@ -20,6 +20,7 @@ export const newExporter = ({
})
export const newImporter = ({
+ accept = '.json',
onImport,
onImportFailure,
validator = () => true
@@ -27,18 +28,19 @@ export const newImporter = ({
importData () {
const filePicker = document.createElement('input')
filePicker.setAttribute('type', 'file')
- filePicker.setAttribute('accept', '.json')
+ filePicker.setAttribute('accept', accept)
filePicker.addEventListener('change', event => {
if (event.target.files[0]) {
+ const filename = event.target.files[0].name
// eslint-disable-next-line no-undef
const reader = new FileReader()
reader.onload = ({ target }) => {
try {
const parsed = JSON.parse(target.result)
- const validationResult = validator(parsed)
+ const validationResult = validator(parsed, filename)
if (validationResult === true) {
- onImport(parsed)
+ onImport(parsed, filename)
} else {
onImportFailure({ validationResult })
}
