Prevent progress bar overflow when uploading in album content

Signed-off-by: Louis Chemineau <louis@chmn.me>
nextcloud · Jun 8, 2023 · 7405dd5 · 7405dd5
1 parent 7fdb9c8
commit 7405dd5
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 10 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_AlbumContent_vue.js b/js/photos-src_views_AlbumContent_vue.js
diff --git a/js/photos-src_views_AlbumContent_vue.js.map b/js/photos-src_views_AlbumContent_vue.js.map
diff --git a/src/views/AlbumContent.vue b/src/views/AlbumContent.vue
@@ -31,6 +31,7 @@
 			<HeaderNavigation key="navigation"
 				slot="header"
 				slot-scope="{selectedFileIds}"
+				:class="{'photos-navigation--uploading': uploader.queue?.length > 0}"
 				:loading="loadingFiles"
 				:params="{ albumName }"
 				:path="'/' + albumName"
@@ -157,7 +158,7 @@ import { addNewFileMenuEntry, removeNewFileMenuEntry } from '@nextcloud/files'
 import { getCurrentUser } from '@nextcloud/auth'
 import { mapActions, mapGetters } from 'vuex'
 import { NcActions, NcActionButton, NcButton, NcModal, NcEmptyContent, NcActionSeparator, NcLoadingIcon, isMobile } from '@nextcloud/vue'
-import { UploadPicker } from '@nextcloud/upload'
+import { UploadPicker, getUploader } from '@nextcloud/upload'
 import debounce from 'debounce'
 
 import Close from 'vue-material-design-icons/Close.vue'
@@ -243,6 +244,9 @@ export default {
 			showEditAlbumForm: false,
 
 			loadingAddCollaborators: false,
+
+			uploader: getUploader(),
+
 			newFileMenuEntry: {
 				id: 'album-add',
 				displayName: t('photos', 'Add photos to this album'),
@@ -442,4 +446,26 @@ export default {
 		color: var(--color-text-lighter);
 	}
 }
+
+.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>