Browse Source

refactor(nc-gui): update smartsheet toolbar button styles

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
commit
100f352e04
  1. 4
      packages/nc-gui/assets/style.scss
  2. 10
      packages/nc-gui/components/smartsheet/Toolbar.vue
  3. 2
      packages/nc-gui/components/smartsheet/toolbar/AddRow.vue
  4. 22
      packages/nc-gui/components/smartsheet/toolbar/Reload.vue
  5. 3
      packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

4
packages/nc-gui/assets/style.scss

@ -271,3 +271,7 @@ a {
transform: scale(75%); transform: scale(75%);
transform-origin: bottom right; transform-origin: bottom right;
} }
.nc-toolbar-btn {
@apply shadow-sm rounded !border border-slate-300 color-transition;
}

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

@ -14,7 +14,7 @@ const { allowCSVDownload } = useSharedView()
<template> <template>
<div <div
class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[var(--toolbar-height)] px-2 border-b overflow-x-hidden" class="nc-table-toolbar w-full py-1 flex gap-2 items-center h-[var(--toolbar-height)] px-2 border-b overflow-x-hidden"
style="z-index: 7" style="z-index: 7"
> >
<LazySmartsheetToolbarViewActions <LazySmartsheetToolbarViewActions
@ -25,7 +25,7 @@ const { allowCSVDownload } = useSharedView()
<LazySmartsheetToolbarViewInfo v-if="!isUIAllowed('dataInsert') && !isPublic" /> <LazySmartsheetToolbarViewInfo v-if="!isUIAllowed('dataInsert') && !isPublic" />
<LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" /> <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" />
<LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" /> <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
@ -37,11 +37,11 @@ const { allowCSVDownload } = useSharedView()
<div class="flex-1" /> <div class="flex-1" />
<LazySmartsheetToolbarReload v-if="!isPublic && !isForm" class="mx-1" /> <LazySmartsheetToolbarReload v-if="!isPublic && !isForm" />
<LazySmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm && !isSqlView" class="mx-1" /> <LazySmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm && !isSqlView" />
<LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" /> <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mx-2" />
<template v-if="!isOpen && !isPublic"> <template v-if="!isOpen && !isPublic">
<div class="border-l-1 pl-3"> <div class="border-l-1 pl-3">

2
packages/nc-gui/components/smartsheet/toolbar/AddRow.vue

@ -16,7 +16,7 @@ const onClick = () => {
<div <div
v-e="['c:row:add:grid-top']" v-e="['c:row:add:grid-top']"
:class="{ 'group': !isLocked, 'disabled-ring': isLocked }" :class="{ 'group': !isLocked, 'disabled-ring': isLocked }"
class="nc-add-new-row-btn flex align-center" class="nc-add-new-row-btn nc-toolbar-btn flex min-w-32px w-32px h-32px items-center"
> >
<MdiPlusOutline <MdiPlusOutline
:class="{ 'cursor-pointer text-gray-500 group-hover:(text-primary)': !isLocked, 'disabled': isLocked }" :class="{ 'cursor-pointer text-gray-500 group-hover:(text-primary)': !isLocked, 'disabled': isLocked }"

22
packages/nc-gui/components/smartsheet/toolbar/Reload.vue

@ -1,13 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { ReloadViewDataHookInj, inject, useNuxtApp } from '#imports' import { ReloadViewDataHookInj, inject, ref, useNuxtApp, watch } from '#imports'
const { $e } = useNuxtApp() const { $e, $state } = useNuxtApp()
const reloadHook = inject(ReloadViewDataHookInj)! const reloadHook = inject(ReloadViewDataHookInj)!
const isReloading = ref(false)
const onClick = () => { const onClick = () => {
$e('a:table:reload:navbar') $e('a:table:reload:navbar')
isReloading.value = true
reloadHook.trigger() reloadHook.trigger()
const stop = watch($state.isLoading, (isLoading) => {
if (!isLoading) {
isReloading.value = false
stop()
}
})
} }
</script> </script>
@ -15,8 +25,12 @@ const onClick = () => {
<a-tooltip placement="bottom"> <a-tooltip placement="bottom">
<template #title> {{ $t('general.reload') }} </template> <template #title> {{ $t('general.reload') }} </template>
<div class="group flex align-center"> <div class="nc-toolbar-btn flex min-w-32px w-32px h-32px items-center">
<MdiReload class="cursor-pointer text-gray-500 group-hover:(text-primary) nc-toolbar-reload-btn" @click="onClick" /> <MdiReload
class="w-full h-full cursor-pointer text-gray-500 group-hover:(text-primary) nc-toolbar-reload-btn"
:class="isReloading ? 'animate-spin' : ''"
@click="onClick"
/>
</div> </div>
</a-tooltip> </a-tooltip>
</template> </template>

3
packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

@ -153,8 +153,9 @@ watch(passwordProtected, (value) => {
v-e="['c:view:share']" v-e="['c:view:share']"
outlined outlined
class="nc-btn-share-view nc-toolbar-btn" class="nc-btn-share-view nc-toolbar-btn"
@click="genShareLink"
> >
<div class="flex items-center gap-1" @click="genShareLink"> <div class="flex items-center gap-1">
<MdiOpenInNew /> <MdiOpenInNew />
<!-- Share View --> <!-- Share View -->
<span class="!text-sm font-weight-normal"> {{ $t('activity.shareView') }}</span> <span class="!text-sm font-weight-normal"> {{ $t('activity.shareView') }}</span>

Loading…
Cancel
Save