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

add shortscuts

Browse Source 
add open/close action
This commit is contained in:
Simon Vieille
2025-04-07 22:52:52 +02:00
parent b287b671be
commit ecbe2f7d72
12 changed files with 331 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/menus/MenuContainer.vue
+50 -9
View File
@@ -1,11 +1,22 @@
<template>
<template v-if="display">
<template v-if="display && hasApps">
<PageLoader v-if="hasPageLoader" />
<TopWideMenu v-if="display === 'big-menu'" />
<SideMenuWithCategories v-else-if="display === 'side-with-categories'" />
<TopWideMenu
v-if="display === 'big-menu'"
:open="isOpen"
@close="closeMenu"
/>
<SideMenuWithCategories
v-else-if="display === 'side-with-categories'"
:open="isOpen"
@close="closeMenu"
/>
<SimpleSideMenu
v-else-if="display === 'simple-side-menu'"
:alawayDisplayed="display === 'always-displayed'"
:open="isOpen"
@close="closeMenu"
@open="openMenu"
@toggle="toggleMenu(!isOpen)"
/>
</template>
</template>
@@ -13,6 +24,7 @@
<script setup>
import { ref, onMounted } from 'vue'
import { useConfigStore } from '../store/config.js'
import { useNavStore } from '../store/nav.js'
import { createElement } from '../lib/dom.js'
import { translate as t } from '@nextcloud/l10n'
@@ -23,9 +35,24 @@ import PageLoader from '../components/PageLoader'
const config = ref(null)
const configStore = useConfigStore()
const navStore = useNavStore()
const display = ref(null)
const alawayDisplayed = ref(false)
const hasPageLoader = ref(false)
const isOpen = ref(false)
const hasApps = ref(false)
const toggleMenu = (value) => {
isOpen.value = value
}
const openMenu = () => {
toggleMenu(true)
}
const closeMenu = () => {
toggleMenu(false)
}
const createOpener = () => {
const nextcloud = document.querySelector('#nextcloud')
const logo = document.querySelector('.header-left .logo, .header-start .logo')
@@ -39,9 +66,9 @@ const createOpener = () => {
}
const opener = createElement('button', {
'class': 'side-menu-opener',
class: 'side-menu-opener',
'arial-label': t('side_menu', 'Toggle the menu'),
'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
html: `<span>${t('side_menu', 'Toggle the menu')}</span>`,
})
if (config.value['opener-position'] === 'before') {
@@ -49,6 +76,8 @@ const createOpener = () => {
} else {
nextcloud.parentNode.insertBefore(opener, nextcloud.nextSibling)
}
opener.addEventListener('click', () => toggleMenu(true), true)
}
const createLoader = () => {
@@ -69,6 +98,8 @@ const createLoader = () => {
}
onMounted(async () => {
hasApps.value = (await navStore.getApps()).length > 0
config.value = await configStore.getConfig()
if (config.value['big-menu']) {
@@ -77,11 +108,21 @@ onMounted(async () => {
display.value = 'side-with-categories'
} else {
display.value = 'simple-side-menu'
alawayDisplayed.value = config.value['always-displayed']
}
hasPageLoader.value = config.value['loader-enabled']
createOpener()
if (hasApps.value) {
createOpener()
}
window.document.addEventListener('keydown', (e) => {
const key = e.key || e.keyCode
if ((key === 'o' || key === 79) && e.ctrlKey === true) {
e.preventDefault()
toggleMenu(!isOpen.value)
}
})
})
</script>
src/menus/SideMenuWithCategories.vue
+30 -7
View File
@@ -18,6 +18,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div
id="side-menu"
class="side-menu-with-categories"
:class="{ open: open }"
ref="menu"
>
<div class="side-menu-header">
<SettingsButton
@@ -26,8 +28,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:label="settings.name"
:avatar="settings.avatar"
/>
<AppSearch v-model:search="search" />
<OpenerButton />
<AppSearch v-model="search" />
<OpenerButton
v-if="!openerHover"
@click="$emit('close')"
/>
</div>
<div class="side-menu-categories-wrapper">
@@ -55,7 +60,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:key="appId"
>
<SideMenuBigApp
v-if="isAppMatchingSearch(app.name, search)"
v-if="isAppMatchingSearch(app, search)"
:classes="{ 'side-menu-app': true, active: activeApp === appId }"
:icon="app.icon"
:label="app.name"
@@ -72,7 +77,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, useTemplateRef, onMounted } from 'vue'
import { useNavStore } from '../store/nav.js'
import { useConfigStore } from '../store/config.js'
import { getActiveAppId } from '../lib/app.js'
@@ -84,19 +89,37 @@ import Loader from '../components/Loader'
import AppSearch from '../components/AppSearch'
import SideMenuBigApp from '../components/SideMenuBigApp'
const emit = defineEmits(['close'])
const { open } = defineProps({
open: {
type: Boolean,
required: true,
},
})
const configStore = useConfigStore()
const navStore = useNavStore()
const items = ref([])
const activeApp = ref(null)
const targetBlankApps = ref([])
const settings = ref(null)
const search = ref('')
const openerHover = ref(false)
const menu = useTemplateRef('menu')
const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
onMounted(() => {
const config = useConfigStore.getConfig()
onMounted(async () => {
const config = await configStore.getConfig()
targetBlankApps.value = config['target-blank-apps']
settings.value = config['settings']
openerHover.value = config['opener-hover'] && !isTouchDevice
items.value = useNavStore.getCategories()
items.value = await navStore.getCategories()
activeApp.value = getActiveAppId()
if (openerHover.value) {
menu.value.addEventListener('mouseleave', () => emit('close'))
}
})
</script>
src/menus/SimpleSideMenu.vue
+41 -16
View File
@@ -15,19 +15,26 @@ 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>
<div id="side-menu">
<div
id="side-menu"
:class="{ open: open }"
ref="menu"
>
<div
v-if="settings || !openerHover || (!avatar && !alwaysDisplayed && logo) || avatar"
class="side-menu-header"
>
<SettingsButton
v-if="settings"
v-if="settings && open"
:href="settings.href"
:label="settings.name"
:avatar="settings.avatar"
/>
<AppSearch v-model:search="search" />
<OpenerButton v-if="!alwaysDisplayed" />
<AppSearch v-model="search" v-if="open" />
<OpenerButton
v-if="(!alwaysDisplayed && !openerHover) || isTouchDevice"
@click="$emit('toggle')"
/>
<Logo
v-if="!avatar && !alwaysDisplayed && logo"
:classes="{ 'side-menu-logo': true, avatardiv: false }"
@@ -35,7 +42,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:link="logoLink"
/>
<Logo
v-if="avatar"
v-if="avatar && !alwaysDisplayed"
:classes="{ 'side-menu-logo': true, avatardiv: true }"
:image="avatar"
:link="logoLink"
@@ -51,7 +58,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:key="key"
>
<SideMenuApp
v-if="isAppMatchingSearch(app.name, search)"
v-if="isAppMatchingSearch(app, search)"
:classes="{ 'side-menu-app': true, active: app.active }"
:icon="app.icon"
:label="app.name"
@@ -64,7 +71,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, useTemplateRef, onMounted, watch } from 'vue'
import { useConfigStore } from '../store/config.js'
import { useNavStore } from '../store/nav.js'
import { isAppMatchingSearch } from '../lib/search.js'
@@ -75,6 +82,14 @@ import SideMenuApp from '../components/SideMenuApp'
import AppSearch from '../components/AppSearch'
import Logo from '../components/Logo'
const { open } = defineProps({
open: {
type: Boolean,
required: true,
},
})
const emit = defineEmits(['close', 'open', 'toggle'])
const navStore = useNavStore()
const configStore = useConfigStore()
const targetBlankApps = ref(null)
@@ -83,10 +98,16 @@ const avatar = ref(null)
const logo = ref(null)
const logoLink = ref(null)
const settings = ref(null)
const openerHover = ref(null)
const alwaysDisplayed = ref(null)
const openerHover = ref(false)
const alwaysDisplayed = ref(false)
const search = ref('')
const apps = ref([])
const menu = useTemplateRef('menu')
const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
watch(apps, (val) => {
document.querySelector('html').classList.toggle('side-menu-always-displayed', alwaysDisplayed.value && val.length)
})
function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
const data = []
@@ -121,14 +142,18 @@ onMounted(async () => {
logo.value = config['logo']
logoLink.value = config['logo-link']
settings.value = config['settings']
openerHover.value = config['opener-hover']
openerHover.value = config['opener-hover'] && !isTouchDevice
alwaysDisplayed.value = config['always-displayed']
apps.value = getFiltredAndSortedApps(
await navStore.getApps(),
config['apps-order'],
config['top-menu-apps'],
config['top-side-menu-apps']
)
apps.value = getFiltredAndSortedApps(await navStore.getApps(), config['apps-order'], config['top-menu-apps'], config['top-side-menu-apps'])
if (openerHover.value) {
menu.value.addEventListener('mouseleave', () => emit('close'))
}
if (alwaysDisplayed.value) {
menu.value.addEventListener('mouseenter', () => emit('open'))
menu.value.addEventListener('mouseleave', () => emit('close'))
}
})
</script>
src/menus/TopWideMenu.vue
+34 -8
View File
@@ -18,17 +18,25 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div
id="side-menu"
class="side-menu-big"
:class="{ open: open }"
ref="menu"
>
<div class="side-menu-header">
<CloserButton />
<CloserButton
v-if="!openerHover"
@click="$emit('close')"
/>
<SettingsButton
v-if="settings"
:href="settings.href"
:label="settings.name"
:avatar="settings.avatar"
/>
<AppSearch v-model:search="search" />
<OpenerButton />
<AppSearch v-model="search" />
<OpenerButton
v-if="!openerHover"
@click="$emit('close')"
/>
</div>
<div class="side-menu-categories-wrapper">
@@ -56,7 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:key="appId"
>
<SideMenuBigApp
v-if="isAppMatchingSearch(app.name, search)"
v-if="isAppMatchingSearch(app, search)"
:classes="{ 'side-menu-app': true, active: activeApp === appId }"
:icon="app.icon"
:label="app.name"
@@ -73,7 +81,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, useTemplateRef, onMounted } from 'vue'
import { useNavStore } from '../store/nav.js'
import { useConfigStore } from '../store/config.js'
import { getActiveAppId } from '../lib/app.js'
@@ -86,19 +94,37 @@ import Loader from '../components/Loader'
import AppSearch from '../components/AppSearch'
import SideMenuBigApp from '../components/SideMenuBigApp'
const emit = defineEmits(['close'])
const { open } = defineProps({
open: {
type: Boolean,
required: true,
},
})
const configStore = useConfigStore()
const navStore = useNavStore()
const items = ref([])
const activeApp = ref(null)
const targetBlankApps = ref([])
const settings = ref(null)
const search = ref('')
const openerHover = ref(false)
const menu = useTemplateRef('menu')
const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
onMounted(() => {
const config = useConfigStore.getConfig()
onMounted(async () => {
const config = await configStore.getConfig()
targetBlankApps.value = config['target-blank-apps']
settings.value = config['settings']
openerHover.value = config['opener-hover'] && !isTouchDevice
items.value = useNavStore.getCategories()
items.value = await navStore.getCategories()
activeApp.value = getActiveAppId()
if (openerHover.value) {
menu.value.addEventListener('mouseleave', () => emit('close'))
}
})
</script>