biome format --write
This commit is contained in:
Henry Jameson
parent
8372348148
commit
9262e803ec
415 changed files with 54076 additions and 17419 deletions
|
|
@ -9,11 +9,12 @@ import Preview from './old_theme_tab/theme_preview.vue'
|
|||
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 {
|
||||
getCssRules
|
||||
} from 'src/services/theme_data/css_utils.js'
|
||||
import { getCssRules } from 'src/services/theme_data/css_utils.js'
|
||||
import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
|
||||
import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js'
|
||||
import {
|
||||
createStyleSheet,
|
||||
adoptStyleSheets,
|
||||
} from 'src/services/style_setter/style_setter.js'
|
||||
import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
|
||||
|
||||
import SharedComputedObject from '../helpers/shared_computed_object.js'
|
||||
|
|
@ -23,7 +24,7 @@ import { mapActions } from 'pinia'
|
|||
import { useInterfaceStore, normalizeThemeData } from 'src/stores/interface'
|
||||
|
||||
const AppearanceTab = {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
availableThemesV3: [],
|
||||
availableThemesV2: [],
|
||||
|
|
@ -34,7 +35,7 @@ const AppearanceTab = {
|
|||
validator: this.importValidator,
|
||||
onImport: this.onImport,
|
||||
parser: this.importParser,
|
||||
onImportFailure: this.onImportFailure
|
||||
onImportFailure: this.onImportFailure,
|
||||
}),
|
||||
palettesKeys: [
|
||||
'bg',
|
||||
|
|
@ -44,19 +45,25 @@ const AppearanceTab = {
|
|||
'cRed',
|
||||
'cGreen',
|
||||
'cBlue',
|
||||
'cOrange'
|
||||
'cOrange',
|
||||
],
|
||||
userPalette: {},
|
||||
intersectionObserver: null,
|
||||
forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
|
||||
key: mode,
|
||||
value: i - 1,
|
||||
label: this.$t(`settings.style.themes3.hacks.forced_roundness_mode_${mode}`)
|
||||
})),
|
||||
forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map(
|
||||
(mode, i) => ({
|
||||
key: mode,
|
||||
value: i - 1,
|
||||
label: this.$t(
|
||||
`settings.style.themes3.hacks.forced_roundness_mode_${mode}`,
|
||||
),
|
||||
}),
|
||||
),
|
||||
underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode) => ({
|
||||
key: mode,
|
||||
value: mode,
|
||||
label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
|
||||
label: this.$t(
|
||||
`settings.style.themes3.hacks.underlay_override_mode_${mode}`,
|
||||
),
|
||||
})),
|
||||
backgroundUploading: false,
|
||||
background: null,
|
||||
|
|
@ -71,9 +78,9 @@ const AppearanceTab = {
|
|||
UnitSetting,
|
||||
ProfileSettingIndicator,
|
||||
Preview,
|
||||
PaletteEditor
|
||||
PaletteEditor,
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
useInterfaceStore().getThemeData()
|
||||
|
||||
const updateIndex = (resource) => {
|
||||
|
|
@ -87,120 +94,151 @@ const AppearanceTab = {
|
|||
promise = useInterfaceStore()[`fetch${capitalizedResource}sIndex`]()
|
||||
}
|
||||
|
||||
return promise.then(index => {
|
||||
return Object
|
||||
.entries(index)
|
||||
.map(([k, func]) => [k, func()])
|
||||
return promise.then((index) => {
|
||||
return Object.entries(index).map(([k, func]) => [k, func()])
|
||||
})
|
||||
}
|
||||
|
||||
updateIndex('style').then(styles => {
|
||||
styles.forEach(([key, stylePromise]) => stylePromise.then(data => {
|
||||
const meta = data.find(x => x.component === '@meta')
|
||||
this.availableThemesV3.push({ key, data, name: meta.directives.name, version: 'v3' })
|
||||
}))
|
||||
updateIndex('style').then((styles) => {
|
||||
styles.forEach(([key, stylePromise]) =>
|
||||
stylePromise.then((data) => {
|
||||
const meta = data.find((x) => x.component === '@meta')
|
||||
this.availableThemesV3.push({
|
||||
key,
|
||||
data,
|
||||
name: meta.directives.name,
|
||||
version: 'v3',
|
||||
})
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
updateIndex('theme').then(themes => {
|
||||
themes.forEach(([key, themePromise]) => themePromise.then(data => {
|
||||
if (!data) {
|
||||
console.warn(`Theme with key ${key} is empty or malformed`)
|
||||
} else if (Array.isArray(data)) {
|
||||
console.warn(`Theme with key ${key} is a v1 theme and should be moved to static/palettes/index.json`)
|
||||
} else if (!data.source && !data.theme) {
|
||||
console.warn(`Theme with key ${key} is malformed`)
|
||||
} else {
|
||||
this.availableThemesV2.push({ key, data, name: data.name, version: 'v2' })
|
||||
}
|
||||
}))
|
||||
updateIndex('theme').then((themes) => {
|
||||
themes.forEach(([key, themePromise]) =>
|
||||
themePromise.then((data) => {
|
||||
if (!data) {
|
||||
console.warn(`Theme with key ${key} is empty or malformed`)
|
||||
} else if (Array.isArray(data)) {
|
||||
console.warn(
|
||||
`Theme with key ${key} is a v1 theme and should be moved to static/palettes/index.json`,
|
||||
)
|
||||
} else if (!data.source && !data.theme) {
|
||||
console.warn(`Theme with key ${key} is malformed`)
|
||||
} else {
|
||||
this.availableThemesV2.push({
|
||||
key,
|
||||
data,
|
||||
name: data.name,
|
||||
version: 'v2',
|
||||
})
|
||||
}
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
this.userPalette = useInterfaceStore().paletteDataUsed || {}
|
||||
|
||||
updateIndex('palette').then(bundledPalettes => {
|
||||
bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
|
||||
let palette
|
||||
if (Array.isArray(v)) {
|
||||
const [
|
||||
name,
|
||||
bg,
|
||||
fg,
|
||||
text,
|
||||
link,
|
||||
cRed = '#FF0000',
|
||||
cGreen = '#00FF00',
|
||||
cBlue = '#0000FF',
|
||||
cOrange = '#E3FF00'
|
||||
] = v
|
||||
palette = { key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
|
||||
} else {
|
||||
palette = { key, ...v }
|
||||
}
|
||||
if (!palette.key.startsWith('style.')) {
|
||||
this.bundledPalettes.push(palette)
|
||||
}
|
||||
}))
|
||||
updateIndex('palette').then((bundledPalettes) => {
|
||||
bundledPalettes.forEach(([key, palettePromise]) =>
|
||||
palettePromise.then((v) => {
|
||||
let palette
|
||||
if (Array.isArray(v)) {
|
||||
const [
|
||||
name,
|
||||
bg,
|
||||
fg,
|
||||
text,
|
||||
link,
|
||||
cRed = '#FF0000',
|
||||
cGreen = '#00FF00',
|
||||
cBlue = '#0000FF',
|
||||
cOrange = '#E3FF00',
|
||||
] = v
|
||||
palette = {
|
||||
key,
|
||||
name,
|
||||
bg,
|
||||
fg,
|
||||
text,
|
||||
link,
|
||||
cRed,
|
||||
cBlue,
|
||||
cGreen,
|
||||
cOrange,
|
||||
}
|
||||
} else {
|
||||
palette = { key, ...v }
|
||||
}
|
||||
if (!palette.key.startsWith('style.')) {
|
||||
this.bundledPalettes.push(palette)
|
||||
}
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
this.previewTheme('stock', 'v3')
|
||||
|
||||
if (window.IntersectionObserver) {
|
||||
this.intersectionObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(({ target, isIntersecting }) => {
|
||||
if (!isIntersecting) return
|
||||
const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
|
||||
this.$nextTick(() => {
|
||||
if (theme) this.previewTheme(theme.key, theme.version, theme.data)
|
||||
this.intersectionObserver = new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
entries.forEach(({ target, isIntersecting }) => {
|
||||
if (!isIntersecting) return
|
||||
const theme = this.availableStyles.find(
|
||||
(x) => x.key === target.dataset.themeKey,
|
||||
)
|
||||
this.$nextTick(() => {
|
||||
if (theme) this.previewTheme(theme.key, theme.version, theme.data)
|
||||
})
|
||||
observer.unobserve(target)
|
||||
})
|
||||
observer.unobserve(target)
|
||||
})
|
||||
}, {
|
||||
root: this.$refs.themeList
|
||||
})
|
||||
},
|
||||
{
|
||||
root: this.$refs.themeList,
|
||||
},
|
||||
)
|
||||
} else {
|
||||
this.availableStyles.forEach(theme => this.previewTheme(theme.key, theme.version, theme.data))
|
||||
this.availableStyles.forEach((theme) =>
|
||||
this.previewTheme(theme.key, theme.version, theme.data),
|
||||
)
|
||||
}
|
||||
},
|
||||
updated () {
|
||||
updated() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.themeList.querySelectorAll('.theme-preview').forEach(node => {
|
||||
this.intersectionObserver.observe(node)
|
||||
})
|
||||
this.$refs.themeList
|
||||
.querySelectorAll('.theme-preview')
|
||||
.forEach((node) => {
|
||||
this.intersectionObserver.observe(node)
|
||||
})
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
paletteDataUsed () {
|
||||
paletteDataUsed() {
|
||||
this.userPalette = this.paletteDataUsed || {}
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isDefaultBackground () {
|
||||
return !(this.$store.state.users.currentUser.background_image)
|
||||
isDefaultBackground() {
|
||||
return !this.$store.state.users.currentUser.background_image
|
||||
},
|
||||
switchInProgress () {
|
||||
switchInProgress() {
|
||||
return useInterfaceStore().themeChangeInProgress
|
||||
},
|
||||
paletteDataUsed () {
|
||||
paletteDataUsed() {
|
||||
return useInterfaceStore().paletteDataUsed
|
||||
},
|
||||
availableStyles () {
|
||||
return [
|
||||
...this.availableThemesV3,
|
||||
...this.availableThemesV2
|
||||
]
|
||||
availableStyles() {
|
||||
return [...this.availableThemesV3, ...this.availableThemesV2]
|
||||
},
|
||||
availablePalettes () {
|
||||
return [
|
||||
...this.bundledPalettes,
|
||||
...this.stylePalettes
|
||||
]
|
||||
availablePalettes() {
|
||||
return [...this.bundledPalettes, ...this.stylePalettes]
|
||||
},
|
||||
stylePalettes () {
|
||||
stylePalettes() {
|
||||
const ruleset = useInterfaceStore().styleDataUsed || []
|
||||
if (!ruleset && ruleset.length === 0) return
|
||||
const meta = ruleset.find(x => x.component === '@meta')
|
||||
const result = ruleset.filter(x => x.component.startsWith('@palette'))
|
||||
.map(x => {
|
||||
const meta = ruleset.find((x) => x.component === '@meta')
|
||||
const result = ruleset
|
||||
.filter((x) => x.component.startsWith('@palette'))
|
||||
.map((x) => {
|
||||
const { variant, directives } = x
|
||||
const {
|
||||
bg,
|
||||
|
|
@ -212,7 +250,7 @@ const AppearanceTab = {
|
|||
cBlue,
|
||||
cGreen,
|
||||
cOrange,
|
||||
wallpaper
|
||||
wallpaper,
|
||||
} = directives
|
||||
|
||||
const result = {
|
||||
|
|
@ -227,94 +265,103 @@ const AppearanceTab = {
|
|||
cBlue,
|
||||
cGreen,
|
||||
cOrange,
|
||||
wallpaper
|
||||
wallpaper,
|
||||
}
|
||||
return Object.fromEntries(Object.entries(result).filter(([, v]) => v))
|
||||
})
|
||||
return result
|
||||
},
|
||||
noIntersectionObserver () {
|
||||
noIntersectionObserver() {
|
||||
return !window.IntersectionObserver
|
||||
},
|
||||
instanceWallpaper () {
|
||||
instanceWallpaper() {
|
||||
this.$store.state.instance.background
|
||||
},
|
||||
instanceWallpaperUsed () {
|
||||
return this.$store.state.instance.background &&
|
||||
instanceWallpaperUsed() {
|
||||
return (
|
||||
this.$store.state.instance.background &&
|
||||
!this.$store.state.users.currentUser.background_image
|
||||
)
|
||||
},
|
||||
customThemeVersion () {
|
||||
customThemeVersion() {
|
||||
const { themeVersion } = useInterfaceStore()
|
||||
return themeVersion
|
||||
},
|
||||
isCustomThemeUsed () {
|
||||
isCustomThemeUsed() {
|
||||
const { customTheme, customThemeSource } = this.mergedConfig
|
||||
return customTheme != null || customThemeSource != null
|
||||
},
|
||||
isCustomStyleUsed () {
|
||||
isCustomStyleUsed() {
|
||||
const { styleCustomData } = this.mergedConfig
|
||||
return styleCustomData != null
|
||||
},
|
||||
...SharedComputedObject()
|
||||
...SharedComputedObject(),
|
||||
},
|
||||
methods: {
|
||||
importFile () {
|
||||
importFile() {
|
||||
this.fileImporter.importData()
|
||||
},
|
||||
importParser (file, filename) {
|
||||
importParser(file, filename) {
|
||||
if (filename.endsWith('.json')) {
|
||||
return JSON.parse(file)
|
||||
} else if (filename.endsWith('.iss')) {
|
||||
return deserialize(file)
|
||||
}
|
||||
},
|
||||
onImport (parsed, filename) {
|
||||
onImport(parsed, filename) {
|
||||
if (filename.endsWith('.json')) {
|
||||
useInterfaceStore().setThemeCustom(parsed.source || parsed.theme)
|
||||
} else if (filename.endsWith('.iss')) {
|
||||
useInterfaceStore().setStyleCustom(parsed)
|
||||
}
|
||||
},
|
||||
onImportFailure (result) {
|
||||
onImportFailure(result) {
|
||||
console.error('Failure importing theme:', result)
|
||||
useInterfaceStore().pushGlobalNotice({ messageKey: 'settings.invalid_theme_imported', level: 'error' })
|
||||
useInterfaceStore().pushGlobalNotice({
|
||||
messageKey: 'settings.invalid_theme_imported',
|
||||
level: 'error',
|
||||
})
|
||||
},
|
||||
importValidator (parsed, filename) {
|
||||
importValidator(parsed, filename) {
|
||||
if (filename.endsWith('.json')) {
|
||||
const version = parsed._pleroma_theme_version
|
||||
return version >= 1 || version <= 2
|
||||
} else if (filename.endsWith('.iss')) {
|
||||
if (!Array.isArray(parsed)) return false
|
||||
if (parsed.length < 1) return false
|
||||
if (parsed.find(x => x.component === '@meta') == null) return false
|
||||
if (parsed.find((x) => x.component === '@meta') == null) return false
|
||||
return true
|
||||
}
|
||||
},
|
||||
isThemeActive (key) {
|
||||
return key === (this.mergedConfig.theme || this.$store.state.instance.theme)
|
||||
isThemeActive(key) {
|
||||
return (
|
||||
key === (this.mergedConfig.theme || this.$store.state.instance.theme)
|
||||
)
|
||||
},
|
||||
isStyleActive (key) {
|
||||
return key === (this.mergedConfig.style || this.$store.state.instance.style)
|
||||
isStyleActive(key) {
|
||||
return (
|
||||
key === (this.mergedConfig.style || this.$store.state.instance.style)
|
||||
)
|
||||
},
|
||||
isPaletteActive (key) {
|
||||
return key === (this.mergedConfig.palette || this.$store.state.instance.palette)
|
||||
isPaletteActive(key) {
|
||||
return (
|
||||
key ===
|
||||
(this.mergedConfig.palette || this.$store.state.instance.palette)
|
||||
)
|
||||
},
|
||||
...mapActions(useInterfaceStore, [
|
||||
'setStyle',
|
||||
'setTheme'
|
||||
]),
|
||||
setPalette (name, data) {
|
||||
...mapActions(useInterfaceStore, ['setStyle', 'setTheme']),
|
||||
setPalette(name, data) {
|
||||
useInterfaceStore().setPalette(name)
|
||||
this.userPalette = data
|
||||
},
|
||||
setPaletteCustom (data) {
|
||||
setPaletteCustom(data) {
|
||||
useInterfaceStore().setPaletteCustom(data)
|
||||
this.userPalette = data
|
||||
},
|
||||
resetTheming () {
|
||||
resetTheming() {
|
||||
useInterfaceStore().setStyle('stock')
|
||||
},
|
||||
previewTheme (key, version, input) {
|
||||
previewTheme(key, version, input) {
|
||||
let theme3
|
||||
if (this.compilationCache[key]) {
|
||||
theme3 = this.compilationCache[key]
|
||||
|
|
@ -327,10 +374,10 @@ const AppearanceTab = {
|
|||
ultimateBackgroundColor: '#000000',
|
||||
liteMode: true,
|
||||
debug: true,
|
||||
onlyNormalState: true
|
||||
onlyNormalState: true,
|
||||
})
|
||||
} else if (version === 'v3') {
|
||||
const palette = input.find(x => x.component === '@palette')
|
||||
const palette = input.find((x) => x.component === '@palette')
|
||||
let paletteRule
|
||||
if (palette) {
|
||||
const { directives } = palette
|
||||
|
|
@ -339,21 +386,20 @@ const AppearanceTab = {
|
|||
paletteRule = {
|
||||
component: 'Root',
|
||||
directives: Object.fromEntries(
|
||||
Object
|
||||
.entries(directives)
|
||||
Object.entries(directives)
|
||||
.filter(([k]) => k && k !== 'name')
|
||||
.map(([k, v]) => ['--' + k, 'color | ' + v])
|
||||
)
|
||||
.map(([k, v]) => ['--' + k, 'color | ' + v]),
|
||||
),
|
||||
}
|
||||
} else {
|
||||
paletteRule = null
|
||||
}
|
||||
|
||||
theme3 = init({
|
||||
inputRuleset: [...input, paletteRule].filter(x => x),
|
||||
inputRuleset: [...input, paletteRule].filter((x) => x),
|
||||
ultimateBackgroundColor: '#000000',
|
||||
liteMode: true,
|
||||
onlyNormalState: true
|
||||
onlyNormalState: true,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
|
|
@ -361,7 +407,7 @@ const AppearanceTab = {
|
|||
inputRuleset: [],
|
||||
ultimateBackgroundColor: '#000000',
|
||||
liteMode: true,
|
||||
onlyNormalState: true
|
||||
onlyNormalState: true,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -369,22 +415,29 @@ const AppearanceTab = {
|
|||
this.compilationCache[key] = theme3
|
||||
}
|
||||
|
||||
|
||||
const sheet = createStyleSheet('appearance-tab-previews', 90)
|
||||
sheet.addRule([
|
||||
'#theme-preview-', key, ' {\n',
|
||||
getCssRules(theme3.eager).join('\n'),
|
||||
'\n}'
|
||||
].join(''))
|
||||
sheet.addRule(
|
||||
[
|
||||
'#theme-preview-',
|
||||
key,
|
||||
' {\n',
|
||||
getCssRules(theme3.eager).join('\n'),
|
||||
'\n}',
|
||||
].join(''),
|
||||
)
|
||||
sheet.ready = true
|
||||
adoptStyleSheets()
|
||||
},
|
||||
uploadFile (slot, e) {
|
||||
uploadFile(slot, e) {
|
||||
const file = e.target.files[0]
|
||||
if (!file) { return }
|
||||
if (!file) {
|
||||
return
|
||||
}
|
||||
if (file.size > this.$store.state.instance[slot + 'limit']) {
|
||||
const filesize = fileSizeFormatService.fileSizeFormat(file.size)
|
||||
const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
|
||||
const allowedsize = fileSizeFormatService.fileSizeFormat(
|
||||
this.$store.state.instance[slot + 'limit'],
|
||||
)
|
||||
useInterfaceStore().pushGlobalNotice({
|
||||
messageKey: 'upload.error.message',
|
||||
messageArgs: [
|
||||
|
|
@ -392,10 +445,10 @@ const AppearanceTab = {
|
|||
filesize: filesize.num,
|
||||
filesizeunit: filesize.unit,
|
||||
allowedsize: allowedsize.num,
|
||||
allowedsizeunit: allowedsize.unit
|
||||
})
|
||||
allowedsizeunit: allowedsize.unit,
|
||||
}),
|
||||
],
|
||||
level: 'error'
|
||||
level: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
|
@ -408,29 +461,36 @@ const AppearanceTab = {
|
|||
}
|
||||
reader.readAsDataURL(file)
|
||||
},
|
||||
resetBackground () {
|
||||
const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
|
||||
resetBackground() {
|
||||
const confirmed = window.confirm(
|
||||
this.$t('settings.reset_background_confirm'),
|
||||
)
|
||||
if (confirmed) {
|
||||
this.submitBackground('')
|
||||
}
|
||||
},
|
||||
resetUploadedBackground () {
|
||||
resetUploadedBackground() {
|
||||
this.backgroundPreview = null
|
||||
},
|
||||
submitBackground (background) {
|
||||
if (!this.backgroundPreview && background !== '') { return }
|
||||
submitBackground(background) {
|
||||
if (!this.backgroundPreview && background !== '') {
|
||||
return
|
||||
}
|
||||
|
||||
this.backgroundUploading = true
|
||||
this.$store.state.api.backendInteractor.updateProfileImages({ background })
|
||||
this.$store.state.api.backendInteractor
|
||||
.updateProfileImages({ background })
|
||||
.then((data) => {
|
||||
this.$store.commit('addNewUsers', [data])
|
||||
this.$store.commit('setCurrentUser', data)
|
||||
this.backgroundPreview = null
|
||||
})
|
||||
.catch(this.displayUploadError)
|
||||
.finally(() => { this.backgroundUploading = false })
|
||||
.finally(() => {
|
||||
this.backgroundUploading = false
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default AppearanceTab
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue