Browse Source

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

pull/4898/head
Daniel Spaude 2 years ago
parent
commit
d5aa438295
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 2
      packages/nc-gui/components/dashboard/TreeView.vue
  2. 3
      packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
  3. 10
      packages/nc-gui/components/smartsheet/sidebar/mobile.vue
  4. 6
      packages/nc-gui/components/tabs/Smartsheet.vue
  5. 22
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue
  6. 2
      packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue

2
packages/nc-gui/components/dashboard/TreeView.vue

@ -582,6 +582,7 @@ const setIcon = async (icon: string, table: TableType) => {
:key="`sortable-${bases[0].id}-${bases[0].id && bases[0].id in keys ? keys[bases[0].id] : '0'}`"
:nc-base="bases[0].id"
>
MARKER TABLES IN LEFT SIDEBAR
<div
v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
:key="table.id"
@ -669,6 +670,7 @@ const setIcon = async (icon: string, table: TableType) => {
</div>
</GeneralTooltip>
</div>
MARKER TABLES IN LEFT SIDEBAR END
</div>
</div>
</div>

3
packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue

@ -234,6 +234,8 @@ const setIcon = async (icon: string, view: ViewType) => {
</script>
<template>
<div>
views in menutop: {{ JSON.stringify(views) }}
<a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu flex-1" :selected-keys="selected">
<!-- Lazy load breaks menu item active styles, i.e. styles never change even when active item changes -->
<SmartsheetSidebarRenameableMenuItem
@ -255,6 +257,7 @@ const setIcon = async (icon: string, view: ViewType) => {
@select-icon="setIcon($event, view)"
/>
</a-menu>
</div>
</template>
<style lang="scss">

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

@ -135,11 +135,21 @@ 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"

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

@ -103,13 +103,15 @@ onMounted(() => {
$globalEventBus.on(FOO)
})
// SmartsheetSidebarMobile MARKER
</script>
<template>
<div class="nc-container flex h-full">
<SmartsheetSidebarMobile v-if="meta && isMobileMode" v-show="isMobileRightSidebarOpen" class="nc-left-sidebar-mobile" />
<!-- {{ JSON.stringify(metas) }} -->
<!-- <SmartsheetSidebarMobile v-if="meta && isMobileMode" v-show="isMobileRightSidebarOpen" class="nc-left-sidebar-mobile" /> -->
<div class="flex flex-col h-full flex-1 min-w-0" ref="mainArea">
<LazySmartsheetToolbar />
LazySmartsheetToolbar: <LazySmartsheetToolbar />
<Transition name="layout" mode="out-in">
<template v-if="meta">

22
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 type { GlobalEvents } from '~/lib'
import {
TabType,
@ -41,6 +42,8 @@ const { t } = useI18n()
const { $e, $globalEventBus } = useNuxtApp()
const { activeTab } = useTabs()
const route = useRoute()
const router = useRouter()
@ -246,6 +249,18 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
}
}
})
// const { bases, tables, loadTables } = useProject()
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)
</script>
<template>
@ -586,7 +601,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
:class="{ 'nc-sidebar-left-toggle-icon': !isMobileMode }"
>
<!-- <div>OUTER INDEX - isOpen: {{ isOpen }}</div> -->
<MdiBackburger
FOO<MdiBackburger
v-e="['c:grid:toggle-navdraw']"
class="cursor-pointer transform transition-transform duration-500"
:class="{ 'rotate-180': !isOpen }"
@ -596,6 +611,11 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
</div>
<LazyDashboardTreeView @create-base-dlg="toggleDialog(true, 'dataSources')" />
<!-- v-show="isMobileRightSidebarOpen" -->
SmartsheetSidebarMobile IN INDEX<SmartsheetSidebarMobile
v-if="meta && isMobileMode"
class="nc-left-sidebar-mobile"
/>SmartsheetSidebarMobile IN INDEX END
</a-layout-sider>
</template>

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

@ -188,7 +188,7 @@ function onDropZoneClick(e: MouseEvent) {
</div>
<a-button type="primary" ghost class="create-table-btn">
<span class="prose text-[1rem] text-primary z-50" @click.stop="openCreateTable">{{ $t('tooltip.addTable') }}</span>
TEST<span class="prose text-[1rem] text-primary z-50" @click.stop="openCreateTable">{{ $t('tooltip.addTable') }}</span>
</a-button>
</div>
</div>

Loading…
Cancel
Save