feat(tpl): improve uploading indicator

- move upload progress bar after path list
- add uploading label

Author: marjune163

src/tpl/frontend/index.css

@@ -101,7 +101,7 @@ html::before {
 	content: '';
 	position: absolute;
 	position: fixed;
-	z-index: 1;
+	z-index: 2;
 	left: 0;
 	top: 0;
 	right: 0;
@@ -195,6 +195,53 @@ html.dragging::before {
 	background: #f7f7f7;
 }
 
+.upload-status {
+	visibility: hidden;
+	position: absolute;
+	position: sticky;
+	z-index: 1;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 4px;
+	margin-bottom: -4px;
+	background: #faf5fa;
+	background-color: rgba(204, 153, 204, 0.1);
+	pointer-events: none;
+}
+
+.upload-status.uploading {
+	visibility: visible;
+}
+
+.upload-status .label {
+	position: absolute;
+	left: 50%;
+	top: 100%;
+	opacity: 0;
+	transform: translate(-50%, -50%);
+	transition: transform .2s, opacity .2s;
+	padding: 0.5em 1em;
+	color: #fff;
+	background: #c9c;
+	background-color: rgba(204, 153, 204, 0.8);
+	white-space: nowrap;
+}
+
+.upload-status.uploading .label {
+	opacity: 1;
+	transform: translate(-50%, 10%);
+}
+
+.upload-status .progress {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 0;
+	height: 100%;
+	background: #c9c;
+}
+
 .upload {
 	position: relative;
 }
@@ -216,17 +263,6 @@ html.dragging::before {
 	position: relative;
 }
 
-.upload .progress {
-	position: fixed;
-	left: 0;
-	top: 0;
-	width: 0;
-	height: 4px;
-	opacity: 0.5;
-	background: #c9c;
-	pointer-events: none;
-}
-
 .archive {
 	margin: 1em;
 	overflow: hidden;

src/tpl/frontend/index.html

@@ -21,6 +21,13 @@
 	{{end}}
 </ol>
 
+{{if .CanUpload}}
+<div class="upload-status">
+	<span class="label">{{.Trans.UploadingLabel}}</span>
+	<span class="progress"></span>
+</div>
+{{end}}
+
 {{if .CanMkdir}}
 <div class="panel mkdir">
 	<form method="POST" action="{{.SubItemPrefix}}?mkdir">
@@ -41,7 +48,6 @@
 		<input type="file" name="file" multiple="multiple" class="file"/>
 		<button type="submit" class="submit">{{.Trans.UploadLabel}}</button>
 	</form>
-	<span class="progress"></span>
 </div>
 {{end}}
 

src/tpl/frontend/index.js

@@ -740,7 +740,9 @@
 
 			var uploading = false;
 			var batches = [];
-			var elProgress = upload.querySelector('.progress');
+			var classUploading = 'uploading';
+			var elUploadStatus = document.body.querySelector('.upload-status');
+			var elProgress = elUploadStatus && elUploadStatus.querySelector('.progress');
 
 			function onComplete() {
 				if (elProgress) {
@@ -750,6 +752,9 @@
 					uploadBatch(batches.shift());
 				} else {
 					uploading = false;
+					if (elUploadStatus) {
+						elUploadStatus.classList.remove(classUploading);
+					}
 				}
 			}
 
@@ -773,6 +778,9 @@
 					batches.push(files);
 				} else {
 					uploading = true;
+					if (elUploadStatus) {
+						elUploadStatus.classList.add(classUploading);
+					}
 					uploadBatch(files);
 				}
 			}
@@ -840,7 +848,7 @@
 			}
 
 			function onDragEnterOver(e) {
-				if(!isSelfDragging) {
+				if (!isSelfDragging) {
 					e.stopPropagation();
 					e.preventDefault();
 					addClass(e.currentTarget, classDragging);