Browse Source

feat: show count in badge for filter, sort and fields button

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4504/head
Pranav C 2 years ago
parent
commit
044717b443
  1. 5
      packages/nc-gui/assets/style.scss
  2. 4
      packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
  3. 7
      packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
  4. 3
      packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue

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

@ -86,6 +86,11 @@ a {
@apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-[''] !z-20); @apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-[''] !z-20);
} }
// badge with count
.nc-count-badge {
@apply absolute flex items-center top-[-6px] right-[-6px] px-1 min-w-[14px] h-[14px] rounded-full bg-primary bg-opacity-100 text-white !text-[9px] !z-21;
}
// for highlighting toolbar menu item // for highlighting toolbar menu item
.nc-active-btn > .ant-btn { .nc-active-btn > .ant-btn {
@apply bg-primary bg-opacity-20 hover:(bg-primary bg-opacity-20); @apply bg-primary bg-opacity-20 hover:(bg-primary bg-opacity-20);

4
packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

@ -71,13 +71,15 @@ useMenuCloseOnEsc(open)
<template> <template>
<a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu"> <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
<div :class="{ 'nc-badge nc-active-btn': filtersLength }"> <div :class="{ 'nc-active-btn': filtersLength }">
<a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked"> <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<MdiFilterOutline /> <MdiFilterOutline />
<!-- Filter --> <!-- Filter -->
<span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.filter') }}</span> <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.filter') }}</span>
<MdiMenuDown class="text-grey" /> <MdiMenuDown class="text-grey" />
<span class="nc-count-badge" v-if="filtersLength">{{ filtersLength }}</span>
</div> </div>
</a-button> </a-button>
</div> </div>

7
packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@ -66,7 +66,7 @@ watch(
{ immediate: true }, { immediate: true },
) )
const isAnyFieldHidden = computed(() => filteredFieldList.value?.some((field) => !field.show)) const numberOfHiddenFields = computed(() => filteredFieldList.value?.filter((field) => !field.show)?.length)
const onMove = (_event: { moved: { newIndex: number } }) => { const onMove = (_event: { moved: { newIndex: number } }) => {
// todo : sync with server // todo : sync with server
@ -138,7 +138,7 @@ useMenuCloseOnEsc(open)
<template> <template>
<a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu"> <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu">
<div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }"> <div :class="{ 'nc-active-btn': numberOfHiddenFields }">
<a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked"> <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<MdiEyeOffOutline /> <MdiEyeOffOutline />
@ -147,6 +147,8 @@ useMenuCloseOnEsc(open)
<span class="text-capitalize !text-sm font-weight-normal">{{ $t('objects.fields') }}</span> <span class="text-capitalize !text-sm font-weight-normal">{{ $t('objects.fields') }}</span>
<MdiMenuDown class="text-grey" /> <MdiMenuDown class="text-grey" />
<span class="nc-count-badge" v-if="numberOfHiddenFields">{{ numberOfHiddenFields }}</span>
</div> </div>
</a-button> </a-button>
</div> </div>
@ -238,4 +240,5 @@ useMenuCloseOnEsc(open)
:deep(.ant-checkbox) { :deep(.ant-checkbox) {
@apply top-auto; @apply top-auto;
} }
</style> </style>

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

@ -63,6 +63,9 @@ useMenuCloseOnEsc(open)
<!-- Sort --> <!-- Sort -->
<span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.sort') }}</span> <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.sort') }}</span>
<MdiMenuDown class="text-grey" /> <MdiMenuDown class="text-grey" />
<span class="nc-count-badge" v-if="sorts?.length">{{ sorts.length }}</span>
</div> </div>
</a-button> </a-button>
</div> </div>

Loading…
Cancel
Save