feat(powerbar): css -> scss

gisaia · Dec 20, 2024 · 14b365b · 14b365b
1 parent c09f45c
commit 14b365b
Show file tree

Hide file tree

Showing 8 changed files with 257 additions and 233 deletions.
diff --git a/projects/arlas-components/src/lib/components/metric/metric.component.scss b/projects/arlas-components/src/lib/components/metric/metric.component.scss
@@ -21,17 +21,23 @@
   &__title /* @doc Style of the metric title (above value).*/ {
     text-align: center;
     white-space: nowrap;
+    display: flex;
+    justify-content: center;
   }
 
   &__value /* @doc Style of the metric value*/ {
     font-weight: 400;
     font-size: 1.8em;
     padding: 5px 0;
     white-space: nowrap;
+    display: flex;
+    justify-content: center;
   }
 
   &__description /* @doc Style of the metric description (below value).*/ {
     font-size: 1.3rem;
     font-weight: 100;
+    display: flex;
+    justify-content: center;
   }
 }
diff --git a/projects/arlas-components/src/lib/components/powerbars/powerbar/powerbar.component.html b/projects/arlas-components/src/lib/components/powerbars/powerbar/powerbar.component.html
@@ -1,27 +1,27 @@
 <ng-container *ngIf="!!powerbar">
     <ng-container *ngIf="!powerbar.isSelected || (powerbar.isSelected && !hideSelected)">
-        <div class="container">
-            <section *ngIf="selectWithCheckbox" class="checkbox checkbox-{{powerbar.classSuffix}}"  (click)="$event.stopPropagation()">
-                <mat-checkbox [checked]="powerbar.isSelected" (change)="onCheck()"></mat-checkbox>
+        <div class="container" (click)="onSelect()">
+            <section *ngIf="selectWithCheckbox" class="checkbox checkbox-{{powerbar.classSuffix}}">
+                <mat-checkbox [checked]="powerbar.isSelected" (change)="onCheck()" (click)="$event.stopPropagation()"></mat-checkbox>
             </section>
             <section style="width: 100%;">
                 <div class="powerbars__powerbar powerbars__powerbar--{{powerbar.classSuffix}}"
                     matTooltip="{{(powerbar.count | formatNumber:NUMBER_FORMAT_CHAR) + ' ' + (unit | translate)}}"
                     [matTooltipPosition]="'after'">
-                <div class="powerbar__powerbar--top-group">
-                    <div [class.powerbar__powerbar--selected]="powerbar.isSelected" class="powerbar__powerbar--term powerbar__powerbar--term-{{powerbar.classSuffix}} powerbar__powerbar--term--{{powerbar.term}}">
-                    {{powerbar.term | translate}}
-                    </div>
+                    <div class="powerbars__powerbar--top-group">
+                        <div [class.powerbars__powerbar--selected]="powerbar.isSelected" class="powerbars__powerbar--term powerbars__powerbar--term-{{powerbar.classSuffix}} powerbars__powerbar--term--{{powerbar.term}}">
+                            {{powerbar.term | translate}}
+                        </div>
 
-                    <div [class.powerbar__powerbar--selected]="powerbar.isSelected" class="powerbar__powerbar--count powerbar__powerbar--term-{{powerbar.classSuffix}} powerbar__powerbar--term--{{powerbar.term}}">
-                    {{powerbar.count | shortenNumber:numberShorteningPrecision}}
+                        <div [class.powerbars__powerbar--selected]="powerbar.isSelected" class="powerbars__powerbar--count powerbars__powerbar--term-{{powerbar.classSuffix}} powerbars__powerbar--term--{{powerbar.term}}">
+                            {{powerbar.count | shortenNumber:numberShorteningPrecision}}
+                        </div>
                     </div>
-                </div>
 
-                <div *ngIf="!useColorService && !useColorFromData" class="powerbars__powerbar--progression-default-colour"
-                [style.width]="powerbar.progression+'%'"></div>
-                <div *ngIf="useColorService || useColorFromData" [style.background-color]="powerbar.color"
-                    [style.border-color]="powerbar.color" [style.width]="powerbar.progression+'%'" class="powerbars__powerbar--progression"></div>
+                    <div *ngIf="!useColorService && !useColorFromData" class="powerbars__powerbar--progression-default-colour"
+                        [style.width.%]="powerbar.progression"></div>
+                    <div *ngIf="useColorService || useColorFromData" [style.background-color]="powerbar.color"
+                        [style.border-color]="powerbar.color" [style.width.%]="powerbar.progression" class="powerbars__powerbar--progression"></div>
                 </div>
             </section>
         </div>

