Browse Source

mobile optimisations - for now, move views sidebar again to the right - WIP

pull/5114/head
Daniel Spaude 2 years ago
parent
commit
eb04b74fc1
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 4
      packages/nc-gui/components/smartsheet/Toolbar.vue
  2. 15
      packages/nc-gui/components/smartsheet/sidebar/index.vue
  3. 8
      packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
  4. 38
      packages/nc-gui/components/tabs/Smartsheet.vue

4
packages/nc-gui/components/smartsheet/Toolbar.vue

@ -54,8 +54,8 @@ const { allowCSVDownload } = useSharedView()
<LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery || isKanban) && !isPublic" class="shrink mx-2" />
<template v-if="!isOpen && !isPublic">
<div class="border-l-1 pl-3" :class="{ 'ml-auto': isMobileMode }">
<LazySmartsheetSidebarToolbarToggleDrawer class="mr-2" />
<div class="border-l-1 pl-3 nc-views-show-sidebar-button" :class="{ 'ml-auto': isMobileMode }">
FOO-TOOLBAR<LazySmartsheetSidebarToolbarToggleDrawer class="mr-2" />
</div>
</template>
</div>

15
packages/nc-gui/components/smartsheet/sidebar/index.vue

@ -52,7 +52,6 @@ const sidebarCollapsed = computed(() => !isOpen.value)
/** Sidebar ref */
const sidebar: Ref<Element | null> = ref(null)
const FOO: Ref<Element | null> = ref(null)
/** Watch route param and change active view based on `viewTitle` */
watch(
@ -138,22 +137,9 @@ function onOpenModal({
close(1000)
}
}
document.addEventListener('click', (event: MouseEvent) => {
// sidebar.value.
// const sidebarFoo = document.querySelector('.nc-right-sidebar')
const sidebarFoo = sidebar.value
alert(JSON.stringify(FOO.value))
// alert(JSON.stringify(sidebarFoo))
// if (isMobileMode.value && !sidebar.value?.contains(event.target as Node)) {
if (isMobileMode.value && !sidebarFoo?.contains(event.target as Node)) {
alert('FOO')
}
})
</script>
<template>
<div ref="FOO">
<a-layout-sider
ref="sidebar"
:collapsed="sidebarCollapsed"
@ -183,7 +169,6 @@ document.addEventListener('click', (event: MouseEvent) => {
</template>
</div>
</a-layout-sider>
</div>
</template>
<style scoped>

8
packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

@ -3,14 +3,16 @@ import { useSidebar } from '#imports'
const { isOpen, toggle } = useSidebar('nc-right-sidebar')
const onClick = () => {
const onClick = (_event: Event) => {
// event.stopPropagation()
// alert('onClick toggle button')
toggle(!isOpen.value)
}
</script>
<template>
<div :class="{ 'nc-active-btn': isOpen }">
<a-button size="small" class="nc-toggle-right-navbar" @click="onClick">
FOO<a-button size="small" class="nc-toggle-right-navbar" @click="onClick">
<div class="flex items-center gap-1 text-[0.6rem] text-gray-500" :class="{ 'text-gray-500': !isOpen }">
<AntDesignMenuUnfoldOutlined v-if="isOpen" />
@ -18,6 +20,6 @@ const onClick = () => {
{{ $t('objects.views') }}
</div>
</a-button>
</a-button>BAR
</div>
</template>

38
packages/nc-gui/components/tabs/Smartsheet.vue

@ -20,6 +20,7 @@ import {
useMetas,
useProvideKanbanViewStore,
useProvideSmartsheetStore,
useSidebar,
useUIPermission,
} from '#imports'
import type { TabItem } from '~/lib'
@ -36,6 +37,8 @@ const activeTab = toRef(props, 'activeTab')
const activeView = ref()
const { isMobileMode } = useGlobal()
const fields = ref<ColumnType[]>([])
const meta = computed<TableType | undefined>(() => activeTab.value && metas.value[activeTab.value.id!])
@ -65,6 +68,41 @@ provide(
computed(() => !isUIAllowed('xcDatatableEditable')),
)
const { isOpen: isRightSidebarOpen, toggle: toggleRightSidebar } = useSidebar('nc-right-sidebar')
const rightSidebar = document.querySelector('.nc-right-sidebar')
const rightSidebarToggleButton = document.querySelector('.nc-views-show-sidebar-button')
document.addEventListener('click', (event: MouseEvent) => {
// debugger
console.log('++++++++')
console.log('event.target: ', event.target)
console.log('rightSidebarToggleButton: ', rightSidebarToggleButton)
console.log('isSameNode: ', rightSidebarToggleButton?.isSameNode(event.target as Node))
console.log('contains: ', rightSidebarToggleButton?.contains(event.target as Node))
console.log('--------')
// sidebar.value.
// event.stopPropagation()
// event.preventDefault()
// event.stopImmediatePropagation()
// alert(JSON.stringify(rightSidebarToggleButton?.contains(event.target as Node)))
// const sidebarFoo = sidebar.value
// alert(JSON.stringify(sidebarFoo))
// if (isMobileMode.value && !sidebar.value?.contains(event.target as Node)) {
if (
isMobileMode.value &&
isRightSidebarOpen.value &&
!rightSidebar?.contains(event.target as Node) &&
!rightSidebarToggleButton?.contains(event.target as Node)
) {
// alert(JSON.stringify(rightSidebarToggleButton?.innerHTML))
// toggleRightSidebar()
}
})
</script>
<template>

Loading…
Cancel
Save