Merge pull request #1785 from nextcloud/artonge/fix/progress_bar

Prevent progress bar overflow when uploading in Folders
nextcloud · May 16, 2023 · af70a0a · af70a0a
2 parents 2224a8d + 6bb7169
commit af70a0a
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 13 deletions.
diff --git a/js/photos-main.js b/js/photos-main.js
diff --git a/js/photos-main.js.map b/js/photos-main.js.map
diff --git a/js/photos-public.js b/js/photos-public.js
diff --git a/js/photos-public.js.map b/js/photos-public.js.map
diff --git a/js/photos-src_views_Folders_vue.js b/js/photos-src_views_Folders_vue.js
diff --git a/js/photos-src_views_Folders_vue.js.map b/js/photos-src_views_Folders_vue.js.map
diff --git a/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js b/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js
diff --git a/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js.map b/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js.map
diff --git a/src/views/Folders.vue b/src/views/Folders.vue
@@ -36,6 +36,7 @@
 	<!-- Folder content -->
 	<div v-else-if="!initializing">
 		<HeaderNavigation key="navigation"
+			:class="{'photos-navigation--uploading': uploader.queue?.length > 0}"
 			:loading="loading"
 			:path="path"
 			:title="folder.basename.toString()"
@@ -64,7 +65,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { UploadPicker } from '@nextcloud/upload'
+import { UploadPicker, getUploader } from '@nextcloud/upload'
 import { NcEmptyContent } from '@nextcloud/vue'
 import VirtualGrid from 'vue-virtual-grid'
 
@@ -116,6 +117,8 @@ export default {
 			loading: false,
 
 			appContent: document.getElementById('app-content-vue'),
+
+			uploader: getUploader(),
 		}
 	},
 
@@ -289,4 +292,29 @@ export default {
 		padding: 0px #{$marginW}px 256px #{$marginW}px;
 	}
 }
+
+.photos-navigation {
+	position: relative;
+
+	// Add space at the bottom for the progress bar.
+	&--uploading {
+		margin-bottom: 30px;
+	}
+}
+
+:deep(.upload-picker) {
+	.upload-picker__progress {
+		position: absolute;
+		bottom: -30px;
+		left: 64px;
+		margin: 0;
+	}
+
+	.upload-picker__cancel {
+		position: absolute;
+		bottom: -24px;
+		right: 50px;
+	}
+}
+
 </style>