Skip to content

Commit 5af0b55

Browse files
hmbanan666hmbanan666
authored
chore: visual updates (#174)
1 parent e52e382 commit 5af0b55

8 files changed

Lines changed: 81 additions & 49 deletions

File tree

‎apps/atrium-telegram/app/app.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default defineAppConfig({
6060
slots: {
6161
header: 'text-xl/6 font-bold font-headers',
6262
body: 'mb-12 hide-scroll',
63-
content: '!max-h-10/12 ring-default hide-scroll',
63+
content: '!max-h-10/12 ring-default/50 hide-scroll',
6464
},
6565
},
6666
navigationMenu: {

‎apps/atrium-telegram/app/components/ActiveCard.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
<template>
2-
<button class="relative w-full active:scale-95 duration-200 text-left cursor-pointer outline-0" @click="vibrate()">
2+
<button
3+
class="relative w-full active:scale-95 duration-200 text-left cursor-pointer outline-0"
4+
:class="props.class"
5+
@click="vibrate()"
6+
>
37
<Section>
48
<slot />
59
</Section>
610
</button>
711
</template>
812

913
<script setup lang="ts">
14+
const props = defineProps<{ class?: string }>()
15+
1016
const { vibrate } = useFeedback()
1117
</script>

‎apps/atrium-telegram/app/components/ticket/MessageFile.vue‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
<template>
22
<div class="w-2/3 relative flex flex-col justify-between gap-1.5">
3-
<div class="py-4 flex flex-col gap-2 items-center justify-center border border-default rounded-lg">
4-
<UIcon :name="getFileData(message.fileType).icon" class="size-10 text-primary" />
3+
<ActiveCard>
4+
<div class="w-full relative flex flex-col justify-between gap-2">
5+
<div class="p-2 w-16 h-10 flex flex-row items-center justify-center bg-primary rounded-md">
6+
<UIcon :name="getFileData(message.fileType).icon" class="size-6 tg-text-button" />
7+
</div>
58

6-
<UButton
7-
variant="soft"
8-
color="secondary"
9-
:label="getFileData(message.fileType).label"
10-
/>
11-
</div>
12-
<div v-if="message?.createdAt" class="flex justify-end text-xs text-muted">
13-
{{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
14-
</div>
9+
<div class="text-base/5 whitespace-break-spaces text-default font-medium">
10+
{{ getFileData(message.fileType).label }}
11+
</div>
12+
13+
<div v-if="message?.createdAt" class="flex justify-end text-xs text-muted">
14+
{{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
15+
</div>
16+
</div>
17+
</ActiveCard>
1518
</div>
1619
</template>
1720

@@ -29,22 +32,22 @@ function getFileData(type: TicketMessage['fileType']) {
2932
case 'image':
3033
return {
3134
icon: 'i-lucide-image',
32-
label: 'Прикреплено фото',
35+
label: 'Загружено фото',
3336
}
3437
case 'video':
3538
return {
3639
icon: 'i-lucide-video',
37-
label: 'Прикреплено видео',
40+
label: 'Загружено видео',
3841
}
3942
case 'document':
4043
return {
4144
icon: 'i-lucide-file',
42-
label: 'Прикреплен документ',
45+
label: 'Загружен документ',
4346
}
4447
default:
4548
return {
4649
icon: 'i-lucide-file',
47-
label: 'Прикреплен файл',
50+
label: 'Загружен файл',
4851
}
4952
}
5053
}

‎apps/atrium-telegram/app/components/ticket/MessageImage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<img
44
:src="message.fileUrl"
55
alt=""
6-
class="w-full h-full object-contain rounded-lg"
6+
class="w-full h-full object-contain rounded-lg active:scale-95 duration-200"
77
>
88
<div v-if="message?.createdAt" class="flex justify-end text-xs text-muted">
99
{{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}

‎apps/atrium-telegram/app/components/ticket/MessageText.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<ActiveCard>
2+
<ActiveCard class="!w-fit min-w-2/3">
33
<div class="w-full relative flex flex-col justify-between gap-2">
44
<div class="flex flex-col gap-1">
55
<div class="text-base/5 whitespace-break-spaces text-default font-medium">

‎apps/atrium-telegram/app/pages/tasks/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="flex flex-row gap-3.5 items-center">
44
<UAvatar
55
:src="userStore?.avatarUrl ?? undefined"
6-
class="size-14 cursor-pointer hover:scale-95 active:scale-90 duration-200"
6+
class="size-14 border-2 border-primary hover:scale-95 active:scale-90 duration-200"
77
@click="handleUploadUserAvatar"
88
/>
99

@@ -16,7 +16,7 @@
1616
Сегодня по плану еще
1717
<ULink
1818
as="button"
19-
class="font-semibold underline underline-offset-4 decoration-dashed decoration-1 cursor-pointer"
19+
class="font-semibold underline underline-offset-4 decoration-dashed decoration-1"
2020
:class="[
2121
taskStore.isTodayOnly ? 'tg-text' : 'text-secondary',
2222
]"

‎apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33
<Section>
44
<div class="flex flex-row items-start justify-between gap-2.5">
55
<UIcon name="i-lucide-mail-question-mark" class="size-10 text-primary" />
6+
7+
<UButton
8+
variant="soft"
9+
color="primary"
10+
size="xl"
11+
icon="i-lucide-pencil"
12+
@click="handleEdit()"
13+
/>
614
</div>
715

816
<h1 class="text-2xl/6 font-bold">
@@ -30,23 +38,27 @@
3038
</div>
3139
</Section>
3240

33-
<div class="w-full flex flex-col gap-3.5 flex-1">
34-
<UDrawer v-model:open="isDrawerOpened">
35-
<CreateCard
36-
label="Написать сообщение"
37-
icon="i-lucide-message-circle"
38-
class="mb-4"
39-
/>
41+
<UDrawer v-model:open="isDrawerOpened">
42+
<UButton
43+
variant="solid"
44+
color="secondary"
45+
size="xl"
46+
block
47+
class="items-center justify-center"
48+
icon="i-lucide-message-circle"
49+
label="Написать сообщение"
50+
/>
4051

41-
<template #body>
42-
<FormCreateTicketMessage
43-
:ticket-id="ticket?.id ?? ''"
44-
@submitted="isDrawerOpened = false"
45-
@success="isDrawerOpened = false"
46-
/>
47-
</template>
48-
</UDrawer>
52+
<template #body>
53+
<FormCreateTicketMessage
54+
:ticket-id="ticket?.id ?? ''"
55+
@submitted="isDrawerOpened = false"
56+
@success="isDrawerOpened = false"
57+
/>
58+
</template>
59+
</UDrawer>
4960

61+
<div class="w-full flex flex-col gap-3.5 flex-1">
5062
<TicketMessage
5163
v-for="message in messages"
5264
:key="message.id"
@@ -56,10 +68,10 @@
5668

5769
<UButton
5870
v-if="isShowMore"
59-
variant="soft"
60-
color="primary"
71+
variant="solid"
72+
color="secondary"
6173
size="xl"
62-
class="mt-6 mx-auto w-fit items-center justify-center"
74+
class="mt-6 mx-auto px-8 w-fit items-center justify-center"
6375
icon="i-lucide-message-circle-more"
6476
:label="$t('common.show-more')"
6577
@click="handleClickShowMore()"
@@ -94,4 +106,8 @@ function handleClickShowMore() {
94106
vibrate('success')
95107
shownMessages.value += 10
96108
}
109+
110+
function handleEdit() {
111+
vibrate()
112+
}
97113
</script>

‎apps/atrium-telegram/app/pages/ticket/index.vue‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
<template>
22
<PageContainer>
3-
<NuxtLink
4-
v-for="ticket of ticketStore.tickets"
5-
:key="ticket.id"
6-
:to="`/ticket/${ticket.id}`"
7-
class="motion-preset-slide-left"
8-
>
9-
<TicketCard :ticket="ticket">
10-
{{ ticket.title }}
11-
</TicketCard>
12-
</NuxtLink>
3+
<div class="flex flex-col gap-2.5">
4+
<div class="text-2xl/6 font-bold tracking-tight">
5+
Активные тикеты
6+
</div>
7+
<div class="flex flex-col gap-4">
8+
<NuxtLink
9+
v-for="ticket of ticketStore.tickets"
10+
:key="ticket.id"
11+
:to="`/ticket/${ticket.id}`"
12+
class="motion-preset-slide-left"
13+
>
14+
<TicketCard :ticket="ticket">
15+
{{ ticket.title }}
16+
</TicketCard>
17+
</NuxtLink>
18+
</div>
19+
</div>
1320
</PageContainer>
1421
</template>
1522

0 commit comments

Comments
 (0)