Browse Source

feat(gui-v2): add tooltips to right sidebar icons

pull/2892/head
braks 2 years ago
parent
commit
6a9c8dc86d
  1. 17
      packages/nc-gui-v2/assets/style-v2.scss
  2. 13
      packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
  3. 10
      packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
  4. 10
      packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
  5. 9
      packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
  6. 15
      packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
  7. 7
      packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue
  8. 2
      packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
  9. 16
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

17
packages/nc-gui-v2/assets/style-v2.scss

@ -76,3 +76,20 @@ html {
.nc-menu-item { .nc-menu-item {
@apply cursor-pointer text-xs flex align-center gap-2 p-4 relative after:(content-[''] absolute top-0 left-0 w-full h-full right 0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5)); @apply cursor-pointer text-xs flex align-center gap-2 p-4 relative after:(content-[''] absolute top-0 left-0 w-full h-full right 0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
} }
.nc-sidebar-right-item {
@apply relative flex items-center;
&::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
content: '';
}
&:hover::after {
@apply ring shadow-2xl transform scale-110;
}
svg {
@apply z-1 text-xl p-1 text-gray-500;
}
}

13
packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue

@ -1,10 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import MdiAddIcon from '~icons/mdi/plus-outline' import MdiAddIcon from '~icons/mdi/plus-outline'
const emit = defineEmits(['add-row'])
const emits = defineEmits(['addRow'])
</script> </script>
<template> <template>
<MdiAddIcon class="text-grey" @click="emit('add-row')" /> <a-tooltip placement="left">
</template> <template #title> {{ $t('activity.addRow') }} </template>
<style scoped></style> <div class="nc-sidebar-right-item hover:after:bg-primary/75 group">
<MdiAddIcon class="group-hover:(!text-white)" @click="emits('addRow')" />
</div>
</a-tooltip>
</template>

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

@ -3,7 +3,11 @@ import MdiDeleteIcon from '~icons/mdi/delete-outline'
</script> </script>
<template> <template>
<MdiDeleteIcon class="text-grey" /> <a-tooltip placement="left">
</template> <template #title> {{ $t('activity.deleteTable') }} </template>
<style scoped></style> <div class="nc-sidebar-right-item hover:after:bg-red-500 group">
<MdiDeleteIcon class="group-hover:(!text-white)" />
</div>
</a-tooltip>
</template>

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

@ -51,15 +51,11 @@ const Icon = computed(() => {
}) })
</script> </script>
<script lang="ts">
export default {
name: 'LockMenu',
}
</script>
<template> <template>
<a-dropdown max-width="350" :trigger="['click']"> <a-dropdown max-width="350" :trigger="['click']">
<Icon class="mx-1 nc-view-lock-menu text-grey"> mdi-lock-outline </Icon> <div class="nc-sidebar-right-item hover:after:bg-indigo-500 group">
<Icon class="cursor-pointer group-hover:(!text-white)" />
</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>

9
packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue

@ -1,11 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { ReloadViewDataHookInj } from '~/context' import { ReloadViewDataHookInj } from '~/context'
import MdiReloadIcon from '~icons/mdi/reload' import MdiReloadIcon from '~icons/mdi/reload'
const reloadTri = inject(ReloadViewDataHookInj) const reloadTri = inject(ReloadViewDataHookInj)
</script> </script>
<template> <template>
<MdiReloadIcon class="text-grey" @click="reloadTri.trigger()" /> <a-tooltip placement="left">
<template #title> {{ $t('general.reload') }} </template>
<div class="nc-sidebar-right-item hover:after:bg-green-500 group">
<MdiReloadIcon class="group-hover:(!text-white)" @click="reloadTri.trigger()" />
</div>
</a-tooltip>
</template> </template>
<style scoped></style> <style scoped></style>

15
packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue

@ -1,18 +1,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import MdiOpenInNew from '~icons/mdi/open-in-new' import MdiOpenInNew from '~icons/mdi/open-in-new'
import { useUIPermission } from '#imports'
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
</script> </script>
<template> <template>
<div> <div v-t="['c:view:share']" class="nc-sidebar-right-item hover:after:bg-secondary/75 group">
<a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn" size="small"> <MdiOpenInNew class="group-hover:(!text-white)" />
<div class="flex align-center gap-1"> {{ $t('activity.shareView') }}
<MdiOpenInNew class="text-grey" />
<!-- Share View -->
{{ $t('activity.shareView') }}
</div>
</a-button>
</div> </div>
</template> </template>
<style scoped />

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

@ -7,9 +7,8 @@ const drawerOpen = inject('navDrawerOpen', ref(false))
<template> <template>
<a-tooltip placement="left"> <a-tooltip placement="left">
<template #title> {{ $t('tooltip.toggleNavDraw') }} </template> <template #title> {{ $t('tooltip.toggleNavDraw') }} </template>
<MdiMenuClose <div class="nc-sidebar-right-item hover:after:bg-pink-500 group">
class="rounded text-xl p-1 text-gray-500 hover:(text-white bg-pink-500 shadow)" <MdiMenuClose class="group-hover:(!text-white)" @click="drawerOpen = !drawerOpen" />
@click="drawerOpen = !drawerOpen" </div>
/>
</a-tooltip> </a-tooltip>
</template> </template>

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

@ -94,7 +94,7 @@ function onOpenModal(type: ViewTypes, title = '') {
</a-tooltip> </a-tooltip>
</a-menu-item> </a-menu-item>
<div class="flex-auto justify-end flex flex-col gap-4 lg:gap-8 mt-4"> <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
<button <button
class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease" class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
@click="onApiSnippet" @click="onApiSnippet"

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

@ -72,11 +72,23 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
<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>
<MdiHook class="rounded text-xl p-1 text-gray-500 hover:(text-white bg-pink-500 shadow)" /> <a-tooltip placement="left">
<template #title> {{ $t('objects.webhooks') }} </template>
<div class="nc-sidebar-right-item hover:after:bg-gray-300">
<MdiHook />
</div>
</a-tooltip>
<div class="dot" /> <div class="dot" />
<MdiXml class="rounded text-xl p-1 text-gray-500 hover:(text-white bg-pink-500 shadow)" /> <a-tooltip placement="left">
<template #title> Get API Snippet </template>
<div class="nc-sidebar-right-item group hover:after:bg-yellow-500">
<MdiXml class="group-hover:!text-white" />
</div>
</a-tooltip>
<div class="dot" /> <div class="dot" />
</template> </template>

Loading…
Cancel
Save