dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Improved view gateway dashboard and updated gateway widget types

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-09-12 19:08:40 +03:00
parent 0b9df293cd
commit 65145284ca
14 changed files with 452 additions and 605 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

656
application/src/main/data/json/demo/dashboards/gateway_list.json
View File

File diff suppressed because it is too large Load Diff

4
application/src/main/data/json/system/widget_types/gateway_configuration2.json
View File

File diff suppressed because one or more lines are too long

8
application/src/main/data/json/system/widget_types/gateway_connector.json
View File

File diff suppressed because one or more lines are too long

6
application/src/main/data/json/system/widget_types/gateway_general_statistics.json
View File

File diff suppressed because one or more lines are too long

8
application/src/main/data/json/system/widget_types/gateway_logs.json
View File

File diff suppressed because one or more lines are too long

8
application/src/main/data/json/system/widget_types/gateway_statistics.json
View File

File diff suppressed because one or more lines are too long

4
application/src/main/data/json/system/widget_types/service_rpc.json
View File

File diff suppressed because one or more lines are too long

14
ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
View File

@ -17,8 +17,6 @@
import { Inject, Injectable, Type } from '@angular/core'; import { Inject, Injectable, Type } from '@angular/core';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { AuthService } from '@core/auth/auth.service';
import { DynamicComponentFactoryService } from '@core/services/dynamic-component-factory.service'; import { DynamicComponentFactoryService } from '@core/services/dynamic-component-factory.service';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { mergeMap, tap } from 'rxjs/operators'; import { mergeMap, tap } from 'rxjs/operators';
@ -28,7 +26,11 @@ import {
CustomDialogContainerData CustomDialogContainerData
} from '@home/components/widget/dialog/custom-dialog-container.component'; } from '@home/components/widget/dialog/custom-dialog-container.component';
import { SHARED_MODULE_TOKEN } from '@shared/components/tokens'; import { SHARED_MODULE_TOKEN } from '@shared/components/tokens';
import { HOME_COMPONENTS_MODULE_TOKEN, SHARED_HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens'; import {
HOME_COMPONENTS_MODULE_TOKEN,
SHARED_HOME_COMPONENTS_MODULE_TOKEN,
WIDGET_COMPONENTS_MODULE_TOKEN
} from '@home/components/tokens';
@Injectable() @Injectable()
export class CustomDialogService { export class CustomDialogService {
@ -36,12 +38,11 @@ export class CustomDialogService {
private customModules: Array<Type<any>>; private customModules: Array<Type<any>>;
constructor( constructor(
private translate: TranslateService,
private authService: AuthService,
private dynamicComponentFactoryService: DynamicComponentFactoryService, private dynamicComponentFactoryService: DynamicComponentFactoryService,
@Inject(SHARED_MODULE_TOKEN) private sharedModule: Type<any>, @Inject(SHARED_MODULE_TOKEN) private sharedModule: Type<any>,
@Inject(SHARED_HOME_COMPONENTS_MODULE_TOKEN) private sharedHomeComponentsModule: Type<any>, @Inject(SHARED_HOME_COMPONENTS_MODULE_TOKEN) private sharedHomeComponentsModule: Type<any>,
@Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type<any>, @Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type<any>,
@Inject(WIDGET_COMPONENTS_MODULE_TOKEN) private widgetComponentsModule: Type<any>,
public dialog: MatDialog public dialog: MatDialog
) { ) {
} }
@ -52,7 +53,8 @@ export class CustomDialogService {
customDialog(template: string, controller: (instance: CustomDialogComponent) => void, data?: any, customDialog(template: string, controller: (instance: CustomDialogComponent) => void, data?: any,
config?: MatDialogConfig): Observable<any> { config?: MatDialogConfig): Observable<any> {
const modules = [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule]; const modules = [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule,
this.widgetComponentsModule];
if (Array.isArray(this.customModules)) { if (Array.isArray(this.customModules)) {
modules.push(...this.customModules); modules.push(...this.customModules);
} }

5
ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<div mat-dialog-content fxLayout="column" style="padding: 0"> <div mat-dialog-content fxLayout="column" style="padding: 0 8px 8px">
<div fxLayout="row" fxLayoutAlign="space-between center"> <div fxLayout="row" fxLayoutAlign="space-between center">
<span class="tb-no-data-text">{{ 'gateway.docker-label' | translate }}</span> <span class="tb-no-data-text">{{ 'gateway.docker-label' | translate }}</span>
<div fxFlexAlign="end" class="tb-help" [tb-help]="helpLink"></div> <div fxFlexAlign="end" class="tb-help" [tb-help]="helpLink"></div>
@ -60,7 +60,8 @@
</div> </div>
<ng-template #commandsExample let-command="command"> <ng-template #commandsExample let-command="command">
<div class="tb-form-panel no-padding no-border tb-tab-body"> <div class="tb-form-panel stroked tb-tab-body">
<div class="tb-form-panel-title" translate>device.connectivity.execute-following-command</div>
<tb-markdown usePlainMarkdown containerClass="start-code" <tb-markdown usePlainMarkdown containerClass="start-code"
data=" data="
```bash ```bash

32
ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.scss
View File

@ -26,12 +26,44 @@
overflow: hidden; overflow: hidden;
white-space: break-spaces; white-space: break-spaces;
word-break: break-all; word-break: break-all;
background: #F3F6FA;
border-color: #305680;
} }
.code-wrapper { .code-wrapper {
padding: 0; padding: 0;
} }
button.clipboard-btn {
right: 0;
p {
color: #305680;
}
p, div {
background-color: #F3F6FA;
}
div {
img {
display: none;
}
&:after {
content: "";
position: initial;
display: block;
width: 18px;
height: 18px;
background: #305680;
mask-image: url(/assets/copy-code-icon.svg);
mask-repeat: no-repeat;
}
}
}
} }
} }
.tb-form-panel.tb-tab-body {
margin-top: 16px;
}
} }

