Browse Source

mobile optimisations - work on merging right and left sidebar (WIP)

pull/4898/head
Daniel Spaude 2 years ago
parent
commit
51680382a0
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 74
      packages/nc-gui/components/smartsheet/sidebar/mobile.vue
  2. 18
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue

74
packages/nc-gui/components/smartsheet/sidebar/mobile.vue

@ -135,50 +135,42 @@ function onOpenModal({
close(1000)
}
}
onMounted(async () => {
await loadViews()
})
</script>
<template>
<!-- <div> -->
<!-- MOBILE -->
<!-- <br />
META: {{ JSON.stringify(meta) }} -->
<!-- <br />
VIEWS: {{ JSON.stringify(views.length) }}
<br /> -->
<a-layout-sider
ref="sidebar"
:collapsed="sidebarCollapsed"
collapsiple
collapsed-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])"
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"
/>
<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="w-full h-full flex items-center justify-center">
<a-spin />
</div>
</GeneralOverlay>
<LazySmartsheetSidebarMenuTop :views="views" @open-modal="onOpenModal" @deleted="loadViews" />
<template v-if="isUIAllowed('virtualViewsCreateOrEdit')">
<div class="!my-3 w-full border-b-1" />
<LazySmartsheetSidebarMenuBottom @open-modal="onOpenModal" />
</template>
</div>
</a-layout-sider>
<!-- </div> -->
<div>
Mobile Views Menu <br />
views: {{ views.length }}
<a-layout-sider
ref="sidebar"
:collapsed="sidebarCollapsed"
collapsiple
collapsed-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])"
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"
/>
<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="w-full h-full flex items-center justify-center">
<a-spin />
</div>
</GeneralOverlay>
<LazySmartsheetSidebarMenuTop :views="views" @open-modal="onOpenModal" @deleted="loadViews" />
<template v-if="isUIAllowed('virtualViewsCreateOrEdit')">
<div class="!my-3 w-full border-b-1" />
<LazySmartsheetSidebarMenuBottom @open-modal="onOpenModal" />
</template>
</div>
</a-layout-sider>
</div>
</template>
<style scoped>

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

@ -29,6 +29,7 @@ import {
useTheme,
useUIPermission,
} from '#imports'
import { TableType } from 'nocodb-sdk'
definePageMeta({
hideHeader: true,
@ -65,6 +66,19 @@ const dataSourcesState = ref<string>('')
const dropdownOpen = ref(false)
const { activeTab } = useTabs()
const { metas } = useMetas()
// const { tables } = useProject()
// const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.id : null))
const meta = computed<TableType | undefined>(() => activeTab.value && metas.value[activeTab.value.id!])
provide(MetaInj, meta)
/** Sidebar ref */
const sidebar = ref()
@ -585,6 +599,10 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
</div>
</div>
<!-- v-show="isMobileRightSidebarOpen" -->
<!-- meta: {{ JSON.stringify(meta) }} <br />
isMobileMode: {{ JSON.stringify(isMobileMode) }} <br /> -->
<SmartsheetSidebarMobile v-if="meta && isMobileMode" class="nc-left-sidebar-mobile" />
<LazyDashboardTreeView @create-base-dlg="toggleDialog(true, 'dataSources')" />
</a-layout-sider>
</template>

Loading…
Cancel
Save