chore: Improve checkbox UX in conversation card for bulk actions

2025-02-17 13:35:35 +05:30
parent 4de1cd8c22
commit 1ba99842e7
2 changed files with 7 additions and 9 deletions
@@ -156,14 +156,14 @@ export default {
    </slot>
    <img
      v-if="badgeSrc"
-      class="source-badge"
+      class="source-badge z-20"
      :style="badgeStyle"
      :src="`/integrations/channels/badges/${badgeSrc}.png`"
      alt="Badge"
    />
    <div
      v-if="showStatusIndicator"
-      :class="`source-badge user-online-status user-online-status--${status}`"
+      :class="`source-badge user-online-status z-20 user-online-status--${status}`"
      :style="statusStyle"
    />
  </div>
@@ -95,9 +95,6 @@ export default {
      activeInbox: 'getSelectedInbox',
      accountId: 'getCurrentAccountId',
    }),
-    bulkActionCheck() {
-      return !this.hideThumbnail && !this.hovered && !this.selected;
-    },
    chatMetadata() {
      return this.chat.meta || {};
    },
@@ -254,7 +251,11 @@ export default {
    @click="onCardClick"
    @contextmenu="openContextMenu($event)"
  >
-    <label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
+    <label
+      v-if="hovered || selected"
+      class="checkbox-wrapper h-10 w-10 flex items-center justify-center bg-n-black/20 dark:bg-n-black/25 backdrop-blur-[2px] transition-all duration-300 rounded-full cursor-pointer mt-4 hover:bg-woot-100/50 dark:hover:bg-woot-800/50 absolute ltr:left-4 rtl:right-4 z-10"
+      @click.stop
+    >
      <input
        :value="selected"
        :checked="selected"
@@ -264,7 +265,6 @@ export default {
      />
    </label>
    <Thumbnail
-      v-if="bulkActionCheck"
      :src="currentContact.thumbnail"
      :badge="inboxBadge"
      :username="currentContact.name"
@@ -400,8 +400,6 @@ export default {
  }

  .checkbox-wrapper {
-    @apply h-10 w-10 flex items-center justify-center rounded-full cursor-pointer mt-4 hover:bg-woot-100 dark:hover:bg-woot-800;
-
    input[type='checkbox'] {
      @apply m-0 cursor-pointer;
    }