qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

style/layout improvements

Browse source
This commit is contained in:
Henry Jameson 2024-11-14 17:25:58 +02:00
parent 86585cc644
commit 8901552112
6 changed files with 143 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/settings_modal/settings_modal_user_content.scss
View file

@ -1,6 +1,21 @@
.settings_tab-switcher { .settings_tab-switcher {
height: 100%; 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 { .setting-item {
border-bottom: 2px solid var(--border); border-bottom: 2px solid var(--border);
margin: 1em 1em 1.4em; margin: 1em 1em 1.4em;

2
src/components/settings_modal/tabs/appearance_tab.vue
View file

@ -3,7 +3,7 @@
class="appearance-tab" class="appearance-tab"
:label="$t('settings.general')" :label="$t('settings.general')"
> >
<div class="setting-item heading"> <div class="setting-item">
<h2>{{ $t('settings.theme') }}</h2> <h2>{{ $t('settings.theme') }}</h2>
<button <button
class="btn button-default" class="btn button-default"

8
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -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 { useStore } from 'vuex'
import { get, set, unset, throttle } from 'lodash' import { get, set, unset, throttle } from 'lodash'
@ -84,6 +84,12 @@ export default {
// All rules that are made by editor // All rules that are made by editor
const allEditedRules = reactive({}) const allEditedRules = reactive({})
exports.isActive = computed(() => {
const tabSwitcher = getCurrentInstance().parent.ctx
console.log('TABSW', tabSwitcher)
return tabSwitcher ? tabSwitcher.isActive('style') : false
})
// ## Meta stuff // ## Meta stuff
exports.name = ref('') exports.name = ref('')
exports.author = ref('') exports.author = ref('')

109
src/components/settings_modal/tabs/style_tab/style_tab.scss
View file

@ -48,6 +48,42 @@
} }
} }
.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;
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;
}
}
}
#edited-style-preview {
grid-area: preview;
}
}
.setting-item { .setting-item {
padding-bottom: 0; padding-bottom: 0;
@ -62,65 +98,6 @@
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
&.heading {
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);
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;
}
}
}
#edited-style-preview {
grid-area: preview;
}
.button-save {
grid-area: save;
}
.button-load {
grid-area: load;
}
.button-new {
grid-area: new;
}
.button-refresh {
grid-area: refresh;
}
.button-apply {
grid-area: apply;
}
}
} }
.list-editor { .list-editor {
@ -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;
}
}
}

133
src/components/settings_modal/tabs/style_tab/style_tab.vue
View file

@ -4,70 +4,75 @@
<template> <template>
<div class="StyleTab"> <div class="StyleTab">
<div class="setting-item heading"> <div class="setting-item heading">
<!-- eslint-disable vue/no-v-text-v-html-on-component --> <h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
<component <div class="meta-preview">
:is="'style'" <!-- eslint-disable vue/no-v-text-v-html-on-component -->
v-html="overallPreviewCssRules" <component
/> :is="'style'"
<!-- eslint-enable vue/no-v-text-v-html-on-component --> v-html="overallPreviewCssRules"
<Preview id="edited-style-preview" /> />
<button <!-- eslint-enable vue/no-v-text-v-html-on-component -->
class="btn button-default button-new" <Preview id="edited-style-preview" />
@click="clearTheme" <teleport
> v-if="isActive"
<FAIcon icon="file" /> to="#unscrolled-content"
{{ $t('settings.style.themes3.editor.new_style') }} >
</button> <div class="style-actions-container">
<button <div class="style-actions">
class="btn button-default button-load" <button
@click="importStyle" class="btn button-default button-new"
> @click="clearTheme"
<FAIcon icon="folder-open" /> >
{{ $t('settings.style.themes3.editor.load_style') }} <FAIcon icon="arrows-rotate" />
</button> {{ $t('settings.style.themes3.editor.reset_style') }}
<button </button>
class="btn button-default button-save" <button
@click="exportStyle" class="btn button-default button-load"
> @click="importStyle"
<FAIcon icon="floppy-disk" /> >
{{ $t('settings.style.themes3.editor.save_style') }} <FAIcon icon="folder-open" />
</button> {{ $t('settings.style.themes3.editor.load_style') }}
<button </button>
class="btn button-default button-refresh" <button
@click="updateOverallPreview" class="btn button-default button-save"
> @click="exportStyle"
<FAIcon icon="arrows-rotate" /> >
{{ $t('settings.style.themes3.editor.refresh_preview') }} <FAIcon icon="floppy-disk" />
</button> {{ $t('settings.style.themes3.editor.save_style') }}
<button </button>
class="btn button-default button-apply" <button
@click="applyStyle" class="btn button-default button-apply"
> @click="applyStyle"
<FAIcon icon="check" /> >
{{ $t('settings.style.themes3.editor.apply_preview') }} <FAIcon icon="check" />
</button> {{ $t('settings.style.themes3.editor.apply_preview') }}
<ul class="setting-list style-metadata"> </button>
<li> </div>
<StringSetting class="meta-field" v-model="name"> </div>
{{ $t('settings.style.themes3.editor.style_name') }} </teleport>
</StringSetting> <ul class="setting-list style-metadata">
</li> <li>
<li> <StringSetting class="meta-field" v-model="name">
<StringSetting class="meta-field" v-model="author"> {{ $t('settings.style.themes3.editor.style_name') }}
{{ $t('settings.style.themes3.editor.style_author') }} </StringSetting>
</StringSetting> </li>
</li> <li>
<li> <StringSetting class="meta-field" v-model="author">
<StringSetting class="meta-field" v-model="license"> {{ $t('settings.style.themes3.editor.style_author') }}
{{ $t('settings.style.themes3.editor.style_license') }} </StringSetting>
</StringSetting> </li>
</li> <li>
<li> <StringSetting class="meta-field" v-model="license">
<StringSetting class="meta-field" v-model="website"> {{ $t('settings.style.themes3.editor.style_license') }}
{{ $t('settings.style.themes3.editor.style_website') }} </StringSetting>
</StringSetting> </li>
</li> <li>
</ul> <StringSetting class="meta-field" v-model="website">
{{ $t('settings.style.themes3.editor.style_website') }}
</StringSetting>
</li>
</ul>
</div>
</div> </div>
<tab-switcher> <tab-switcher>
<div <div

2
src/i18n/en.json
View file

@ -777,7 +777,7 @@
}, },
"editor": { "editor": {
"title": "Style", "title": "Style",
"new_style": "New", "reset_style": "Reset",
"load_style": "Open", "load_style": "Open",
"save_style": "Save", "save_style": "Save",
"style_name": "Stylesheet name", "style_name": "Stylesheet name",