migrate admin settings
This commit is contained in:
Simon Vieille
+501
-62
@@ -1,92 +1,505 @@
|
||||
<template>
|
||||
<NcContent app-name="side_menu">
|
||||
<NcAppContent>
|
||||
<div class="side-menu-setting">
|
||||
<NcButton
|
||||
v-for="item in menu"
|
||||
@click="setSection(item.section)"
|
||||
:variant="item.section === section ? 'primary' : 'secondary'"
|
||||
>{{ trans(item.label) }}</NcButton>
|
||||
</div>
|
||||
<NcContent
|
||||
app-name="side_menu"
|
||||
v-if="config"
|
||||
>
|
||||
<NcAppContent>
|
||||
<div class="side-menu-setting">
|
||||
<NcButton
|
||||
v-for="item in menu"
|
||||
@click="setSection(item.section)"
|
||||
:variant="item.section === section ? 'primary' : 'secondary'"
|
||||
>{{ trans(item.label) }}</NcButton
|
||||
>
|
||||
</div>
|
||||
|
||||
<TableContainer :class="sectionClass('panel')">
|
||||
</TableContainer>
|
||||
<TableContainer :class="sectionClass('panel')">
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Display the logo"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormYesNo v-model="config['display-logo']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Use the avatar instead of the logo"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormYesNo v-model="config['use-avatar']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="The logo is a link to the default app"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormYesNo v-model="config['add-logo-link']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Show the link to settings"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormYesNo v-model="config['show-settings']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Icons"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormSize v-model="config['size-icon']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Texts"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormSize v-model="config['size-text']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Loader enabled"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormYesNo v-model="config['loader-enabled']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('color')">
|
||||
<TableRow>
|
||||
<TableLabel label="Background color" :short="true" :middle="true"></TableLabel>
|
||||
<TableValue>
|
||||
<NcColorPicker v-model="color" class="side-menu-setting-color-picker">
|
||||
<div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
|
||||
</NcColorPicker>
|
||||
<NcColorPicker v-model="color" class="side-menu-setting-color-picker">
|
||||
<div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
|
||||
</NcColorPicker>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableContainer :class="sectionClass('topMenu')">
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Applications kept in the top menu"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormAppPicker v-model="config['top-menu-apps']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel label="Background color of current app" :short="true" :middle="true"></TableLabel>
|
||||
<TableValue>
|
||||
<NcColorPicker v-model="color" class="side-menu-setting-color-picker">
|
||||
<div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
|
||||
</NcColorPicker>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Applications kept in the top menu but also shown in side menu"
|
||||
help="These applications must be selected in the previous option."
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormAppPicker v-model="config['top-side-menu-apps']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel label="Text color" :short="true" :middle="true"></TableLabel>
|
||||
<TableValue>
|
||||
<NcColorPicker v-model="color" class="side-menu-setting-color-picker">
|
||||
<div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
|
||||
</NcColorPicker>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</TableContainer>
|
||||
</NcAppContent>
|
||||
</NcContent>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Hide labels on mouse over"
|
||||
:top="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormSelect
|
||||
v-model="config['top-menu-mouse-over-hidden-label']"
|
||||
:expanded="true"
|
||||
:options="[
|
||||
{id: 1, label: 'Yes'},
|
||||
{id: 0, label: 'No'},
|
||||
{id: 2, label: 'Except the hovered app'},
|
||||
]" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('apps')">
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Apps that should not be displayed in the menu"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormAppPicker v-model="config['big-menu-hidden-apps']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Open apps in new tab"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormAppPicker v-model="config['target-blank-apps']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('opener')">
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Opener"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormOpener v-model="config['opener']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Dark mode opener"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormOpener v-model="config['dark-mode-opener']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Position"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormSelect
|
||||
v-model="config['opener-position']"
|
||||
:options="[
|
||||
{ id: 'before', label: 'Before the logo' },
|
||||
{ id: 'after', label: 'After the logo' },
|
||||
]"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Show only the opener (hidden logo)"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormYesNo v-model="config['opener-only']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
|
||||
help="This is the automatic behavior when the menu is always displayed."
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormYesNo v-model="config['opener-hover']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('colors')">
|
||||
<SectionTitle label="Colors" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Background color"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormColorPicker v-model="config['background-color']" />
|
||||
<FormColorPicker v-model="config['background-color-to']" />
|
||||
<FormRange
|
||||
v-model="config['background-color-opacity']"
|
||||
prepend="Transparent"
|
||||
append="Opaque"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Background color of current app"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormColorPicker v-model="config['current-app-background-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Text color"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormColorPicker v-model="config['text-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Loader"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormColorPicker v-model="config['loader-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Icon"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormRange
|
||||
v-model="config['icon-invert-filter']"
|
||||
prepend="Same color"
|
||||
append="Opposite color"
|
||||
/>
|
||||
<FormRange
|
||||
v-model="config['icon-opacity']"
|
||||
prepend="Transparent"
|
||||
append="Opaque"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<SectionTitle label="Dark mode colors" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Background color"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormColorPicker v-model="config['dark-mode-background-color']" />
|
||||
<FormColorPicker v-model="config['dark-mode-background-color-to']" />
|
||||
<FormRange
|
||||
v-model="config['dark-mode-background-color-opacity']"
|
||||
prepend="Transparent"
|
||||
append="Opaque"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Background color of current app"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormColorPicker v-model="config['dark-mode-current-app-background-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Text color"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormColorPicker v-model="config['dark-mode-text-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Loader"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormColorPicker v-model="config['dark-mode-loader-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Icon"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormRange
|
||||
v-model="config['dark-mode-icon-invert-filter']"
|
||||
prepend="Same color"
|
||||
append="Opposite color"
|
||||
/>
|
||||
<FormRange
|
||||
v-model="config['dark-mode-icon-opacity']"
|
||||
prepend="Transparent"
|
||||
append="Opaque"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('global')">
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="The menu is enabled by default for users"
|
||||
help="Except when the configuration is forced."
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormYesNo v-model="config['default-enabled']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Force this configuration to users"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormYesNo v-model="config['force']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('support')">
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="You like this app and you want to support me?"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<a target="_blank" href="https://www.buymeacoffee.com/deblan" rel="noopener">
|
||||
<NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
|
||||
</a>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Need help"
|
||||
/>
|
||||
<TableValue class="button-inline">
|
||||
<a target="_blank" href="https://deblan.gitnet.page/side_menu_doc/" rel="noopener">
|
||||
<NcButton variant="secondary">{{ trans('Open the documentation') }}</NcButton>
|
||||
</a>
|
||||
<a target="_blank" href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fQUESTION_TEMPLATE.yml" rel="noopener">
|
||||
<NcButton variant="secondary">{{ trans('Ask the developer') }}</NcButton>
|
||||
</a>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="I would like a new feature"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<a target="_blank" href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml" rel="noopener">
|
||||
<NcButton variant="secondary">{{ trans('New request') }}</NcButton>
|
||||
</a>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Something went wrong"
|
||||
:top="true"
|
||||
/>
|
||||
<TableValue class="button-inline">
|
||||
<a target="_blank" href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml" rel="noopener">
|
||||
<NcButton variant="secondary">{{ trans('Report a bug') }}</NcButton>
|
||||
</a>
|
||||
<NcButton variant="secondary" @click="showConfig = true">{{ trans('Show the configuration') }}</NcButton>
|
||||
|
||||
<NcModal
|
||||
v-if="showConfig"
|
||||
@close="showConfig = false"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<p style="margin-bottom: 5px">{{ trans('Configuration:') }}</p>
|
||||
<textarea class="config" readonly>{{ filterConfig(config) }}</textarea>
|
||||
|
||||
<div class="modal__footer">
|
||||
<NcButton
|
||||
@click="copyConfig"
|
||||
variant="secondary"
|
||||
>
|
||||
<span v-if="configCopied">{{ trans('Done!') }}</span>
|
||||
<span v-else>{{ trans('Copy') }}</span>
|
||||
</NcButton>
|
||||
<NcButton
|
||||
@click="showConfig = false"
|
||||
variant="primary"
|
||||
>
|
||||
{{ t('side_menu', 'Close') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</NcModal>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</TableContainer>
|
||||
</NcAppContent>
|
||||
</NcContent>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding-top: calc(var(--default-grid-baseline) * 5);
|
||||
padding-left: calc(var(--default-grid-baseline) * 7);
|
||||
padding-right: calc(var(--default-grid-baseline) * 7);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
width: 100px;
|
||||
height: 34px;
|
||||
border-radius: 6px;
|
||||
.button-inline button {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
.config {
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.modal__content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal__footer {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modal__footer button {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup>
|
||||
import { NcContent, NcAppContent, NcColorPicker, NcButton } from '@nextcloud/vue'
|
||||
import { NcContent, NcAppContent, NcButton, NcModal } from '@nextcloud/vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useConfigStore } from '../store/config.js'
|
||||
|
||||
import MenuDisplay from '../components/settings/MenuDisplay'
|
||||
import TableContainer from '../components/settings/TableContainer'
|
||||
import TableRow from '../components/settings/TableRow'
|
||||
import TableLabel from '../components/settings/TableLabel'
|
||||
import TableValue from '../components/settings/TableValue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import SectionTitle from '../components/settings/SectionTitle'
|
||||
import FormRange from '../components/settings/form/FormRange'
|
||||
import FormColorPicker from '../components/settings/form/FormColorPicker'
|
||||
import FormOpener from '../components/settings/form/FormOpener'
|
||||
import FormSelect from '../components/settings/form/FormSelect'
|
||||
import FormYesNo from '../components/settings/form/FormYesNo'
|
||||
import FormSize from '../components/settings/form/FormSize'
|
||||
import FormAppPicker from '../components/settings/form/FormAppPicker'
|
||||
|
||||
const menu = [
|
||||
{label: 'Panel', section: 'panel'},
|
||||
{label: 'Colors', section: 'color'},
|
||||
{ label: 'Global', section: 'global' },
|
||||
{ label: 'Panel', section: 'panel' },
|
||||
{ label: 'Applications', section: 'apps' },
|
||||
{ label: 'Colors', section: 'colors' },
|
||||
{ label: 'Opener', section: 'opener' },
|
||||
{ label: 'Top menu', section: 'topMenu' },
|
||||
{ label: 'Support', section: 'support' },
|
||||
]
|
||||
|
||||
const section = ref('panel')
|
||||
const color = ref('#ff9')
|
||||
const config = ref(null)
|
||||
const showConfig = ref(false)
|
||||
const configCopied = ref(false)
|
||||
const configStore = useConfigStore()
|
||||
const section = ref(menu[0].section)
|
||||
|
||||
const setSection = (value) => {
|
||||
section.value = value
|
||||
@@ -101,4 +514,30 @@ const sectionClass = (value) => {
|
||||
hidden: value !== section.value,
|
||||
}
|
||||
}
|
||||
|
||||
const copyConfig = () => {
|
||||
navigator.clipboard.writeText(JSON.stringify(filterConfig(config.value), null, 2))
|
||||
|
||||
configCopied.value = true
|
||||
|
||||
window.setTimeout(() => {
|
||||
configCopied.value = false
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const filterConfig = (value) => {
|
||||
const result = {}
|
||||
|
||||
for (let key in value) {
|
||||
if (['cache-categories', 'cache'].includes(key) === false) {
|
||||
result[key] = value[key]
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
config.value = await configStore.getAppConfig()
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user