commit: 89015521128d1c39d9977a0a9892849c2ad5bd2a
parent 86585cc64487ced2f97ac022f4416fc6a88751dc
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 14 Nov 2024 17:25:58 +0200
style/layout improvements
Diffstat:
6 files changed, 143 insertions(+), 126 deletions(-)
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
@@ -1,6 +1,21 @@
.settings_tab-switcher {
height: 100%;
+ h1 {
+ margin-bottom: 0.5em;
+ margin-top: 0.5em;
+ }
+
+ h4 {
+ margin-bottom: 0;
+ margin-top: 0.25em;
+ }
+
+ h5 {
+ margin-bottom: 0;
+ margin-top: 0.25em;
+ }
+
.setting-item {
border-bottom: 2px solid var(--border);
margin: 1em 1em 1.4em;
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -3,7 +3,7 @@
class="appearance-tab"
:label="$t('settings.general')"
>
- <div class="setting-item heading">
+ <div class="setting-item">
<h2>{{ $t('settings.theme') }}</h2>
<button
class="btn button-default"
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -1,4 +1,4 @@
-import { ref, reactive, computed, watch, watchEffect, provide } from 'vue'
+import { ref, reactive, computed, watch, watchEffect, provide, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { get, set, unset, throttle } from 'lodash'
@@ -84,6 +84,12 @@ export default {
// All rules that are made by editor
const allEditedRules = reactive({})
+ exports.isActive = computed(() => {
+ const tabSwitcher = getCurrentInstance().parent.ctx
+ console.log('TABSW', tabSwitcher)
+ return tabSwitcher ? tabSwitcher.isActive('style') : false
+ })
+
// ## Meta stuff
exports.name = ref('')
exports.author = ref('')
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -48,78 +48,55 @@
}
}
- .setting-item {
- padding-bottom: 0;
-
- .btn {
- padding: 0 0.5em;
- }
-
- &:not(:first-child) {
- margin-top: 0.5em;
- }
-
- &:not(:last-child) {
- margin-bottom: 0.5em;
- }
+ .meta-preview {
+ display: grid;
+ grid-template:
+ "meta meta preview preview"
+ "meta meta preview preview"
+ "meta meta preview preview"
+ "meta meta preview preview";
+ grid-gap: 0.5em;
+ grid-template-columns: min-content min-content 6fr max-content;
- &.heading {
+ ul.setting-list {
+ padding: 0;
+ margin: 0;
display: grid;
- grid-template:
- "meta meta preview preview"
- "meta meta preview preview"
- "meta meta preview preview"
- "meta meta preview preview"
- "new new preview preview"
- "load save refresh apply";
- grid-gap: 0.5em;
- grid-template-columns: min-content min-content 6fr max-content;
- grid-template-rows: repeat(4, min-content) repeat(2, 2em);
+ grid-template-rows: subgrid;
+ grid-area: meta;
- ul.setting-list {
- padding: 0;
+ > li {
margin: 0;
- display: grid;
- grid-template-rows: subgrid;
- grid-area: meta;
-
- > li {
- margin: 0;
- }
+ }
- .meta-field {
- margin: 0;
+ .meta-field {
+ margin: 0;
- .setting-label {
- display: inline-block;
- margin-bottom: 0.5em;
- }
+ .setting-label {
+ display: inline-block;
+ margin-bottom: 0.5em;
}
}
+ }
- #edited-style-preview {
- grid-area: preview;
- }
-
- .button-save {
- grid-area: save;
- }
+ #edited-style-preview {
+ grid-area: preview;
+ }
+ }
- .button-load {
- grid-area: load;
- }
+ .setting-item {
+ padding-bottom: 0;
- .button-new {
- grid-area: new;
- }
+ .btn {
+ padding: 0 0.5em;
+ }
- .button-refresh {
- grid-area: refresh;
- }
+ &:not(:first-child) {
+ margin-top: 0.5em;
+ }
- .button-apply {
- grid-area: apply;
- }
+ &:not(:last-child) {
+ margin-bottom: 0.5em;
}
}
@@ -271,3 +248,17 @@
}
}
}
+
+.extra-content {
+ .style-actions-container {
+ width: 100%;
+ display: flex;
+ justify-content: end;
+
+ .style-actions {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(7em, 1fr));
+ grid-gap: 0.25em;
+ }
+ }
+}
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,70 +4,75 @@
<template>
<div class="StyleTab">
<div class="setting-item heading">
- <!-- eslint-disable vue/no-v-text-v-html-on-component -->
- <component
- :is="'style'"
- v-html="overallPreviewCssRules"
- />
- <!-- eslint-enable vue/no-v-text-v-html-on-component -->
- <Preview id="edited-style-preview" />
- <button
- class="btn button-default button-new"
- @click="clearTheme"
- >
- <FAIcon icon="file" />
- {{ $t('settings.style.themes3.editor.new_style') }}
- </button>
- <button
- 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 button-save"
- @click="exportStyle"
- >
- <FAIcon icon="floppy-disk" />
- {{ $t('settings.style.themes3.editor.save_style') }}
- </button>
- <button
- class="btn button-default button-refresh"
- @click="updateOverallPreview"
- >
- <FAIcon icon="arrows-rotate" />
- {{ $t('settings.style.themes3.editor.refresh_preview') }}
- </button>
- <button
- class="btn button-default button-apply"
- @click="applyStyle"
- >
- <FAIcon icon="check" />
- {{ $t('settings.style.themes3.editor.apply_preview') }}
- </button>
- <ul class="setting-list style-metadata">
- <li>
- <StringSetting class="meta-field" v-model="name">
- {{ $t('settings.style.themes3.editor.style_name') }}
- </StringSetting>
- </li>
- <li>
- <StringSetting class="meta-field" v-model="author">
- {{ $t('settings.style.themes3.editor.style_author') }}
- </StringSetting>
- </li>
- <li>
- <StringSetting class="meta-field" v-model="license">
- {{ $t('settings.style.themes3.editor.style_license') }}
- </StringSetting>
- </li>
- <li>
- <StringSetting class="meta-field" v-model="website">
- {{ $t('settings.style.themes3.editor.style_website') }}
- </StringSetting>
- </li>
- </ul>
+ <h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
+ <div class="meta-preview">
+ <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+ <component
+ :is="'style'"
+ v-html="overallPreviewCssRules"
+ />
+ <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+ <Preview id="edited-style-preview" />
+ <teleport
+ v-if="isActive"
+ to="#unscrolled-content"
+ >
+ <div class="style-actions-container">
+ <div class="style-actions">
+ <button
+ class="btn button-default button-new"
+ @click="clearTheme"
+ >
+ <FAIcon icon="arrows-rotate" />
+ {{ $t('settings.style.themes3.editor.reset_style') }}
+ </button>
+ <button
+ 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 button-save"
+ @click="exportStyle"
+ >
+ <FAIcon icon="floppy-disk" />
+ {{ $t('settings.style.themes3.editor.save_style') }}
+ </button>
+ <button
+ class="btn button-default button-apply"
+ @click="applyStyle"
+ >
+ <FAIcon icon="check" />
+ {{ $t('settings.style.themes3.editor.apply_preview') }}
+ </button>
+ </div>
+ </div>
+ </teleport>
+ <ul class="setting-list style-metadata">
+ <li>
+ <StringSetting class="meta-field" v-model="name">
+ {{ $t('settings.style.themes3.editor.style_name') }}
+ </StringSetting>
+ </li>
+ <li>
+ <StringSetting class="meta-field" v-model="author">
+ {{ $t('settings.style.themes3.editor.style_author') }}
+ </StringSetting>
+ </li>
+ <li>
+ <StringSetting class="meta-field" v-model="license">
+ {{ $t('settings.style.themes3.editor.style_license') }}
+ </StringSetting>
+ </li>
+ <li>
+ <StringSetting class="meta-field" v-model="website">
+ {{ $t('settings.style.themes3.editor.style_website') }}
+ </StringSetting>
+ </li>
+ </ul>
+ </div>
</div>
<tab-switcher>
<div
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -777,7 +777,7 @@
},
"editor": {
"title": "Style",
- "new_style": "New",
+ "reset_style": "Reset",
"load_style": "Open",
"save_style": "Save",
"style_name": "Stylesheet name",
