feat: Display labels in the conversation card (#6088)

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>

app/javascript/dashboard/components/ui/Label.vue

@@ -199,8 +199,8 @@ export default {
 
   &.smooth {
     background: transparent;
-    border: 1px solid var(--s-75);
-    color: var(--s-800);
+    border: 1px solid var(--s-100);
+    color: var(--s-700);
   }
 }
 

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -91,6 +91,7 @@
         </span>
         <span class="unread">{{ unreadCount > 9 ? '9+' : unreadCount }}</span>
       </div>
+      <card-labels :conversation-id="chat.id" />
     </div>
     <woot-context-menu
       v-if="showContextMenu"
@@ -125,8 +126,8 @@ import InboxName from '../InboxName';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import ConversationContextMenu from './contextMenu/Index.vue';
 import alertMixin from 'shared/mixins/alertMixin';
-import timeAgo from 'dashboard/components/ui/TimeAgo';
-
+import TimeAgo from 'dashboard/components/ui/TimeAgo';
+import CardLabels from './conversationCardComponents/CardLabels.vue';
 const ATTACHMENT_ICONS = {
   image: 'image',
   audio: 'headphones-sound-wave',
@@ -138,10 +139,11 @@ const ATTACHMENT_ICONS = {
 
 export default {
   components: {
+    CardLabels,
     InboxName,
     Thumbnail,
     ConversationContextMenu,
-    timeAgo,
+    TimeAgo,
   },
 
   mixins: [
@@ -370,11 +372,15 @@ export default {
 </script>
 <style lang="scss" scoped>
 .conversation {
-  align-items: center;
+  align-items: flex-start;
 
   &:hover {
     background: var(--color-background-light);
   }
+
+  &::v-deep .user-thumbnail-box {
+    margin-top: var(--space-normal);
+  }
 }
 
 .conversation-selected {
@@ -383,8 +389,10 @@ export default {
 
 .has-inbox-name {
   &::v-deep .user-thumbnail-box {
-    margin-top: var(--space-normal);
-    align-items: flex-start;
+    margin-top: var(--space-large);
+  }
+  .checkbox-wrapper {
+    margin-top: var(--space-large);
   }
   .conversation--meta {
     margin-top: var(--space-normal);
@@ -429,6 +437,7 @@ export default {
   margin-top: var(--space-minus-micro);
   vertical-align: middle;
 }
+
 .checkbox-wrapper {
   height: 40px;
   width: 40px;
@@ -438,6 +447,7 @@ export default {
   border-radius: 100%;
   margin-top: var(--space-normal);
   cursor: pointer;
+
   &:hover {
     background-color: var(--w-100);
   }

app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue

@@ -0,0 +1,133 @@
+<template>
+  <div
+    v-show="activeLabels.length"
+    ref="labelContainer"
+    class="label-container"
+  >
+    <div class="labels-wrap" :class="{ expand: showAllLabels }">
+      <woot-label
+        v-for="(label, index) in activeLabels"
+        :key="label.id"
+        :title="label.title"
+        :description="label.description"
+        :color="label.color"
+        variant="smooth"
+        small
+        :class="{ hidden: !showAllLabels && index > labelPosition }"
+      />
+      <woot-button
+        v-if="showExpandLabelButton"
+        :title="
+          showAllLabels
+            ? $t('CONVERSATION.CARD.HIDE_LABELS')
+            : $t('CONVERSATION.CARD.SHOW_LABELS')
+        "
+        class="show-more--button"
+        color-scheme="secondary"
+        variant="hollow"
+        :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
+        size="tiny"
+        @click="onShowLabels"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
+export default {
+  mixins: [conversationLabelMixin],
+  props: {
+    conversationId: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showAllLabels: false,
+      showExpandLabelButton: false,
+      labelPosition: -1,
+    };
+  },
+  watch: {
+    activeLabels() {
+      this.$nextTick(() => this.computeVisibleLabelPosition());
+    },
+  },
+  mounted() {
+    this.computeVisibleLabelPosition();
+  },
+  methods: {
+    onShowLabels(e) {
+      e.stopPropagation();
+      this.showAllLabels = !this.showAllLabels;
+    },
+    computeVisibleLabelPosition() {
+      const labelContainer = this.$refs.labelContainer;
+      const labels = this.$refs.labelContainer.querySelectorAll('.label');
+      let labelOffset = 0;
+      Array.from(labels).forEach((label, index) => {
+        labelOffset += label.offsetWidth + 8;
+
+        if (labelOffset < labelContainer.clientWidth - 16) {
+          this.labelPosition = index;
+        } else {
+          this.showExpandLabelButton = true;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.show-more--button {
+  height: var(--space-medium);
+  position: sticky;
+  flex-shrink: 0;
+  margin-right: var(--space-medium);
+
+  &.secondary:focus {
+    color: var(--s-700);
+    border-color: var(--s-300);
+  }
+}
+
+.label-container {
+  margin-top: var(--space-micro);
+}
+
+.labels-wrap {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex-shrink: 1;
+
+  &.expand {
+    height: auto;
+    overflow: visible;
+    flex-flow: row wrap;
+
+    .label {
+      margin-bottom: var(--space-smaller);
+    }
+
+    .show-more--button {
+      margin-bottom: var(--space-smaller);
+    }
+  }
+
+  .secondary {
+    border: 1px solid var(--s-100);
+  }
+
+  .label {
+    margin-bottom: 0;
+  }
+}
+
+.hidden {
+  visibility: hidden;
+  position: absolute;
+}
+</style>

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -41,6 +41,10 @@
     "NO_RESPONSE": "No response",
     "RATING_TITLE": "Rating",
     "FEEDBACK_TITLE": "Feedback",
+    "CARD": {
+      "SHOW_LABELS": "Show labels",
+      "HIDE_LABELS": "Hide labels"
+    },
     "HEADER": {
       "RESOLVE_ACTION": "Resolve",
       "REOPEN_ACTION": "Reopen",