Merge branch 'develop' into feat/CW-2065

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -193,6 +193,7 @@ export default {
           .map(view => ({
             id: view.id,
             label: view.name,
+            count: view.count,
             truncateLabel: true,
             toState: frontendURL(
               `accounts/${this.accountId}/custom_view/${view.id}`
@@ -211,6 +212,7 @@ export default {
           .map(view => ({
             id: view.id,
             label: view.name,
+            count: view.count,
             truncateLabel: true,
             toState: frontendURL(
               `accounts/${this.accountId}/contacts/custom_view/${view.id}`

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue

@@ -20,19 +20,22 @@
           class="badge--label"
           :style="{ backgroundColor: labelColor }"
         />
-        <span
+        <div class="menu-label--wrapper">
-          :title="menuTitle"
+          <span
-          class="menu-label button__content"
+            :title="menuTitle"
-          :class="{ 'text-truncate': shouldTruncate }"
+            class="menu-label button__content"
-        >
+            :class="{ 'text-truncate': shouldTruncate }"
-          {{ label }}
+          >
-          <span v-if="showChildCount" class="count-view">
+            {{ label }}
+          </span>
+          <span
+            v-if="showChildCount"
+            class="count-view"
+            :class="isCountZero ? 'text-muted' : 'text-color'"
+          >
             {{ childItemCount }}
           </span>
-        </span>
+        </div>
-        <span v-if="count" class="badge" :class="{ secondary: !isActive }">
-          {{ count }}
-        </span>
         <span v-if="warningIcon" class="badge--icon">
           <fluent-icon
             v-tooltip.top-end="$t('SIDEBAR.FACEBOOK_REAUTHORIZE')"
@@ -72,10 +75,6 @@ export default {
       type: String,
       default: '',
     },
-    count: {
-      type: String,
-      default: '',
-    },
     showChildCount: {
       type: Boolean,
       default: false,
@@ -89,6 +88,9 @@ export default {
     showIcon() {
       return { 'text-truncate': this.shouldTruncate };
     },
+    isCountZero() {
+      return this.childItemCount === 0;
+    },
     menuTitle() {
       return this.shouldTruncate ? this.label : '';
     },
@@ -134,6 +136,15 @@ $label-badge-size: var(--space-slab);
   }
 }
 
+.menu-label--wrapper {
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
 .menu-label {
   flex-grow: 1;
 }
@@ -174,11 +185,14 @@ $label-badge-size: var(--space-slab);
 .count-view {
   background: var(--s-50);
   border-radius: var(--border-radius-normal);
-  color: var(--s-600);
   font-size: var(--font-size-micro);
   font-weight: var(--font-weight-bold);
   margin-left: var(--space-smaller);
   padding: var(--space-zero) var(--space-smaller);
   line-height: var(--font-size-small);
+
+  &.text-color {
+    color: var(--s-600);
+  }
 }
 </style>