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

Add various UI refinement
This commit is contained in:
Sean 2019-07-25 09:52:31 +02:00 committed by GitHub
commit 1d89bc6b30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 19 deletions

View File

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

View File

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

View File

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

View File

@ -118,4 +118,17 @@
bottom: 0; bottom: 0;
right: 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);
}
} }

View File

@ -28,6 +28,9 @@
/** NGrid */ /** NGrid */
@import '~@pebula/ngrid/theming'; @import '~@pebula/ngrid/theming';
$narrow-spacing: (
spacing: $pbl-spacing-theme-narrow
);
/** Mix the component-related style-rules */ /** Mix the component-related style-rules */
@mixin openslides-components-theme($theme) { @mixin openslides-components-theme($theme) {
@ -52,12 +55,7 @@
.openslides-theme { .openslides-theme {
@include angular-material-theme($openslides-theme); @include angular-material-theme($openslides-theme);
@include openslides-components-theme($openslides-theme); @include openslides-components-theme($openslides-theme);
/** NGrid OS Theme */
$ngrid-material-theme: pbl-light-theme($openslides-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)); @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
.logo-container { .logo-container {
@ -68,11 +66,6 @@
display: inherit; 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, .openslides-dark-theme,
@ -90,16 +83,22 @@
.openslides-dark-theme { .openslides-dark-theme {
@include angular-material-theme($openslides-dark-theme); @include angular-material-theme($openslides-dark-theme);
@include openslides-components-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 { .openslides-green-theme {
@include angular-material-theme($openslides-green-theme); @include angular-material-theme($openslides-green-theme);
@include openslides-components-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 { .openslides-developer-dark-theme {
@include angular-material-theme($openslides-developer-theme); @include angular-material-theme($openslides-developer-theme);
@include openslides-components-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; 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 { .pbl-ngrid-cell {
position: relative; 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 */ /** Define the general style-rules */
* { * {
font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif; font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
@ -731,7 +734,7 @@ button.mat-menu-item.selected {
} }
.multi-line-chip { .multi-line-chip {
white-space: pre-line white-space: pre-line;
} }
/* TODO: move to site.component.scss-theme.scss (does not work currently) */ /* TODO: move to site.component.scss-theme.scss (does not work currently) */