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. 73
      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" /> <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery || isKanban) && !isPublic" class="shrink mx-2" />
<template v-if="!isOpen && !isPublic"> <template v-if="!isOpen && !isPublic">
<div class="border-l-1 pl-3" :class="{ 'ml-auto': isMobileMode }"> <div class="border-l-1 pl-3 nc-views-show-sidebar-button" :class="{ 'ml-auto': isMobileMode }">
<LazySmartsheetSidebarToolbarToggleDrawer class="mr-2" /> FOO-TOOLBAR<LazySmartsheetSidebarToolbarToggleDrawer class="mr-2" />
</div> </div>
</template> </template>
</div> </div>

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

@ -52,7 +52,6 @@ const sidebarCollapsed = computed(() => !isOpen.value)
/** Sidebar ref */ /** Sidebar ref */
const sidebar: Ref<Element | null> = ref(null) 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 route param and change active view based on `viewTitle` */
watch( watch(
@ -138,52 +137,38 @@ function onOpenModal({
close(1000) 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> </script>
<template> <template>
<div ref="FOO"> <a-layout-sider
<a-layout-sider ref="sidebar"
ref="sidebar" :collapsed="sidebarCollapsed"
:collapsed="sidebarCollapsed" collapsiple
collapsiple collapsed-width="0"
collapsed-width="0" width="0"
width="0" class="nc-view-sidebar relative shadow h-full w-full !flex-1 !min-w-0 !max-w-[150px] !w-[150px] lg:(!max-w-[250px] !w-[250px])"
class="nc-view-sidebar relative shadow h-full w-full !flex-1 !min-w-0 !max-w-[150px] !w-[150px] lg:(!max-w-[250px] !w-[250px])" theme="light"
theme="light" >
> <LazySmartsheetSidebarToolbar
<LazySmartsheetSidebarToolbar class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1" />
/>
<div class="flex-1 flex flex-col min-h-0">
<div class="flex-1 flex flex-col min-h-0"> <GeneralOverlay v-if="!views.length" :model-value="isLoading" inline class="bg-gray-300/50">
<GeneralOverlay v-if="!views.length" :model-value="isLoading" inline class="bg-gray-300/50"> <div class="w-full h-full flex items-center justify-center">
<div class="w-full h-full flex items-center justify-center"> <a-spin />
<a-spin /> </div>
</div> </GeneralOverlay>
</GeneralOverlay>
<LazySmartsheetSidebarMenuTop :views="views" @open-modal="onOpenModal" @deleted="loadViews" />
<LazySmartsheetSidebarMenuTop :views="views" @open-modal="onOpenModal" @deleted="loadViews" />
<template v-if="isUIAllowed('virtualViewsCreateOrEdit')">
<template v-if="isUIAllowed('virtualViewsCreateOrEdit')"> <div class="!my-3 w-full border-b-1" />
<div class="!my-3 w-full border-b-1" />
<LazySmartsheetSidebarMenuBottom @open-modal="onOpenModal" />
<LazySmartsheetSidebarMenuBottom @open-modal="onOpenModal" /> </template>
</template> </div>
</div> </a-layout-sider>
</a-layout-sider>
</div>
</template> </template>
<style scoped> <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 { isOpen, toggle } = useSidebar('nc-right-sidebar')
const onClick = () => { const onClick = (_event: Event) => {
// event.stopPropagation()
// alert('onClick toggle button')
toggle(!isOpen.value) toggle(!isOpen.value)
} }
</script> </script>
<template> <template>
<div :class="{ 'nc-active-btn': isOpen }"> <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 }"> <div class="flex items-center gap-1 text-[0.6rem] text-gray-500" :class="{ 'text-gray-500': !isOpen }">
<AntDesignMenuUnfoldOutlined v-if="isOpen" /> <AntDesignMenuUnfoldOutlined v-if="isOpen" />
@ -18,6 +20,6 @@ const onClick = () => {
{{ $t('objects.views') }} {{ $t('objects.views') }}
</div> </div>
</a-button> </a-button>BAR
</div> </div>
</template> </template>

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

@ -20,6 +20,7 @@ import {
useMetas, useMetas,
useProvideKanbanViewStore, useProvideKanbanViewStore,
useProvideSmartsheetStore, useProvideSmartsheetStore,
useSidebar,
useUIPermission, useUIPermission,
} from '#imports' } from '#imports'
import type { TabItem } from '~/lib' import type { TabItem } from '~/lib'
@ -36,6 +37,8 @@ const activeTab = toRef(props, 'activeTab')
const activeView = ref() const activeView = ref()
const { isMobileMode } = useGlobal()
const fields = ref<ColumnType[]>([]) const fields = ref<ColumnType[]>([])
const meta = computed<TableType | undefined>(() => activeTab.value && metas.value[activeTab.value.id!]) const meta = computed<TableType | undefined>(() => activeTab.value && metas.value[activeTab.value.id!])
@ -65,6 +68,41 @@ provide(
computed(() => !isUIAllowed('xcDatatableEditable')), 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> </script>
<template> <template>

Loading…
Cancel
Save