13
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
View File

@ -15,17 +15,10 @@
limitations under the License. limitations under the License.
--> -->
<mat-toolbar color="primary"> <mat-toolbar color="primary" *ngIf="!dialogRef">
<h2 translate>gateway.gateway-configuration</h2> <h2 translate>gateway.gateway-configuration</h2>
<span fxFlex></span>
<button mat-icon-button
type="button"
(click)="cancel()"
*ngIf="dialogRef">
<mat-icon class="material-icons" style="color:#000;">close</mat-icon>
</button>
</mat-toolbar> </mat-toolbar>
<mat-tab-group style="max-height: calc(100% - 117px); height: 100%;" [formGroup]="gatewayConfigGroup"> <mat-tab-group class="tab-group-block" [formGroup]="gatewayConfigGroup">
<mat-tab label="{{ 'gateway.thingsboard-general' | translate }}"> <mat-tab label="{{ 'gateway.thingsboard-general' | translate }}">
<div formGroupName="thingsboard" class="mat-content mat-padding configuration-block"> <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">
<div class="tb-form-panel no-padding-bottom"> <div class="tb-form-panel no-padding-bottom">
@ -713,7 +706,7 @@
</div> </div>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
<div mat-dialog-actions fxLayoutAlign="start center"> <div class="actions">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
*ngIf="dialogRef" *ngIf="dialogRef"

21
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss
View File

