147 lines
2.9 KiB
Vue
147 lines
2.9 KiB
Vue
|
|
||
|
|
<template>
|
||
|
|
<!-- <div class="settings-section" :class="{'settings-section--limit-width': forceLimitWidth}"> -->
|
||
|
|
<div class="settings-section" v-bind:class="containerMaxW">
|
||
|
|
<h2 class="settings-section__name">
|
||
|
|
{{ name }}
|
||
|
|
<a v-if="hasDocUrl"
|
||
|
|
:href="docUrl"
|
||
|
|
class="settings-section__info"
|
||
|
|
:title="docNameTranslated"
|
||
|
|
:aria-label="docNameTranslated"
|
||
|
|
target="_blank"
|
||
|
|
rel="noreferrer nofollow">
|
||
|
|
<HelpCircle :size="20" />
|
||
|
|
</a>
|
||
|
|
</h2>
|
||
|
|
<p v-if="hasDescription"
|
||
|
|
class="settings-section__desc">
|
||
|
|
{{ description }}
|
||
|
|
</p>
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
// import { t } from '../../l10n.js'
|
||
|
|
// import { translate as t } from '@nextcloud/l10n'
|
||
|
|
import { translate as t } from '@/utils/tethyscloud-l10n';
|
||
|
|
|
||
|
|
import HelpCircle from './Icons/HelpCircle.vue';
|
||
|
|
import { containerMaxW } from '@/config';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'NcSettingsSection',
|
||
|
|
|
||
|
|
components: {
|
||
|
|
HelpCircle,
|
||
|
|
},
|
||
|
|
|
||
|
|
props: {
|
||
|
|
name: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
description: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
docUrl: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* Limit the width of the setting's content
|
||
|
|
*
|
||
|
|
* Setting this to false allows unrestricted (width) settings content.
|
||
|
|
* Note that the name and description have always a width limit.
|
||
|
|
* @deprecated Will be removed with next version and will not be used on Nextcloud 30+ (always forced to true)
|
||
|
|
*/
|
||
|
|
limitWidth: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
docNameTranslated: t('External documentation for {name}', {
|
||
|
|
name: this.name,
|
||
|
|
}),
|
||
|
|
containerMaxW: containerMaxW,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
forceLimitWidth() {
|
||
|
|
// if (this.limitWidth) {
|
||
|
|
// return true
|
||
|
|
// }
|
||
|
|
// // Overwrite this on Nextcloud 30+ to always limit the width
|
||
|
|
// const [major] = window._oc_config?.version.split('.', 2) ?? []
|
||
|
|
// return major && Number.parseInt(major) >= 30
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
|
||
|
|
hasDescription() {
|
||
|
|
return this.description.length > 0
|
||
|
|
},
|
||
|
|
hasDocUrl() {
|
||
|
|
return this.docUrl.length > 0
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="css" scoped>
|
||
|
|
/* $maxWidth: 900px; */
|
||
|
|
|
||
|
|
.settings-section {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: auto;
|
||
|
|
padding: 30px;
|
||
|
|
|
||
|
|
&:not(:last-child) {
|
||
|
|
border-bottom: 1px solid var(--color-border);
|
||
|
|
}
|
||
|
|
|
||
|
|
&--limit-width > * {
|
||
|
|
max-width: 900px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__name {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
max-width: 900px;
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: var(--default-clickable-area);
|
||
|
|
height: var(--default-clickable-area);
|
||
|
|
|
||
|
|
/* margin: calc($icon-margin * -1); */
|
||
|
|
margin-left: 0;
|
||
|
|
color: var(--color-text-maxcontrast);
|
||
|
|
|
||
|
|
&:hover, &:focus, &:active {
|
||
|
|
color: var(--color-main-text);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__desc {
|
||
|
|
margin-top: -.2em;
|
||
|
|
margin-bottom: 1em;
|
||
|
|
color: var(--color-text-maxcontrast);
|
||
|
|
max-width: 900px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|