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

add app orderer

Browse Source
This commit is contained in:
Simon Vieille
2025-04-12 14:58:40 +02:00
parent c8eed69672
commit ab64a13fc1
6 changed files with 215 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/settings/form/FormAppSort.vue
+134
View File
@@ -0,0 +1,134 @@
<!--
@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 apps')"
variant="primary"
@click="openModal"
>
{{ t('side_menu', 'Sort apps') }}
</NcButton>
<NcModal
v-if="modal"
size="small"
@close="closeModal"
>
<div class="modal__content">
<draggable
v-model="apps"
@end="update"
item-key="id"
>
<template #item="{element}">
<div class="draggable">
<span class="arrow">⇅</span>
{{element.name}}
</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.id === id) {
apps.value.push(app)
}
})
})
items.forEach((app) => {
if (!apps.value.find((element) => element.id === app.id)) {
apps.value.push(app)
}
})
}
const update = () => {
const value = []
apps.value.forEach((app) => {
value.push(app.id)
})
emit('update:modelValue', value)
}
onMounted(async () => {
const items = await navStore.getApps()
window.setTimeout(() => {
setApps(items)
}, 500)
})
</script>
<style scoped>
.modal__footer {
margin-top: 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);
}
</style>
src/components/settings/form/FormDisplayPicker.vue
+38 -17
View File
@@ -1,22 +1,50 @@
<template>
<NcButton :variant="is(false, false, false) ? 'primary' : 'seconday'" @click="update(false, false, false)">
<NcButton
:variant="is(false, false, false) ? 'primary' : 'seconday'"
@click="update(false, false, false)"
>
{{ t('side_menu', 'Default') }}
</NcButton>
<NcButton :variant="is(true, false, false) ? 'primary' : 'seconday'" @click="update(true, false, false)">
<NcButton
:variant="is(true, false, false) ? 'primary' : 'seconday'"
@click="update(true, false, false)"
>
{{ t('side_menu', 'Always displayed') }}
</NcButton>
<NcButton :variant="is(false, true, false) ? 'primary' : 'seconday'" @click="update(false, true, false)">
<NcButton
:variant="is(false, true, false) ? 'primary' : 'seconday'"
@click="update(false, true, false)"
>
{{ t('side_menu', 'Big menu') }}
</NcButton>
<NcButton :variant="is(false, false, true) ? 'primary' : 'seconday'" @click="update(false, false, true)">
<NcButton
:variant="is(false, false, true) ? 'primary' : 'seconday'"
@click="update(false, false, true)"
>
{{ t('side_menu', 'With categories') }}
</NcButton>
<p>
<img v-if="is(false, false, false)" class="side-menu-display" :src="DefaultImg" />
<img v-if="is(true, false, false)" class="side-menu-display" :src="AlwaysDisplayedImg" />
<img v-if="is(false, true, false)" class="side-menu-display" :src="TopWideImg" />
<img v-if="is(false, false, true)" class="side-menu-display" :src="SideMenuWithCategoriesImg" />
<img
v-if="is(false, false, false)"
class="side-menu-display"
:src="DefaultImg"
/>
<img
v-if="is(true, false, false)"
class="side-menu-display"
:src="AlwaysDisplayedImg"
/>
<img
v-if="is(false, true, false)"
class="side-menu-display"
:src="TopWideImg"
/>
<img
v-if="is(false, false, true)"
class="side-menu-display"
:src="SideMenuWithCategoriesImg"
/>
</p>
</template>
<script setup>
@@ -27,11 +55,7 @@ import TopWideImg from '../../../../img/admin/layout-big-menu.svg'
import SideMenuWithCategoriesImg from '../../../../img/admin/layout-side-menu-with-categories.svg'
import DefaultImg from '../../../../img/admin/layout-default.svg'
const emit = defineEmits([
'update:alwaysDisplayed',
'update:topWideMenu',
'update:sideMenuWithCategories',
])
const emit = defineEmits(['update:alwaysDisplayed', 'update:topWideMenu', 'update:sideMenuWithCategories'])
const { alwaysDisplayed, topWideMenu, sideMenuWithCategories } = defineProps({
alwaysDisplayed: {
@@ -55,11 +79,8 @@ const update = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
}
const is = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
return isAlwayDisplayed === alwaysDisplayed
&& isTopWideMenu === topWideMenu
&& isSideMenuWithCategories === sideMenuWithCategories
return isAlwayDisplayed === alwaysDisplayed && isTopWideMenu === topWideMenu && isSideMenuWithCategories === sideMenuWithCategories
}
</script>
<style scoped>