Add various UI refinement

- "no data" in VScroll tables
- "no data" in File manager
- VScroll to angular theme (dark mode, etc)
- Prettier history table
This commit is contained in:
Sean Engelhardt 2019-07-23 15:59:24 +02:00
parent 93e37720dc
commit 0c9732ec7d
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>
</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>

View File

@ -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>

View File

@ -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 -->

View File

@ -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);
}
}

View File

@ -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) */