diff --git a/...powerbars/powerbar/powerbar.component.css → ...owerbars/powerbar/powerbar.component.scss b/...powerbars/powerbar/powerbar.component.css → ...owerbars/powerbar/powerbar.component.scss
@@ -21,27 +21,29 @@
     display: flex;
     align-items: flex-start;
 
-    --mdc-checkbox-state-layer-size: 10px
-}
+    --mdc-checkbox-state-layer-size: 10px;
 
-/* Change the size of the checkbox below 18px */
-.container ::ng-deep.mdc-checkbox__native-control {
-    top: 0 !important;
-    right: 0 !important;
-    left: 0 !important;
-}
-.container ::ng-deep.mdc-checkbox,
-.container ::ng-deep.mdc-checkbox__background,
-.container ::ng-deep.mat-mdc-checkbox-touch-target,
-.container ::ng-deep.mdc-checkbox__ripple,
-.container ::ng-deep.mat-mdc-checkbox-ripple  {
-    width: 10px;
-    height: 10px;
-    top: 0 !important;
-    left: 0 !important;
-}
-.container ::ng-deep.mat-mdc-checkbox-touch-target {
-    transform: unset;
+    /* Change the size of the checkbox below 18px */
+    ::ng-deep.mdc-checkbox__native-control {
+        top: 0 !important;
+        right: 0 !important;
+        left: 0 !important;
+    }
+
+    ::ng-deep.mdc-checkbox,
+    ::ng-deep.mdc-checkbox__background,
+    ::ng-deep.mat-mdc-checkbox-touch-target,
+    ::ng-deep.mdc-checkbox__ripple,
+    ::ng-deep.mat-mdc-checkbox-ripple {
+        width: 10px;
+        height: 10px;
+        top: 0 !important;
+        left: 0 !important;
+    }
+
+    ::ng-deep.mat-mdc-checkbox-touch-target {
+        transform: unset;
+    }
 }
 
 .checkbox {
@@ -83,15 +85,15 @@
     border-radius: 2px;
 }
 
-.powerbar__powerbar--top-group {
+.powerbars__powerbar--top-group {
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
 }
 
-.powerbar__powerbar--term /* @doc Style of terms.*/
+.powerbars__powerbar--term /* @doc Style of terms.*/
 {
     font-size: 10px;
     width: 70%;
@@ -104,7 +106,7 @@
     text-align: left;
 }
 
-.powerbar__powerbar--count /* @doc Style of counts.*/
+.powerbars__powerbar--count /* @doc Style of counts.*/
 {
     font-size: 10px;
     width: 100%;
@@ -115,12 +117,12 @@
     text-align: right;
 }
 
-.powerbar__powerbar--selected
+.powerbars__powerbar--selected
 {
     font-weight: bold;
 }
 
-.powerbar__powerbar--term-unselected-bar {
+.powerbars__powerbar--term-unselected-bar {
     color: #888;
 }
 

diff --git a/projects/arlas-components/src/lib/components/powerbars/powerbar/powerbar.component.ts b/projects/arlas-components/src/lib/components/powerbars/powerbar/powerbar.component.ts
@@ -17,16 +17,16 @@
  * under the License.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { PowerBar } from '../model/powerbar';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DEFAULT_SHORTENING_PRECISION, NUMBER_FORMAT_CHAR } from '../../componentsUtils';
+import { PowerBar } from '../model/powerbar';
 
 @Component({
     selector: 'arlas-powerbar',
     templateUrl: './powerbar.component.html',
-    styleUrls: ['./powerbar.component.css']
+    styleUrls: ['./powerbar.component.scss']
 })
-export class PowerbarComponent implements OnInit {
+export class PowerbarComponent {
 
     @Input() public powerbar: PowerBar;
     /**
@@ -65,15 +65,15 @@ export class PowerbarComponent implements OnInit {
 
     @Output() public onCheckEvent: EventEmitter<boolean> = new EventEmitter();
 
+    @Output() public onClickEvent = new EventEmitter<boolean>();
 
     public NUMBER_FORMAT_CHAR = NUMBER_FORMAT_CHAR;
 
-
-    public ngOnInit(): void {
-    }
-
     public onCheck() {
         this.onCheckEvent.emit(true);
     }
 
+    public onSelect() {
+        this.onClickEvent.emit(true);
+    }
 }
diff --git a/projects/arlas-components/src/lib/components/powerbars/powerbars.component.css b/projects/arlas-components/src/lib/components/powerbars/powerbars.component.css