artin/web-app
1
0
Fork 0
mirror of https://github.com/openMF/web-app.git synced 2026-02-06 14:11:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

WEB-620:fix datatable tab layout dark theme

Browse Source 
improve
This commit is contained in:
shubhamsharma9199 2026-01-23 14:30:42 +05:30
parent ee6e4c2699
commit 748d6b8d81
2 changed files with 44 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
View File

@ -7,23 +7,25 @@
-->
<div class="tab-container mat-typography">
<h3>{{ formatTabLabel(datatableName) }}</h3>
<div class="layout-row align-end m-b-20">
@if (!dataObject.data[0]) {
<button mat-raised-button color="primary" (click)="add()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
}
@if (dataObject.data[0]) {
<button mat-raised-button color="primary" (click)="edit()">
<fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
</button>
}
@if (dataObject.data[0]) {
<button class="delete-button" mat-raised-button color="warn" (click)="delete()">
<fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
</button>
}
<div class="layout-row align-between align-items-center m-b-20">
<h3>{{ formatTabLabel(datatableName) }}</h3>
<div class="layout-row gap-10px">
@if (!dataObject.data[0]) {
<button mat-raised-button color="primary" (click)="add()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
}
@if (dataObject.data[0]) {
<button mat-raised-button color="primary" (click)="edit()">
<fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
</button>
}
@if (dataObject.data[0]) {
<button mat-raised-button color="warn" (click)="delete()">
<fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
</button>
}
</div>
</div>
<mat-divider></mat-divider>

29
src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss
View File

@ -13,8 +13,12 @@
padding: 1%;
margin: 1%;
.delete-button {
margin-left: 1%;
h3 {
margin: 0;
}
:host-context(.dark-theme) & h3 {
color: rgb(255 255 255 / 87%) !important;
}
}
@ -42,12 +46,21 @@
&:hover {
background-color: rgb(0 0 0 / 4%);
border-left-color: var(--primary-color, #3f51b5);
border-left-color: $accent;
transform: translateY(-2px);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
}
:host-context(.dark-theme) .data-item {
background-color: rgb(255 255 255 / 3%);
&:hover {
background-color: rgb(255 255 255 / 6%);
box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}
}
.data-label {
font-size: 0.8125rem;
color: rgb(0 0 0 / 54%);
@ -57,6 +70,10 @@
line-height: 1.2;
}
:host-context(.dark-theme) .data-label {
color: rgb(255 255 255 / 70%) !important;
}
.data-value {
font-size: 1.0625rem;
color: rgb(0 0 0 / 87%);
@ -73,6 +90,10 @@
}
}
:host-context(.dark-theme) .data-value {
color: rgb(255 255 255 / 87%) !important;
}
.default-value {
display: flex;
align-items: center;
@ -90,7 +111,7 @@
.system-defined {
margin-top: 3px;
background-color: rgb(63 81 181 / 8%);
border-left-color: #3f51b5;
border-left-color: $accent;
}
.long-text {