gCubeSystem
/
information-system-gui
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed css problems for tables/action buttons

This commit is contained in:
Maria Teresa Paratore 2023-12-14 19:29:35 +01:00
parent 3984de656a
commit ddec79126a
6 changed files with 75 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/main/webapp/app/table-screen-es/table-screen-es.component.html
View File

@ -50,22 +50,14 @@
<td mat-cell *matCellDef="let item" matTooltip="{{ item.endpoint }}" matTooltipClass="tableTooltip" matTooltipPosition="after">{{ item.endpoint | slice:0:30 }}...</td>
</ng-container>
<ng-container matColumnDef="actions1">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>View JSON</th>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Actions</th>
<td mat-cell *matCellDef="let item">
<button mat-button color="primary" (click)="addTab(this.item.id)" matTooltip="view raw JSON" matTooltipPosition="below"><mat-icon>visibility</mat-icon></button>
</td>
</ng-container>
<ng-container matColumnDef="actions2">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Edit</th>
<td mat-cell *matCellDef="let item">
<button mat-button color="primary" matTooltip="edit" matTooltipPosition="below"><mat-icon>edit</mat-icon></button>
</td>
</ng-container>
<ng-container matColumnDef="actions3">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Remove</th>
<td mat-cell *matCellDef="let item">
<button mat-button color="primary" matTooltip="remove" matTooltipPosition="below"><mat-icon>delete</mat-icon></button>
<div class="d-flex flex-row">
<button mat-button class="action-btn" color="primary" (click)="addTab(this.item.id)" ><mat-icon>visibility</mat-icon></button>
<button mat-button class="action-btn" color="primary"><mat-icon>edit</mat-icon></button>
<button mat-button class="action-btn" color="primary"><mat-icon>delete</mat-icon></button>
</div>
</td>
</ng-container>
<!-- rows visualization -->

33
src/main/webapp/app/table-screen-es/table-screen-es.component.scss
View File

@ -1,18 +1,39 @@
mat-option {
font-size: 14px;
width: 100%;
display:block
display:block;
}
th.mat-header-cell, td.mat-cell, td.mat-footer-cell{
padding:18px;
padding:14px;
}
.mat-header-cell {
font-size: 18px;
font-weight: 800;
font-size: 14px;
font-weight: bold;
width: 100%;
background-color: aliceblue;
}
::ng-deep .mat-sort-header-container {
display:flex;
justify-content:center;
}
td.mat-footer-row,
td.mat-header-row,
td.mat-row {
max-width: 100%;
}
.mat-row {
max-width: 100%;
}
.action-btn{
margin: -5px;
}
::ng-deep .tableTooltip{
transform: scale(1.5)!important;
@ -21,4 +42,4 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell{
font-size: 10px;
color: black!important;
font-weight: bold;
}
}

2
src/main/webapp/app/table-screen-es/table-screen-es.component.ts
View File

@ -33,7 +33,7 @@ import { ResourcesImplService } from 'app/services/resources-impl.service';
export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges {
//NB 'actions' CI DEVE ESSERE, altrimenti la tabella non viene visualizzata
//displayedColumns: string[] = ['name', 'id', 'status', 'lastMod', 'artifact', 'group', 'version', 'endpoint','actions'];
displayedColumns: string[] = ['name', 'id', 'status', 'lastMod', 'endpoint','actions1','actions2','actions3'];
displayedColumns: string[] = ['name', 'id', 'status', 'lastMod', 'endpoint','actions'];
dataFromService: IEService[];
dataSource = new MatTableDataSource();
tableDetail: IEService;

28
src/main/webapp/app/table-screen/table-screen.component.html
View File

@ -1,4 +1,3 @@
<!-- Component for HostingNodes -->
<div class="p-3">
<h1>Type: {{resourceType}}</h1>
<mat-form-field class="my-3">
@ -38,24 +37,18 @@
<td mat-cell *matCellDef="let item">{{ item.hdSpace }}</td>
</ng-container>
<ng-container matColumnDef="actions1">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>View JSON</th>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Actions</th>
<td mat-cell *matCellDef="let item">
<button mat-button color="primary" (click)="addTab(this.item.id)" ><mat-icon>visibility</mat-icon></button>
</td>
</ng-container>
<ng-container matColumnDef="actions2">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Edit</th>
<td mat-cell *matCellDef="let item">
<button mat-button color="primary"><mat-icon>edit</mat-icon></button>
</td>
</ng-container>
<ng-container matColumnDef="actions3">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Remove</th>
<td mat-cell *matCellDef="let item">
<button mat-button color="primary"><mat-icon>delete</mat-icon></button>
<!--<div class="d-flex flex-row py-4">-->
<div class="d-flex flex-row">
<button mat-button class="action-btn" color="primary" (click)="addTab(this.item.id)" ><mat-icon>visibility</mat-icon></button>
<button mat-button class="action-btn" color="primary"><mat-icon>edit</mat-icon></button>
<button mat-button class="action-btn" color="primary"><mat-icon>delete</mat-icon></button>
</div>
</td>
</ng-container>
<!-- rows visualization -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
@ -67,7 +60,8 @@
</table>
<mat-paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons> </mat-paginator>
</div>
</div>
</div>
<div class="p-3">
<mat-tab-group [selectedIndex]="selectedIdx">
<ng-container *ngFor="let tab of tabs; let index = index">

35
src/main/webapp/app/table-screen/table-screen.component.scss
View File

@ -1,21 +1,42 @@
mat-option {
font-size: 14px;
width: 100%;
display:block
display:block;
}
th.mat-header-cell, td.mat-cell, td.mat-footer-cell{
padding:18px;
padding:14px;
}
.mat-header-cell {
font-size: 14px;
font-weight: bold;
width: 100%;
background-color: aliceblue;
}
.mat-header-cell {
font-size: 18px;
font-weight: 800;
::ng-deep .mat-sort-header-container {
display:flex;
justify-content:center;
}
td.mat-footer-row,
td.mat-header-row,
td.mat-row {
max-width: 100%;
}
.mat-row {
max-width: 100%;
}
.action-btn{
margin: -5px;
}
::ng-deep .tableTooltip{
/* your own custom styles here */
/* e.g. */
transform: scale(1.5)!important;
background-color: bisque!important;
position: relative !important;

2
src/main/webapp/app/table-screen/table-screen.component.ts
View File

@ -32,7 +32,7 @@ import { ResourcesImplService } from 'app/services/resources-impl.service';
export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
//NB 'actions' CI DEVE ESSERE, altrimenti la tabella non viene visualizzata
displayedColumns: string[] = ['name', 'id', 'status', 'lastMod', 'avMemory', 'hdSpace', 'actions1','actions2','actions3'];
displayedColumns: string[] = ['name', 'id', 'status', 'lastMod', 'avMemory', 'hdSpace', 'actions'];
dataFromService: IHostingNode[];
dataSource = new MatTableDataSource();
tableDetail: IHostingNode;