ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/shared/components/projection-dialog/projection-dialog.component.html
View File

@ -8,7 +8,9 @@
<mat-checkbox [checked]="isProjectorSelected(projector)" (change)="toggleProjector(projector)">
{{ projector.name | translate }}
</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>
<mat-divider></mat-divider>

26
client/src/app/shared/components/projector-button/projector-button.component.scss
View File

@ -1,18 +1,18 @@
.projector-inactive {
background-color: white !important;
@import '~@angular/material/theming';
mat-icon {
color: grey !important;
}
@mixin os-projector-button-style($theme) {
$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 */
.projector-active {
background-color: #03a9f4;
color: white !important;
.mat-menu-item.projector-active,
.projector-active > .mat-icon {
color: mat-color($primary) !important;
}
button.mat-menu-item.projector-active:hover {
background-color: #03a9f4;
}

4
client/src/app/site/config/components/config-field/config-field.component.html
View File

@ -44,7 +44,7 @@
<div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)">
<div *ngIf="configItem.inputType === 'boolean'">
<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>
@ -52,7 +52,7 @@
<div *ngIf="configItem.inputType === 'text'">
<mat-form-field>
<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>
</div>

12
client/src/app/site/config/components/config-field/config-field.component.scss
View File

@ -13,18 +13,6 @@ input[type='color'] {
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 {
width: 100%;
display: flex;

1
client/src/app/site/users/components/group-list/group-list.component.scss
View File

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

14
client/src/assets/styles/global-components-style.scss
View File

@ -27,8 +27,22 @@
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 {
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);
}
}

42
client/src/assets/styles/openslides-dark-theme.scss
View File

@ -1,6 +1,42 @@
$openslides-primary: mat-palette($mat-light-blue, 500, 100, 700);
$openslides-accent: mat-palette($mat-orange, 700, 300, 900);
$openslides-warn: mat-palette($mat-red, 600, 500, 700);
// Defines the primary palette using the dark theme
$openslides-primary-red: (
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-primary,

6
client/src/styles.scss
View File

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