From bc44779a96f8a9d8ef3284cb8e73663e56ed0782 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 9 Dec 2024 18:34:01 +0200 Subject: [PATCH 1/3] UI: Fixed scroll on progress bar for usage info widget --- .../widget/lib/home-page/usage-info-widget.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss index b7c02acef6..529a3d4495 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss @@ -97,6 +97,7 @@ :host ::ng-deep { .tb-usage-items-progress { .mat-mdc-progress-bar { + overflow: hidden; .mdc-linear-progress__bar-inner { border-top-width: 8px; } From 6dfd8b85f947a029ac927261b3c235da8a2ca117 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Tue, 10 Dec 2024 16:29:54 +0200 Subject: [PATCH 2/3] UI: Refactoring --- .../widget/lib/home-page/usage-info-widget.component.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss index 529a3d4495..86f7036276 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss @@ -16,6 +16,8 @@ @import "../../../../../../../scss/constants"; :host { + --mdc-linear-progress-track-height: 8px; + --mdc-linear-progress-active-indicator-height: 8px; .tb-card-header { display: flex; flex-direction: row; @@ -49,7 +51,6 @@ display: none; } .mdc-linear-progress { - height: 8px; margin-top: 6px; margin-bottom: 6px; border-radius: 2px; @@ -97,10 +98,6 @@ :host ::ng-deep { .tb-usage-items-progress { .mat-mdc-progress-bar { - overflow: hidden; - .mdc-linear-progress__bar-inner { - border-top-width: 8px; - } &.critical { .mdc-linear-progress__buffer-bar { background: rgba(209, 39, 48, 0.06); From 42646d4e5c3b7759acae114ddfd10d72482040ab Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Tue, 10 Dec 2024 17:14:01 +0200 Subject: [PATCH 3/3] UI: Refactoring css --- .../usage-info-widget.component.scss | 25 ++++++------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss index 86f7036276..1de8288241 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss @@ -16,8 +16,6 @@ @import "../../../../../../../scss/constants"; :host { - --mdc-linear-progress-track-height: 8px; - --mdc-linear-progress-active-indicator-height: 8px; .tb-card-header { display: flex; flex-direction: row; @@ -46,10 +44,18 @@ } .tb-usage-items-progress { + --mdc-linear-progress-track-height: 8px; + --mdc-linear-progress-active-indicator-height: 8px; width: 34px; @media #{$mat-md} { display: none; } + .mat-mdc-progress-bar { + &.critical { + --mdc-linear-progress-track-color: rgba(209, 39, 48, 0.06); + --mdc-linear-progress-active-indicator-color: #D12730; + } + } .mdc-linear-progress { margin-top: 6px; margin-bottom: 6px; @@ -94,18 +100,3 @@ color: rgba(0, 0, 0, 0.76); } } - -:host ::ng-deep { - .tb-usage-items-progress { - .mat-mdc-progress-bar { - &.critical { - .mdc-linear-progress__buffer-bar { - background: rgba(209, 39, 48, 0.06); - } - .mdc-linear-progress__bar-inner { - border-top-color: #D12730; - } - } - } - } -}