ami/tl-vikunja
1
0
Fork 0
Code

Replace table with grid

Browse Source
This commit is contained in:
Elscrux 2024-05-09 11:51:54 +02:00
parent e47d6d1605
commit 2ab6894542
1 changed files with 88 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
frontend/src/components/tasks/partials/attachments.vue
View File

@ -27,91 +27,89 @@
v-if="attachments.length > 0" v-if="attachments.length > 0"
class="files" class="files"
> >
<table class="table table-striped"> <div
<tr v-for="a in attachments"
v-for="a in attachments" :key="a.id"
:key="a.id" class="grid-item clickable"
class="clickable" @click="viewOrDownload(a)"
@click="viewOrDownload(a)" >
> <div class="preview-column">
<td class="preview-column"> <FilePreview
<FilePreview v-if="canPreview(a)"
v-if="canPreview(a)" class="attachment-preview"
class="attachment-preview" :model-value="a"
:model-value="a" />
/> </div>
</td> <div>
<td> <div class="filename">
<div class="filename"> {{ a.file.name }}
{{ a.file.name }} <span
<span v-if="task.coverImageAttachmentId === a.id"
v-if="task.coverImageAttachmentId === a.id" class="is-task-cover"
class="is-task-cover" >
{{ $t('task.attachment.usedAsCover') }}
</span>
</div>
<div class="info">
<p class="attachment-info-meta">
<i18n-t
keypath="task.attachment.createdBy"
scope="global"
> >
{{ $t('task.attachment.usedAsCover') }} <span v-tooltip="formatDateLong(a.created)">
{{ formatDateSince(a.created) }}
</span>
<User
:avatar-size="24"
:user="a.createdBy"
:is-inline="true"
/>
</i18n-t>
<span>
{{ getHumanSize(a.file.size) }}
</span> </span>
</div> <span v-if="a.file.mime">
<div class="info"> {{ a.file.mime }}
<p class="attachment-info-meta"> </span>
<i18n-t </p>
keypath="task.attachment.createdBy" <p>
scope="global" <BaseButton
> v-tooltip="$t('task.attachment.downloadTooltip')"
<span v-tooltip="formatDateLong(a.created)"> class="attachment-info-meta-button"
{{ formatDateSince(a.created) }} @click.prevent.stop="downloadAttachment(a)"
</span> >
<User {{ $t('misc.download') }}
:avatar-size="24" </BaseButton>
:user="a.createdBy" <BaseButton
:is-inline="true" v-tooltip="$t('task.attachment.copyUrlTooltip')"
/> class="attachment-info-meta-button"
</i18n-t> @click.stop="copyUrl(a)"
<span> >
{{ getHumanSize(a.file.size) }} {{ $t('task.attachment.copyUrl') }}
</span> </BaseButton>
<span v-if="a.file.mime"> <BaseButton
{{ a.file.mime }} v-if="editEnabled"
</span> v-tooltip="$t('task.attachment.deleteTooltip')"
</p> class="attachment-info-meta-button"
<p> @click.prevent.stop="setAttachmentToDelete(a)"
<BaseButton >
v-tooltip="$t('task.attachment.downloadTooltip')" {{ $t('misc.delete') }}
class="attachment-info-meta-button" </BaseButton>
@click.prevent.stop="downloadAttachment(a)" <BaseButton
> v-if="editEnabled"
{{ $t('misc.download') }} class="attachment-info-meta-button"
</BaseButton> @click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
<BaseButton >
v-tooltip="$t('task.attachment.copyUrlTooltip')" {{
class="attachment-info-meta-button" task.coverImageAttachmentId === a.id
@click.stop="copyUrl(a)" ? $t('task.attachment.unsetAsCover')
> : $t('task.attachment.setAsCover')
{{ $t('task.attachment.copyUrl') }} }}
</BaseButton> </BaseButton>
<BaseButton </p>
v-if="editEnabled" </div>
v-tooltip="$t('task.attachment.deleteTooltip')" </div>
class="attachment-info-meta-button" </div>
@click.prevent.stop="setAttachmentToDelete(a)"
>
{{ $t('misc.delete') }}
</BaseButton>
<BaseButton
v-if="editEnabled"
class="attachment-info-meta-button"
@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
>
{{
task.coverImageAttachmentId === a.id
? $t('task.attachment.unsetAsCover')
: $t('task.attachment.setAsCover')
}}
</BaseButton>
</p>
</div>
</td>
</tr>
</table>
</div> </div>
<x-button <x-button
@ -448,7 +446,7 @@ async function setCoverImage(attachment: IAttachment | null) {
} }
.preview-column { .preview-column {
max-width: 75px; max-width: 125px;
} }
.attachment-preview { .attachment-preview {
@ -459,6 +457,12 @@ async function setCoverImage(attachment: IAttachment | null) {
cursor: pointer; cursor: pointer;
} }
.grid-item {
display: grid;
grid-template-columns: 140px 1fr;
align-items: center;
}
.is-task-cover { .is-task-cover {
background: var(--primary); background: var(--primary);
color: var(--white); color: var(--white);