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"
>
-
-
(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 @@
-
+
+
+