fix(quickProfile): improve overflow, add click listeners to group sid…

…ebar and message avatar:
Satellite-im · Sep 26, 2022 · 065bff0 · 065bff0
1 parent 9d63632
commit 065bff0
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 deletions.
diff --git a/components/interactables/QuickProfile/QuickProfile.vue b/components/interactables/QuickProfile/QuickProfile.vue
@@ -51,15 +51,19 @@ export default Vue.extend({
         return
       }
       const quick = this.$refs.quick as HTMLElement
-      const clickX = this.quickProfile.position.x
-      const clickY = this.quickProfile.position.y
-      const widthOverflow = clickX + quick.clientWidth - window.innerWidth
-      const heightOverflow = clickY + quick.clientHeight - window.innerHeight
+      const widthOverflow =
+        this.quickProfile.position.x + quick.clientWidth - window.innerWidth
+      const heightOverflow =
+        this.quickProfile.position.y + quick.clientHeight - window.innerHeight
       if (widthOverflow > -8) {
-        quick.style.left = `${this.quickProfile.position.x - widthOverflow}px`
+        quick.style.left = `${
+          this.quickProfile.position.x - widthOverflow - 16
+        }px`
       }
       if (heightOverflow > -8) {
-        quick.style.top = `${this.quickProfile.position.y - heightOverflow}px`
+        quick.style.top = `${
+          this.quickProfile.position.y - heightOverflow - 16
+        }px`
       }
     },
     sendMessage() {

diff --git a/components/views/chat/UserList.vue b/components/views/chat/UserList.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="user-list hover-scroll">
-    <TypographyText size="sm" color="body">
+    <TypographyText size="sm" color="body" class="heading">
       {{
         $t('pages.chat.members', { count: allParticipantsAlphaSorted.length })
       }}
     </TypographyText>
     <div class="list">
-      <div
+      <button
         v-for="user in allParticipantsAlphaSorted"
         :key="user.did"
         class="user"
+        @click="showQuickProfile($event, user)"
       >
         <UiUserState :user="user" :conversation-id="conversationId" />
         <TypographyText
@@ -20,21 +21,32 @@
         >
           {{ user.name }}
         </TypographyText>
-      </div>
+      </button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { conversationHooks } from '~/components/compositions/conversations'
+import { User } from '~/libraries/Iridium/users/types'
 
 export default Vue.extend({
   setup() {
     const { conversationId, allParticipantsAlphaSorted } = conversationHooks()
 
     return { conversationId, allParticipantsAlphaSorted }
   },
+  methods: {
+    showQuickProfile(e: MouseEvent, user: User) {
+      setTimeout(() => {
+        this.$store.commit('ui/setQuickProfile', {
+          user,
+          position: { x: e.x, y: e.y },
+        })
+      }, 0)
+    },
+  },
 })
 </script>
 
@@ -44,7 +56,6 @@ export default Vue.extend({
   flex-direction: column;
   flex-shrink: 0;
   gap: 8px;
-  padding: 16px;
   width: 240px;
   margin-right: 16px;
   overflow-y: auto;
@@ -53,16 +64,24 @@ export default Vue.extend({
   user-select: none;
   border-radius: @corner-rounding;
 
+  .heading {
+    padding: 16px 16px 0;
+  }
+
   .list {
     display: flex;
     flex-direction: column;
-    gap: 12px;
   }
 
   .user {
     display: flex;
     gap: 8px;
     align-items: center;
+    padding: 8px 16px;
+
+    &:hover {
+      .background-semitransparent-lighter();
+    }
   }
 }
 </style>
diff --git a/components/views/chat/message/Message.html b/components/views/chat/message/Message.html
@@ -12,11 +12,13 @@
     <!-- todo - add user options context menu -->
     <template v-if="showHeader">
       <div class="avatar">
-        <UiCircle
-          :type="avatarSrc ? 'image' : 'random'"
-          :seed="author.did"
-          :source="avatarSrc"
-        />
+        <button @click="showQuickProfile" tabindex="-1">
+          <UiCircle
+            :type="avatarSrc ? 'image' : 'random'"
+            :seed="author.did"
+            :source="avatarSrc"
+          />
+        </button>
       </div>
       <div class="header">
         <button @click="showQuickProfile">