Skip to content

Commit 61b0463

Browse files
AchoArnoldAchoArnold
committed
fix: style on thread page
1 parent 321589a commit 61b0463

3 files changed

Lines changed: 249 additions & 87 deletions

File tree

‎web/app/components/MessageThread.vue‎

Lines changed: 51 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
<script setup lang="ts">
22
import { useDisplay } from 'vuetify'
3-
import { mdiPlus, mdiDownload, mdiCheckAll, mdiCheck, mdiAlert } from '@mdi/js'
3+
import {
4+
mdiPlus,
5+
mdiDownload,
6+
mdiCheckAll,
7+
mdiCheck,
8+
mdiAlert,
9+
mdiAccount,
10+
} from '@mdi/js'
411
import { formatPhoneNumber } from '~/utils/filters'
12+
import { isValidPhoneNumber } from 'libphonenumber-js'
513
614
const { mdAndDown } = useDisplay()
715
const threadsStore = useThreadsStore()
816
const phonesStore = usePhonesStore()
917
const appStore = useAppStore()
1018
const notificationsStore = useNotificationsStore()
1119
12-
function getInitials(contact: string): string {
13-
const formatted = formatPhoneNumber(contact)
14-
return formatted.substring(0, 2)
15-
}
16-
1720
function threadDate(date: string): string {
1821
return new Date(date).toLocaleString(undefined, {
1922
month: 'short',
@@ -96,6 +99,7 @@ function onInstallApp() {
9699
</div>
97100
<v-list
98101
class="pt-0"
102+
lines="two"
99103
v-if="!threadsStore.loadingThreads && threadsStore.threads.length > 0"
100104
>
101105
<v-list-item
@@ -106,51 +110,59 @@ function onInstallApp() {
106110
>
107111
<template #prepend>
108112
<v-avatar :color="thread.color" size="40">
109-
<span class="text-white text-body-medium">{{
110-
getInitials(thread.contact)
113+
<v-icon v-if="isValidPhoneNumber(thread.contact)" color="white">{{
114+
mdiAccount
115+
}}</v-icon>
116+
<span v-else class="text-white text-headline-small">{{
117+
thread.contact.substring(0, 1)
111118
}}</span>
112119
</v-avatar>
113120
</template>
114121
<v-list-item-title>{{
115122
formatPhoneNumber(thread.contact)
116123
}}</v-list-item-title>
117-
<v-list-item-subtitle class="text-truncate" style="max-width: 250px">
124+
<v-list-item-subtitle
125+
class="text-truncate mt-1"
126+
style="max-width: 250px"
127+
>
118128
{{ thread.last_message_content }}
119129
</v-list-item-subtitle>
120130
<template #append>
121131
<div class="d-flex flex-column align-end">
122-
<span class="text-caption text-medium-emphasis">
132+
<span class="text-body-small text-medium-emphasis">
123133
{{ threadDate(thread.order_timestamp) }}
124134
</span>
125-
<v-icon
126-
v-if="thread.status === 'expired'"
127-
color="warning"
128-
size="small"
129-
:icon="mdiAlert"
130-
/>
131-
<v-icon
132-
v-else-if="thread.status === 'delivered'"
133-
color="primary"
134-
size="small"
135-
:icon="mdiCheckAll"
136-
/>
137-
<v-icon
138-
v-else-if="thread.status === 'received'"
139-
color="success"
140-
size="small"
141-
:icon="mdiCheckAll"
142-
/>
143-
<v-icon
144-
v-else-if="thread.status === 'sent'"
145-
size="small"
146-
:icon="mdiCheck"
147-
/>
148-
<v-icon
149-
v-else-if="thread.status === 'failed'"
150-
color="error"
151-
size="small"
152-
:icon="mdiAlert"
153-
/>
135+
<div class="mt-1">
136+
<v-icon
137+
v-if="thread.status === 'expired'"
138+
color="warning"
139+
size="x-small"
140+
:icon="mdiAlert"
141+
/>
142+
<v-icon
143+
v-else-if="thread.status === 'delivered'"
144+
color="primary"
145+
size="x-small"
146+
:icon="mdiCheckAll"
147+
/>
148+
<v-icon
149+
v-else-if="thread.status === 'received'"
150+
color="success"
151+
size="x-small"
152+
:icon="mdiCheckAll"
153+
/>
154+
<v-icon
155+
v-else-if="thread.status === 'sent'"
156+
size="x-small"
157+
:icon="mdiCheck"
158+
/>
159+
<v-icon
160+
v-else-if="thread.status === 'failed'"
161+
color="error"
162+
size="x-small"
163+
:icon="mdiAlert"
164+
/>
165+
</div>
154166
</div>
155167
</template>
156168
</v-list-item>

0 commit comments

Comments
 (0)