Browse Source

feat: Added config pinia store and integared isMobileMode with UI

pull/6474/head
Muhammed Mustafa 1 year ago
parent
commit
cbae02cbbb
  1. 2
      packages/nc-gui/components/dashboard/Sidebar/Header.vue
  2. 11
      packages/nc-gui/components/dashboard/View.vue
  3. 4
      packages/nc-gui/components/smartsheet/Pagination.vue
  4. 47
      packages/nc-gui/components/smartsheet/Toolbar.vue
  5. 10
      packages/nc-gui/components/smartsheet/Topbar.vue
  6. 29
      packages/nc-gui/store/config.ts

2
packages/nc-gui/components/dashboard/Sidebar/Header.vue

@ -4,6 +4,8 @@ const workspaceStore = useWorkspace()
const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
const { activeWorkspace, isWorkspaceLoading } = storeToRefs(workspaceStore)
const { isMobileMode } = useGlobal()
</script>
<template>

11
packages/nc-gui/components/dashboard/View.vue

@ -5,6 +5,8 @@ import 'splitpanes/dist/splitpanes.css'
const router = useRouter()
const route = router.currentRoute
const { isMobileMode } = storeToRefs(useConfigStore())
const {
isLeftSidebarOpen,
leftSidebarWidthPercent,
@ -89,6 +91,10 @@ watch(route, () => {
isLeftSidebarOpen.value = true
}
})
watch(isMobileMode, () => {
isLeftSidebarOpen.value = !isMobileMode.value
})
</script>
<template>
@ -104,6 +110,7 @@ watch(route, () => {
ref="wrapperRef"
class="nc-sidebar-wrapper relative flex flex-col h-full justify-center !min-w-32 absolute overflow-visible"
:class="{
'mobile': isMobileMode,
'minimized-height': !isLeftSidebarOpen,
'hide-sidebar': ['hiddenStart', 'hiddenEnd', 'peekCloseEnd'].includes(sidebarState),
}"
@ -126,6 +133,10 @@ watch(route, () => {
width: calc(100% + 4px);
}
.mobile.nc-sidebar-wrapper.minimized-height > * {
@apply !h-full;
}
.nc-sidebar-wrapper > * {
transition: all 0.2s ease-in-out;
@apply z-10 absolute;

4
packages/nc-gui/components/smartsheet/Pagination.vue

@ -23,6 +23,8 @@ const { locale } = useI18n()
const vPaginationData = useVModel(props, 'paginationData', emits)
const { isMobileMode } = useGlobal()
const { alignCountOnRight, customLabel, changePage } = props
const fixedSize = toRef(props, 'fixedSize')
@ -94,7 +96,7 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
</a-input>
</div>
</template>
<div class="flex-1 flex justify-end items-center">
<div v-if="!isMobileMode" class="flex-1 flex justify-end items-center">
<GeneralApiTiming v-if="isEeUI && props.showApiTiming" class="m-1" />
<div class="text-right">
<span

47
packages/nc-gui/components/smartsheet/Toolbar.vue

@ -22,10 +22,11 @@ const isViewSidebarAvailable = computed(
<div
class="nc-table-toolbar h-12 min-h-12 py-1 flex gap-2 items-center border-b border-gray-200 overflow-hidden"
:class="{
'nc-table-toolbar-mobile': isMobileMode,
'h-8': isMobileMode,
'max-h-[var(--topbar-height)] min-h-[var(--topbar-height)]': !isMobileMode,
'pl-3 pr-0': isViewSidebarAvailable,
'px-3': !isViewSidebarAvailable,
'pl-3 pr-0': isViewSidebarAvailable && !isMobileMode,
'px-3': !isViewSidebarAvailable && !isMobileMode,
'px-1': isMobileMode,
}"
style="z-index: 7"
>
@ -33,32 +34,42 @@ const isViewSidebarAvailable = computed(
<a-skeleton-input :active="true" class="!w-44 !h-4 ml-2 !rounded overflow-hidden" />
</template>
<template v-else>
<LazySmartsheetToolbarMappedBy v-if="isMap" />
<template v-if="!isMobileMode">
<LazySmartsheetToolbarMappedBy v-if="isMap" />
<LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" />
<LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" />
<LazySmartsheetToolbarStackedBy v-if="isKanban" />
<LazySmartsheetToolbarStackedBy v-if="isKanban" />
<LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
<LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
<LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
<LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
<LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
<LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
<LazySmartsheetToolbarRowHeight v-if="isGrid" />
<LazySmartsheetToolbarRowHeight v-if="isGrid" />
<LazySmartsheetToolbarQrScannerButton v-if="isMobileMode && (isGrid || isKanban || isGallery)" />
<!-- <LazySmartsheetToolbarQrScannerButton v-if="isMobileMode && (isGrid || isKanban || isGallery)" /> -->
<LazySmartsheetToolbarExport v-if="(!isPublic && !isUIAllowed('dataInsert')) || (isPublic && allowCSVDownload)" />
<LazySmartsheetToolbarExport v-if="(!isPublic && !isUIAllowed('dataInsert')) || (isPublic && allowCSVDownload)" />
<div v-if="!isMobileMode" class="flex-1" />
<div class="flex-1" />
</template>
<LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery || isKanban) && !isPublic" class="shrink" />
<LazySmartsheetToolbarViewActions
v-if="(isGrid || isGallery || isKanban || isMap) && !isPublic && isUIAllowed('dataInsert')"
:show-system-fields="false"
<LazySmartsheetToolbarSearchData
v-if="(isGrid || isGallery || isKanban) && !isPublic"
:class="{
'shrink': !isMobileMode,
'w-full': isMobileMode,
}"
/>
<template v-if="!isMobileMode">
<LazySmartsheetToolbarViewActions
v-if="(isGrid || isGallery || isKanban || isMap) && !isPublic && isUIAllowed('dataInsert')"
:show-system-fields="false"
/>
</template>
<LazySmartsheetToolbarOpenViewSidebarBtn v-if="isViewSidebarAvailable" />
</template>
</div>

10
packages/nc-gui/components/smartsheet/Topbar.vue

@ -10,7 +10,7 @@ const isPublic = inject(IsPublicInj, ref(false))
const { isViewsLoading } = storeToRefs(useViewsStore())
const { isMobileMode } = useGlobal()
const { isMobileMode } = storeToRefs(useConfigStore())
const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
</script>
@ -31,11 +31,13 @@ const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
<GeneralOpenLeftSidebarBtn />
<LazySmartsheetToolbarViewInfo v-if="!isPublic" />
<div v-if="!isMobileMode" class="flex-1" />
<div class="flex-1" />
<div v-if="!isSharedBase" class="absolute mx-auto -left-1/8 right-0 w-47.5"><SmartsheetTopbarSelectMode /></div>
<div v-if="!isSharedBase && !isMobileMode" class="absolute mx-auto -left-1/8 right-0 w-47.5">
<SmartsheetTopbarSelectMode />
</div>
<GeneralApiLoader />
<GeneralApiLoader v-if="!isMobileMode" />
<LazyGeneralShareProject v-if="(isForm || isGrid || isKanban || isGallery || isMap) && !isPublic" is-view-toolbar />

29
packages/nc-gui/store/config.ts

@ -0,0 +1,29 @@
import { defineStore } from 'pinia'
export const useConfigStore = defineStore('configStore', () => {
const { isMobileMode: globalIsMobile } = useGlobal()
const isMobileMode = ref(window.innerWidth < 820)
const isViewPortMobile = () => window.innerWidth < 820
const onViewPortResize = () => {
isMobileMode.value = isViewPortMobile()
}
window.addEventListener('DOMContentLoaded', onViewPortResize)
window.addEventListener('resize', onViewPortResize)
watch(
isMobileMode,
() => {
globalIsMobile.value = isMobileMode.value
},
{
immediate: true,
},
)
return {
isMobileMode,
}
})
Loading…
Cancel
Save