Browse Source

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

pull/5114/head
Daniel Spaude 2 years ago
parent
commit
468dc83a82
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 79
      packages/nc-gui/components/smartsheet/sidebar/index.vue
  2. 2
      packages/nc-gui/components/tabs/Smartsheet.vue

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

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ViewType, ViewTypes } from 'nocodb-sdk' import type { ViewType, ViewTypes } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { import {
ActiveViewInj, ActiveViewInj,
MetaInj, MetaInj,
@ -8,6 +9,7 @@ import {
ref, ref,
resolveComponent, resolveComponent,
useDialog, useDialog,
useGlobal,
useNuxtApp, useNuxtApp,
useRoute, useRoute,
useRouter, useRouter,
@ -21,6 +23,8 @@ const meta = inject(MetaInj, ref())
const activeView = inject(ActiveViewInj, ref()) const activeView = inject(ActiveViewInj, ref())
const { isMobileMode } = useGlobal()
const { activeTab } = useTabs() const { activeTab } = useTabs()
const { views, loadViews, isLoading } = useViews(meta) const { views, loadViews, isLoading } = useViews(meta)
@ -47,7 +51,8 @@ const { isOpen } = useSidebar('nc-right-sidebar')
const sidebarCollapsed = computed(() => !isOpen.value) const sidebarCollapsed = computed(() => !isOpen.value)
/** Sidebar ref */ /** Sidebar ref */
const 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 route param and change active view based on `viewTitle` */
watch( watch(
@ -133,38 +138,52 @@ 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>
<a-layout-sider <div ref="FOO">
ref="sidebar" <a-layout-sider
:collapsed="sidebarCollapsed" ref="sidebar"
collapsiple :collapsed="sidebarCollapsed"
collapsed-width="0" collapsiple
width="0" collapsed-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])" width="0"
theme="light" 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"
<LazySmartsheetSidebarToolbar >
class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1" <LazySmartsheetSidebarToolbar
/> 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">
<GeneralOverlay v-if="!views.length" :model-value="isLoading" inline class="bg-gray-300/50"> <div class="flex-1 flex flex-col min-h-0">
<div class="w-full h-full flex items-center justify-center"> <GeneralOverlay v-if="!views.length" :model-value="isLoading" inline class="bg-gray-300/50">
<a-spin /> <div class="w-full h-full flex items-center justify-center">
</div> <a-spin />
</GeneralOverlay> </div>
</GeneralOverlay>
<LazySmartsheetSidebarMenuTop :views="views" @open-modal="onOpenModal" @deleted="loadViews" />
<LazySmartsheetSidebarMenuTop :views="views" @open-modal="onOpenModal" @deleted="loadViews" />
<template v-if="isUIAllowed('virtualViewsCreateOrEdit')">
<div class="!my-3 w-full border-b-1" /> <template v-if="isUIAllowed('virtualViewsCreateOrEdit')">
<div class="!my-3 w-full border-b-1" />
<LazySmartsheetSidebarMenuBottom @open-modal="onOpenModal" />
</template> <LazySmartsheetSidebarMenuBottom @open-modal="onOpenModal" />
</div> </template>
</a-layout-sider> </div>
</a-layout-sider>
</div>
</template> </template>
<style scoped> <style scoped>

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

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ColumnType, TableType } from 'nocodb-sdk' import type { ColumnType, TableType } from 'nocodb-sdk'
import { useGlobal } from '../../composables/useGlobal'
import { import {
ActiveViewInj, ActiveViewInj,
FieldsInj, FieldsInj,
@ -63,6 +64,7 @@ provide(
ReadonlyInj, ReadonlyInj,
computed(() => !isUIAllowed('xcDatatableEditable')), computed(() => !isUIAllowed('xcDatatableEditable')),
) )
</script> </script>
<template> <template>

Loading…
Cancel
Save