Gagandeep/syscom-master-admin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

multi-selection filter enable in all screen, icon added in sidebr sub-menus, remove un-used components, add border on left of row on hover, on click same open menu page reload

Browse Source
This commit is contained in:
Gagan7900
2026-08-14 13:48:05 +05:30
parent 758ceedce6
commit db49e7cb91
69 changed files with 562 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/components/data-table/data-table.scss
+98
View File
@@ -142,10 +142,12 @@
// background-color: var(--color-light);
background-color: #e1d0ff;
box-shadow: inset 3px 0 0 0 #7c3deb;
}
:host-context(.dark) .data-table-modern .table tbody tr:hover {
background-color: color-mix(in srgb, #fff 6%, transparent);
box-shadow: inset 3px 0 0 0 #7c3deb;
}
/* Inactive row action buttons border */
@@ -218,6 +220,15 @@
background-color: transparent;
}
.data-table-modern .ti-pagination li.page-item--ellipsis {
border: none;
}
.data-table-modern .ti-pagination li.page-item--ellipsis .page-link {
color: var(--color-textmuted, #8c9097);
cursor: default;
}
:host-context(.dark) .data-table-modern .ti-pagination li .page-link {
background-color: transparent;
color: color-mix(in srgb, var(--color-defaulttextcolor) 80%, #fff);
@@ -234,6 +245,93 @@
background-color: var(--color-primary) !important;
}
/* Page size select — outline-primary pill, sized to fit "100", matching the
"Showing X to Y of Z entries" number color/weight. PrimeNG renders its own
structural CSS at runtime after this stylesheet, so equal-specificity
rules need !important to win the cascade tie (::ng-deep is global here
since the overlay panel is appended to <body>, outside this component). */
::ng-deep {
.data-table-page-size {
width: 4rem !important;
min-width: 4rem !important;
height: 1.5rem !important;
box-sizing: border-box;
border: 1px solid var(--color-primary) !important;
border-radius: 9999px !important;
background: var(--color-white) !important;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
&:not(.p-disabled).p-focus {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
}
.p-select-label {
display: flex !important;
align-items: center !important;
height: 100% !important;
padding: 0 0 0 0.6rem !important;
font-size: 0.75rem !important;
line-height: 1 !important;
font-weight: 700 !important;
color: var(--color-defaulttextcolor) !important;
}
.p-select-dropdown {
width: 1.25rem !important;
height: 100% !important;
margin-inline-end: 0.35rem;
color: var(--color-primary) !important;
}
}
.data-table-page-size-panel {
border: 1px solid var(--color-primary) !important;
border-radius: 12px !important;
background: var(--color-white) !important;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
overflow: hidden;
padding: 0.25rem !important;
.p-select-list {
padding: 0 !important;
margin: 0 !important;
gap: 1px;
}
.p-select-option {
padding: 0.4rem 0.75rem !important;
font-size: 0.875rem !important;
color: var(--color-defaulttextcolor) !important;
border-radius: 8px !important;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
&:hover {
background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
color: var(--color-primary) !important;
}
&.p-select-option-selected {
background: var(--color-primary) !important;
color: var(--color-white) !important;
}
}
}
}
:host-context(.dark) {
::ng-deep {
.data-table-page-size {
background: var(--color-bodybg) !important;
}
.data-table-page-size-panel {
background: var(--color-bodybg) !important;
}
}
}
/* Responsive scroll */
.table-responsive {
width: 100%;