Browse Source

refactor(gui-v2): change right sidebar toggle icons

# What's changed?

* add RightSidebarInj injection key
* change right sidebar toggle icons
* limit views menu height to max 200px
pull/2936/head
braks 2 years ago
parent
commit
8babcc2d11
  1. 10
      packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue
  2. 2
      packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
  3. 12
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
  4. 4
      packages/nc-gui-v2/components/tabs/Smartsheet.vue
  5. 2
      packages/nc-gui-v2/context/index.ts

10
packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue

@ -1,17 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import MdiMenuClose from '~icons/mdi/menu-close'
import MdiUnfoldMoreVertical from '~icons/mdi/unfold-more-vertical' import MdiUnfoldMoreVertical from '~icons/mdi/unfold-more-vertical'
import MdiUnfoldLessVertical from '~icons/mdi/unfold-less-vertical' import MdiUnfoldLessVertical from '~icons/mdi/unfold-less-vertical'
import { inject, ref } from '#imports'
import { RightSidebarInj } from '~/context'
const drawerOpen = inject('navDrawerOpen', ref(false)) const sidebarOpen = inject(RightSidebarInj, ref(false))
</script> </script>
<template> <template>
<a-tooltip placement="left"> <a-tooltip placement="left">
<template #title> {{ $t('tooltip.toggleNavDraw') }} </template> <template #title> {{ $t('tooltip.toggleNavDraw') }} </template>
<div class="nc-sidebar-right-item hover:after:bg-pink-500 group"> <div class="nc-sidebar-right-item hover:after:bg-pink-500 group">
<MdiUnfoldLessVertical class="group-hover:(!text-white)" v-if="drawerOpen" @click="drawerOpen = !drawerOpen" /> <MdiUnfoldLessVertical v-if="sidebarOpen" class="group-hover:(!text-white)" @click="sidebarOpen = false" />
<MdiUnfoldMoreVertical class="group-hover:(!text-white)" v-else @click="drawerOpen = !drawerOpen" /> <MdiUnfoldMoreVertical v-else class="group-hover:(!text-white)" @click="sidebarOpen = true" />
</div> </div>
</a-tooltip> </a-tooltip>
</template> </template>

2
packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue

@ -216,7 +216,7 @@ function onDeleted() {
<style lang="scss"> <style lang="scss">
.nc-views-menu { .nc-views-menu {
@apply flex-1 max-h-[50vh] md:max-h-[200px] lg:max-h-[400px] xl:max-h-[600px] overflow-y-scroll scrollbar-thin-primary; @apply flex-1 max-h-[200px] overflow-y-scroll scrollbar-thin-primary;
.ghost, .ghost,
.ghost > * { .ghost > * {

12
packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@ -3,8 +3,8 @@ import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'noc
import MenuTop from './MenuTop.vue' import MenuTop from './MenuTop.vue'
import MenuBottom from './MenuBottom.vue' import MenuBottom from './MenuBottom.vue'
import Toolbar from './Toolbar.vue' import Toolbar from './Toolbar.vue'
import { inject, provide, ref, useApi, useViews, watch } from '#imports' import { computed, inject, provide, ref, useApi, useViews, watch } from '#imports'
import { ActiveViewInj, MetaInj, ViewListInj } from '~/context' import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
import MdiXml from '~icons/mdi/xml' import MdiXml from '~icons/mdi/xml'
import MdiHook from '~icons/mdi/hook' import MdiHook from '~icons/mdi/hook'
@ -19,9 +19,9 @@ const { api } = useApi()
provide(ViewListInj, views) provide(ViewListInj, views)
/** Sidebar visible */ /** Sidebar visible */
const drawerOpen = inject('navDrawerOpen', ref(true)) const sidebarOpen = inject(RightSidebarInj, ref(true))
const sidebarCollapsed = computed(() => !drawerOpen.value) const sidebarCollapsed = computed(() => !sidebarOpen.value)
/** View type to create from modal */ /** View type to create from modal */
let viewCreateType = $ref<ViewTypes>() let viewCreateType = $ref<ViewTypes>()
@ -68,7 +68,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
style="height: calc(100% + 9px)" style="height: calc(100% + 9px)"
theme="light" theme="light"
> >
<Toolbar v-if="drawerOpen" class="flex items-center py-3 px-3 justify-between border-b-1" /> <Toolbar v-if="sidebarOpen" class="flex items-center py-3 px-3 justify-between border-b-1" />
<Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]"> <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
<template #start> <template #start>
@ -94,7 +94,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
</template> </template>
</Toolbar> </Toolbar>
<div v-if="drawerOpen" class="flex-1 flex flex-col"> <div v-if="sidebarOpen" class="flex-1 flex flex-col">
<MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" /> <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
<a-divider class="my-2" /> <a-divider class="my-2" />

4
packages/nc-gui-v2/components/tabs/Smartsheet.vue

@ -3,7 +3,7 @@ import type { ColumnType } from 'nocodb-sdk'
import { ViewTypes } from 'nocodb-sdk' import { ViewTypes } from 'nocodb-sdk'
import SmartsheetGrid from '../smartsheet/Grid.vue' import SmartsheetGrid from '../smartsheet/Grid.vue'
import { computed, inject, provide, useMetas, watch, watchEffect } from '#imports' import { computed, inject, provide, useMetas, watch, watchEffect } from '#imports'
import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/context' import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, RightSidebarInj, TabMetaInj } from '~/context'
import type { TabItem } from '~/composables' import type { TabItem } from '~/composables'
const { getMeta, metas } = useMetas() const { getMeta, metas } = useMetas()
@ -33,7 +33,7 @@ provide(ActiveViewInj, activeView)
provide(IsLockedInj, false) provide(IsLockedInj, false)
provide(ReloadViewDataHookInj, reloadEventHook) provide(ReloadViewDataHookInj, reloadEventHook)
provide(FieldsInj, fields) provide(FieldsInj, fields)
provide('navDrawerOpen', ref(true)) provide(RightSidebarInj, ref(true))
watch(tabMeta, async (newTabMeta, oldTabMeta) => { watch(tabMeta, async (newTabMeta, oldTabMeta) => {
if (newTabMeta !== oldTabMeta && newTabMeta.id) await getMeta(newTabMeta.id) if (newTabMeta !== oldTabMeta && newTabMeta.id) await getMeta(newTabMeta.id)

2
packages/nc-gui-v2/context/index.ts

@ -19,3 +19,5 @@ export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection') export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection') export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection') export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')

Loading…
Cancel
Save