Merge pull request #4387 from GabrielInTheWorld/change-dark-theme

Changes the primary palette for dark theme
This commit is contained in:
Emanuel Schütze 2019-02-22 17:02:02 +01:00 committed by GitHub
commit 3e2b201ee2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 75 additions and 38 deletions

View File

@ -8,7 +8,9 @@
<mat-checkbox [checked]="isProjectorSelected(projector)" (change)="toggleProjector(projector)"> <mat-checkbox [checked]="isProjectorSelected(projector)" (change)="toggleProjector(projector)">
{{ projector.name | translate }} {{ projector.name | translate }}
</mat-checkbox> </mat-checkbox>
<span *ngIf="isProjectedOn(projector)" class="right"> <mat-icon>videocam</mat-icon> </span> <span *ngIf="isProjectedOn(projector)" class="right">
<mat-icon matTooltip="{{ 'Is already projected' | translate }}" matTooltipPosition="above">videocam</mat-icon>
</span>
</div> </div>
<mat-divider></mat-divider> <mat-divider></mat-divider>

View File

@ -1,18 +1,18 @@
.projector-inactive { @import '~@angular/material/theming';
background-color: white !important;
mat-icon { @mixin os-projector-button-style($theme) {
color: grey !important; $primary: map-get($theme, primary);
} $accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$contrast: map-get($primary, contrast);
.mat-mini-fab.projector-inactive {
color: mat-color($contrast, A200) !important;
background-color: mat-color($contrast, 500) !important;
} }
/** TODO: Take this from the accent color. Make the hovering visible */ .mat-menu-item.projector-active,
.projector-active > .mat-icon {
.projector-active { color: mat-color($primary) !important;
background-color: #03a9f4;
color: white !important;
} }
button.mat-menu-item.projector-active:hover {
background-color: #03a9f4;
} }

View File

@ -44,7 +44,7 @@
<div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)"> <div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)">
<div *ngIf="configItem.inputType === 'boolean'"> <div *ngIf="configItem.inputType === 'boolean'">
<mat-checkbox formControlName="value">{{ configItem.label | translate }}</mat-checkbox> <mat-checkbox formControlName="value">{{ configItem.label | translate }}</mat-checkbox>
<div class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</div> <mat-hint class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</mat-hint>
<div class="error" *ngIf="error">{{ error }}</div> <div class="error" *ngIf="error">{{ error }}</div>
</div> </div>
@ -52,7 +52,7 @@
<div *ngIf="configItem.inputType === 'text'"> <div *ngIf="configItem.inputType === 'text'">
<mat-form-field> <mat-form-field>
<textarea rows="10" matInput placeholder="{{ configItem.label | translate }}" [value]="translatedValue"></textarea> <textarea rows="10" matInput placeholder="{{ configItem.label | translate }}" [value]="translatedValue"></textarea>
<div class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</div> <mat-hint class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</mat-hint>
</mat-form-field> </mat-form-field>
</div> </div>

View File

@ -13,18 +13,6 @@ input[type='color'] {
margin-bottom: 15px; margin-bottom: 15px;
} }
/* Custom hint and error classes for the checkbox. Same values as .mat-hint and -mat-error */
.hint,
.error {
font-size: 75%;
}
.hint {
color: rgba(0, 0, 0, 0.54);
}
.error {
color: #f44336;
}
.config-field-wrapper { .config-field-wrapper {
width: 100%; width: 100%;
display: flex; display: flex;

View File

@ -22,7 +22,6 @@ table {
.hint-text { .hint-text {
padding-top: 30px; padding-top: 30px;
padding-left: 25px; padding-left: 25px;
background-color: #ffffff; // put in theme later
} }
.new-group-form { .new-group-form {

View File

@ -27,8 +27,22 @@
color: mat-color($primary); color: mat-color($primary);
} }
.projected .mat-icon {
color: mat-color($primary);
}
//custom table header for search button, filtering and more. Used in ListViews //custom table header for search button, filtering and more. Used in ListViews
.custom-table-header { .custom-table-header {
background: mat-color($background, background); background: mat-color($background, background);
} }
/* Custom hint and error classes. Same values as .mat-hint and -mat-error */
.hint,
.error {
font-size: 75%;
display: block;
}
.error {
color: mat-color($warn);
}
} }

View File

@ -1,6 +1,42 @@
$openslides-primary: mat-palette($mat-light-blue, 500, 100, 700); // Defines the primary palette using the dark theme
$openslides-accent: mat-palette($mat-orange, 700, 300, 900); $openslides-primary-red: (
$openslides-warn: mat-palette($mat-red, 600, 500, 700); 50 : #f8e4e5,
100 : #edbbbd,
200 : #e18e91,
300 : #d56065,
400 : #cc3e44,
500 : #c31c23,
600 : #bd191f,
700 : #b5141a,
800 : #ae1115,
900 : #a1090c,
A100 : #ffcece,
A200 : #ff9b9b,
A400 : #ff6869,
A700 : #ff4e50,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100: #404040,
A200 : #303030,
A400 : #262626,
A700 : #1a1a1a
)
);
// TODO: /projectors/detail/*
$openslides-primary: mat-palette($openslides-primary-red, 500, 300, 900);
$openslides-accent: mat-palette($openslides-primary-red, 500, 300, 900);
$openslides-warn: mat-palette($mat-orange, 700, 300, 900);
$openslides-dark-theme: mat-dark-theme( $openslides-dark-theme: mat-dark-theme(
$openslides-primary, $openslides-primary,

View File

@ -10,6 +10,7 @@
/** Import the component-related stylesheets here */ /** Import the component-related stylesheets here */
@import './app/site/site.component.scss-theme.scss'; @import './app/site/site.component.scss-theme.scss';
@import './assets/styles/global-components-style.scss'; @import './assets/styles/global-components-style.scss';
@import './app/shared/components/projector-button/projector-button.component.scss';
/** fonts */ /** fonts */
@import './assets/styles/fonts.scss'; @import './assets/styles/fonts.scss';
@ -19,6 +20,7 @@
@mixin openslides-components-theme($theme) { @mixin openslides-components-theme($theme) {
@include os-site-theme($theme); @include os-site-theme($theme);
@include os-components-style($theme); @include os-components-style($theme);
@include os-projector-button-style($theme);
/** More components are added here */ /** More components are added here */
} }
@ -505,10 +507,6 @@ button.mat-menu-item.selected {
color: rgba(0, 0, 0, 0.87) !important; color: rgba(0, 0, 0, 0.87) !important;
} }
.projected {
background-color: lightblue;
}
/* TODO: move to site.component.scss-theme.scss (does not work currently) */ /* TODO: move to site.component.scss-theme.scss (does not work currently) */
/* make the .user-menu expansion panel look like the nav-toolbar above */ /* make the .user-menu expansion panel look like the nav-toolbar above */