Merge pull request #4875 from tsiegleauq/table-no-data

Add various UI refinement

client/src/app/shared/components/list-view-table/list-view-table.component.html

@@ -34,6 +34,11 @@
             <os-projector-button class="projector-button" [object]="getProjectable(viewModel)"></os-projector-button>
         </div>
 
+        <!-- No Results -->
+        <div *pblNgridNoDataRef class="pbl-ngrid-no-data">
+            <span translate>No data</span>
+        </div>
+
         <!-- Slot transclusion for the individual cells -->
         <ng-content class="ngrid-lg" select=".cell-slot"></ng-content>
     </pbl-ngrid>

client/src/app/site/history/components/history-list/history-list.component.html

@@ -38,7 +38,7 @@
     </div>
 </div>
 
-<mat-table [dataSource]="dataSource" matSort>
+<mat-table [dataSource]="dataSource" matSort class="os-headed-listview-table">
     <!-- Timestamp -->
     <ng-container matColumnDef="time">
         <mat-header-cell *matHeaderCellDef translate>Timestamp</mat-header-cell>

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html

@@ -131,6 +131,11 @@
             <mat-icon>more_vert</mat-icon>
         </button>
     </div>
+
+    <!-- No Results -->
+    <div *pblNgridNoDataRef class="pbl-ngrid-no-data">
+        <span translate>No data</span>
+    </div>
 </pbl-ngrid>
 
 <!-- Template for the managing buttons -->

client/src/assets/styles/global-components-style.scss

@@ -118,4 +118,17 @@
         bottom: 0;
         right: 0;
     }
+
+    /** Custom themes for NGrid. Could be an own file if it gets more */
+    .pbl-ngrid-container {
+        background: mat-color($background, card);
+    }
+
+    .pbl-ngrid-no-data {
+        color: mat-color($foreground, secondary-text);
+    }
+
+    .pbl-ngrid-row:hover {
+        background-color: rgba(0, 0, 0, 0.025);
+    }
 }

client/src/styles.scss

@@ -28,6 +28,9 @@
 
 /** NGrid */
 @import '~@pebula/ngrid/theming';
+$narrow-spacing: (
+    spacing: $pbl-spacing-theme-narrow
+);
 
 /** Mix the component-related style-rules */
 @mixin openslides-components-theme($theme) {
@@ -52,12 +55,7 @@
 .openslides-theme {
     @include angular-material-theme($openslides-theme);
     @include openslides-components-theme($openslides-theme);
-
-    /** NGrid OS Theme */
     $ngrid-material-theme: pbl-light-theme($openslides-theme);
-    $narrow-spacing: (
-        spacing: $pbl-spacing-theme-narrow
-    );
     @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
 
     .logo-container {
@@ -68,11 +66,6 @@
             display: inherit;
         }
     }
-
-    /** Custom themes for NGrid. Could be an own file if it gets more */
-    .pbl-ngrid-container {
-        background: mat-color($background, card);
-    }
 }
 
 .openslides-dark-theme,
@@ -90,16 +83,22 @@
 .openslides-dark-theme {
     @include angular-material-theme($openslides-dark-theme);
     @include openslides-components-theme($openslides-dark-theme);
+    $ngrid-material-theme: pbl-dark-theme($openslides-dark-theme);
+    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
 }
 
 .openslides-green-theme {
     @include angular-material-theme($openslides-green-theme);
     @include openslides-components-theme($openslides-green-theme);
+    $ngrid-material-theme: pbl-light-theme($openslides-green-theme);
+    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
 }
 
 .openslides-developer-dark-theme {
     @include angular-material-theme($openslides-developer-theme);
     @include openslides-components-theme($openslides-developer-theme);
+    $ngrid-material-theme: pbl-dark-theme($openslides-developer-theme);
+    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
 
     * {
         font-family: monospace !important;
@@ -152,13 +151,6 @@
     }
 }
 
-/**
- * Patches to NGrid Classes
- */
-.pbl-ngrid-row:hover {
-    background-color: rgba(0, 0, 0, 0.025);
-}
-
 .pbl-ngrid-cell {
     position: relative;
 
@@ -191,6 +183,17 @@
     }
 }
 
+.pbl-ngrid-no-data {
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    top: 5%;
+    left: 0;
+    right: 0;
+    width: 100px; /* Need a specific value to work */
+    font-style: italic;
+}
+
 /** Define the general style-rules */
 * {
     font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
@@ -731,7 +734,7 @@ button.mat-menu-item.selected {
 }
 
 .multi-line-chip {
-    white-space: pre-line
+    white-space: pre-line;
 }
 
 /* TODO: move to site.component.scss-theme.scss (does not work currently) */