feat: ProgressBar component

src/components/misc/ProgressBar.vue

@@ -0,0 +1,164 @@
+<template>
+	<progress
+		class="progress-bar"
+		:class="{
+			'is-small': isSmall,
+			'is-primary': isPrimary,
+		}"
+		:value="value"
+		max="100"
+	>
+		{{ value }}%
+	</progress>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+	value: {
+		type: Number,
+		required: true,
+	},
+	isSmall: {
+		type: Boolean,
+		default: false,
+	},
+	isPrimary: {
+		type: Boolean,
+		required: false,
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.progress-bar {
+	--progress-height: var(--size-normal, #{$size-normal});
+	--progress-bar-background-color: var(--border-light, #{$border-light});
+	--progress-value-background-color: var(--text, #{$text});
+	--progress-border-radius: var(--radius-rounded, #{$radius-rounded});
+	--progress-indeterminate-duration: 1.5s;
+
+	--size-small: #{$size-small};
+	--size-medium: #{$size-medium};
+	--size-large: #{$size-large};
+
+	appearance: none;
+	border: none;
+	border-radius: var(--progress-border-radius);
+	display: block;
+	height: var(--progress-height);
+	overflow: hidden;
+	padding: 0;
+	width: 100%;
+
+	&::-webkit-progress-bar {
+		background-color: var(--progress-bar-background-color);
+	}
+	&::-webkit-progress-value {
+		background-color: var(--progress-value-background-color);
+	}
+	&::-moz-progress-bar {
+		background-color: var(--progress-value-background-color);
+	}
+	&::-ms-fill {
+		background-color: var(--progress-value-background-color);
+		border: none;
+	}
+
+	// Colors
+	@each $name, $pair in $colors {
+		$color: nth($pair, 1);
+		&.is-#{$name} {
+			&::-webkit-progress-value {
+				--progress-value-background-color: var(--#{$name}, #{$color});
+			}
+
+			&::-moz-progress-bar {
+				--progress-value-background-color: var(--#{$name}, #{$color});
+			}
+
+			&::-ms-fill {
+				--progress-value-background-color: var(--#{$name}, #{$color});
+			}
+
+			&:indeterminate {
+				background-image: linear-gradient(
+					to right,
+					var(--#{$name}, #{$color}) 30%,
+					var(--progress-bar-background-color) 30%
+				);
+			}
+		}
+	}
+
+	&:indeterminate {
+		animation-duration: var(--progress-indeterminate-duration);
+		animation-iteration-count: infinite;
+		animation-name: moveIndeterminate;
+		animation-timing-function: linear;
+		background-color: var(--progress-bar-background-color);
+		background-image: linear-gradient(
+			to right,
+			var(--text, #{$text}) 30%,
+			var(--progress-bar-background-color) 30%
+		);
+		background-position: top left;
+		background-repeat: no-repeat;
+		background-size: 150% 150%;
+
+		&::-webkit-progress-bar {
+			background-color: transparent;
+		}
+
+		&::-moz-progress-bar {
+			background-color: transparent;
+		}
+
+		&::-ms-fill {
+			animation-name: none;
+		}
+	}
+
+	// Sizes
+	&.is-small {
+		--progress-height: var(--size-small, #{$size-small});
+	}
+	&.is-medium {
+		--progress-height: var(--size-medium, #{$size-medium});
+	}
+	&.is-large {
+		--progress-height: var(--size-large, #{$size-large});
+	}
+}
+
+@keyframes moveIndeterminate {
+	from {
+		background-position: 200% 0;
+	}
+	to {
+		background-position: -200% 0;
+	}
+}
+
+.progress-bar {
+	--progress-height: var(--size-normal, 1rem);
+
+	border-radius: $radius-large;
+	width: inherit; // overwrite bulma
+	min-width: 6vw;
+
+	@media screen and (max-width: $tablet) {
+		width: 100%;
+	}
+
+	&::-moz-progress-bar,
+	&::-webkit-progress-value {
+		background: var(--grey-500);
+	}
+}
+
+.progress-bar.is-small {
+	--progress-height: var(--size-small, 0.75rem);
+}
+</style>

src/components/tasks/partials/attachments.vue

@@ -16,14 +16,11 @@
 			type="file"
 			v-if="editEnabled"
 		/>
-		<progress
-			:value="attachmentService.uploadProgress"
-			class="progress is-primary"
-			max="100"
+		<ProgressBar
 			v-if="attachmentService.uploadProgress > 0"
-		>
-			{{ attachmentService.uploadProgress }}%
-		</progress>
+			:value="attachmentService.uploadProgress * 100"
+			is-primary
+		/>
 
 		<div class="files" v-if="attachments.length > 0">
 			<a
@@ -138,7 +135,8 @@
 <script>
 import AttachmentService from '../../../services/attachment'
 import AttachmentModel from '../../../models/attachment'
-import User from '../../misc/user'
+import User from '@/components/misc/user'
+import ProgressBar from '@/components/misc/ProgressBar'
 import {mapState} from 'vuex'
 import copy from 'copy-to-clipboard'
 
@@ -148,6 +146,7 @@ export default {
 	name: 'attachments',
 	components: {
 		User,
+		ProgressBar,
 	},
 	data() {
 		return {

src/components/tasks/partials/kanban-card.vue

@@ -33,12 +33,11 @@
 			</time>
 		</span>
 		<h3>{{ task.title }}</h3>
-		<progress
-			class="progress is-small"
+		<ProgressBar
 			v-if="task.percentDone > 0"
-			:value="task.percentDone * 100" max="100">
-			{{ task.percentDone * 100 }}%
-		</progress>
+			:value="task.percentDone * 100"
+			is-small
+		/>
 		<div class="footer">
 			<labels :labels="task.labels"/>
 			<priority-label :priority="task.priority" :done="task.done"/>
@@ -67,10 +66,11 @@
 
 <script>
 import {playPop} from '../../../helpers/playPop'
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
-import User from '../../../components/misc/user'
+import PriorityLabel from '@/components/tasks/partials/priorityLabel'
+import User from '@/components/misc/user'
+import ProgressBar from '@/components/misc/ProgressBar'
 import Done from '@/components/misc/Done.vue'
-import Labels from '../../../components/tasks/partials/labels'
+import Labels from '@/components/tasks/partials/labels'
 import ChecklistSummary from './checklist-summary'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
@@ -81,6 +81,7 @@ export default {
 		ChecklistSummary,
 		Done,
 		PriorityLabel,
+		ProgressBar,
 		User,
 		Labels,
 	},
@@ -138,6 +139,7 @@ $task-background: var(--white);
 	border: 3px solid transparent;
 
 	font-size: .9rem;
+	margin: .5rem;
 	padding: .4rem;
 	border-radius: $radius;
 	background: $task-background;

src/styles/components/tasks.scss

@@ -15,11 +15,6 @@
 		}
 	}
 
-	.progress {
-		// overwrite bulma
-		margin-bottom: 0;
-	}
-
 	&.noborder {
 		margin: 1rem -0.5rem;
 	}

src/styles/global.scss

@@ -24,7 +24,7 @@
 @import "bulma-css-variables/sass/elements/icon";
 @import "bulma-css-variables/sass/elements/image";
 //@import "bulma-css-variables/sass/elements/notification"; // not used
-@import "bulma-css-variables/sass/elements/progress";
+// @import "bulma-css-variables/sass/elements/progress"; // not used
 @import "bulma-css-variables/sass/elements/table";
 @import "bulma-css-variables/sass/elements/tag";
 @import "bulma-css-variables/sass/elements/title";

src/styles/theme/theme.scss

@@ -38,20 +38,12 @@ h6 {
 // - kanban-card.vue
 // - singleTaskInList.vue
 .progress {
-  border-radius: $radius-large;
-	width: 50px;
-	margin: 0 0.5rem 0 0;
-	flex: 3 1 auto;
-
-	&::-moz-progress-bar,
-	&::-webkit-progress-value {
-	  background: var(--grey-500);
-	}
+	// margin: 0 0.5rem 0 0;
+	// flex: 3 1 auto;
 
 	@media screen and (max-width: $tablet) {
-		margin: 0.5rem 0 0 0;
-		order: 1;
-		width: 100%;
+		// margin: 0.5rem 0 0 0;
+		// order: 1;
 	}
 }
 
@@ -136,7 +128,6 @@ button.table {
 .color-bubble {
   display: inline-block;
   border-radius: 100%;
-  margin-right: 4px;
 }
 
 .dropdown-menu  .dropdown-content {