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

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 }">
+      <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>
     </template>
   </div>

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,52 +137,38 @@ 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
-    <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>
 
 <style scoped>

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>

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>