diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts index e7ede501b0a75c91c38e6f00e1a286e6e4a02d24..c93063804b0924caeb4ada28367b317462fc6803 100644 --- a/projects/editor/src/app/app.module.ts +++ b/projects/editor/src/app/app.module.ts @@ -46,6 +46,7 @@ import { VisibilityRulesDialogComponent } from 'editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component'; import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatBadgeModule } from '@angular/material/badge'; import { AppComponent } from './app.component'; import { ToolbarComponent } from './components/toolbar/toolbar.component'; import { UiElementToolboxComponent } from @@ -217,7 +218,8 @@ import { MatRadioModule, MathEditorModule, CdkConnectedOverlay, - CdkOverlayOrigin + CdkOverlayOrigin, + MatBadgeModule ], providers: [ { provide: APIService, useExisting: VeronaAPIService } diff --git a/projects/editor/src/app/components/new-ui-element-panel/show-state-variables-button.component.ts b/projects/editor/src/app/components/new-ui-element-panel/show-state-variables-button.component.ts index 02780ee8abaad28676b9b2c1cf27ccafb5bd397c..4d16c1687daa056bf41b022ce1df1440ad79d839 100644 --- a/projects/editor/src/app/components/new-ui-element-panel/show-state-variables-button.component.ts +++ b/projects/editor/src/app/components/new-ui-element-panel/show-state-variables-button.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { DialogService } from 'editor/src/app/services/dialog.service'; import { UnitService } from 'editor/src/app/services/unit.service'; @@ -7,6 +7,8 @@ import { UnitService } from 'editor/src/app/services/unit.service'; template: `<button mat-flat-button class="show-state-variables-button" color="primary" + matBadgeColor="accent" + [matBadge]="stateVariablesCount" [style.width.%]="100" (click)="showStateVariablesDialog()"> <mat-icon>integration_instructions</mat-icon> @@ -15,6 +17,7 @@ import { UnitService } from 'editor/src/app/services/unit.service'; }) export class ShowStateVariablesButtonComponent { + @Input() stateVariablesCount!: number; constructor(private dialogService: DialogService, private unitService: UnitService) { } diff --git a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css index 1b569694d474a2ae7893c5c8f44d896a1ad0d1b6..e1ec20b0778f1067b74b92e9c227ab8802f9602e 100644 --- a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css +++ b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css @@ -46,3 +46,15 @@ button { box-sizing: border-box; display: flex; } + +.button-group { + border: 3px groove; +} + +:host ::ng-deep .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content { + right: 6px; +} + +:host ::ng-deep .mat-badge-medium.mat-badge-above .mat-badge-content { + top: 6px; +} diff --git a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html index 6b8253375d97cf888802dcf764ec9c16c66236aa..8f870bfd8437a749e37c0cc1efcac35d1a51888e 100644 --- a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html +++ b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html @@ -142,7 +142,9 @@ </mat-expansion-panel> </mat-accordion> </div> - <aspect-show-state-variables-button></aspect-show-state-variables-button> + <aspect-show-state-variables-button class="button-group" + [stateVariablesCount]="unitService.unit.stateVariables.length"> + </aspect-show-state-variables-button> </div>