Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-5875: Material upgrade - progress bar

Browse Source
This commit is contained in:
Adina Țeudan 2023-05-29 23:21:35 +03:00
parent 95b528deb6
commit b50019b01c
4 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/assets/styles/common-progress-bar.scss
View File

@ -1,20 +1,18 @@
.mat-progress-bar {
height: 6px;
.mat-mdc-progress-bar {
--mdc-linear-progress-track-height: 6px;
--mdc-linear-progress-active-indicator-color: var(--iqser-white);
border-radius: 3px;
.mat-progress-bar-buffer {
.mdc-linear-progress__buffer-bar {
background-color: var(--iqser-grey-5);
}
&.white {
.mat-progress-bar-fill::after {
background-color: var(--iqser-white);
}
&.primary {
--mdc-linear-progress-active-indicator-color: var(--iqser-primary);
}
&.green {
.mat-progress-bar-fill::after {
background-color: var(--iqser-green-2);
}
--mdc-linear-progress-active-indicator-color: var(--iqser-green-2);
}
}

2
src/lib/common-ui.module.ts
View File

@ -7,7 +7,7 @@ import { ConnectionStatusComponent, FullPageErrorComponent } from './error';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

2
src/lib/loading/loading.module.ts
View File

@ -4,7 +4,7 @@ import { ProgressLoadingComponent } from './progress-loading/progress-loading.co
import { LoadingService } from './loading.service';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { CommonModule } from '@angular/common';
import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { ProgressBarComponent } from './progress-bar/progress-bar.component';
import { MatIconModule } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';

2
src/lib/loading/progress-loading/progress-loading.component.html
View File

@ -3,7 +3,7 @@
<div class="pt-8">
<mat-progress-bar
[mode]="!config.value || config.value === 100 ? 'indeterminate' : 'determinate'"
[value]="config.value"
[value]="config.value || 0"
></mat-progress-bar>
<div class="pt-10">