Use NcProgressBar

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

2 files changed, 15 insertions, 19 deletions

diff --git a/src/components/DeleteCompletedModal.vue b/src/components/DeleteCompletedModal.vue
index c9651cce..69b16a64 100644
--- a/src/components/DeleteCompletedModal.vue
+++ b/src/components/DeleteCompletedModal.vue
@@ -54,7 +54,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					</h3>
 				</div>
 				<div>
-					<progress :max="initialCompletedTasksCount" :value="progress" class="delete-completed__progress" />
+					<NcProgressBar :value="percentage" class="delete-completed__progress" />
 					<p class="delete-completed__tracker">
 						<span>{{ percentage }} %</span>
 						<span v-if="failed === 0">
@@ -179,6 +179,7 @@ export default {
 		padding-top: 20px;
 		max-width: 80%;
 		margin: 12px auto;
+		text-align: center;
 	}
 	&__button {
 		margin: 0 auto;
diff --git a/src/components/TaskBody.vue b/src/components/TaskBody.vue
index 4be3cf27..935b59e0 100644
--- a/src/components/TaskBody.vue
+++ b/src/components/TaskBody.vue
@@ -58,12 +58,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 						</span>
 					</span>
 				</div>
-				<div v-if="task.complete > 0" class="percentbar">
-					<div :style="{ width: task.complete + '%', 'background-color': task.calendar.color }"
-						:class="{'completed': task.completed}"
-						:aria-label="t('tasks', '{complete} % completed', {complete: task.complete})"
-						class="percentbar__done" />
-				</div>
+				<NcProgressBar v-if="task.complete > 0"
+					:value="task.complete"
+					:aria-label="t('tasks', '{complete} % completed', {complete: task.complete})"
+					:style="{'--progress-bar-color': task.calendar.color }" />
 			</div>
 			<!-- Icons: sync-status, calendarname, date, note, subtask-show-completed, subtask-visibility, add-subtask, starred -->
 			<div class="task-body__icons">
@@ -175,6 +173,7 @@ import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar'
 import Linkify from '@nextcloud/vue/dist/Directives/Linkify'
 
 import Delete from 'vue-material-design-icons/Delete'
@@ -202,6 +201,7 @@ export default {
 		TaskDragContainer,
 		NcActions,
 		NcActionButton,
+		NcProgressBar,
 		Delete,
 		Eye,
 		Pin,
@@ -810,23 +810,18 @@ $breakpoint-mobile: 1024px;
 					}
 				}
 
-				.percentbar {
+				.progress-bar {
 					height: 3px;
 					position: absolute;
 					bottom: 3px;
-					left: 0;
-					right: 10px;
 					background-color: var(--color-background-darker);
-					border-radius: 2px;
-
-					&__done {
-						height: 3px;
-						border-radius: 2px 0 0 2px;
-						background-color: var(--color-primary);
 
-						&.completed {
-							border-radius: 2px;
-						}
+					// Override previous values
+					&::-moz-progress-bar {
+						background: var(--progress-bar-color) !important;
+					}
+					&::-webkit-progress-value {
+						background: var(--progress-bar-color) !important;
 					}
 				}
 			}