local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Rework attachments list to look great everywhere

Browse source
This commit is contained in:
kolaente 2021-01-15 23:33:43 +01:00
parent bd3f54e51b
commit 873b36e6cd
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 83 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/components/tasks/partials/attachments.vue
View file

@ -5,14 +5,6 @@
<icon icon="paperclip"/>
</span>
Attachments
<a
:disabled="attachmentService.loading"
@click="$refs.files.click()"
class="button is-primary is-outlined is-small noshadow"
v-if="editEnabled">
<span class="icon is-small"><icon icon="cloud-upload-alt"/></span>
Upload attachment
</a>
</h3>
<input
@ -31,47 +23,47 @@
{{ attachmentService.uploadProgress }}%
</progress>
<table v-if="attachments.length > 0">
<tr>
<th>Name</th>
<th>Size</th>
<th>Type</th>
<th>Date</th>
<th>Created&nbsp;By</th>
<th>Action</th>
</tr>
<tr :key="a.id" class="attachment" v-for="a in attachments">
<td>
{{ a.file.name }}
</td>
<td>{{ a.file.getHumanSize() }}</td>
<td>{{ a.file.mime }}</td>
<td v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</td>
<td class="has-text-centered">
<user :avatar-size="30" :user="a.createdBy" :show-username="false" :is-inline="true"/>
</td>
<td>
<div class="buttons has-addons">
<div class="files" v-if="attachments.length > 0">
<div :key="a.id" class="attachment" v-for="a in attachments">
<div class="filename">{{ a.file.name }}</div>
<div class="info">
<p class="collapses">
<span>
created <span v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</span> by
<user :avatar-size="24" :user="a.createdBy" :is-inline="true"/>
</span>
<span>
{{ a.file.getHumanSize() }}
</span>
<span v-if="a.file.mime">
{{ a.file.mime }}
</span>
</p>
<p>
<a
@click="downloadAttachment(a)"
class="button is-primary noshadow"
v-tooltip="'Download this attachment'">
<span class="icon">
<icon icon="cloud-download-alt"/>
</span>
Download
</a>
<a
@click="() => {attachmentToDelete = a; showDeleteModal = true}"
class="button is-danger noshadow" v-if="editEnabled"
v-if="editEnabled"
v-tooltip="'Delete this attachment'">
<span class="icon">
<icon icon="trash-alt"/>
</span>
Delete
</a>
</div>
</td>
</tr>
</table>
</p>
</div>
</div>
</div>
<a
:disabled="attachmentService.loading"
@click="$refs.files.click()"
class="button is-primary mb-4"
v-if="editEnabled">
<span class="icon is-small"><icon icon="cloud-upload-alt"/></span>
Upload attachment
</a>
<!-- Dropzone -->
<div :class="{ 'hidden': !showDropzone }" class="dropzone" v-if="editEnabled">

50
src/styles/components/attachments.scss
View file

@ -3,6 +3,56 @@
display: none;
}
.files {
margin-bottom: 1rem;
.attachment {
margin-bottom: .75rem;
.filename {
font-weight: bold;
margin-bottom: .25rem;
}
.info {
color: $grey;
font-size: .9rem;
p {
margin-bottom: 0;
display: flex;
> span:not(:last-child):after,
> a:not(:last-child):after {
content: '·';
padding: 0 .25rem;
}
@media screen and (max-width: $mobile) {
&.collapses {
flex-direction: column;
> span:not(:last-child):after,
> a:not(:last-child):after {
display: none;
}
.user .username {
display: none;
}
}
}
}
}
}
}
@media screen and (max-width: $tablet) {
.button {
width: 100%;
}
}
.dropzone {
position: fixed;
background: rgba(250, 250, 250, 0.8);