@ -16,8 +16,8 @@
:host { :host {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: grid;
flex-direction: column; grid-template-rows: min-content minmax(auto, 1fr) min-content;
.configuration-block { .configuration-block {
display: flex; display: flex;
@ -26,10 +26,18 @@
} }
.mat-toolbar { .mat-toolbar {
grid-row: 1;
background: transparent; background: transparent;
color: rgba(0, 0, 0, .87) !important; color: rgba(0, 0, 0, .87) !important;
} }
.tab-group-block {
min-width: 0;
height: 100%;
min-height: 0;
grid-row: 2;
}
.toggle-group { .toggle-group {
margin-right: auto; margin-right: auto;
} }
@ -45,6 +53,15 @@
.saving-period { .saving-period {
flex: 1; flex: 1;
} }
.actions {
grid-row: 3;
padding: 8px;
display: flex;
gap: 8px;
justify-content: flex-end;
flex: 1;
}
} }
:host ::ng-deep { :host ::ng-deep {

250
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
View File

@ -16,7 +16,7 @@
--> -->
<div class="connector-container tb-form-panel no-border"> <div class="connector-container tb-form-panel no-border">
<section class="table-container tb-form-panel stroked no-padding flex"> <section class="table-section tb-form-panel no-padding flex section-container">
<mat-toolbar class="mat-mdc-table-toolbar"> <mat-toolbar class="mat-mdc-table-toolbar">
<h2>{{ 'gateway.connectors' | translate }}</h2> <h2>{{ 'gateway.connectors' | translate }}</h2>
<span fxFlex></span> <span fxFlex></span>
@ -28,89 +28,64 @@
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
</mat-toolbar> </mat-toolbar>
<table mat-table [dataSource]="dataSource" <div class="table-container">
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" <table mat-table [dataSource]="dataSource"
matSortDisableClear> matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
<ng-container matColumnDef="enabled" sticky> matSortDisableClear>
<mat-header-cell *matHeaderCellDef style="width: 60px;min-width: 60px;"> <ng-container matColumnDef="enabled" sticky>
{{ 'gateway.connectors-table-enabled' | translate }} <mat-header-cell *matHeaderCellDef style="width: 60px;min-width: 60px;">
</mat-header-cell> {{ 'gateway.connectors-table-enabled' | translate }}
<mat-cell *matCellDef="let attribute"> </mat-header-cell>
<mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)" <mat-cell *matCellDef="let attribute">
(click)="$event.stopPropagation(); enableConnector(attribute)"></mat-slide-toggle> <mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)"
</mat-cell> (click)="$event.stopPropagation(); enableConnector(attribute)"></mat-slide-toggle>
</ng-container> </mat-cell>
<ng-container matColumnDef="key"> </ng-container>
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> <ng-container matColumnDef="key">
{{ 'gateway.connectors-table-name' | translate }}</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%">
<mat-cell *matCellDef="let attribute"> {{ 'gateway.connectors-table-name' | translate }}</mat-header-cell>
{{ attribute.key }} <mat-cell *matCellDef="let attribute">
</mat-cell> {{ attribute.key }}
</ng-container> </mat-cell>
<ng-container matColumnDef="type"> </ng-container>
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> <ng-container matColumnDef="type">
{{ 'gateway.connectors-table-type' | translate }} <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
</mat-header-cell> {{ 'gateway.connectors-table-type' | translate }}
<mat-cell *matCellDef="let attribute" style="text-transform: uppercase"> </mat-header-cell>
{{ returnType(attribute) }} <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
</mat-cell> {{ returnType(attribute) }}
</ng-container> </mat-cell>
<ng-container matColumnDef="syncStatus"> </ng-container>
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> <ng-container matColumnDef="syncStatus">
{{ 'gateway.configuration' | translate }} <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
</mat-header-cell> {{ 'gateway.configuration' | translate }}
<mat-cell *matCellDef="let attribute" style="text-transform: uppercase"> </mat-header-cell>
<div class="status" [class]="isConnectorSynced(attribute) ? 'status-sync' : 'status-unsync'"> <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
{{ isConnectorSynced(attribute) ? 'sync' : 'out of sync' }} <div class="status" [class]="isConnectorSynced(attribute) ? 'status-sync' : 'status-unsync'">
</div> {{ isConnectorSynced(attribute) ? 'sync' : 'out of sync' }}
</mat-cell> </div>
</ng-container> </mat-cell>
<ng-container matColumnDef="errors"> </ng-container>
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> <ng-container matColumnDef="errors">
{{ 'gateway.connectors-table-status' | translate }} <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
</mat-header-cell> {{ 'gateway.connectors-table-status' | translate }}
<mat-cell *matCellDef="let attribute" style="text-transform: uppercase"> </mat-header-cell>
<span class="dot" <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
matTooltip="{{ 'Errors: '+ getErrorsCount(attribute)}}" <span class="dot"
matTooltipPosition="above" matTooltip="{{ 'Errors: '+ getErrorsCount(attribute)}}"
[class]="{'hasErrors': +getErrorsCount(attribute) > 0, matTooltipPosition="above"
'noErrors': +getErrorsCount(attribute) === 0 || getErrorsCount(attribute) === ''}"></span> [class]="{'hasErrors': +getErrorsCount(attribute) > 0,
</mat-cell> 'noErrors': +getErrorsCount(attribute) === 0 || getErrorsCount(attribute) === ''}"></span>
</ng-container> </mat-cell>
<ng-container matColumnDef="actions" stickyEnd> </ng-container>
<mat-header-cell *matHeaderCellDef <ng-container matColumnDef="actions" stickyEnd>
[ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}"> <mat-header-cell *matHeaderCellDef
{{ 'gateway.connectors-table-actions' | translate }} [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
</mat-header-cell> {{ 'gateway.connectors-table-actions' | translate }}
<mat-cell *matCellDef="let attribute" </mat-header-cell>
[ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}"> <mat-cell *matCellDef="let attribute"
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
<button mat-icon-button <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
matTooltip="RPC"
matTooltipPosition="above"
(click)="connectorRpc(attribute, $event)">
<mat-icon>private_connectivity</mat-icon>
</button>
<button mat-icon-button
matTooltip="Logs"
matTooltipPosition="above"
(click)="connectorLogs(attribute, $event)">
<mat-icon>list</mat-icon>
</button>
<button mat-icon-button
matTooltip="Delete connector"
matTooltipPosition="above"
(click)="deleteConnector(attribute, $event)">
<mat-icon>delete</mat-icon>
</button>
</div>
<div fxHide fxShow.lt-lg>
<button mat-icon-button
(click)="$event.stopPropagation()"
[matMenuTriggerFor]="cellActionsMenu">
<mat-icon class="material-icons">more_vert</mat-icon>
</button>
<mat-menu #cellActionsMenu="matMenu" xPosition="before">
<button mat-icon-button <button mat-icon-button
matTooltip="RPC" matTooltip="RPC"
matTooltipPosition="above" matTooltipPosition="above"
@ -118,7 +93,7 @@
<mat-icon>private_connectivity</mat-icon> <mat-icon>private_connectivity</mat-icon>
</button> </button>
<button mat-icon-button <button mat-icon-button
matTooltip="Delete connector" matTooltip="Logs"
matTooltipPosition="above" matTooltipPosition="above"
(click)="connectorLogs(attribute, $event)"> (click)="connectorLogs(attribute, $event)">
<mat-icon>list</mat-icon> <mat-icon>list</mat-icon>
@ -129,55 +104,84 @@
(click)="deleteConnector(attribute, $event)"> (click)="deleteConnector(attribute, $event)">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</mat-menu> </div>
</div> <div fxHide fxShow.lt-lg>
</mat-cell> <button mat-icon-button
</ng-container> (click)="$event.stopPropagation()"
<mat-header-row class="mat-row-select" [matMenuTriggerFor]="cellActionsMenu">
*matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> <mat-icon class="material-icons">more_vert</mat-icon>
<mat-row class="mat-row-select" [class]="{'tb-current-entity': isSameConnector(attribute)}" </button>
*matRowDef="let attribute; columns: displayedColumns;" (click)="selectConnector(attribute)"></mat-row> <mat-menu #cellActionsMenu="matMenu" xPosition="before">
</table> <button mat-icon-button
matTooltip="RPC"
matTooltipPosition="above"
(click)="connectorRpc(attribute, $event)">
<mat-icon>private_connectivity</mat-icon>
</button>
<button mat-icon-button
matTooltip="Delete connector"
matTooltipPosition="above"
(click)="connectorLogs(attribute, $event)">
<mat-icon>list</mat-icon>
</button>
<button mat-icon-button
matTooltip="Delete connector"
matTooltipPosition="above"
(click)="deleteConnector(attribute, $event)">
<mat-icon>delete</mat-icon>
</button>
</mat-menu>
</div>
</mat-cell>
</ng-container>
<mat-header-row class="mat-row-select"
*matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row class="mat-row-select" [class]="{'tb-current-entity': isSameConnector(attribute)}"
*matRowDef="let attribute; columns: displayedColumns;" (click)="selectConnector(attribute)"></mat-row>
</table>
</div>
</section> </section>
<section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding flex"> <section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding flex">
<section class="tb-form-row tb-not-inline-field same-padding input-container"> <section class="tb-form-panel input-container section-container">
<mat-form-field class="flex" subscriptSizing="dynamic"> <section class="tb-form-row tb-not-inline-field no-padding no-border column-lt-md input-container">
<mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label> <mat-form-field class="flex" subscriptSizing="dynamic">
<input matInput formControlName="name" #nameInput/> <mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label>
</mat-form-field> <input matInput formControlName="name" #nameInput/>
<mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker> </mat-form-field>
<mat-label>{{ 'gateway.connectors-table-type' | translate }}</mat-label> <mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker>
<mat-select formControlName="type"> <mat-label>{{ 'gateway.connectors-table-type' | translate }}</mat-label>
<mat-option style="text-transform: uppercase" <mat-select formControlName="type">
*ngFor="let type of gatewayConnectorDefaultTypes | keyvalue" [value]="type.key">{{ type.value }}</mat-option> <mat-option style="text-transform: uppercase"
</mat-select> *ngFor="let type of gatewayConnectorDefaultTypes | keyvalue" [value]="type.key">{{ type.value }}</mat-option>
</mat-form-field> </mat-select>
<mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'grpc'" subscriptSizing="dynamic"> </mat-form-field>
<mat-label>{{ 'gateway.connectors-table-key' | translate }}</mat-label> <mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'grpc'" subscriptSizing="dynamic">
<input matInput formControlName="key"/> <mat-label>{{ 'gateway.connectors-table-key' | translate }}</mat-label>
</mat-form-field> <input matInput formControlName="key"/>
<mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'custom'" subscriptSizing="dynamic"> </mat-form-field>
<mat-label>{{ 'gateway.connectors-table-class' | translate }}</mat-label> <mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'custom'" subscriptSizing="dynamic">
<input matInput formControlName="class"/> <mat-label>{{ 'gateway.connectors-table-class' | translate }}</mat-label>
</mat-form-field> <input matInput formControlName="class"/>
<mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker> </mat-form-field>
<mat-label translate>gateway.remote-logging-level</mat-label> <mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker>
<mat-select formControlName="logLevel"> <mat-label translate>gateway.remote-logging-level</mat-label>
<mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option> <mat-select formControlName="logLevel">
</mat-select> <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>
</mat-form-field> </mat-select>
</mat-form-field>
</section>
</section> </section>
<section class="tb-form-panel stroked flex"> <section class="tb-form-panel flex section-container">
<tb-json-object-edit <tb-json-object-edit
fillHeight="true"
class="flex" class="flex"
fxLayout="column" fxLayout="column"
required required
label="{{ 'gateway.configuration' | translate }}" label="{{ 'gateway.configuration' | translate }}"
formControlName="configurationJson"> formControlName="configurationJson">
</tb-json-object-edit> </tb-json-object-edit>
<div fxLayoutAlign="start center"> <div fxLayoutAlign="end center">
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
class="action-button"
type="button" type="button"
[disabled]="!connectorForm.dirty || connectorForm.invalid" [disabled]="!connectorForm.dirty || connectorForm.invalid"
(click)="saveConnector()"> (click)="saveConnector()">

16
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.scss
View File

@ -30,9 +30,13 @@
flex-direction: column; flex-direction: column;
} }
.table-container { .table-section {
overflow: auto;
min-height: 35vh; min-height: 35vh;
overflow: hidden;
.table-container {
overflow: auto;
}
} }
.flex { .flex {
@ -42,6 +46,10 @@
.input-container { .input-container {
height: auto; height: auto;
} }
.section-container {
background-color: #fff;
}
} }
.mat-toolbar { .mat-toolbar {
@ -69,10 +77,6 @@
} }
} }
.action-button {
margin: 0 15px;
}
mat-row { mat-row {
cursor: pointer; cursor: pointer;
} }