vadim/ulitka-app
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
vadim committed 2026-10-05 10:52:49 +03:00
1 parent b80e88b121
commit 51debefee5
13 files changed
+139 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/CommentsList.vue
+6 -7
View File
@@ -160,7 +160,7 @@ function onEnter(e: KeyboardEvent) {
/>
</div>
<div class="chat__bubble">
<v-sheet class="chat__bubble px-4 py-2">
<div v-if="item.showHeader && !item.own" class="font-weight-medium text-body-small text-primary">
{{ authorName(item.comment) }}
</div>
@@ -171,13 +171,13 @@ function onEnter(e: KeyboardEvent) {
<div class="chat__meta text-medium-emphasis">
<span v-if="item.comment.editedAt && !item.comment.deletedAt">edited · </span>{{ item.time }}
</div>
</div>
</v-sheet>
</div>
</template>
</div>
<v-fade-transition>
<v-btn v-if="!atBottom" class="chat__jump" icon size="small" elevation="2" @click="scrollToBottom('smooth')">
<v-btn v-if="!atBottom" density="compact" class="chat__jump" icon @click="scrollToBottom('smooth')">
<v-badge :model-value="unread > 0" :content="unread" color="primary" floating>
<v-icon icon="mdi-chevron-down" />
</v-badge>
@@ -220,7 +220,8 @@ function onEnter(e: KeyboardEvent) {
.chat {
display: flex;
flex-direction: column;
height: min(30vh, 560px);
height: 100%;
min-height: 20rem;
&__viewport {
position: relative;
@@ -271,12 +272,10 @@ function onEnter(e: KeyboardEvent) {
&__bubble {
max-width: min(75%, 640px);
min-width: 0;
padding: 6px 10px;
border-radius: 14px;
background: rgba(var(--v-theme-on-surface), 0.06);
.chat__row--own & {
background: rgba(var(--v-theme-primary), 0.14);
background: rgba(var(--v-theme-primary), 0.35);
}
}
src/components/ExpansionPanel.vue
+10 -2
View File
@@ -46,10 +46,18 @@ const open = () => {
<v-btn density="compact" size="small" :icon="icon" @click="open" />
<div @click="open" class="font-weight-bold text-capitalize text-title-medium cursor-pointer">{{ title }}</div>
</div>
<div v-if="isOpen" class="ml-6 mt-2">
<div v-if="isOpen" class="panel__body ml-6 mt-2">
<slot />
</div>
</div>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss">
// Lets the body fill the panel when the panel itself is stretched by its parent
.panel__body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
</style>
src/components/IssueContent.vue
+5 -4
View File
@@ -33,7 +33,7 @@ const cancel = () => {
<v-hover #default="{ isHovering, props }">
<v-sheet
v-bind="props"
:class="isHovering ? 'px-4' : 'px-0'"
:class="isHovering ? 'px-0' : 'px-0'"
class="py-1 cursor-pointer content-sheet"
@click="startEdit"
>
@@ -59,9 +59,10 @@ const cancel = () => {
overflow-wrap: anywhere;
}
.content-sheet:hover {
background-color: rgba(var(--v-theme-on-surface), 0.06);
}
//.content-sheet:hover {
//background-color: rgba(var(--v-theme-on-surface), 0.06);
//}
.v-sheet {
transition: padding 0.2s ease-in-out;
}
src/components/IssueDate.vue
-1
View File
@@ -49,7 +49,6 @@ const cancel = () => {
<v-date-input
input-format="dd-mm-yyyy"
autofocus
class="mb-1"
hide-details
prepend-icon=""
v-model="draft"
src/components/IssueDetails.vue
+76 -43
View File
@@ -31,9 +31,7 @@ const { ckey } = defineProps<Props>()
const createdAtFormatted = computed(() => {
if (!issue.value?.createdAt) return ''
return new Intl.DateTimeFormat('ru-RU', { dateStyle: 'medium', timeStyle: 'short' }).format(
new Date(issue.value.createdAt),
)
return new Date(issue.value.createdAt).toLocaleString('ru-RU')
})
async function fetch() {
@@ -101,62 +99,97 @@ defineExpose({
</script>
<template>
<div v-if="issue" class="d-flex flex-column ga-4 pa-4">
<div>{{ ckey }}</div>
<div v-if="issue" class="pa-4 details">
<div class="d-flex flex-column ga-4">
<div>{{ ckey }}</div>
<issue-title :text="issue.title" @changed="onTitleChanged" />
<issue-title :text="issue.title" @changed="onTitleChanged" />
<v-card elevation="0" border>
<v-card-text class="u-grid">
<div class="text-medium-emphasis">Status:</div>
<status-menu :value="issue.status" @changed="onStatusChanged" />
<v-card elevation="0" border>
<v-card-text class="u-grid">
<div class="text-medium-emphasis">Status:</div>
<status-menu :value="issue.status" @changed="onStatusChanged" />
<div class="text-medium-emphasis">Reporter:</div>
<reporter-info :user="issue.reporter" />
<div class="text-medium-emphasis">Reporter:</div>
<reporter-info :user="issue.reporter" />
<div class="text-medium-emphasis">Assignee:</div>
<assignee-menu :value="issue.assignee" :compact="false" @changed="onAssigneeChanged" />
<div class="text-medium-emphasis">Assignee:</div>
<assignee-menu :value="issue.assignee" :compact="false" @changed="onAssigneeChanged" />
<div class="text-medium-emphasis">Created At:</div>
<div>{{ createdAtFormatted }}</div>
<div class="text-medium-emphasis">Created At:</div>
<div>{{ createdAtFormatted }}</div>
<div class="text-medium-emphasis">Due Date:</div>
<issue-date :date="issue.dueDate" @changed="onDueDateChanged" />
</v-card-text>
</v-card>
<div class="text-medium-emphasis">Due Date:</div>
<issue-date :date="issue.dueDate" @changed="onDueDateChanged" />
</v-card-text>
</v-card>
<expansion-panel title="Details">
<issue-content :text="issue.content" @changed="onContentChanged" />
</expansion-panel>
<expansion-panel title="Details">
<issue-content :text="issue.content" @changed="onContentChanged" />
</expansion-panel>
</div>
<div class="d-flex flex-column">
<expansion-panel title="Activity" class="activity">
<v-sheet class="activity__sheet">
<v-btn-toggle class="align-self-start" border divided v-model="activity" mandatory="force" density="compact">
<v-btn rounded="0" prepend-icon="mdi-chat" value="comment">Comments</v-btn>
<v-btn rounded="0" prepend-icon="mdi-history" value="history">History</v-btn>
</v-btn-toggle>
<expansion-panel title="Activity">
<v-sheet>
<v-tabs v-model="activity" density="compact">
<v-tab prepend-icon="mdi-star" value="comment">Comments</v-tab>
<v-tab prepend-icon="mdi-star" value="history">History</v-tab>
</v-tabs>
<v-divider />
<v-tabs-window v-model="activity">
<v-tabs-window-item value="comment">
<comments-list :issue-id="issue.id" />
</v-tabs-window-item>
<v-tabs-window-item value="history">
<history-list />
</v-tabs-window-item>
</v-tabs-window>
</v-sheet>
</expansion-panel>
<v-tabs-window v-model="activity" class="activity__window">
<v-tabs-window-item value="comment" class="h-100">
<comments-list :issue-id="issue.id" />
</v-tabs-window-item>
<v-tabs-window-item value="history">
<history-list />
</v-tabs-window-item>
</v-tabs-window>
</v-sheet>
</expansion-panel>
</div>
</div>
</template>
<style scoped lang="scss">
.details {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.details > * {
min-height: 0;
overflow-y: auto;
}
.activity {
flex: 1;
min-height: 0;
&__sheet {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
&__window {
flex: 1;
min-height: 0;
:deep(.v-window__container) {
height: 100%;
}
}
}
.u-grid {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 1rem;
row-gap: 0.75rem;
row-gap: 1.5rem;
}
</style>
src/components/IssueTitle.vue
+4 -4
View File
@@ -33,7 +33,7 @@ const cancel = () => {
<v-hover #default="{ isHovering, props }">
<v-sheet
v-bind="props"
:class="isHovering ? 'px-3' : 'px-0'"
:class="isHovering ? 'px-0' : 'px-0'"
class="py-1 cursor-pointer title-sheet"
@click="startEdit"
>
@@ -56,9 +56,9 @@ const cancel = () => {
</template>
<style scoped lang="scss">
.title-sheet:hover {
background-color: rgba(var(--v-theme-on-surface), 0.06);
}
//.title-sheet:hover {
// background-color: rgba(var(--v-theme-on-surface), 0.06);
//}
.v-sheet {
transition: padding 0.2s ease-in-out;