gorb/frontend
4
0
Fork 0
Code Issues 15 Pull requests 7 Projects Releases Packages 1 Wiki Activity Actions

style: resolve review feedback for #63

Browse source
This commit is contained in:
Twig 2025-08-05 23:37:35 +02:00
parent 26e215ed23
commit a81fc4739a
Signed by: twig
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
1 changed files with 19 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

38
components/Settings/AppSettings/Appearance.vue
View file

@ -9,7 +9,7 @@
<div v-for="style of styles" class="theme-preview-container"> <div v-for="style of styles" class="theme-preview-container">
<span class="theme-instance" <span class="theme-instance"
:title="style.displayName" :title="style.displayName"
@click="changeTheme(StyleLayout.style, style)"> @click="changeTheme(styleLayout.style, style)">
<div class="theme-content-container"> <div class="theme-content-container">
<span class="style-background" <span class="style-background"
:style="{background:`linear-gradient(${style.previewGradient})`}" :style="{background:`linear-gradient(${style.previewGradient})`}"
@ -26,7 +26,7 @@
<div v-for="layout of layouts" class="theme-preview-container"> <div v-for="layout of layouts" class="theme-preview-container">
<div class="theme-instance" <div class="theme-instance"
:title="layout.displayName" :title="layout.displayName"
@click="changeTheme(StyleLayout.layout, layout)"> @click="changeTheme(styleLayout.layout, layout)">
<div class="theme-content-container"> <div class="theme-content-container">
<span class="layout-background" <span class="layout-background"
:style="{backgroundImage:`url(${layout.previewImageUrl})`}" :style="{backgroundImage:`url(${layout.previewImageUrl})`}"
@ -65,7 +65,7 @@ const layoutFolder = `${baseURL}themes/layout`
const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"] const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
enum StyleLayout { enum styleLayout {
style, style,
layout layout
} }
@ -88,7 +88,7 @@ async function parseTheme(url: string): Promise<Theme | void> {
const metadataMatch = styleData.match(/\/\*([\s\S]*?)\*\//); const metadataMatch = styleData.match(/\/\*([\s\S]*?)\*\//);
if (!metadataMatch) { if (!metadataMatch) {
alert(`Failed to fetch metadata for a theme, panicing`) alert(`Failed to fetch metadata for a theme, panicking`)
return return
} }
@ -101,20 +101,20 @@ async function parseTheme(url: string): Promise<Theme | void> {
let previewImageUrl: string | undefined let previewImageUrl: string | undefined
for (const line of commentContent) { for (const line of commentContent) {
const line_array = line.split("=") const lineArray = line.split("=")
if (line_array.length === 2) { if (lineArray.length === 2) {
switch (line_array[0].trim()) { switch (lineArray[0].trim()) {
case "displayName": case "displayName":
displayName = line_array[1].trim() displayName = lineArray[1].trim()
break break
case "complementaryColor": case "complementaryColor":
complementaryColor = line_array[1].trim() complementaryColor = lineArray[1].trim()
break break
case "previewGradient": case "previewGradient":
previewGradient = line_array[1].trim() previewGradient = lineArray[1].trim()
break break
case "previewImageUrl": case "previewImageUrl":
previewImageUrl = `${layoutFolder}/${line_array[1].trim()}` previewImageUrl = `${layoutFolder}/${lineArray[1].trim()}`
break break
} }
} }
@ -137,8 +137,8 @@ async function parseTheme(url: string): Promise<Theme | void> {
async function parseThemeLayout( async function parseThemeLayout(
folder: string, folder: string,
incomingThemeList: Array<string>, incomingThemeList: string[],
outputThemeList: Array<Theme>) { outputThemeList: Theme[]) {
for (const theme of incomingThemeList) { for (const theme of incomingThemeList) {
const parsedThemeData = await parseTheme(`${folder}/${theme}`) const parsedThemeData = await parseTheme(`${folder}/${theme}`)
@ -148,11 +148,11 @@ async function parseThemeLayout(
} }
} }
const styles: Array<Theme> = []; const styles: Theme[] = [];
const layouts: Array<Theme> = []; const layouts: Theme[] = [];
const styleList: any = await $fetch(`${styleFolder}/styles.json`) const styleList = await $fetch(`${styleFolder}/styles.json`)
const layoutList: any = await $fetch(`${layoutFolder}/layouts.json`) const layoutList = await $fetch(`${layoutFolder}/layouts.json`)
if (Array.isArray(styleList)) { if (Array.isArray(styleList)) {
await parseThemeLayout(styleFolder, styleList, styles) await parseThemeLayout(styleFolder, styleList, styles)
@ -161,8 +161,8 @@ if (Array.isArray(layoutList)) {
await parseThemeLayout(layoutFolder, layoutList, layouts) await parseThemeLayout(layoutFolder, layoutList, layouts)
} }
function changeTheme(themeType: StyleLayout, theme: Theme) { function changeTheme(themeType: styleLayout, theme: Theme) {
if (themeType == StyleLayout.style) { if (themeType == styleLayout.style) {
settingSave("selectedThemeStyle", theme.themeUrl) settingSave("selectedThemeStyle", theme.themeUrl)
} else { } else {
settingSave("selectedThemeLayout", theme.themeUrl) settingSave("selectedThemeLayout", theme.themeUrl)