Browse Source

Merge pull request #2936 from nocodb/refactor/menu-toggle

refactor(gui-v2): change right sidebar toggle icons
pull/2934/head
Pranav C 2 years ago committed by GitHub
parent
commit
9123214f82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  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">
import MdiMenuClose from '~icons/mdi/menu-close'
import MdiUnfoldMoreVertical from '~icons/mdi/unfold-more-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>
<template>
<a-tooltip placement="left">
<template #title> {{ $t('tooltip.toggleNavDraw') }} </template>
<div class="nc-sidebar-right-item hover:after:bg-pink-500 group">
<MdiUnfoldLessVertical class="group-hover:(!text-white)" v-if="drawerOpen" @click="drawerOpen = !drawerOpen" />
<MdiUnfoldMoreVertical class="group-hover:(!text-white)" v-else @click="drawerOpen = !drawerOpen" />
<MdiUnfoldLessVertical v-if="sidebarOpen" class="group-hover:(!text-white)" @click="sidebarOpen = false" />
<MdiUnfoldMoreVertical v-else class="group-hover:(!text-white)" @click="sidebarOpen = true" />
</div>
</a-tooltip>
</template>

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

@ -216,7 +216,7 @@ function onDeleted() {
<style lang="scss">
.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 > * {

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 MenuBottom from './MenuBottom.vue'
import Toolbar from './Toolbar.vue'
import { inject, provide, ref, useApi, useViews, watch } from '#imports'
import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
import { computed, inject, provide, ref, useApi, useViews, watch } from '#imports'
import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
import MdiXml from '~icons/mdi/xml'
import MdiHook from '~icons/mdi/hook'
@ -19,9 +19,9 @@ const { api } = useApi()
provide(ViewListInj, views)
/** 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 */
let viewCreateType = $ref<ViewTypes>()
@ -68,7 +68,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
style="height: calc(100% + 9px)"
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]">
<template #start>
@ -94,7 +94,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
</template>
</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" />
<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 SmartsheetGrid from '../smartsheet/Grid.vue'
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'
const { getMeta, metas } = useMetas()
@ -33,7 +33,7 @@ provide(ActiveViewInj, activeView)
provide(IsLockedInj, false)
provide(ReloadViewDataHookInj, reloadEventHook)
provide(FieldsInj, fields)
provide('navDrawerOpen', ref(true))
provide(RightSidebarInj, ref(true))
watch(tabMeta, async (newTabMeta, oldTabMeta) => {
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 FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-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