Use progress tag

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
nextcloud · Jul 14, 2020 · 53ee0f3 · 53ee0f3
1 parent 226024f
commit 53ee0f3
Showing 1 changed file with 61 additions and 18 deletions.
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
@@ -23,14 +23,21 @@
 </docs>
 
 <template>
-	<div class="progress-bar">
+	<progress class="progress-bar vue"
+		:class="{ 'warn': warn }"
+		:style="progressBarStyle"
+		:value="value"
+		max="100">
+	<!--
 		<div class="progress-bar__loaded" :style="progressLoadedWidth" />
 		<div class="progress-bar__total" />
-	</div>
+		-->
+	</progress>
 </template>
 
 <script>
 export default {
+
 	name: 'ProgressBar',
 
 	props: {
@@ -41,39 +48,75 @@ export default {
 			type: Number,
 			required: true,
 		},
+		/**
+		 * Determines the height of the progressbar
+		 * Possible values:
+		 * - 'small' (default)
+		 * - 'medium'
+		 */
+		size: {
+			type: String,
+			default: 'small',
+		},
+		/**
+		 * Applies an error color to the progressbar if true
+		 */
+		warn: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
 
-		progressLoadedWidth() {
+		progressBarStyle() {
+			let height = 0
+			let borderRadius = 0
+			if (this.size === 'small') {
+				height = '4px'
+				borderRadius = '2px'
+			} else if (this.size === 'medium') {
+				height = '6px'
+				borderRadius = '3px'
+			}
 			return {
-				width: `${this.value}px`,
+				height,
+				'border-radius': borderRadius,
 			}
 		},
 	},
-
 }
+
 </script>
 
 <style lang="scss" scoped>
 
 .progress-bar {
-	position: relative;
+	display: block;
 	width: 100%;
-	&__loaded,
-	&__total {
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 4px;
+	background: var(--color-background-dark);
+	border: 0;
+	padding: 0;
+	border-radius: var(--border-radius);
+	&::-webkit-progress-bar {
+		height: calc(var(--border-radius) * 2);
+	}
+	&::-webkit-progress-value {
+		background: linear-gradient(40deg, var(--color-primary-element) 0%, var(--color-primary-element-light) 100%);
+		border-radius: var(--border-radius);
+		transition: 250ms all ease-in-out;
 	}
-	&__loaded {
-		background-color: var(--color-primary-element-light);
-		z-index: 1;
+	&::-moz-progress-bar {
+		background: linear-gradient(40deg, var(--color-primary-element) 0%, var(--color-primary-element-light) 100%);
+		transition: 250ms all ease-in-out;
 	}
-	&__total {
-		width: 100%;
-		background-color: var(--color-box-shadow);;
+	&.warn {
+		&::-moz-progress-bar {
+			background: var(--color-error) !important;
+		}
+		&::-webkit-progress-value {
+			background: var(--color-error) !important;
+		}
 	}
 }