feat: start implementing styles and layouts
This commit is contained in:
parent
6d5f1f0d0a
commit
5191ac7df7
SSH key fingerprint:
SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
16 changed files with 219 additions and 98 deletions
|
|
@ -2,18 +2,37 @@
|
|||
<div>
|
||||
<h1>Appearance</h1>
|
||||
|
||||
<p class="subtitle">THEMES</p>
|
||||
<h2>Themes</h2>
|
||||
<div class="themes">
|
||||
<div v-for="theme of themes" class="theme-preview-container">
|
||||
<span class="theme-preview"
|
||||
:title="theme.displayName"
|
||||
:style="{background:`linear-gradient(${theme.previewGradient})`}"
|
||||
@click="changeTheme(theme.id, theme.themeUrl)"
|
||||
>
|
||||
<span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
|
||||
{{ theme.displayName }}
|
||||
</span>
|
||||
</span>
|
||||
<p class="subtitle">STYLES</p>
|
||||
<div class="styles">
|
||||
<div v-for="style of styles" class="theme-preview-container">
|
||||
<div class="theme-instance" :title="style.displayName">
|
||||
<div class="theme-content-container">
|
||||
<span class="style-background"
|
||||
:style="{background:`linear-gradient(${style.previewGradient})`}"
|
||||
></span>
|
||||
<span class="theme-title" :style="{color:`${style.complementaryColor}`}">
|
||||
{{ style.displayName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="subtitle">LAYOUTS</p>
|
||||
<div class="layouts">
|
||||
<div v-for="layout of layouts" class="theme-preview-container">
|
||||
<div class="theme-instance" :title="layout.displayName">
|
||||
<div class="theme-content-container">
|
||||
<span class="layout-background"
|
||||
:style="{backgroundImage:`url(${layout.previewImageUrl})`}"
|
||||
></span>
|
||||
<span class="theme-title" :style="{color:`${layout.complementaryColor}`}">
|
||||
{{ layout.displayName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -36,35 +55,103 @@ import loadPreferredTheme from '~/utils/loadPreferredTheme';
|
|||
import settingSave from '~/utils/settingSave';
|
||||
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const defaultThemes = runtimeConfig.public.defaultThemes
|
||||
const baseURL = runtimeConfig.app.baseURL;
|
||||
const styleFolder = `${baseURL}themes/style`
|
||||
const layoutFolder = `${baseURL}themes/layout`
|
||||
|
||||
const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
|
||||
|
||||
const themes: Array<Theme> = []
|
||||
|
||||
interface Theme {
|
||||
id: string
|
||||
displayName: string
|
||||
previewGradient: string
|
||||
complementaryColor: string
|
||||
themeUrl: string
|
||||
cssData: string
|
||||
previewGradient?: string
|
||||
previewImageUrl?: string
|
||||
}
|
||||
|
||||
function changeTheme(id: string, url: string) {
|
||||
settingSave("selectedThemeId", id)
|
||||
loadPreferredTheme()
|
||||
}
|
||||
async function parseThemeCss(styleData: string): Promise<Theme | void> {
|
||||
const metadataMatch = styleData.match(/\/\*([\s\S]*?)\*\//);
|
||||
if (!metadataMatch) {
|
||||
alert(`Failed to fetch metadata for a theme, panicing`)
|
||||
return
|
||||
}
|
||||
|
||||
async function fetchThemes() {
|
||||
for (const theme of defaultThemes) {
|
||||
const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
|
||||
themeConfig.id = theme
|
||||
const commentContent = metadataMatch[0].trim().split("\n");
|
||||
const cssData = styleData.substring(metadataMatch[0].length).trim();
|
||||
|
||||
themes.push(themeConfig)
|
||||
let displayName: string | undefined
|
||||
let complementaryColor: string | undefined
|
||||
let previewGradient: string | undefined
|
||||
let previewImageUrl: string | undefined
|
||||
|
||||
for (const line of commentContent) {
|
||||
const line_array = line.split("=")
|
||||
if (line_array.length === 2) {
|
||||
switch (line_array[0].trim()) {
|
||||
case "displayName":
|
||||
displayName = line_array[1].trim()
|
||||
break
|
||||
case "complementaryColor":
|
||||
complementaryColor = line_array[1].trim()
|
||||
break
|
||||
case "previewGradient":
|
||||
previewGradient = line_array[1].trim()
|
||||
break
|
||||
case "previewImageUrl":
|
||||
previewImageUrl = `${layoutFolder}/${line_array[1].trim()}`
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log(displayName, complementaryColor, previewGradient, previewImageUrl, cssData)
|
||||
if (!(displayName && complementaryColor && cssData && (previewGradient || previewImageUrl))) {
|
||||
return
|
||||
}
|
||||
|
||||
return {
|
||||
displayName,
|
||||
complementaryColor,
|
||||
cssData,
|
||||
previewGradient,
|
||||
previewImageUrl,
|
||||
}
|
||||
}
|
||||
|
||||
await fetchThemes()
|
||||
async function parseThemeData(
|
||||
folder: string,
|
||||
incomingThemeList: Array<string>,
|
||||
outputThemeList: Array<Theme>) {
|
||||
for (const theme of incomingThemeList) {
|
||||
const themeData = await $fetch(`${folder}/${theme}`)
|
||||
const parsedThemeData = await parseThemeCss(themeData)
|
||||
|
||||
if (parsedThemeData) {
|
||||
outputThemeList.push(parsedThemeData)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const styles: Array<Theme> = [];
|
||||
const layouts: Array<Theme> = [];
|
||||
|
||||
const styleList: any = await $fetch(`${styleFolder}/styles.json`)
|
||||
const layoutList: any = await $fetch(`${layoutFolder}/layouts.json`)
|
||||
|
||||
if (Array.isArray(styleList)) {
|
||||
await parseThemeData(styleFolder, styleList, styles)
|
||||
}
|
||||
if (Array.isArray(layoutList)) {
|
||||
await parseThemeData(layoutFolder, layoutList, layouts)
|
||||
}
|
||||
|
||||
console.log(layouts)
|
||||
|
||||
|
||||
function changeTheme(id: string, url: string) {
|
||||
settingSave("selectedThemeStyle", id)
|
||||
loadPreferredTheme()
|
||||
}
|
||||
|
||||
async function onTimeFormatClicked(index: number) {
|
||||
let format: "auto" | "12" | "24" = "auto"
|
||||
|
|
@ -84,29 +171,68 @@ async function onTimeFormatClicked(index: number) {
|
|||
|
||||
<style scoped>
|
||||
.themes {
|
||||
--instance-size: 5em;
|
||||
}
|
||||
.styles, .layouts {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.theme-preview-container {
|
||||
margin: .5em;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
width: var(--instance-size);
|
||||
height: var(--instance-size);
|
||||
}
|
||||
|
||||
.theme-preview {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
.theme-instance {
|
||||
width: var(--instance-size);
|
||||
height: var(--instance-size);
|
||||
border-radius: 100%;
|
||||
border: .1em solid var(--primary-color);
|
||||
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-content-container {
|
||||
position: relative;
|
||||
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.style-background, .layout-background {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: var(--instance-size);
|
||||
height: var(--instance-size);
|
||||
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.layout-background {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
filter: brightness(35%);
|
||||
}
|
||||
|
||||
.theme-title {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
font-size: .8em;
|
||||
line-height: 5em; /* same height as the parent to centre it vertically */
|
||||
/* i CANNOT explain this line height calculation, but it works for a font size of .8em no matter what size the instances are */
|
||||
line-height: calc(var(--instance-size) * 1.25);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue