diff --git a/components/interactables/QuickProfile/QuickProfile.html b/components/interactables/QuickProfile/QuickProfile.html index cfadb22e40..c6210bb698 100644 --- a/components/interactables/QuickProfile/QuickProfile.html +++ b/components/interactables/QuickProfile/QuickProfile.html @@ -6,19 +6,13 @@ v-click-outside="close" >
- - - {{ user.name }} + {{ user.name }}
(state as RootState).ui.quickProfile, }), - isMe(): boolean { - return iridium.id === this.user?.did - }, user(): User | undefined { return this.quickProfile?.user }, @@ -31,6 +29,12 @@ export default Vue.extend({ const hash = this.user?.photoHash return hash ? `${this.$Config.ipfs.gateway}${hash}` : '' }, + conversationId(): Conversation['id'] | undefined { + if (!this.user) { + return + } + return iridium.chat.directConversationIdFromDid(this.user.did) + }, }, mounted() { const quick = this.$refs.quick as HTMLElement @@ -51,33 +55,31 @@ 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() { - if (!this.user || !this.text.length) { - return - } - const conversationId = iridium.chat.directConversationIdFromDid( - this.user.did, - ) - if (!conversationId) { + if (!this.user || !this.text.length || !this.conversationId) { return } - if (conversationId !== this.$route.params.id) { + if (this.conversationId !== this.$route.params.id) { this.$router.push( this.$device.isMobile - ? `/mobile/chat/${conversationId}` - : `/chat/${conversationId}`, + ? `/mobile/chat/${this.conversationId}` + : `/chat/${this.conversationId}`, ) } @@ -85,17 +87,14 @@ export default Vue.extend({ at: Date.now(), type: 'text', body: this.text, - conversationId, + conversationId: this.conversationId, attachments: [], payload: {}, }) this.close() }, openProfile() { - if (!this.user) { - return - } - if (this.isMe) { + if (iridium.id === this.user?.did) { this.$store.commit('ui/setSettingsRoute', SettingsRoutes.PROFILE) this.close() } else { diff --git a/components/views/chat/UserList.vue b/components/views/chat/UserList.vue index f5937aaef3..b4a875f3d3 100644 --- a/components/views/chat/UserList.vue +++ b/components/views/chat/UserList.vue @@ -1,15 +1,16 @@ @@ -28,6 +29,7 @@ @@ -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(); + } } } diff --git a/components/views/chat/message/Message.html b/components/views/chat/message/Message.html index 48942fffcf..ab08671da4 100644 --- a/components/views/chat/message/Message.html +++ b/components/views/chat/message/Message.html @@ -12,11 +12,13 @@