Browse Source

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

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

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

@ -44,9 +44,12 @@ const route = useRoute()
const { $e } = useNuxtApp()
/** Sidebar visible */
const { isOpen } = useSidebar('nc-right-sidebar')
// const { isOpen } = useSidebar('nc-right-sidebar')
// const FOO = useSidebar('nc-right-sidebar')
// FOO.
const sidebarCollapsed = computed(() => !isOpen.value || isMobileMode.value)
// const sidebarCollapsed = computed(() => !isOpen.value || isMobileMode.value)
const sidebarCollapsed = false
/** Sidebar ref */
const sidebar = ref()
@ -138,39 +141,39 @@ function onOpenModal({
</script>
<template>
<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>
<!-- <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>

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

@ -1,5 +1,6 @@
<script setup lang="ts">
import tinycolor from 'tinycolor2'
import type { TableType } from 'nocodb-sdk'
import {
TabType,
computed,
@ -29,7 +30,6 @@ import {
useTheme,
useUIPermission,
} from '#imports'
import { TableType } from 'nocodb-sdk'
definePageMeta({
hideHeader: true,
@ -66,9 +66,6 @@ const dataSourcesState = ref<string>('')
const dropdownOpen = ref(false)
const { activeTab } = useTabs()
const { metas } = useMetas()
// const { tables } = useProject()
@ -76,8 +73,7 @@ const { metas } = useMetas()
const meta = computed<TableType | undefined>(() => activeTab.value && metas.value[activeTab.value.id!])
provide(MetaInj, meta)
const showViewsMobileSidebar = ref(false)
/** Sidebar ref */
const sidebar = ref()
@ -589,7 +585,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
class="hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"
:class="{ 'nc-sidebar-left-toggle-icon': !isMobileMode }"
>
<!-- <div>OUTER INDEX - isOpen: {{ isOpen }}</div> -->
<!-- <div>OUTER INDEX - isOpen: {{ isOpen }}</div> -->
<MdiBackburger
v-e="['c:grid:toggle-navdraw']"
class="cursor-pointer transform transition-transform duration-500"
@ -602,8 +598,11 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
<!-- 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')" />
<LazyDashboardTreeView
v-if="!(isMobileMode && showViewsMobileSidebar)"
@create-base-dlg="toggleDialog(true, 'dataSources')"
/>
<SmartsheetSidebarMobile v-if="meta && isMobileMode && showViewsMobileSidebar" class="nc-left-sidebar-mobile" />
</a-layout-sider>
</template>

Loading…
Cancel
Save