Browse Source

mobile optimisations - add mobile mode toggle button to left menu (WIP)

pull/4898/head
Daniel Spaude 2 years ago
parent
commit
f40a2979bb
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 57
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue

57
packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@ -66,8 +66,8 @@ const dataSourcesState = ref<string>('')
const dropdownOpen = ref(false) const dropdownOpen = ref(false)
/** Sidebar ref */ /** Sidebar ref */
const sidebar = ref() const sidebar = ref<HTMLElement | null>(null)
const toggleSideBarButton = ref() const toggleSideBarButton = ref<HTMLElement>()
const email = computed(() => user.value?.email ?? '---') const email = computed(() => user.value?.email ?? '---')
@ -188,17 +188,45 @@ onBeforeMount(async () => {
} }
}) })
const hideSidebarOnClickOrTouchIfMobileMode = (event: Event) => { const hideSidebarOnClickOrTouchIfMobileMode = (event: MouseEvent | TouchEvent) => {
// if (!event.target.matches('.show-sidebar-button')) { // if (!event.target.matches('.show-sidebar-button')) {
// this.sidebarVisible = false // this.sidebarVisible = false
// } // }
console.log('event.target', event.target) // event.stopPropagation()
console.log('toggleSideBarButton.value', toggleSideBarButton.value) // event.preventDefault()
if (!isMobileMode.value) {
return
}
// alert('isMobileMode')
console.log('inside of hideSidebarOnClickOrTouchIfMobileMode') console.log('inside of hideSidebarOnClickOrTouchIfMobileMode')
console.log('isOpen.value', isOpen.value) console.log('isOpen.value', isOpen.value)
console.log('event.target')
console.log(event.target)
console.log('-------')
console.log('toggleSideBarButton.value')
console.log(toggleSideBarButton.value)
console.log('toggleSideBarButton.value?.contains(event.target as Node)')
console.log(toggleSideBarButton.value?.contains(event.target as Node))
console.log('event.target !== toggleSideBarButton.value', event.target !== toggleSideBarButton.value) console.log('event.target !== toggleSideBarButton.value', event.target !== toggleSideBarButton.value)
console.log('------------') console.log('------------')
// console.log('sidebar.value')
// console.log(sidebar.value)
// debugger
// console.log('sidebar.value?.contains(event.target as Node)')
// console.log(sidebar.value?.contains(event.target as Node))
// debugger
if (event.target !== toggleSideBarButton.value && !toggleSideBarButton.value?.contains(event.target as Node)) {
// alert('now')
toggle(false)
}
// debugger // debugger
// if (isMobileMode.value && isOpen.value && !event.target?.matchesSelector('.show-sidebar-button')) { // if (isMobileMode.value && isOpen.value && !event.target?.matchesSelector('.show-sidebar-button')) {
// if (isMobileMode.value && isOpen.value && event.target !== toggleSideBarButton.value) { // if (isMobileMode.value && isOpen.value && event.target !== toggleSideBarButton.value) {
@ -207,15 +235,15 @@ const hideSidebarOnClickOrTouchIfMobileMode = (event: Event) => {
} }
onMounted(() => { onMounted(() => {
toggle(true) toggle(false)
toggleHasSidebar(true) toggleHasSidebar(true)
document.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode) // TODO: use useEventListener instead of onMounted and onBeforeUnmount
document.addEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode) // document.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
// document.addEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
document.removeEventListener('click', hideSidebarOnClickOrTouchIfMobileMode) // document.removeEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
document.removeEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode) // document.removeEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
}) })
onBeforeUnmount(reset) onBeforeUnmount(reset)
@ -265,9 +293,8 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
const FOO_ON_OPEN_CLICK = () => { const FOO_ON_OPEN_CLICK = () => {
console.log('inside of FOO_ON_OPEN_CLICK') console.log('inside of FOO_ON_OPEN_CLICK')
toggle(!isOpen) // toggle(!isOpen)
} }
</script> </script>
<template> <template>
@ -604,16 +631,16 @@ const FOO_ON_OPEN_CLICK = () => {
</a-dropdown> </a-dropdown>
<div <div
ref="toggleSideBarButton"
class="hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2" class="hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"
style="background-color: 'red'; color: 'green'" style="background-color: 'red'; color: 'green'"
:class="{ 'nc-sidebar-left-toggle-icon': !isMobileMode }" :class="{ 'nc-sidebar-left-toggle-icon': !isMobileMode }"
@click.prevent.stop="FOO_ON_OPEN_CLICK"
> >
<MdiBackburger <MdiBackburger
ref="toggleSideBarButton"
v-e="['c:grid:toggle-navdraw']" v-e="['c:grid:toggle-navdraw']"
class="cursor-pointer transform transition-transform duration-500" class="cursor-pointer transform transition-transform duration-500"
:class="{ 'rotate-180': !isOpen }" :class="{ 'rotate-180': !isOpen }"
@click.prevent.stop="FOO_ON_OPEN_CLICK"
/> />
</div> </div>
</div> </div>

Loading…
Cancel
Save