add categories orderer
move the admin menu to the left
This commit is contained in:
parent
0821802157
commit
63b32ea40f
GPG key ID:
579388D585F70417
4 changed files with 200 additions and 11 deletions
|
|
@ -16,11 +16,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
-->
|
||||
<template>
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Sort apps')"
|
||||
aria-label="t('side_menu', 'Sort')"
|
||||
variant="primary"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t('side_menu', 'Sort apps') }}
|
||||
{{ t('side_menu', 'Sort') }}
|
||||
</NcButton>
|
||||
|
||||
<NcModal
|
||||
|
|
@ -114,8 +114,8 @@ onMounted(async () => {
|
|||
|
||||
<style scoped>
|
||||
.modal__footer {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal__footer button {
|
||||
|
|
@ -130,5 +130,7 @@ onMounted(async () => {
|
|||
|
||||
.arrow {
|
||||
color: var(--color-text-maxcontrast);
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
137
src/components/settings/form/FormCatSort.vue
Normal file
137
src/components/settings/form/FormCatSort.vue
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
<!--
|
||||
@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>
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Sort')"
|
||||
variant="primary"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t('side_menu', 'Sort') }}
|
||||
</NcButton>
|
||||
|
||||
<NcModal
|
||||
v-if="modal"
|
||||
size="small"
|
||||
@close="closeModal"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<draggable
|
||||
v-model="apps"
|
||||
item-key="categoryId"
|
||||
@end="update"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div class="draggable">
|
||||
<span class="arrow">⇅</span>
|
||||
<span v-if="element.name !== ''">{{ element.name }}</span>
|
||||
<span v-else>{{ t('side_menu', 'Other') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<div class="modal__footer">
|
||||
<NcButton
|
||||
variant="primary"
|
||||
@click="closeModal"
|
||||
>
|
||||
{{ t('side_menu', 'Close') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</NcModal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NcButton, NcModal } from '@nextcloud/vue'
|
||||
import { useNavStore } from '../../../store/nav.js'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
const model = defineModel({ type: Array })
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const navStore = useNavStore()
|
||||
const modal = ref(false)
|
||||
const apps = ref([])
|
||||
|
||||
const openModal = () => {
|
||||
modal.value = true
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
modal.value = false
|
||||
}
|
||||
|
||||
const setApps = (items) => {
|
||||
apps.value = []
|
||||
|
||||
model.value.forEach((id) => {
|
||||
items.forEach((app) => {
|
||||
if (app.categoryId === id) {
|
||||
apps.value.push(app)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
items.forEach((app) => {
|
||||
if (!apps.value.find((element) => element.categoryId === app.categoryId)) {
|
||||
apps.value.push(app)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const update = () => {
|
||||
const value = []
|
||||
|
||||
apps.value.forEach((app) => {
|
||||
value.push(app.categoryId)
|
||||
})
|
||||
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const items = await navStore.getCategories()
|
||||
|
||||
window.setTimeout(() => {
|
||||
setApps(items)
|
||||
}, 500)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal__footer {
|
||||
padding: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modal__footer button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.draggable {
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: var(--color-text-maxcontrast);
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,7 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
v-if="config"
|
||||
app-name="side_menu"
|
||||
>
|
||||
<NcAppContent>
|
||||
<NcAppContent class="side-menu-setting-app">
|
||||
<div class="side-menu-setting">
|
||||
<NcButton
|
||||
v-for="item in menu"
|
||||
|
|
@ -31,6 +31,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</div>
|
||||
|
||||
<TableContainer :class="sectionClass('panel')">
|
||||
<SectionTitle label="Panel" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel label="Display" />
|
||||
<TableValue>
|
||||
|
|
@ -101,6 +103,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('topMenu')">
|
||||
<SectionTitle label="Top menu" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Applications kept in the top menu"
|
||||
|
|
@ -142,6 +146,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('apps')">
|
||||
<SectionTitle label="Applications" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Apps that should not be displayed in the menu"
|
||||
|
|
@ -171,7 +177,39 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</TableRow>
|
||||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('cats')">
|
||||
<SectionTitle label="Categories" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Order by"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormSelect
|
||||
v-model="config['categories-order-type']"
|
||||
:options="[
|
||||
{ id: 'default', label: 'Name' },
|
||||
{ id: 'custom', label: 'Customed' },
|
||||
]"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Customize sorting"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<FormCatSort v-model="config['categories-order']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('opener')">
|
||||
<SectionTitle label="Opener" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="Opener"
|
||||
|
|
@ -363,6 +401,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('global')">
|
||||
<SectionTitle label="Global" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="The menu is enabled by default for users"
|
||||
|
|
@ -396,6 +436,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</TableContainer>
|
||||
|
||||
<TableContainer :class="sectionClass('support')">
|
||||
<SectionTitle label="Support" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
label="You like this app and you want to support me?"
|
||||
|
|
@ -521,6 +563,7 @@ import FormYesNo from '../components/settings/form/FormYesNo'
|
|||
import FormSize from '../components/settings/form/FormSize'
|
||||
import FormAppPicker from '../components/settings/form/FormAppPicker'
|
||||
import FormAppSort from '../components/settings/form/FormAppSort'
|
||||
import FormCatSort from '../components/settings/form/FormCatSort'
|
||||
import FormDisplayPicker from '../components/settings/form/FormDisplayPicker'
|
||||
|
||||
const menu = [
|
||||
|
|
@ -530,6 +573,7 @@ const menu = [
|
|||
{ label: 'Colors', section: 'colors' },
|
||||
{ label: 'Opener', section: 'opener' },
|
||||
{ label: 'Applications', section: 'apps' },
|
||||
{ label: 'Categories', section: 'cats' },
|
||||
{ label: 'Support', section: 'support' },
|
||||
]
|
||||
|
||||
|
|
@ -537,7 +581,7 @@ const config = ref(null)
|
|||
const showConfig = ref(false)
|
||||
const configCopied = ref(false)
|
||||
const configStore = useConfigStore()
|
||||
const section = ref('apps' /*menu[0].section*/)
|
||||
const section = ref(menu[0].section)
|
||||
|
||||
const setSection = (value) => {
|
||||
section.value = value
|
||||
|
|
|
|||
|
|
@ -240,12 +240,6 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.side-menu-setting {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.side-menu-setting-color-picker {
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
|
|
@ -259,3 +253,15 @@
|
|||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-setting-app {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.side-menu-setting {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue