EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3814 styles: Style progress bars

main
Pau Ferrer Ocaña 2022-02-03 17:08:53 +01:00
parent ab99eb6998
commit efba119a86
6 changed files with 68 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/components/progress-bar/core-progress-bar.html
View File

@ -8,4 +8,4 @@
</div>
</ng-container>
<ion-progress-bar *ngIf="progress < 0" type="indeterminate"></ion-progress-bar>
<ion-progress-bar *ngIf="progress < 0" [color]="color" type="indeterminate"></ion-progress-bar>

32
src/core/components/progress-bar/progress-bar.scss
View File

@ -1,13 +1,27 @@
@import "~theme/globals";
:host {
display: flex;
width: 100%;
--line-height: 40px;
--bar-margin: 16px 0;
--height: var(--core-progressbar-height);
--text-color: var(--core-progressbar-text-color);
--progressbar-color: var(--core-progressbar-color);
--progressbar-background: var(--core-progressbar-background);
@each $color-name, $unused in $colors {
&.ion-color-#{$color-name} {
--progressbar-color: var(--#{$color-name});
--progressbar-background: var(--#{$color-name}-tint);
}
}
.core-progress-text {
line-height: var(--line-height);
font-size: 1rem;
font-size: 0.9rem;
color: var(--text-color);
width: 55px;
text-align: center;
@ -24,22 +38,28 @@
flex: 1;
&[value]::-webkit-progress-bar {
background-color: var(--background);
border-radius: 0;
background-color: var(--progressbar-background);
border-radius: var(--height);
border: 0;
box-shadow: none;
}
&[value]::-webkit-progress-value {
background-color: var(--color);
border-radius: 0;
background-color: var(--progressbar-color);
border-radius: var(--height);
}
}
ion-progress-bar {
--progress-background: var(--color);
--progress-background: var(--progressbar-color);
--buffer-background: var(--progressbar-background);
border-radius: var(--height);
height: var(--height);
margin-top: calc((var(--line-height) - var(--height)) /2);
margin-bottom: calc((var(--line-height) - var(--height)) /2);
&::part(progress) {
border-radius: var(--height);
}
}
}

28
src/core/components/progress-bar/progress-bar.ts
View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy } from '@angular/core';
import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy, ElementRef, OnInit } from '@angular/core';
import { SafeStyle } from '@angular/platform-browser';
import { DomSanitizer, Translate } from '@singletons';
@ -28,22 +28,44 @@ import { DomSanitizer, Translate } from '@singletons';
styleUrls: ['progress-bar.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CoreProgressBarComponent implements OnChanges {
export class CoreProgressBarComponent implements OnInit, OnChanges {
@Input() progress!: number | string; // Percentage from 0 to 100. Negative number will show an indeterminate progress bar.
@Input() text?: string; // Percentage in text to be shown at the right. If not defined, progress will be used.
@Input() a11yText?: string; // Accessibility text to read before the percentage.
@Input() ariaDescribedBy?: string; // ID of the element that described the progress, if any.
@Input() color = '';
width?: SafeStyle;
progressBarValueText?: string;
protected textSupplied = false;
protected element: HTMLElement;
constructor(elementRef: ElementRef) {
this.element = elementRef.nativeElement;
}
/**
* Detect changes on input properties.
* @inheritdoc
*/
ngOnInit(): void {
if (this.color) {
this.element.classList.add('ion-color', 'ion-color-' + this.color);
}
}
/**
* @inheritdoc
*/
ngOnChanges(changes: { [name: string]: SimpleChange }): void {
if (changes.color) {
this.element.classList.remove('ion-color', 'ion-color-' + changes.color.previousValue);
if (changes.color.currentValue) {
this.element.classList.add('ion-color', 'ion-color-' + changes.color.currentValue);
}
}
if (changes.text && changes.text.currentValue !== undefined) {
// User provided a custom text, don't use default.
this.textSupplied = true;

8
src/theme/theme.base.scss
View File

@ -723,10 +723,6 @@ ion-card {
}
}
ion-chip.ion-color {
background: var(--ion-color-tint);
}
.core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div {
display: inline !important;
}
@ -854,6 +850,10 @@ ion-chip {
line-height: 1.1;
border-radius: var(--medium-radius);
@include padding-horizontal(16px);
&.ion-color {
background: var(--ion-color-tint);
}
}
ion-searchbar {

8
src/theme/theme.dark.scss
View File

@ -54,7 +54,7 @@
--core-bottom-tabs-badge-text-color: var(--brand-contrast);
--core-bottom-tabs-background: var(--gray-900);
--core-bottom-tabs-color: var(--medium);
--core-bottom-tabs-color: var(--gray-200);
ion-action-sheet {
.action-sheet-cancel {
@ -73,7 +73,7 @@
--core-tab-border-color: var(--gray-200);
--core-tab-color-active: var(--dark);
--core-progressbar-text-color: var(--light);
--core-progressbar-text-color: var(--gray-100);
--ion-item-background: #{$ion-item-background-dark};
--ion-item-detail-icon-color: var(--white);
@ -118,8 +118,8 @@
--addon-messages-message-mine-bg: var(--gray-700);
--addon-messages-message-mine-activated-bg: var(--gray-600);
--addon-messages-discussion-badge: var(--primary);
--addon-messages-discussion-badge-text: var(--dark);
--addon-messages-discussion-badge-text: var(--gray-100);
--addon-forum-border-color: var(--gray-500);
--addon-forum-highlight-color: var(--medium);
--addon-forum-highlight-color: var(--gray-200);
}

22
src/theme/theme.light.scss
View File

@ -100,9 +100,9 @@
--core-bottom-tabs-background: var(--white);
--core-bottom-tabs-color: var(--gray-700);
--core-bottom-tabs-color-selected: var(--brand-color);
--core-bottom-tabs-color-selected: var(--brand);
--core-bottom-tabs-background-selected: transparent;
--core-bottom-tabs-badge-color: var(--brand-color);
--core-bottom-tabs-badge-color: var(--brand);
--core-bottom-tabs-badge-text-color: var(--brand-contrast);
--bottom-tabs-size: 56px;
ion-tab-bar.mainmenu-tabs {
@ -120,7 +120,7 @@
--core-header-toolbar-button-image-size: 44px;
--core-header-toolbar-background: var(--white);
--core-header-toolbar-border-width: 3px;
--core-header-toolbar-border-color: var(--brand-color);
--core-header-toolbar-border-color: var(--brand);
--core-header-toolbar-color: var(--gray-900);
--core-header-toolbar-height: 56px;
html.ios {
@ -161,7 +161,7 @@
ion-action-sheet {
--button-color: var(--ion-text-color);
--button-color-selected: var(--ion-text-color);
--title-border-color: var(--brand-color);
--title-border-color: var(--brand);
.action-sheet-title {
--color: var(--ion-text-color);
@ -183,7 +183,7 @@
--core-tab-color: var(--subdued-text-color);
--core-tab-border-color: var(--stroke);
--core-tab-color-active: var(--dark);
--core-tab-border-color-active: var(--brand-color);
--core-tab-border-color-active: var(--brand);
--core-tab-font-weight-active: normal;
--core-tabs-height: 56px;
core-tabs, core-tabs-outlet {
@ -204,15 +204,9 @@
}
--core-progressbar-height: 8px;
--core-progressbar-color: var(--brand-color);
--core-progressbar-color: var(--brand);
--core-progressbar-text-color: var(--medium);
--core-progressbar-background: var(--light);
core-progress-bar {
--height: var(--core-progressbar-height);
--color: var(--core-progressbar-color);
--text-color: var(--core-progressbar-text-color);
--background: var(--core-progressbar-background);
}
--core-progressbar-background: var(--brand-tint);
--ion-item-background: #{$ion-item-background};
--ion-item-detail-icon-color: var(--medium);
@ -267,7 +261,7 @@
--core-login-input-background: var(--white);
--core-login-input-color: var(--gray-900);
--core-star-color: var(--brand-color);
--core-star-color: var(--brand);
--core-large-avatar-size: 90px;
--core-avatar-size: 44px;