commit: 707ed633e48047fa6b2478a3d3d8ae42a366dc8f
parent 57d84a3cc62ab3c6597fd27bfa3ab7fa16b4edfb
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Oct 2024 22:13:15 +0300
overall preview + layout changes
Diffstat:
6 files changed, 146 insertions(+), 56 deletions(-)
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
@@ -5,6 +5,7 @@
>
<label
:for="path"
+ class="setting-label"
:class="{ 'faint': shouldBeDisabled }"
>
<template v-if="backendDescriptionLabel">
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -13,9 +13,13 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import Tooltip from 'src/components/tooltip/tooltip.vue'
import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
+import Preview from '../theme_tab/theme_preview.vue'
import { init } from 'src/services/theme_data/theme_data_3.service.js'
-import { getCssRules } from 'src/services/theme_data/css_utils.js'
+import {
+ getCssRules,
+ getScopedVersion
+} from 'src/services/theme_data/css_utils.js'
import { serialize } from 'src/services/theme_data/iss_serializer.js'
import { parseShadow /* , deserialize */ } from 'src/services/theme_data/iss_deserializer.js'
import {
@@ -29,7 +33,7 @@ import {
} from 'src/services/export_import/export_import.js'
import { library } from '@fortawesome/fontawesome-svg-core'
-import { faFloppyDisk, faFolderOpen, faFile } from '@fortawesome/free-solid-svg-icons'
+import { faFloppyDisk, faFolderOpen, faFile, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
// helper for debugging
// eslint-disable-next-line no-unused-vars
@@ -41,7 +45,8 @@ const normalizeStates = (states) => ['normal', ...(states?.filter(x => x !== 'no
library.add(
faFile,
faFloppyDisk,
- faFolderOpen
+ faFolderOpen,
+ faArrowsRotate
)
export default {
@@ -57,7 +62,8 @@ export default {
ColorInput,
PaletteEditor,
OpacityInput,
- ContrastRatio
+ ContrastRatio,
+ Preview
},
setup () {
// All rules that are made by editor
@@ -549,6 +555,40 @@ export default {
value: 'foobar'
})
+ const overallPreviewRules = ref()
+ const updateOverallPreview = () => {
+ try {
+ // This normally would be handled by Root but since we pass something
+ // else we have to make do ourselves
+
+ const { name, ...rest } = selectedPalette.value
+ const paletteRule = {
+ component: 'Root',
+ directives: Object
+ .entries(rest)
+ .map(([k, v]) => ['--' + k, v])
+ .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
+ }
+
+ const rules = init({
+ inputRuleset: [
+ ...editorFriendlyToOriginal.value,
+ paletteRule
+ ],
+ ultimateBackgroundColor: '#000000',
+ liteMode: true,
+ debug: true
+ }).eager
+
+ overallPreviewRules.value = getScopedVersion(
+ getCssRules(rules),
+ '#edited-style-preview'
+ ).join('\n')
+ } catch (e) {
+ console.error('Could not compile preview theme', e)
+ }
+ }
+
// ## Export and Import
const styleExporter = newExporter({
filename: name.value || 'pleroma_theme',
@@ -628,6 +668,10 @@ export default {
previewCss,
previewClass,
+ // overall preview
+ overallPreviewRules,
+ updateOverallPreview,
+
// ## Variables
virtualDirectives,
selectedVirtualDirective,
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -65,24 +65,56 @@
&.heading {
display: grid;
- align-items: baseline;
- grid-template-columns: 1fr auto auto auto;
+ grid-template:
+ "meta meta preview"
+ "meta meta preview"
+ "meta meta preview"
+ "meta meta preview"
+ "new new preview"
+ "load save refresh";
grid-gap: 0.5em;
+ grid-template-columns: min-content min-content 6fr;
+ grid-template-rows: repeat(4, min-content) repeat(2, 2em);
+
+ ul.setting-list {
+ padding: 0;
+ margin: 0;
+ display: grid;
+ grid-template-rows: subgrid;
+ grid-area: meta;
+
+ > li {
+ margin: 0;
+ }
+
+ .meta-field {
+ margin: 0;
+
+ .setting-label {
+ display: inline-block;
+ margin-bottom: 0.5em;
+ }
+ }
+ }
- h2 {
- flex: 1 0 auto;
+ #edited-style-preview {
+ grid-area: preview;
}
- }
- &.metadata {
- display: flex;
+ .button-save {
+ grid-area: save;
+ }
- .setting-item {
- flex: 2 0 auto;
+ .button-load {
+ grid-area: load;
}
- li {
- text-align: right;
+ .button-new {
+ grid-area: new;
+ }
+
+ .button-refresh {
+ grid-area: refresh;
}
}
}
@@ -119,7 +151,9 @@
}
}
- .palettes-editor {
+ .palette-editor {
+ width: min-content;
+
.list-edit-area {
align-self: baseline;
}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -4,49 +4,59 @@
<template>
<div class="StyleTab">
<div class="setting-item heading">
- <!-- TODO: This needs to go -->
- <h2>{{ $t('settings.style.themes3.editor.title') }}</h2>
+ <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+ <component
+ :is="'style'"
+ v-html="overallPreviewRules"
+ />
+ <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+ <Preview id="edited-style-preview" />
<button
- class="btn button-default"
+ class="btn button-default button-new"
@click="clearTheme"
>
<FAIcon icon="file" />
{{ $t('settings.style.themes3.editor.new_style') }}
</button>
<button
- class="btn button-default"
+ class="btn button-default button-load"
@click="importStyle"
>
<FAIcon icon="folder-open" />
{{ $t('settings.style.themes3.editor.load_style') }}
</button>
<button
- class="btn button-default"
+ class="btn button-default button-save"
@click="exportStyle"
>
<FAIcon icon="floppy-disk" />
{{ $t('settings.style.themes3.editor.save_style') }}
</button>
- </div>
- <div class="setting-item metadata">
- <ul class="setting-list">
+ <button
+ class="btn button-default button-refresh"
+ @click="updateOverallPreview"
+ >
+ <FAIcon icon="arrows-rotate" />
+ {{ $t('settings.style.themes3.editor.refresh_preview') }}
+ </button>
+ <ul class="setting-list style-metadata">
<li>
- <StringSetting v-model="name">
+ <StringSetting class="meta-field" v-model="name">
{{ $t('settings.style.themes3.editor.style_name') }}
</StringSetting>
</li>
<li>
- <StringSetting v-model="author">
+ <StringSetting class="meta-field" v-model="author">
{{ $t('settings.style.themes3.editor.style_author') }}
</StringSetting>
</li>
<li>
- <StringSetting v-model="license">
+ <StringSetting class="meta-field" v-model="license">
{{ $t('settings.style.themes3.editor.style_license') }}
</StringSetting>
</li>
<li>
- <StringSetting v-model="website">
+ <StringSetting class="meta-field" v-model="website">
{{ $t('settings.style.themes3.editor.style_website') }}
</StringSetting>
</li>
@@ -262,34 +272,34 @@
:label="$t('settings.style.themes3.editor.palette_tab')"
class="setting-item list-editor palette-editor"
>
- <label
- class="list-select-label"
- for="palette-selector"
- >
- {{ $t('settings.style.themes3.palette.label') }}
- {{ ' ' }}
- </label>
- <Select
- id="palette-selector"
- v-model="selectedPaletteId"
- class="list-select"
- size="4"
+ <label
+ class="list-select-label"
+ for="palette-selector"
+ >
+ {{ $t('settings.style.themes3.palette.label') }}
+ {{ ' ' }}
+ </label>
+ <Select
+ id="palette-selector"
+ v-model="selectedPaletteId"
+ class="list-select"
+ size="4"
+ >
+ <option
+ v-for="(p, index) in palettes"
+ :key="p.name"
+ :value="index"
>
- <option
- v-for="(p, index) in palettes"
- :key="p.name"
- :value="index"
- >
- {{ p.name }}
- </option>
- </Select>
- <SelectMotion
- class="list-select-movement"
- v-model="palettes"
- :get-add-value="getNewPalette"
- :selected-id="selectedPaletteId"
- @update:selectedId="e => selectedPaletteId = e"
- />
+ {{ p.name }}
+ </option>
+ </Select>
+ <SelectMotion
+ class="list-select-movement"
+ v-model="palettes"
+ :get-add-value="getNewPalette"
+ :selected-id="selectedPaletteId"
+ @update:selectedId="e => selectedPaletteId = e"
+ />
<PaletteEditor
class="list-edit-area"
v-model="selectedPalette"
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
@@ -112,7 +112,7 @@
.shadow-preview {
grid-area: preview;
- min-width: 10em;
+ min-width: 25em;
margin-left: 0.125em;
align-self: start;
justify-self: center;
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -799,6 +799,7 @@
"link_color": "Link color",
"include_in_rule": "Add to rule",
"test_string": "TEST",
+ "refresh_preview": "Refresh preview",
"text_auto": {
"label": "Auto-contrast",
"no-preserve": "Black or White",
