Merge pull request #1544 from rocket-admin/table-view-fixes

Table view fixes

Author: lyubov-voloshko

frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css

@@ -12,6 +12,7 @@
 }
 
 .row-preview-sidebar_open {
+	position: relative;
 	background-color: var(--mat-sidenav-content-background-color);
 	border-left: solid 1px rgba(0, 0, 0, 0.12);
 	opacity: 1;
@@ -40,12 +41,17 @@
 }
 
 .row-preview-sidebar__header {
+	position: sticky;
+	top: 0;
+	background-color: inherit;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	padding-top: 20px;
+	padding-bottom: 20px;
 	padding-left: 16px;
 	padding-right: 16px;
+	z-index: 1;
 }
 
 .row-preview-sidebar__title {

frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html

@@ -23,8 +23,6 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
         </button>
     </div>
 
-    <br />
-
     <mat-expansion-panel *ngIf="selectedRow?.relatedRecords?.referenced_by?.length" class="related-records-panel">
         <mat-expansion-panel-header class="related-records-panel__header">
             Related records

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css

@@ -223,6 +223,30 @@
     background-color: #E8ECEE !important;
 }
 
+@media (prefers-color-scheme: dark) {
+	::ng-deep .active-filters .mat-mdc-chip {
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		--mdc-chip-label-text-color: rgba(255, 255, 255, 0.87) !important;
+		background-color: #3a4a5c !important;
+		color: rgba(255, 255, 255, 0.87) !important;
+	}
+
+	::ng-deep .active-filters .mat-mdc-chip:hover {
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
+	}
+
+	::ng-deep .active-filters .mdc-evolution-chip__cell {
+		background-color: #3a4a5c !important;
+	}
+
+	::ng-deep .active-filters .mdc-evolution-chip__cell:hover {
+		background-color: #3a4a5c !important;
+	}
+}
+
 .db-table-manage-columns-button__count {
 	margin-left: 2px;
 }
@@ -273,7 +297,7 @@
 }
 
 .table-surface {
-	margin-bottom: 24px;
+	margin-bottom: 72px;
 }
 
 @media (prefers-color-scheme: dark) {

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css

@@ -366,47 +366,49 @@
 
 @media (prefers-color-scheme: dark) {
 	::ng-deep .static-filter-chip .mat-mdc-chip {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		--mdc-chip-label-text-color: rgba(255, 255, 255, 0.87) !important;
+		background-color: #3a4a5c !important;
+		color: rgba(255, 255, 255, 0.87) !important;
 	}
 
 	::ng-deep .static-filter-chip .mat-mdc-chip:hover {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mat-mdc-chip:active {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mdc-evolution-chip__cell {
-		background-color: #E8ECEE !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mdc-evolution-chip__cell:hover {
-		background-color: #E8ECEE !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:hover {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
 	}
 
 	::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:active {
-		--mdc-chip-container-color: #E8ECEE !important;
-		--mdc-chip-elevated-container-color: #E8ECEE !important;
-		background-color: #E8ECEE !important;
+		--mdc-chip-container-color: #3a4a5c !important;
+		--mdc-chip-elevated-container-color: #3a4a5c !important;
+		background-color: #3a4a5c !important;
 	}
 }