Page MenuHomePhorge
Files F85650764

No OneTemporary
Actions

Size
10 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
index fb0cbd0223..f8ffc99eca 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
@@ -1,214 +1,208 @@
// eslint-disable-next-line no-unused
import { throttle } from 'lodash'
import { mapState as mapPiniaState, mapState } from 'pinia'
import { Fragment, h } from 'vue'
import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
import './vertical_tab_switcher.scss'
import { useInterfaceStore } from 'src/stores/interface.js'
const findFirstUsable = (slots) => slots.findIndex((_) => _.props)
export default {
name: 'VerticalTabSwitcher',
props: {
renderOnlyFocused: {
required: false,
type: Boolean,
default: false,
},
onSwitch: {
required: false,
type: Function,
default: undefined,
},
activeTab: {
required: false,
type: String,
default: undefined,
},
bodyScrollLock: {
required: false,
type: Boolean,
default: false,
},
- parentCollapsed: {
- required: false,
- type: Boolean,
- default: null,
- },
},
data() {
return {
active: findFirstUsable(this.slots()),
resizeHandler: null,
navSide: 'tabs',
}
},
computed: {
activeIndex() {
// In case of controlled component
if (this.activeTab) {
return this.slots().findIndex(
(slot) => slot && slot.props && this.activeTab === slot.props.key,
)
} else {
return this.active
}
},
isActive() {
return (tabName) => {
const isWanted = (slot) =>
slot.props && slot.props['data-tab-name'] === tabName
return this.$slots.default().findIndex(isWanted) === this.activeIndex
}
},
...mapPiniaState(useInterfaceStore, {
mobileLayout: (store) => store.layoutType === 'mobile',
}),
},
beforeUpdate() {
const currentSlot = this.slots()[this.active]
if (!currentSlot.props) {
this.active = findFirstUsable(this.slots())
}
},
methods: {
clickTab(index) {
return (e) => {
e.preventDefault()
this.setTab(index)
}
},
setTab(index) {
if (typeof this.onSwitch === 'function') {
this.onSwitch.call(null, this.slots()[index].key)
}
this.active = index
this.changeNavSide('content')
},
changeNavSide(side) {
if (this.navSide !== side) {
this.navSide = side
}
},
// DO NOT put it to computed, it doesn't work (caching?)
slots() {
if (this.$slots.default()[0].type === Fragment) {
return this.$slots.default()[0].children
}
return this.$slots.default()
},
},
render() {
const tabs = this.slots().map((slot, index) => {
const props = slot.props
if (!props) return
const classesTab = ['vertical-tab', 'menu-item']
if (
this.activeIndex === index &&
useInterfaceStore().layoutType !== 'mobile'
) {
classesTab.push('-active')
}
return (
<button
disabled={props.disabled}
onClick={this.clickTab(index)}
class={classesTab.join(' ')}
type="button"
role="tab"
title={props.label}
>
{!props.icon ? (
''
) : (
<FAIcon class="tab-icon" size="1x" fixed-width icon={props.icon} />
)}
<span class="text">{props.label}</span>
</button>
)
})
const contents = this.slots().map((slot, index) => {
const props = slot.props
if (!props) return
const active = this.activeIndex === index
let delayRender = slot.props['delay-render']
if (delayRender && active) {
slot.props['delay-render'] = false
delayRender = false
}
const renderSlot =
!delayRender && (!this.renderOnlyFocused || active) ? slot : ''
const headerClasses = ['tab-content-label']
const header = (
<h2 class={headerClasses}>
<button
type="button"
- class="contents"
onClick={() => this.changeNavSide('tabs')}
title={this.$t('nav.back')}
class="button-unstyled"
>
<FAIcon size="lg" class="back-button-icon" icon="chevron-left" />
</button>
{props.label}
</h2>
)
const wrapperClasses = [
'tab-content-wrapper',
active ? '-active' : '-hidden',
]
const contentClasses = ['tab-content']
if (props['full-width'] || props['full-width'] === '') {
contentClasses.push('-full-width')
wrapperClasses.push('-full-width')
}
if (props['full-height'] || props['full-width'] === '') {
contentClasses.push('-full-height')
wrapperClasses.push('-full-height')
}
return (
<div class={wrapperClasses}>
<div class="tab-mobile-header">{header}</div>
<div class="tab-slot-wrapper">
<div class={contentClasses}>{renderSlot}</div>
</div>
</div>
)
})
const rootClasses = ['vertical-tab-switcher']
if (useInterfaceStore().layoutType === 'mobile') {
rootClasses.push('-mobile')
}
if (this.navSide === 'tabs') {
rootClasses.push('-nav-tabs')
} else {
rootClasses.push('-nav-contents')
}
return (
<div ref="root" class={rootClasses.join(' ')}>
<div class="tabs" role="tablist" ref="nav">
{tabs}
</div>
<div
role="tabpanel"
v-body-scroll-lock={this.bodyScrollLock}
ref="contents"
>
{contents}
</div>
</div>
)
},
}
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index a9daa351a8..94f843871a 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -1,195 +1,194 @@
<template>
<vertical-tab-switcher
v-if="adminDescriptionsLoaded && (noDb || adminDbLoaded)"
ref="tabSwitcher"
class="settings-admin-content settings_tab-switcher"
:side-tab-bar="true"
:scrollable-tabs="true"
- :child-collapsed="false"
:render-only-focused="true"
:body-scroll-lock="bodyLock"
>
<div
v-if="noDb"
:label="$t('admin_dash.tabs.nodb')"
icon="exclamation-triangle"
data-tab-name="nodb-notice"
>
<div :label="$t('admin_dash.tabs.nodb')">
<div class="setting-section">
<h2>{{ $t('admin_dash.nodb.heading') }}</h2>
<i18n-t
scope="global"
keypath="admin_dash.nodb.text"
>
<template #documentation>
<a
href="https://docs-develop.pleroma.social/backend/configuration/howto_database_config/"
target="_blank"
>
{{ $t("admin_dash.nodb.documentation") }}
</a>
</template>
<template #property>
<code>config :pleroma, configurable_from_database</code>
</template>
<template #value>
<code>true</code>
</template>
</i18n-t>
<p>{{ $t('admin_dash.nodb.text2') }}</p>
</div>
</div>
</div>
<div
v-if="adminDbLoaded"
:label="$t('admin_dash.tabs.instance')"
icon="wrench"
data-tab-name="general"
>
<InstanceTab />
</div>
<div
:label="$t('admin_dash.tabs.registrations')"
icon="door-open"
data-tab-name="registrations"
>
<RegistrationsTab />
</div>
<div
:label="$t('admin_dash.tabs.auth')"
icon="key"
data-tab-name="monitoring"
>
<AuthTab />
</div>
<div
:label="$t('admin_dash.tabs.emoji')"
icon="face-smile-beam"
data-tab-name="emoji"
full-width
>
<EmojiTab />
</div>
<div
:label="$t('admin_dash.tabs.frontends')"
icon="laptop-code"
data-tab-name="frontends"
full-width
>
<FrontendsTab />
</div>
<div
v-if="adminDbLoaded"
:label="$t('admin_dash.tabs.limits')"
icon="hand"
data-tab-name="limits"
>
<LimitsTab />
</div>
<div
v-if="adminDbLoaded"
:label="$t('admin_dash.tabs.rate_limit')"
icon="gauge"
data-tab-name="rate_limits"
>
<RatesTab />
</div>
<div
:label="$t('admin_dash.tabs.uploads')"
icon="upload"
data-tab-name="uploads"
>
<UploadsTab />
</div>
<div
:label="$t('admin_dash.tabs.media_proxy')"
icon="tower-broadcast"
data-tab-name="media_proxy"
>
<MediaProxyTab />
</div>
<div
:label="$t('admin_dash.tabs.posts')"
icon="message"
data-tab-name="other"
>
<PostsTab />
</div>
<div
:label="$t('admin_dash.tabs.links')"
icon="chain"
data-tab-name="links"
>
<LinksTab />
</div>
<div
:label="$t('admin_dash.tabs.mailer')"
icon="envelope"
data-tab-name="mailer"
>
<MailerTab />
</div>
<div
:label="$t('admin_dash.tabs.federation')"
icon="circle-nodes"
data-tab-name="monitoring"
>
<FederationTab />
</div>
<div
:label="$t('admin_dash.tabs.http')"
icon="globe"
data-tab-name="http"
>
<HTTPTab />
</div>
<div
:label="$t('admin_dash.tabs.job_queues')"
icon="gears"
data-tab-name="job_queues"
>
<JobQueuesTab />
</div>
<div
:label="$t('admin_dash.tabs.monitoring')"
icon="chart-line"
data-tab-name="monitoring"
>
<MonitoringTab />
</div>
<div
:label="$t('admin_dash.tabs.other')"
icon="ellipsis"
data-tab-name="other"
>
<OtherTab />
</div>
</vertical-tab-switcher>
</template>
<script src="./settings_modal_admin_content.js"></script>
<style lang="scss">
.settings-admin-content {
.setting-item {
grid-template-columns: 1fr 3fr;
}
}
</style>

File Metadata

Mime Type
text/x-diff
Expires
Sun, Aug 30, 5:20 AM (1 d, 13 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1737775
Default Alt Text
(10 KB)

Event Timeline