layout improvements

This commit is contained in:
Henry Jameson 2024-11-14 19:18:10 +02:00
parent b21133ee12
commit 4c68009ae0
2 changed files with 62 additions and 51 deletions

View file

@ -69,60 +69,71 @@
</h4> </h4>
</button> </button>
</ul> </ul>
<h3>{{ $t('settings.style.themes3.palette.label') }}</h3> <div class="import-file-container">
<div class="palettes"> <button
<template v-if="customThemeVersion === 'v3'"> class="btn button-default"
<h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4> @click="importFile"
<button >
v-for="p in bundledPalettes" <FAIcon icon="folder-open" />
:key="p.name" {{ $t('settings.style.themes3.editor.load_style') }}
class="btn button-default palette-entry" </button>
:class="{ toggled: isPaletteActive(p.key) }" </div>
@click="() => setPalette(p.key)" <div class="setting-item">
> <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
<label> <div class="palettes">
{{ p.name }} <template v-if="customThemeVersion === 'v3'">
</label> <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
<span <button
v-for="c in palettesKeys" v-for="p in bundledPalettes"
:key="c" :key="p.name"
class="palette-square" class="btn button-default palette-entry"
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }" :class="{ toggled: isPaletteActive(p.key) }"
/> @click="() => setPalette(p.key)"
</button> >
<h4 v-if="stylePalettes?.length > 0"> <label>
{{ $t('settings.style.themes3.palette.style') }} {{ p.name }}
</h4> </label>
<button <span
v-for="p in stylePalettes || []" v-for="c in palettesKeys"
:key="p.name" :key="c"
class="btn button-default palette-entry" class="palette-square"
:class="{ toggled: isPaletteActive(p.key) }" :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
@click="() => setPaletteCustom(p)" />
> </button>
<label> <h4 v-if="stylePalettes?.length > 0">
{{ p.name }} {{ $t('settings.style.themes3.palette.style') }}
</label> </h4>
<span <button
v-for="c in palettesKeys" v-for="p in stylePalettes || []"
:key="c" :key="p.name"
class="palette-square" class="btn button-default palette-entry"
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }" :class="{ toggled: isPaletteActive(p.key) }"
/> @click="() => setPaletteCustom(p)"
</button> >
</template> <label>
<template v-else-if="customThemeVersion === 'v2'"> {{ p.name }}
<div class="alert neutral theme-notice unsupported-theme-v2"> </label>
{{ $t('settings.style.themes3.palette.v2_unsupported') }} <span
</div> v-for="c in palettesKeys"
</template> :key="c"
class="palette-square"
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
/>
</button>
</template>
<template v-else-if="customThemeVersion === 'v2'">
<div class="alert neutral theme-notice unsupported-theme-v2">
{{ $t('settings.style.themes3.palette.v2_unsupported') }}
</div>
</template>
</div>
</div> </div>
</div>
<div class="alert neutral theme-notice">
{{ $t("settings.style.appearance_tab_note") }}
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.scale_and_layout') }}</h2> <h2>{{ $t('settings.scale_and_layout') }}</h2>
<div class="alert neutral theme-notice">
{{ $t("settings.style.appearance_tab_note") }}
</div>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<UnitSetting <UnitSetting

View file

@ -778,7 +778,7 @@
"editor": { "editor": {
"title": "Style", "title": "Style",
"reset_style": "Reset", "reset_style": "Reset",
"load_style": "Open", "load_style": "Open from file",
"save_style": "Save", "save_style": "Save",
"style_name": "Stylesheet name", "style_name": "Stylesheet name",
"style_author": "Made by", "style_author": "Made by",