From 38b11281a9ed30217b0a7e6e60e2455b5b7dddad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 18 Nov 2020 11:07:56 +0100 Subject: [PATCH] MOBILE-3594 core: Add progress bar component --- src/core/components/components.module.ts | 3 + .../progress-bar/core-progress-bar.html | 5 ++ .../components/progress-bar/progress-bar.scss | 33 +++++++++ .../components/progress-bar/progress-bar.ts | 71 +++++++++++++++++++ src/theme/variables.scss | 13 +++- 5 files changed, 124 insertions(+), 1 deletion(-) create mode 100644 src/core/components/progress-bar/core-progress-bar.html create mode 100644 src/core/components/progress-bar/progress-bar.scss create mode 100644 src/core/components/progress-bar/progress-bar.ts diff --git a/src/core/components/components.module.ts b/src/core/components/components.module.ts index e06d19a46..aeef5fea2 100644 --- a/src/core/components/components.module.ts +++ b/src/core/components/components.module.ts @@ -31,6 +31,7 @@ import { CoreShowPasswordComponent } from './show-password/show-password'; import { CoreEmptyBoxComponent } from './empty-box/empty-box'; import { CoreTabsComponent } from './tabs/tabs'; import { CoreInfiniteLoadingComponent } from './infinite-loading/infinite-loading'; +import { CoreProgressBarComponent } from './progress-bar/progress-bar'; import { CoreDirectivesModule } from '@directives/directives.module'; import { CorePipesModule } from '@pipes/pipes.module'; @@ -51,6 +52,7 @@ import { CorePipesModule } from '@pipes/pipes.module'; CoreEmptyBoxComponent, CoreTabsComponent, CoreInfiniteLoadingComponent, + CoreProgressBarComponent, ], imports: [ CommonModule, @@ -74,6 +76,7 @@ import { CorePipesModule } from '@pipes/pipes.module'; CoreEmptyBoxComponent, CoreTabsComponent, CoreInfiniteLoadingComponent, + CoreProgressBarComponent, ], }) export class CoreComponentsModule {} diff --git a/src/core/components/progress-bar/core-progress-bar.html b/src/core/components/progress-bar/core-progress-bar.html new file mode 100644 index 000000000..6edeb841e --- /dev/null +++ b/src/core/components/progress-bar/core-progress-bar.html @@ -0,0 +1,5 @@ + + + +
{{ 'core.percentagenumber' | translate: {$a: text} }}
+ diff --git a/src/core/components/progress-bar/progress-bar.scss b/src/core/components/progress-bar/progress-bar.scss new file mode 100644 index 000000000..e82f88fa1 --- /dev/null +++ b/src/core/components/progress-bar/progress-bar.scss @@ -0,0 +1,33 @@ +:host { + display: flex; + + .core-progress-text { + line-height: 40px; + font-size: 1rem; + color: var(--text-color); + width: 55px; + text-align: center; + } + + progress { + -webkit-appearance: none; + appearance: none; + height: var(--height); + margin: 16px 0; + padding: 0; + display: block; + width: calc(100% - 55px); + + &[value]::-webkit-progress-bar { + background-color: var(--background); + border-radius: 0; + border: 0; + box-shadow: none; + } + + &[value]::-webkit-progress-value { + background-color: var(--color); + border-radius: 0; + } + } +} diff --git a/src/core/components/progress-bar/progress-bar.ts b/src/core/components/progress-bar/progress-bar.ts new file mode 100644 index 000000000..39267d2f0 --- /dev/null +++ b/src/core/components/progress-bar/progress-bar.ts @@ -0,0 +1,71 @@ +// (C) Copyright 2015 Moodle Pty Ltd. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy } from '@angular/core'; +import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; + +/** + * Component to show a progress bar and its value. + * + * Example usage: + * + */ +@Component({ + selector: 'core-progress-bar', + templateUrl: 'core-progress-bar.html', + styleUrls: ['progress-bar.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class CoreProgressBarComponent implements OnChanges { + + @Input() progress!: number | string; // Percentage from 0 to 100. + @Input() text?: string; // Percentage in text to be shown at the right. If not defined, progress will be used. + width?: SafeStyle; + protected textSupplied = false; + + constructor(private sanitizer: DomSanitizer) { } + + /** + * Detect changes on input properties. + */ + ngOnChanges(changes: { [name: string]: SimpleChange }): void { + if (changes.text && typeof changes.text.currentValue != 'undefined') { + // User provided a custom text, don't use default. + this.textSupplied = true; + } + + if (changes.progress) { + // Progress has changed. + if (typeof this.progress == 'string') { + this.progress = parseInt(this.progress, 10); + } + + if (this.progress < 0 || isNaN(this.progress)) { + this.progress = -1; + } + + if (this.progress != -1) { + // Remove decimals. + this.progress = Math.floor(this.progress); + + if (!this.textSupplied) { + this.text = String(this.progress); + } + + this.width = this.sanitizer.bypassSecurityTrustStyle(this.progress + '%'); + } + } + } + +} diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 20a65148c..2a7b7a9e0 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -135,13 +135,20 @@ --color: var(--core-color); } + core-progress-bar { + --height: var(--custom-progress-bar-height, 8px); + --color: var(--custom-progress-color, var(--core-color)); + --text-color: var(--custom-progress-text-color, var(--gray-darker)); + --background: var(--custom-progress-background, var(--gray-lighter)); + } + --selected-item-color: var(--custom-selected-item-color, var(--core-color)); --selected-item-border-width: var(--custom-selected-item-border-width, 5px); --drop-shadow: var(--custom-drop-shadow, 0, 0, 0, 0.2); --core-login-background: var(--custom-login-background, var(--white)); - --core-login-text-color: var(--custom-login-text-color, var(--black)); + --core-login-text-color: var(--custom-login-text-color, var(--black)); } /* @@ -196,6 +203,10 @@ } } + core-progress-bar { + --text-color: var(--custom-progress-text-color, var(--gray-lighter)); + } + --core-login-background: var(--custom-login-background, #3a3a3a); --core-login-text-color: var(--custom-login-text-color, white); }