From 41cb8ff9861a88366a65ecfcf6b077a3d5f1615c Mon Sep 17 00:00:00 2001
From: Pitu <7425261+Pitu@users.noreply.github.com>
Date: Tue, 18 Sep 2018 01:44:46 -0300
Subject: Add an add more files button to the uploader

---
 src/site/components/uploader/Uploader.vue | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index fcb79cb..afafd55 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="{ hasFiles: files.length > 0 }"
+	<div :class="{ 'has-files': alreadyAddedFiles }"
 		class="uploader-wrapper">
 		<b-select v-if="loggedIn"
 			v-model="selectedAlbum"
@@ -21,6 +21,9 @@
 			@vdropzone-success="dropzoneSuccess"
 			@vdropzone-error="dropzoneError"
 			@vdropzone-files-added="dropzoneFilesAdded" />
+		<label class="add-more">
+			Add more files
+		</label>
 
 		<div id="template"
 			ref="template">
@@ -75,6 +78,7 @@ export default {
 	components: { Dropzone },
 	data() {
 		return {
+			alreadyAddedFiles: false,
 			files: [],
 			dropzoneOptions: {},
 			showDropzone: false,
@@ -156,6 +160,7 @@ export default {
 			Dropzone stuff
 		*/
 		dropzoneFilesAdded(files) {
+			this.alreadyAddedFiles = true;
 			// console.log(files);
 		},
 		dropzoneSuccess(file, response) {
@@ -236,6 +241,20 @@ export default {
 	}
 
 	div.uploader-wrapper {
+		&.has-files {
+			#dropzone {
+				padding-bottom: 50px;
+			}
+			label.add-more {
+				position: absolute;
+				bottom: 23px;
+				width: 100%;
+				text-align: center;
+				color: #797979;
+				display: block;
+				pointer-events: none;
+			}
+		}
 		div.control {
 			margin-bottom: 5px;
 			span.select {
@@ -247,5 +266,6 @@ export default {
 				}
 			}
 		}
+		label.add-more { display: none; }
 	}
 </style>
-- 
cgit v1.2.3