From 14b365b5ad246de1173c8ba77a031189a8a37750 Mon Sep 17 00:00:00 2001 From: QuCMGisaia Date: Tue, 30 Jul 2024 11:38:06 +0200 Subject: [PATCH] feat(powerbar): css -> scss --- .../components/metric/metric.component.scss | 6 + .../powerbar/powerbar.component.html | 28 ++--- ....component.css => powerbar.component.scss} | 52 ++++---- .../powerbars/powerbar/powerbar.component.ts | 16 +-- .../powerbars/powerbars.component.css | 109 ----------------- .../powerbars/powerbars.component.html | 68 +++++------ .../powerbars/powerbars.component.scss | 114 ++++++++++++++++++ .../powerbars/powerbars.component.ts | 97 ++++++++------- 8 files changed, 257 insertions(+), 233 deletions(-) rename projects/arlas-components/src/lib/components/powerbars/powerbar/{powerbar.component.css => powerbar.component.scss} (78%) delete mode 100644 projects/arlas-components/src/lib/components/powerbars/powerbars.component.css create mode 100644 projects/arlas-components/src/lib/components/powerbars/powerbars.component.scss diff --git a/projects/arlas-components/src/lib/components/metric/metric.component.scss b/projects/arlas-components/src/lib/components/metric/metric.component.scss index d30a38ca..4c87ddd5 100644 --- a/projects/arlas-components/src/lib/components/metric/metric.component.scss +++ b/projects/arlas-components/src/lib/components/metric/metric.component.scss @@ -21,6 +21,8 @@ &__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*/ { @@ -28,10 +30,14 @@ 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 index 0106c3eb..ec064c8b 100644 --- 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 @@ -
-
- +
+
+
-
-
- {{powerbar.term | translate}} -
+
+
+ {{powerbar.term | translate}} +
-
- {{powerbar.count | shortenNumber:numberShorteningPrecision}} +
+ {{powerbar.count | shortenNumber:numberShorteningPrecision}} +
-
-
-
+
+
diff --git a/projects/arlas-components/src/lib/components/powerbars/powerbar/powerbar.component.css b/projects/arlas-components/src/lib/components/powerbars/powerbar/powerbar.component.scss similarity index 78% rename from projects/arlas-components/src/lib/components/powerbars/powerbar/powerbar.component.css rename to projects/arlas-components/src/lib/components/powerbars/powerbar/powerbar.component.scss index 9a9e9bff..2c20edda 100644 --- a/projects/arlas-components/src/lib/components/powerbars/powerbar/powerbar.component.css +++ b/projects/arlas-components/src/lib/components/powerbars/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,7 +85,7 @@ border-radius: 2px; } -.powerbar__powerbar--top-group { +.powerbars__powerbar--top-group { cursor: pointer; display: flex; align-items: center; @@ -91,7 +93,7 @@ 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 index bdb0ff4c..3f4f8d31 100644 --- 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 = new EventEmitter(); + @Output() public onClickEvent = new EventEmitter(); 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 deleted file mode 100644 index 7cfafd27..00000000 --- a/projects/arlas-components/src/lib/components/powerbars/powerbars.component.css +++ /dev/null @@ -1,109 +0,0 @@ -/* - * Licensed to Gisaïa under one or more contributor - * license agreements. See the NOTICE.txt file distributed with - * this work for additional information regarding copyright - * ownership. Gisaïa licenses this file to you 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. - */ - -.include_exclude { - display: flex; - align-items: baseline; -} -.operation { - font-size: 0.6em; - color: #aaa; - border-radius: 3px; - font-weight: bold; - margin-right: 5px; - cursor: pointer; - padding-bottom: 3px; -} -.selected_operation { - color: #555; - font-weight: bold; -} - -.exclude { - color: #555; - font-weight: bold; - cursor: unset ; - -} - -.powerbars--search .mat-mdc-form-field { - width: 100%; -} -.powerbars--search ::ng-deep.mdc-text-field--filled { - background-color: unset; -} -.powerbars--search ::ng-deep.mat-mdc-form-field-focus-overlay { - opacity: 0; -} -.powerbars--search ::ng-deep.mdc-text-field { - padding: unset; -} -.powerbars--search ::ng-deep.mat-mdc-form-field-infix { - font-size: 14px; - min-height: unset; - padding-top: 0 !important; - padding-bottom: 0 !important; -} -.powerbars--search ::ng-deep.mat-mdc-form-field-subscript-wrapper { - display: none; -} - -.powerbars--container { - height: 100%; - overflow-y: auto; - overflow-x: hidden; - padding-bottom: 5px; -} - - -::-webkit-scrollbar { - width: 6px; - background-color: #f5f5f5; -} - -::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - background-color: #f5f5f5; -} - -::-webkit-scrollbar-thumb { - background-color: #555; -} - -.powerbar-scrollable { - display: flex; - flex-direction: column; - max-height: 255px; -} - -.powerbar-selected-scrollable { - max-height: 126px; - border-bottom: 1px solid rgb(209, 209, 209); - overflow-y: auto; - overflow-x: clip; - padding-bottom: 2px; - padding-right: 10px; -} - -.powerbar-list-scrollable { - overflow-y: auto; - overflow-x: clip; - padding-right: 10px; - padding-bottom: 10px; -} diff --git a/projects/arlas-components/src/lib/components/powerbars/powerbars.component.html b/projects/arlas-components/src/lib/components/powerbars/powerbars.component.html index 09cf4813..3236beb3 100644 --- a/projects/arlas-components/src/lib/components/powerbars/powerbars.component.html +++ b/projects/arlas-components/src/lib/components/powerbars/powerbars.component.html @@ -1,33 +1,30 @@ -
+
-
{{powerbarTitle | translate}}
+
{{powerbarTitle | translate}}
- + + class="powerbars--search-input" (keyup)="onKeyUp(searchText.value)" name="search">
-
-
{{'include' | translate}}
-
{{'exclude' | translate}}
-
-
-
{{'exclude' | translate}}
-
+ +
+
{{'include' | translate}}
+
{{'exclude' | translate}}
+
+
+
{{'exclude' | translate}}
+
+
-
-
- -
-
+
+ +
+
- + -
-
- -
+
+
+
diff --git a/projects/arlas-components/src/lib/components/powerbars/powerbars.component.scss b/projects/arlas-components/src/lib/components/powerbars/powerbars.component.scss new file mode 100644 index 00000000..cf652628 --- /dev/null +++ b/projects/arlas-components/src/lib/components/powerbars/powerbars.component.scss @@ -0,0 +1,114 @@ +/* + * Licensed to Gisaïa under one or more contributor + * license agreements. See the NOTICE.txt file distributed with + * this work for additional information regarding copyright + * ownership. Gisaïa licenses this file to you 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. + */ + +.tools { + .powerbars--search { + .mat-mdc-form-field { + width: 100%; + + ::ng-deep.mdc-text-field--filled { + background-color: unset; + } + ::ng-deep.mat-mdc-form-field-focus-overlay { + opacity: 0; + } + ::ng-deep.mdc-text-field { + padding: unset; + } + ::ng-deep.mat-mdc-form-field-infix { + font-size: 14px; + min-height: unset; + padding-top: 0 !important; + padding-bottom: 0 !important; + } + ::ng-deep.mat-mdc-form-field-subscript-wrapper { + display: none; + } + } + } + + .include_exclude { + display: flex; + align-items: baseline; + + .operation { + font-size: 0.6em; + color: #aaa; + border-radius: 3px; + font-weight: bold; + margin-right: 5px; + cursor: pointer; + padding-bottom: 3px; + + &--selected { + color: #555; + font-weight: bold; + } + } + .exclude { + color: #555; + font-weight: bold; + cursor: unset ; + } + } +} + +.powerbars--container { + height: 100%; + overflow-y: auto; + overflow-x: hidden; + padding-bottom: 5px; + + .powerbar-scrollable { + display: flex; + flex-direction: column; + max-height: 255px; + } + + .powerbar-selected-scrollable { + // One powerbar is 26px, and we want to have 5 at maximum + max-height: 131px; + border-bottom: 1px solid rgb(209, 209, 209); + overflow-y: auto; + overflow-x: clip; + padding-bottom: 2px; + padding-right: 5px; + } + + .powerbar-list-scrollable { + overflow-y: auto; + overflow-x: clip; + padding-right: 5px; + padding-bottom: 5px; + } +} + +::-webkit-scrollbar { + width: 6px; + background-color: #f5f5f5; +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: #f5f5f5; +} + +::-webkit-scrollbar-thumb { + background-color: #555; +} diff --git a/projects/arlas-components/src/lib/components/powerbars/powerbars.component.ts b/projects/arlas-components/src/lib/components/powerbars/powerbars.component.ts index 9b8757e1..e7af5316 100644 --- a/projects/arlas-components/src/lib/components/powerbars/powerbars.component.ts +++ b/projects/arlas-components/src/lib/components/powerbars/powerbars.component.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-unused-expressions */ /* * Licensed to Gisaïa under one or more contributor * license agreements. See the NOTICE.txt file distributed with @@ -18,16 +17,16 @@ * under the License. */ -import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitter, AfterViewInit } from '@angular/core'; +import { AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { SimpleNode, TreeNode } from 'arlas-d3'; -import { Subject } from 'rxjs'; +import { Subject, takeUntil } from 'rxjs'; +import tinycolor from 'tinycolor2'; +import { DEFAULT_SHORTENING_PRECISION } from '../../components/componentsUtils'; import { ArlasColorService } from '../../services/color.generator.service'; +import { FilterOperator } from '../../tools/models/term-filters'; +import { NUMBER_FORMAT_CHAR } from '../componentsUtils'; import { PowerBar } from './model/powerbar'; import * as powerbarsJsonSchema from './powerbars.schema.json'; -import { NUMBER_FORMAT_CHAR } from '../componentsUtils'; -import * as tinycolor from 'tinycolor2'; -import { DEFAULT_SHORTENING_PRECISION } from '../../components/componentsUtils'; -import { FilterOperator } from '../../tools/models/term-filters'; /** * Powerbars component transforms a [term, occurence_count] map to a descreasingly sorted list of multiselectable bars. @@ -37,7 +36,7 @@ import { FilterOperator } from '../../tools/models/term-filters'; @Component({ selector: 'arlas-powerbars', templateUrl: './powerbars.component.html', - styleUrls: ['./powerbars.component.css'] + styleUrls: ['./powerbars.component.scss'] }) export class PowerbarsComponent implements OnInit, OnChanges, AfterViewInit { @@ -69,7 +68,7 @@ export class PowerbarsComponent implements OnInit, OnChanges, AfterViewInit { * @Input : Angular * @description Css class name to use to customize a specific powerbar's style. */ - @Input() public customizedCssClass; + @Input() public customizedCssClass: string; /** * @Input : Angular * @description List of selected paths in `inputData` from which the powerbars to select @@ -95,7 +94,7 @@ export class PowerbarsComponent implements OnInit, OnChanges, AfterViewInit { * factor (between 0 and 1) that tightens this scale to [(1-colorsSaturationWeight), 1]. * Therefore saturation of generated colors will be within this tightened scale. */ - @Input() public colorsSaturationWeight; + @Input() public colorsSaturationWeight: number; /** * @Input : Angular @@ -172,8 +171,8 @@ export class PowerbarsComponent implements OnInit, OnChanges, AfterViewInit { @Output() public searchedTerm = new Subject(); public powerBarsList: Array; - public selectedPowerbarsSet: Set = new Set(); - public selectedPowerbarsTerms: Set = new Set(); + public selectedPowerbarsSet = new Set(); + public selectedPowerbarsTerms = new Set(); /** * @constant @@ -194,11 +193,15 @@ export class PowerbarsComponent implements OnInit, OnChanges, AfterViewInit { public NUMBER_FORMAT_CHAR = NUMBER_FORMAT_CHAR; - public constructor(private colorService: ArlasColorService) { - this.colorService.changekeysToColors$.subscribe(() => { + private readonly _onDestroy$ = new Subject(); + + public constructor(private readonly colorService: ArlasColorService) { + this.colorService.changekeysToColors$ + .pipe(takeUntil(this._onDestroy$)) + .subscribe(() => { this.powerBarsList.forEach(p => { if (this.useColorService) { - const rgbaColor = tinycolor.default(this.colorService.getColor(p.term, this.keysToColors, + const rgbaColor = tinycolor(this.colorService.getColor(p.term, this.keysToColors, this.colorsSaturationWeight)).toRgb(); p.color = this.getPowerbarColor(rgbaColor); } @@ -211,28 +214,30 @@ export class PowerbarsComponent implements OnInit, OnChanges, AfterViewInit { } public ngOnInit() { - if (!!this.missingLeafEvent) { - this.missingLeafEvent.subscribe(data => { - if (this.selectedPaths !== undefined && this.selectedPaths !== null) { - this.setSelectedPowerbars(this.selectedPaths); - data.filter(d => !!d.value).forEach(d => { - const value = d.value; - const key = d.key; - const missingLeaf = Array.from(this.selectedPowerbarsSet).filter(pw => pw.term === key)[0]; - const missingLeafToUpdate = Object.assign({}, missingLeaf); - missingLeafToUpdate.count = value; - missingLeafToUpdate.isSelected = true; - missingLeafToUpdate.classSuffix = this.SELECTED_BAR; - if (this.useColorService) { - const rgbaColor = tinycolor.default(this.colorService.getColor(missingLeafToUpdate.term, this.keysToColors, - this.colorsSaturationWeight)).toRgb(); - missingLeafToUpdate.color = this.getPowerbarColor(rgbaColor); - } - this.selectedPowerbarsSet.delete(missingLeaf); - this.selectedPowerbarsSet.add(missingLeafToUpdate); - }); - } - }); + if (this.missingLeafEvent) { + this.missingLeafEvent + .pipe(takeUntil(this._onDestroy$)) + .subscribe(data => { + if (this.selectedPaths !== undefined && this.selectedPaths !== null) { + this.setSelectedPowerbars(this.selectedPaths); + data.filter(d => !!d.value).forEach(d => { + const value = d.value; + const key = d.key; + const missingLeaf = Array.from(this.selectedPowerbarsSet).filter(pw => pw.term === key)[0]; + const missingLeafToUpdate = {...missingLeaf}; + missingLeafToUpdate.count = value; + missingLeafToUpdate.isSelected = true; + missingLeafToUpdate.classSuffix = this.SELECTED_BAR; + if (this.useColorService) { + const rgbaColor = tinycolor(this.colorService.getColor(missingLeafToUpdate.term, this.keysToColors, + this.colorsSaturationWeight)).toRgb(); + missingLeafToUpdate.color = this.getPowerbarColor(rgbaColor); + } + this.selectedPowerbarsSet.delete(missingLeaf); + this.selectedPowerbarsSet.add(missingLeafToUpdate); + }); + } + }); } if (this.level > 1) { @@ -273,6 +278,11 @@ export class PowerbarsComponent implements OnInit, OnChanges, AfterViewInit { } } + public ngOnDestroy() { + this._onDestroy$.next(true); + this._onDestroy$.complete(); + } + /** * @description Select or deselect a PowerBar and emits the terms list of selected bars */ @@ -283,8 +293,11 @@ export class PowerbarsComponent implements OnInit, OnChanges, AfterViewInit { powerBar.isSelected = false; this.selectedPowerbarsTerms.delete(powerBar.term); this.selectedPowerbarsSet.delete(powerBar); - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - (this.selectedPowerbarsTerms.size === 0) ? this.clearSelection() : powerBar.classSuffix = this.UNSELECTED_BAR; + if (this.selectedPowerbarsTerms.size === 0) { + this.clearSelection(); + } else { + powerBar.classSuffix = this.UNSELECTED_BAR; + } } else { if (this.selectedPaths) { Object.assign(selectedPaths, this.selectedPaths); @@ -317,7 +330,7 @@ export class PowerbarsComponent implements OnInit, OnChanges, AfterViewInit { powerBar.isSelected = true; powerBar.classSuffix = this.SELECTED_BAR; if (this.useColorService) { - const rgbaColor = tinycolor.default(this.colorService.getColor(powerBar.term, this.keysToColors, + const rgbaColor = tinycolor(this.colorService.getColor(powerBar.term, this.keysToColors, this.colorsSaturationWeight)).toRgb(); powerBar.color = this.getPowerbarColor(rgbaColor); } @@ -393,12 +406,12 @@ export class PowerbarsComponent implements OnInit, OnChanges, AfterViewInit { currentPath.reverse(); powerBar.path = currentPath; if (this.useColorService) { - const rgbaColor = tinycolor.default(this.colorService.getColor(powerBar.term, this.keysToColors, + const rgbaColor = tinycolor(this.colorService.getColor(powerBar.term, this.keysToColors, this.colorsSaturationWeight)).toRgb(); powerBar.color = this.getPowerbarColor(rgbaColor); } if (this.useColorFromData) { - powerBar.color = child.color.toString()[0] === '#' ? child.color.toString() : '#'.concat(child.color.toString()); + powerBar.color = child.color.toString().startsWith('#') ? child.color.toString() : '#'.concat(child.color.toString()); } powerBarsList.push(powerBar); }