Simplify structure and fix styling

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-07-31 22:37:44 +02:00
parent ce0d2a0d41
commit 7fccb032e3
3 changed files with 50 additions and 54 deletions

View File

@@ -30,55 +30,48 @@
style="display: none;" style="display: none;"
multiple multiple
@change="handleUploadFile"> @change="handleUploadFile">
<div class="attachment-list"> <ul class="attachment-list">
<ul> <li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment">
<li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment"> <a class="fileicon" :style="mimetypeForAttachment('none')" />
<a class="fileicon" :style="mimetypeForAttachment('none')" /> <div class="details">
<div class="details"> <a>
<a> <div class="filename">
<div class="filename"> <span class="basename">{{ attachment.name }}</span>
<span class="basename">{{ attachment.name }}</span> </div>
</div> <progress :value="attachment.progress" max="100" />
<progress :value="attachment.progress" max="100" /> </a>
</a>
</div>
</li>
<div class="attachment-list">
<ul>
<li v-for="attachment in attachments"
:key="attachment.id"
class="attachment">
<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
<div class="details">
<a :href="attachmentUrl(attachment)" target="_blank">
<div class="filename">
<span class="basename">{{ attachment.data }}</span>
</div>
<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
<span class="filedate">{{ attachment.createdBy }}</span>
</a>
</div>
<Actions v-if="selectable">
<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
{{ t('deck', 'Add this attachment') }}
</ActionButton>
</Actions>
<Actions v-if="removable">
<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="$emit('deleteAttachment', attachment)">
{{ t('deck', 'Delete Attachment') }}
</ActionButton>
<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
{{ t('deck', 'Restore Attachment') }}
</ActionButton>
</Actions>
</li>
</ul>
</div> </div>
</ul> </li>
</div> <li v-for="attachment in attachments"
:key="attachment.id"
class="attachment">
<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
<div class="details">
<a :href="attachmentUrl(attachment)" target="_blank">
<div class="filename">
<span class="basename">{{ attachment.data }}</span>
</div>
<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
<span class="filedate">{{ attachment.createdBy }}</span>
</a>
</div>
<Actions v-if="selectable">
<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
{{ t('deck', 'Add this attachment') }}
</ActionButton>
</Actions>
<Actions v-if="removable">
<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="$emit('deleteAttachment', attachment)">
{{ t('deck', 'Delete Attachment') }}
</ActionButton>
<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
{{ t('deck', 'Restore Attachment') }}
</ActionButton>
</Actions>
</li>
</ul>
</AttachmentDragAndDrop> </AttachmentDragAndDrop>
</template> </template>

View File

@@ -633,13 +633,16 @@ export default {
width: 25vw; width: 25vw;
min-width: 250px; min-width: 250px;
min-height: 120px; min-height: 120px;
margin: 20px 20px 60px 20px; margin: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} display: flex;
flex-direction: column;
.modal__content button { &::v-deep .attachment-list {
float: right; flex-shrink: 1;
margin: 40px 3px 3px 0; overflow: scroll;
max-height: 50vh;
}
} }
</style> </style>

View File

@@ -32,5 +32,5 @@ const config = {
} }
}; };
module.exports = merge(config, webpackConfig) module.exports = merge(webpackConfig, config)