Browse Source

Merge pull request #2948 from nocodb/refactor/sidebar-tooltips

pull/2970/head
Braks 2 years ago committed by GitHub
parent
commit
01d700dada
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      packages/nc-gui-v2/app.vue
  2. 4
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
  3. 6
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
  4. 8
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
  5. 1
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
  6. 7
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
  7. 2
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
  8. 18
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue

4
packages/nc-gui-v2/app.vue

@ -41,9 +41,9 @@ const toggleSidebar = () => {
<span class="prose-xl">NocoDB</span> <span class="prose-xl">NocoDB</span>
</div> </div>
<div v-show="state.isLoading.value" class="text-gray-400 ml-3"> <div v-show="state.isLoading.value" class="flex items-center gap-2 ml-3">
{{ $t('general.loading') }} {{ $t('general.loading') }}
<MdiReload :class="{ 'animate-infinite animate-spin !text-success': state.isLoading.value }" /> <MdiReload :class="{ 'animate-infinite animate-spin': state.isLoading.value }" />
</div> </div>
</div> </div>

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

@ -2,8 +2,8 @@
import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk' import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk'
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/index.vue'
import { computed, inject, provide, ref, useApi, useViews, watch } from '#imports' import { computed, inject, provide, ref, useApi, useRoute, useViews, watch } from '#imports'
import { ActiveViewInj, MetaInj, RightSidebarInj, 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'

6
packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue → packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue

@ -1,11 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import MdiAddIcon from '~icons/mdi/plus-outline' import MdiAddIcon from '~icons/mdi/plus-outline'
import { inject, ref } from '#imports'
import { RightSidebarInj } from '~/context'
const emits = defineEmits(['addRow']) const emits = defineEmits(['addRow'])
const sidebarOpen = inject(RightSidebarInj, ref(true))
</script> </script>
<template> <template>
<a-tooltip placement="left"> <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
<template #title> {{ $t('activity.addRow') }} </template> <template #title> {{ $t('activity.addRow') }} </template>
<div class="nc-sidebar-right-item hover:after:bg-primary/75 group"> <div class="nc-sidebar-right-item hover:after:bg-primary/75 group">

8
packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue → packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue

@ -1,15 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { inject, useTable } from '#imports' import { inject, ref, useTable } from '#imports'
import { MetaInj } from '~/context' import { MetaInj, RightSidebarInj } from '~/context'
import MdiDeleteIcon from '~icons/mdi/delete-outline' import MdiDeleteIcon from '~icons/mdi/delete-outline'
const meta = inject(MetaInj) const meta = inject(MetaInj)
const { deleteTable } = useTable() const { deleteTable } = useTable()
const sidebarOpen = inject(RightSidebarInj, ref(true))
</script> </script>
<template> <template>
<a-tooltip placement="left"> <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
<template #title> {{ $t('activity.deleteTable') }} </template> <template #title> {{ $t('activity.deleteTable') }} </template>
<div class="nc-sidebar-right-item hover:after:bg-red-500 group"> <div class="nc-sidebar-right-item hover:after:bg-red-500 group">

1
packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue → packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue

@ -54,6 +54,7 @@ const Icon = computed(() => {
<div class="nc-sidebar-right-item hover:after:bg-indigo-500 group"> <div class="nc-sidebar-right-item hover:after:bg-indigo-500 group">
<Icon class="cursor-pointer group-hover:(!text-white)" /> <Icon class="cursor-pointer group-hover:(!text-white)" />
</div> </div>
<template #overlay> <template #overlay>
<div class="min-w-[350px] max-w-[500px] shadow bg-white"> <div class="min-w-[350px] max-w-[500px] shadow bg-white">
<div> <div>

7
packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue → packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue

@ -1,12 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ReloadViewDataHookInj } from '~/context' import { ReloadViewDataHookInj, RightSidebarInj } from '~/context'
import MdiReloadIcon from '~icons/mdi/reload' import MdiReloadIcon from '~icons/mdi/reload'
import { inject, ref } from '#imports'
const reloadTri = inject(ReloadViewDataHookInj) const reloadTri = inject(ReloadViewDataHookInj)
const sidebarOpen = inject(RightSidebarInj, ref(true))
</script> </script>
<template> <template>
<a-tooltip placement="left"> <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
<template #title> {{ $t('general.reload') }} </template> <template #title> {{ $t('general.reload') }} </template>
<div class="nc-sidebar-right-item hover:after:bg-green-500 group"> <div class="nc-sidebar-right-item hover:after:bg-green-500 group">

2
packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue → packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

@ -8,7 +8,7 @@ const sidebarOpen = inject(RightSidebarInj, ref(false))
</script> </script>
<template> <template>
<a-tooltip placement="left"> <a-tooltip :placement="sidebarOpen ? 'bottomRight' : '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">

18
packages/nc-gui-v2/components/smartsheet/sidebar/Toolbar.vue → packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue

@ -1,24 +1,32 @@
<script lang="ts" setup>
import AddRow from './AddRow.vue'
import DeleteTable from './DeleteTable.vue'
import LockMenu from './LockMenu.vue'
import Reload from './Reload.vue'
import ToggleDrawer from './ToggleDrawer.vue'
</script>
<template> <template>
<div class="flex gap-2"> <div class="flex gap-2">
<slot name="start" /> <slot name="start" />
<SmartsheetToolbarLockMenu /> <LockMenu />
<div class="dot" /> <div class="dot" />
<SmartsheetToolbarReload /> <Reload />
<div class="dot" /> <div class="dot" />
<SmartsheetToolbarAddRow /> <AddRow />
<div class="dot" /> <div class="dot" />
<SmartsheetToolbarDeleteTable /> <DeleteTable />
<div class="dot" /> <div class="dot" />
<SmartsheetToolbarToggleDrawer /> <ToggleDrawer />
<slot name="end" /> <slot name="end" />
</div> </div>
Loading…
Cancel
Save