Compare commits
No commits in common. "f77c2bef5f32b2e827da95d5dcd2c66ca4e747d4" and "f2db3818179406b7ecad416f21f43e2525dd941d" have entirely different histories.
f77c2bef5f
...
f2db381817
22 changed files with 135 additions and 215 deletions
|
|
@ -1,27 +1,18 @@
|
|||
.color-input {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 10em;
|
||||
|
||||
&.-compact {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1 1 auto;
|
||||
grid-area: label;
|
||||
}
|
||||
|
||||
.opt {
|
||||
grid-area: checkbox;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
&-field.input {
|
||||
flex: 1 1 10em;
|
||||
max-width: 10em;
|
||||
grid-area: input;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex: 0 0 0;
|
||||
max-width: 9em;
|
||||
align-items: stretch;
|
||||
|
||||
input {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
class="color-input style-control"
|
||||
:class="{ disabled: !present || disabled, '-compact': compact }"
|
||||
:class="{ disabled: !present || disabled }"
|
||||
>
|
||||
<label
|
||||
:for="name"
|
||||
|
|
@ -127,10 +127,6 @@ export default {
|
|||
required: false,
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
compact: {
|
||||
required: false,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
|
|
|
|||
|
|
@ -104,7 +104,6 @@
|
|||
v-model="colorOverride"
|
||||
class="input-color-input"
|
||||
fallback="#606060"
|
||||
:compact="true"
|
||||
:label="$t('settings.style.shadows.color_override')"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
class="label"
|
||||
:class="{ faint: !present || disabled }"
|
||||
>
|
||||
{{ label || $t('settings.style.themes3.editor.opacity') }}
|
||||
{{ label }}
|
||||
</label>
|
||||
<Checkbox
|
||||
v-if="typeof fallback !== 'undefined'"
|
||||
|
|
|
|||
|
|
@ -1,52 +1,44 @@
|
|||
<template>
|
||||
<div
|
||||
class="PaletteEditor"
|
||||
:class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }"
|
||||
:class="{ '-compact': compact, '-apply': apply }"
|
||||
>
|
||||
<div class="palette">
|
||||
<ColorInput
|
||||
v-for="key in paletteKeys"
|
||||
:key="key"
|
||||
:name="key"
|
||||
:model-value="props.modelValue[key]"
|
||||
:fallback="fallback(key)"
|
||||
:label="$t('settings.style.themes3.palette.' + key)"
|
||||
@update:model-value="value => updatePalette(key, value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button
|
||||
class="btn button-default palette-import-button"
|
||||
@click="importPalette"
|
||||
>
|
||||
<FAIcon icon="file-import" />
|
||||
{{ $t('settings.style.themes3.palette.import') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn button-default palette-export-button"
|
||||
@click="exportPalette"
|
||||
>
|
||||
<FAIcon icon="file-export" />
|
||||
{{ $t('settings.style.themes3.palette.export') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button
|
||||
v-if="apply"
|
||||
class="btn button-default palette-apply-button"
|
||||
:disabled="disabled"
|
||||
:class="{ disabled }"
|
||||
@click="applyPalette"
|
||||
>
|
||||
{{ $t('settings.style.themes3.palette.apply') }}
|
||||
</button>
|
||||
</div>
|
||||
<ColorInput
|
||||
v-for="key in paletteKeys"
|
||||
:key="key"
|
||||
:name="key"
|
||||
:model-value="props.modelValue[key]"
|
||||
:fallback="fallback(key)"
|
||||
:label="$t('settings.style.themes3.palette.' + key)"
|
||||
@update:model-value="value => updatePalette(key, value)"
|
||||
/>
|
||||
<button
|
||||
class="btn button-default palette-import-button"
|
||||
@click="importPalette"
|
||||
>
|
||||
<FAIcon icon="file-import" />
|
||||
{{ $t('settings.style.themes3.palette.import') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn button-default palette-export-button"
|
||||
@click="exportPalette"
|
||||
>
|
||||
<FAIcon icon="file-export" />
|
||||
{{ $t('settings.style.themes3.palette.export') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="apply"
|
||||
class="btn button-default palette-apply-button"
|
||||
:disabled="disabled"
|
||||
:class="{ disabled }"
|
||||
@click="applyPalette"
|
||||
>
|
||||
{{ $t('settings.style.themes3.palette.apply') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import ColorInput from 'src/components/color_input/color_input.vue'
|
||||
import {
|
||||
newImporter,
|
||||
|
|
@ -59,8 +51,6 @@ import {
|
|||
faFileExport
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
import { useInterfaceStore } from 'src/stores/interface'
|
||||
|
||||
library.add(
|
||||
faFileImport,
|
||||
faFileExport
|
||||
|
|
@ -114,10 +104,6 @@ const applyPalette = () => {
|
|||
emit('applyPalette', getExportedObject())
|
||||
}
|
||||
|
||||
const mobile = computed(() => {
|
||||
return useInterfaceStore().layoutType === 'mobile'
|
||||
})
|
||||
|
||||
const fallback = (key) => {
|
||||
if (key === 'accent') {
|
||||
return props.modelValue.link
|
||||
|
|
@ -143,28 +129,13 @@ const updatePalette = (paletteKey, value) => {
|
|||
|
||||
<style lang="scss">
|
||||
.PaletteEditor {
|
||||
display: grid;
|
||||
justify-content: space-around;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(5, 1fr) auto;
|
||||
grid-gap: 0.5em;
|
||||
align-items: baseline;
|
||||
|
||||
.buttons {
|
||||
margin-top: 0.5em;
|
||||
display: grid;
|
||||
gap: 0.5em
|
||||
}
|
||||
|
||||
.palette {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-auto-flow: row;
|
||||
grid-auto-rows: auto;
|
||||
grid-template-columns: repeat(auto-fill, 10em);
|
||||
grid-gap: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.palette-import-button {
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
|
@ -200,21 +171,23 @@ const updatePalette = (paletteKey, value) => {
|
|||
grid-column: 1 / span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.-mobile {
|
||||
&.-apply {
|
||||
.palette-apply-button {
|
||||
grid-column: 1 / span 2;
|
||||
.-mobile & {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(10, 1fr) auto;
|
||||
|
||||
.palette-import-button {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.color-input {
|
||||
display: grid;
|
||||
gap: 0.5em;
|
||||
.palette-export-button {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
label {
|
||||
flex: 1;
|
||||
&.-apply {
|
||||
.palette-apply-button {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -128,6 +128,7 @@ export default {
|
|||
const props = slot.props
|
||||
if (!props) return
|
||||
const active = this.activeIndex === index
|
||||
const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
|
||||
|
||||
let delayRender = slot.props['delay-render']
|
||||
if (delayRender && active) {
|
||||
|
|
@ -156,7 +157,6 @@ export default {
|
|||
</h2>
|
||||
)
|
||||
|
||||
const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
|
||||
const contentClasses = ['tab-content']
|
||||
if (props['full-width']) {
|
||||
contentClasses.push('-full-width')
|
||||
|
|
|
|||
|
|
@ -118,15 +118,11 @@
|
|||
.option-list {
|
||||
padding-left: 0.25em;
|
||||
|
||||
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
// it makes no sense
|
||||
> li {
|
||||
margin: 1em 0;
|
||||
line-height: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* stylelint-enable no-descending-specificity */
|
||||
|
||||
&.two-column {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
.palette,
|
||||
.theme-notice {
|
||||
padding: 0.5em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.theme-name {
|
||||
|
|
@ -13,6 +14,7 @@
|
|||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
input[type="file"] {
|
||||
padding: 0.25em;
|
||||
height: auto;
|
||||
|
|
@ -59,7 +61,7 @@
|
|||
scrollbar-gutter: stable;
|
||||
border-radius: var(--roundness);
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 0.5em;
|
||||
margin: -0.5em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -75,6 +75,8 @@
|
|||
<FAIcon icon="folder-open" />
|
||||
{{ $t('settings.style.themes3.editor.load_style') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h4>{{ $t('settings.style.themes3.palette.label') }}</h4>
|
||||
<div
|
||||
v-if="customThemeVersion === 'v3'"
|
||||
|
|
|
|||
|
|
@ -4,22 +4,32 @@
|
|||
<h3>{{ $t('settings.interface') }}</h3>
|
||||
<ul class="setting-list">
|
||||
<li>
|
||||
<BooleanSetting path="alwaysShowSubjectInput">
|
||||
<BooleanSetting
|
||||
path="alwaysShowSubjectInput"
|
||||
expert="1"
|
||||
>
|
||||
{{ $t('settings.subject_input_always_show') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting path="minimalScopesMode">
|
||||
<BooleanSetting
|
||||
path="minimalScopesMode"
|
||||
expert="1"
|
||||
>
|
||||
{{ $t('settings.minimal_scopes_mode') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting path="hidePostStats">
|
||||
<BooleanSetting
|
||||
expert="1"
|
||||
path="hidePostStats"
|
||||
>
|
||||
{{ $t('settings.hide_post_stats') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting
|
||||
expert="1"
|
||||
path="hideUserStats"
|
||||
>
|
||||
{{ $t('settings.hide_user_stats') }}
|
||||
|
|
@ -41,6 +51,7 @@
|
|||
path="hideScrobblesAfter"
|
||||
:units="['m', 'h', 'd']"
|
||||
unit-set="time"
|
||||
expert="1"
|
||||
>
|
||||
{{ $t('settings.hide_scrobbles_after') }}
|
||||
</UnitSetting>
|
||||
|
|
@ -53,6 +64,7 @@
|
|||
<li>
|
||||
<IntegerSetting
|
||||
path="maxThumbnails"
|
||||
expert="1"
|
||||
:min="0"
|
||||
>
|
||||
{{ $t('settings.max_thumbnails') }}
|
||||
|
|
@ -69,13 +81,17 @@
|
|||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting path="userCardHidePersonalMarks">
|
||||
<BooleanSetting
|
||||
path="userCardHidePersonalMarks"
|
||||
expert="1"
|
||||
>
|
||||
{{ $t('settings.user_card_hide_personal_marks') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li v-if="instanceShoutboxPresent">
|
||||
<BooleanSetting
|
||||
path="hideShoutbox"
|
||||
expert="1"
|
||||
>
|
||||
{{ $t('settings.hide_shoutbox') }}
|
||||
</BooleanSetting>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@
|
|||
id="unsavedPostAction"
|
||||
path="unsavedPostAction"
|
||||
:options="unsavedPostActionOptions"
|
||||
expert="1"
|
||||
>
|
||||
{{ $t('settings.unsaved_post_action') }}
|
||||
</ChoiceSetting>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,11 @@
|
|||
.data-import-export-tab {
|
||||
h3 {
|
||||
margin-right: -2em;
|
||||
}
|
||||
|
||||
.importer-exporter {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
table {
|
||||
td, th {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,22 +56,8 @@
|
|||
</li>
|
||||
</ul>
|
||||
<h3>{{ $t('settings.account_backup') }}</h3>
|
||||
<div class="setting-list">
|
||||
<p>{{ $t('settings.account_backup_description') }}</p>
|
||||
<button
|
||||
class="btn button-default"
|
||||
@click="addBackup"
|
||||
>
|
||||
{{ $t('settings.add_backup') }}
|
||||
</button>
|
||||
<p v-if="addedBackup">
|
||||
{{ $t('settings.added_backup') }}
|
||||
</p>
|
||||
<template v-if="addBackupError !== false">
|
||||
<p>{{ $t('settings.add_backup_error', { error: addBackupError }) }}</p>
|
||||
</template>
|
||||
</div>
|
||||
<table class="setting-list">
|
||||
<p>{{ $t('settings.account_backup_description') }}</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('settings.account_backup_table_head') }}</th>
|
||||
|
|
@ -126,6 +112,18 @@
|
|||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="btn button-default"
|
||||
@click="addBackup"
|
||||
>
|
||||
{{ $t('settings.add_backup') }}
|
||||
</button>
|
||||
<p v-if="addedBackup">
|
||||
{{ $t('settings.added_backup') }}
|
||||
</p>
|
||||
<template v-if="addBackupError !== false">
|
||||
<p>{{ $t('settings.add_backup_error', { error: addBackupError }) }}</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ const GeneralTab = {
|
|||
postFormats () {
|
||||
return this.$store.state.instance.postFormats || []
|
||||
},
|
||||
instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
|
||||
columns () {
|
||||
const mode = this.$store.getters.mergedConfig.thirdColumnMode
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,10 @@
|
|||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting path="userCardLeftJustify">
|
||||
<BooleanSetting
|
||||
path="userCardLeftJustify"
|
||||
expert="1"
|
||||
>
|
||||
{{ $t('settings.user_card_left_justify') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import BooleanSetting from '../helpers/boolean_setting.vue'
|
||||
import ChoiceSetting from '../helpers/choice_setting.vue'
|
||||
import IntegerSetting from '../helpers/integer_setting.vue'
|
||||
import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
|
||||
import FontControl from 'src/components/font_control/font_control.vue'
|
||||
|
||||
|
|
@ -52,7 +51,6 @@ const GeneralTab = {
|
|||
components: {
|
||||
BooleanSetting,
|
||||
ChoiceSetting,
|
||||
IntegerSetting,
|
||||
FontControl,
|
||||
ProfileSettingIndicator
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,13 +2,14 @@
|
|||
min-width: var(--themeEditorMinWidth, fit-content);
|
||||
|
||||
.style-control {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
flex: 1 1 auto;
|
||||
flex: 1 1 0;
|
||||
line-height: 2;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
|
@ -17,6 +18,10 @@
|
|||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.color-input {
|
||||
flex: 0 0 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
min-width: 3em;
|
||||
|
|
@ -45,24 +50,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
.setting-item.heading {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.meta-preview {
|
||||
display: grid;
|
||||
grid-template:
|
||||
"meta preview";
|
||||
grid-gap: 1em;
|
||||
grid-template-columns: min-content 6fr;
|
||||
|
||||
.theme-preview-container {
|
||||
margin: 0;
|
||||
}
|
||||
"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 {
|
||||
|
|
@ -112,7 +114,6 @@
|
|||
|
||||
.list-edit-area {
|
||||
grid-area: editor;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.list-select {
|
||||
|
|
@ -133,6 +134,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
.palette-editor {
|
||||
width: min-content;
|
||||
|
||||
.list-edit-area {
|
||||
display: grid;
|
||||
align-self: baseline;
|
||||
grid-template-rows: subgrid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.palette-editor-single {
|
||||
grid-row: 2 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.variables-editor {
|
||||
.variable-selector {
|
||||
display: grid;
|
||||
|
|
@ -233,46 +249,6 @@
|
|||
justify-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.-mobile & {
|
||||
.meta-preview {
|
||||
grid-template:
|
||||
"meta"
|
||||
"preview"
|
||||
}
|
||||
|
||||
.list-editor {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"label"
|
||||
"selector"
|
||||
"movement"
|
||||
"editor"
|
||||
"editor"
|
||||
"editor"
|
||||
"editor";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
.component-editor {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"component"
|
||||
"variant"
|
||||
"state"
|
||||
"preview"
|
||||
"settings";
|
||||
}
|
||||
|
||||
.variable-selector {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-auto-flow: row;
|
||||
grid-gap: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extra-content {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<template>
|
||||
<div class="StyleTab">
|
||||
<div class="setting-item heading">
|
||||
<h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
|
||||
<div class="meta-preview">
|
||||
<Preview id="edited-style-preview" />
|
||||
<teleport
|
||||
|
|
@ -84,7 +85,6 @@
|
|||
key="component"
|
||||
class="setting-item component-editor"
|
||||
:label="$t('settings.style.themes3.editor.component_tab')"
|
||||
:full-width="true"
|
||||
>
|
||||
<div class="component-selector">
|
||||
<label for="component-selector">
|
||||
|
|
@ -332,7 +332,6 @@
|
|||
key="palette"
|
||||
:label="$t('settings.style.themes3.editor.palette_tab')"
|
||||
class="setting-item list-editor palette-editor"
|
||||
:full-width="true"
|
||||
>
|
||||
<label
|
||||
class="list-select-label"
|
||||
|
|
@ -380,7 +379,6 @@
|
|||
key="variables"
|
||||
:label="$t('settings.style.themes3.editor.variables_tab')"
|
||||
:model-value="virtualDirectives"
|
||||
:full-width="true"
|
||||
@update:model-value="updateVirtualDirectives"
|
||||
/>
|
||||
</tab-switcher>
|
||||
|
|
|
|||
|
|
@ -6,10 +6,6 @@
|
|||
grid-gap: 0.5em;
|
||||
justify-content: stretch;
|
||||
|
||||
.style-control {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.-compact {
|
||||
grid-template-columns: 10em 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
|
|
@ -114,6 +110,7 @@
|
|||
|
||||
.shadow-preview {
|
||||
grid-area: preview;
|
||||
min-width: 25em;
|
||||
margin-left: 0.125em;
|
||||
place-self: start center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -168,7 +168,6 @@
|
|||
:disabled="disabled || !present"
|
||||
:label="$t('settings.style.common.color')"
|
||||
:fallback="getColorFallback"
|
||||
:compact="true"
|
||||
:show-optional-checkbox="false"
|
||||
name="shadow"
|
||||
@update:model-value="e => updateProperty('color', e)"
|
||||
|
|
|
|||
|
|
@ -138,11 +138,8 @@ export default {
|
|||
if (!props) return
|
||||
const active = this.activeIndex === index
|
||||
const classes = [ active ? 'active' : 'hidden' ]
|
||||
if (props.fullHeight || props['full-height']) {
|
||||
classes.push('-full-height')
|
||||
}
|
||||
if (props.fullWidth || props['full-width']) {
|
||||
classes.push('-full-width')
|
||||
if (props.fullHeight) {
|
||||
classes.push('full-height')
|
||||
}
|
||||
let delayRender = slot.props['delay-render']
|
||||
if (delayRender && active) {
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.-full-height:not(.hidden) {
|
||||
.full-height:not(.hidden) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -70,15 +70,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.-full-width:not(.hidden) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> *:not(.mobile-label) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.scrollable-tabs {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue