Ensembia/nextcloud-side_menu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add user settings

Browse Source
This commit is contained in:
Simon Vieille
2025-04-13 20:32:13 +02:00
parent 6c4f9120ff
commit fdd8f8850d
20 changed files with 839 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/AdminSettings.vue
+40 -20
View File
@@ -46,7 +46,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
</TableValue>
</TableRow>
<TableRow>
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
<TableLabel
label="Display the logo"
:middle="true"
@@ -55,7 +55,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<FormYesNo v-model="config['display-logo']" />
</TableValue>
</TableRow>
<TableRow>
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
<TableLabel
label="Use the avatar instead of the logo"
:middle="true"
@@ -64,7 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<FormYesNo v-model="config['use-avatar']" />
</TableValue>
</TableRow>
<TableRow>
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
<TableLabel
label="The logo is a link to the default app"
:middle="true"
@@ -100,6 +100,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<FormSize v-model="config['size-text']" />
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('topMenu')">
@@ -143,6 +144,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('apps')">
@@ -175,12 +177,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<FormAppSort v-model="config['apps-order']" />
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('cats')">
<SectionTitle label="Categories" />
<TableRow>
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
<TableLabel
label="Order by"
:middle="true"
@@ -190,13 +193,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-model="config['categories-order-type']"
:options="[
{ id: 'default', label: 'Name' },
{ id: 'custom', label: 'Customed' },
{ id: 'custom', label: 'Custom' },
]"
/>
</TableValue>
</TableRow>
<TableRow>
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
<TableLabel
label="Customize sorting"
:middle="true"
/>
<TableValue>
<FormCatSort v-model="config['categories-order']" />
</TableValue>
</TableRow>
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
<TableLabel
label="Customize application categories"
:top="true"
@@ -213,15 +224,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Customize sorting"
:middle="true"
/>
<TableValue>
<FormCatSort v-model="config['categories-order']" />
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('opener')">
@@ -272,13 +275,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<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>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('colors')">
@@ -415,9 +418,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('global')">
<p class="side-menu-tips">
<em>{{ t('side_menu', 'Use the shortcut Ctrl+o to open and to hide the side menu. Use tab key to navigate.') }}</em>
</p>
<SectionTitle label="Global" />
<TableRow>
@@ -450,6 +458,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<FormYesNo v-model="config['loader-enabled']" />
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('support')">
@@ -557,6 +566,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</NcModal>
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
</NcAppContent>
</NcContent>
@@ -572,6 +582,7 @@ import TableRow from '../components/settings/TableRow'
import TableLabel from '../components/settings/TableLabel'
import TableValue from '../components/settings/TableValue'
import SectionTitle from '../components/settings/SectionTitle'
import AdminSaveButton from '../components/settings/AdminSaveButton'
import FormRange from '../components/settings/form/FormRange'
import FormColorPicker from '../components/settings/form/FormColorPicker'
import FormOpener from '../components/settings/form/FormOpener'
@@ -587,11 +598,11 @@ import FormAppCategory from '../components/settings/form/FormAppCategory'
const menu = [
{ label: 'Global', section: 'global' },
{ label: 'Panel', section: 'panel' },
{ label: 'Top menu', section: 'topMenu' },
{ label: 'Colors', section: 'colors' },
{ label: 'Opener', section: 'opener' },
{ label: 'Applications', section: 'apps' },
{ label: 'Categories', section: 'cats' },
{ label: 'Top menu', section: 'topMenu' },
{ label: 'Support', section: 'support' },
]
@@ -599,9 +610,11 @@ const config = ref(null)
const showConfig = ref(false)
const configCopied = ref(false)
const configStore = useConfigStore()
const section = ref(menu[0].section)
const section = ref(null)
const setSection = (value) => {
sessionStorage.setItem('side_menu_section', value)
section.value = value
}
@@ -629,7 +642,7 @@ const filterConfig = (value) => {
const result = {}
for (let key in value) {
if (['cache-categories', 'cache'].includes(key) === false) {
if (['cache-categories', 'cache', 'langs', 'enabled'].includes(key) === false) {
result[key] = value[key]
}
}
@@ -639,6 +652,8 @@ const filterConfig = (value) => {
onMounted(async () => {
config.value = await configStore.getAppConfig()
setSection(sessionStorage.getItem('side_menu_section') ?? menu[0].section)
})
</script>
@@ -670,4 +685,9 @@ onMounted(async () => {
display: inline-block;
margin-right: 5px;
}
.save {
display: block;
float: right
}
</style>
src/pages/UserSettings.vue
+171
View File
@@ -0,0 +1,171 @@
<!--
@license GNU AGPL version 3 or any later version
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<NcContent
v-if="config"
app-name="side_menu"
>
<NcAppContent class="side-menu-setting-app" v-if="config['force']">
<TableContainer>
<TableLabel label="You do not have permission to change the settings." />
</TableContainer>
</NcAppContent>
<NcAppContent v-else class="side-menu-setting-app side-menu-setting-app--user">
<TableContainer>
<SectionTitle label="Menu" />
<TableRow>
<TableLabel
label="Enable the custom menu"
:middle="true"
/>
<TableValue>
<FormYesNo v-model="config['enabled']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Applications kept in the top menu"
help="If there is no selection then the global configuration is applied."
:middle="true"
/>
<TableValue>
<FormAppPicker v-model="config['top-menu-apps']" />
</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."
help2="If there is no selection then the global configuration is applied"
:middle="true"
/>
<TableValue>
<FormAppPicker v-model="config['top-side-menu-apps']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Open apps in new tab"
:middle="true"
/>
<TableValue>
<FormSelect v-model="config['target-blank-mode']" :options="[
{id: 1, label: 'Use the global setting'},
{id: 2, label: 'Use my selection'},
]" />
<FormAppPicker v-if="config['target-blank-mode'] === 2" v-model="config['target-blank-apps']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Customize sorting"
:top="true"
/>
<TableValue>
<FormAppSort v-model="config['apps-order']" />
</TableValue>
</TableRow>
</TableContainer>
<TableContainer>
<SectionTitle label="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>
<UserSaveButton :config="config" />
</TableContainer>
</NcAppContent>
</NcContent>
</template>
<script setup>
import { NcContent, NcAppContent, NcButton } from '@nextcloud/vue'
import { ref, onMounted } from 'vue'
import { useConfigStore } from '../store/config.js'
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 SectionTitle from '../components/settings/SectionTitle'
import UserSaveButton from '../components/settings/UserSaveButton'
import FormYesNo from '../components/settings/form/FormYesNo'
import FormAppPicker from '../components/settings/form/FormAppPicker'
import FormAppSort from '../components/settings/form/FormAppSort'
import FormSelect from '../components/settings/form/FormSelect'
const config = ref(null)
const configStore = useConfigStore()
const trans = (value) => {
return t('side_menu', value)
}
onMounted(async () => {
config.value = await configStore.getUserConfig()
})
</script>
<style scoped>
.hidden {
display: none;
}
.button-inline button {
display: inline-block;
margin-right: 5px;
}
.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;
}
.save {
display: block;
float: right
}
</style>