diff options
Diffstat (limited to 'src/components/Composer/PreviewGrid.vue')
| -rw-r--r-- | src/components/Composer/PreviewGrid.vue | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/src/components/Composer/PreviewGrid.vue b/src/components/Composer/PreviewGrid.vue new file mode 100644 index 00000000..77e134c9 --- /dev/null +++ b/src/components/Composer/PreviewGrid.vue @@ -0,0 +1,72 @@ +<!-- +SPDX-FileCopyrightText: 2022 Carl Schwan <carl@carlschwan.eu> +SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div class="upload-form"> + <div class="upload-progress" v-if="false"> + <div class="upload-progress__icon"> + <FileUpload :size="32" /> + </div> + + <div class="upload-progress__message"> + {{ t('social', 'Uploading...') }} + + <div class="upload-progress__backdrop"> + <div class="upload-progress__tracker" :style="`width: ${uploadProgress * 100}%`" /> + </div> + </div> + </div> + <div class="preview-grid"> + <PreviewGridItem v-for="(item, index) in miniatures" :key="index" :preview="item" :index="index" @delete="deletePreview" /> + </div> + </div> +</template> + +<script> +import PreviewGridItem from './PreviewGridItem' +import FileUpload from 'vue-material-design-icons/FileUpload' + +export default { + name: 'PreviewGrid', + components: { + PreviewGridItem, + FileUpload, + }, + props: { + uploadProgress: { + type: Number, + required: true, + }, + uploading: { + type: Boolean, + required: true, + }, + miniatures: { + type: Array, + required: true, + }, + }, + methods: { + deletePreview(index) { + console.debug("rjeoijreo") + this.miniatures.splice(index, 1) + } + }, +} +</script> + +<style scoped lang="scss"> +.upload-progress { + display: flex; +} + +.preview-grid { + display: flex; + flex-wrap: wrap; + flex-direction: row; + margin-left: -5px; + margin-right: -5px; +} +</style> |