create OpenSlides3 Material CSS Theme
Add theming options, custom component theming. Creating themes for specfic brands is very easy now.
This commit is contained in:
Sean Engelhardt
FinnStutzenstein
parent
76ce18cfd8
commit
41ba616dc1
@ -19,7 +19,7 @@
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"assets": ["src/favicon.ico", "src/assets"],
|
||||
"styles": ["src/styles.css"],
|
||||
"styles": ["src/styles.scss"],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
|
||||
49
client/package-lock.json
generated
49
client/package-lock.json
generated
@ -2517,11 +2517,6 @@
|
||||
"integrity": "sha512-13YaR6kiz0kBNmIVM87Io8Hp7bWOo4r61vkEANy8iH9R9bc6avud/1FT0SBpqR1RpIQADOh/Q+yHZDA1iL6ysA==",
|
||||
"dev": true
|
||||
},
|
||||
"class-transformer": {
|
||||
"version": "0.1.9",
|
||||
"resolved": "https://registry.npmjs.org/class-transformer/-/class-transformer-0.1.9.tgz",
|
||||
"integrity": "sha512-KV0IteiRl95OZ9UzbuPj8RhckuHA4JTC+Q+ZbKTYPsmvB0GgPRG7JBEXiVhBq/U050OVRku4N5t0rSMHw8vDWw=="
|
||||
},
|
||||
"class-utils": {
|
||||
"version": "0.3.6",
|
||||
"resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
|
||||
@ -4629,7 +4624,8 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -4650,12 +4646,14 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -4670,17 +4668,20 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -4797,7 +4798,8 @@
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -4809,6 +4811,7 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -4823,6 +4826,7 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -4830,12 +4834,14 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.2.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.1",
|
||||
"yallist": "^3.0.0"
|
||||
@ -4854,6 +4860,7 @@
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@ -4934,7 +4941,8 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -4946,6 +4954,7 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -5031,7 +5040,8 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -5067,6 +5077,7 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -5086,6 +5097,7 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -5129,12 +5141,14 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -10064,7 +10078,8 @@
|
||||
"reflect-metadata": {
|
||||
"version": "0.1.12",
|
||||
"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.12.tgz",
|
||||
"integrity": "sha512-n+IyV+nGz3+0q3/Yf1ra12KpCyi001bi4XFxSjbiWWjfqb52iTTtpGXmCCAOWWIAn9KEuFZKGqBERHmrtScZ3A=="
|
||||
"integrity": "sha512-n+IyV+nGz3+0q3/Yf1ra12KpCyi001bi4XFxSjbiWWjfqb52iTTtpGXmCCAOWWIAn9KEuFZKGqBERHmrtScZ3A==",
|
||||
"dev": true
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.4.0",
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"compodoc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json -s -w",
|
||||
"compodoc": "./node_modules/.bin/compodoc --hideGenerator -p src/tsconfig.app.json -n 'OpenSlides Documentation' -d ../Compodoc -s -w -t -o",
|
||||
"extract": "ngx-translate-extract -i ./src -o ./src/assets/i18n/{en,de,fr}.json --clean --sort --format-indentation ' ' --format namespaced-json",
|
||||
"format:fix": "pretty-quick --staged",
|
||||
"precommit": "run-s format:fix lint"
|
||||
|
||||
@ -1,3 +1,19 @@
|
||||
<p>
|
||||
settings-list works!
|
||||
</p>
|
||||
<mat-toolbar color='primary'>
|
||||
<span class='app-name' translate>Settings</span>
|
||||
</mat-toolbar>
|
||||
|
||||
<div *appOsPerms="['core.can_manage_config']" class="app-content">
|
||||
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Title
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<p> CONTENT </p>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
</div>
|
||||
@ -1,6 +1,6 @@
|
||||
<mat-sidenav-container autosize>
|
||||
<mat-sidenav #sideNav [mode]="isMobile ? 'push' : 'side'" [opened]='!isMobile' disableClose='!isMobile'>
|
||||
<mat-toolbar class='nav-toolbar' color='primary'>
|
||||
<mat-toolbar class='nav-toolbar'>
|
||||
|
||||
<!-- logo -->
|
||||
<mat-toolbar-row>
|
||||
@ -9,7 +9,7 @@
|
||||
</mat-toolbar>
|
||||
|
||||
<!-- User Menu -->
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel class='user-menu mat-elevation-z0'>
|
||||
<mat-expansion-panel-header>
|
||||
<!-- Get the username from operator -->
|
||||
{{username}}
|
||||
@ -20,35 +20,56 @@
|
||||
</mat-expansion-panel>
|
||||
|
||||
<!-- navigation -->
|
||||
<mat-nav-list>
|
||||
<a *appOsPerms="['core.can_see_frontpage']" mat-list-item routerLink='/' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='home'></fa-icon>
|
||||
<span translate>Home</span>
|
||||
</a>
|
||||
<a *appOsPerms="['agenda.can_see']" mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='calendar'></fa-icon>
|
||||
<span translate>Agenda</span>
|
||||
</a>
|
||||
<a *appOsPerms="['motions.can_see']" mat-list-item routerLink='/motions' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='file-alt'></fa-icon>
|
||||
<span translate>Motions</span>
|
||||
</a>
|
||||
<a *appOsPerms="['assignments.can_see']" mat-list-item routerLink='/assignments' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='chart-pie'></fa-icon>
|
||||
<span translate>Assignments</span>
|
||||
</a>
|
||||
<a *appOsPerms="['users.can_see_name']" mat-list-item routerLink='/users' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='user'></fa-icon>
|
||||
<span translate>Participants</span>
|
||||
</a>
|
||||
<a *appOsPerms="['mediafiles.can_see']" mat-list-item routerLink='/mediafiles' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='paperclip'></fa-icon>
|
||||
<span translate>Files</span>
|
||||
</a>
|
||||
<a *appOsPerms="['core.can_manage_config']" mat-list-item routerLink='/settings' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='cog'></fa-icon>
|
||||
<span translate>Settings</span>
|
||||
</a>
|
||||
<mat-nav-list class='main-nav'>
|
||||
|
||||
<a *appOsPerms="['core.can_see_frontpage']" mat-list-item routerLink='/' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='home'></fa-icon>
|
||||
|
||||
<span translate>Home</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a *appOsPerms="['agenda.can_see']" mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='calendar'></fa-icon>
|
||||
|
||||
<span translate>Agenda</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a *appOsPerms="['motions.can_see']" mat-list-item routerLink='/motions' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='file-alt'></fa-icon>
|
||||
|
||||
<span translate>Motions</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a *appOsPerms="['assignments.can_see']" mat-list-item routerLink='/assignments' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='chart-pie'></fa-icon>
|
||||
|
||||
<span translate>Assignments</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a *appOsPerms="['users.can_see_name']" mat-list-item routerLink='/users' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='user'></fa-icon>
|
||||
|
||||
<span translate>Participants</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a *appOsPerms="['mediafiles.can_see']" mat-list-item routerLink='/mediafiles' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='paperclip'></fa-icon>
|
||||
|
||||
<span translate>Files</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a *appOsPerms="['core.can_manage_config']" mat-list-item routerLink='/settings' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
|
||||
<fa-icon icon='cog'></fa-icon>
|
||||
|
||||
<span translate>Settings</span>
|
||||
</a>
|
||||
|
||||
</mat-nav-list>
|
||||
|
||||
</mat-sidenav>
|
||||
|
||||
42
client/src/app/site/site.component.scss-theme.scss
Normal file
42
client/src/app/site/site.component.scss-theme.scss
Normal file
@ -0,0 +1,42 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
/** Custom component theme. Only lives in a specific scope */
|
||||
@mixin app-site-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, accent);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
app-site {
|
||||
/** change the nav-toolbar to the darker nuance of the current theme*/
|
||||
.nav-toolbar {
|
||||
background-color: mat-color($primary, darker);
|
||||
}
|
||||
|
||||
/** make the .user-menu expansion panel look like the nav-toolbar above */
|
||||
.user-menu {
|
||||
background-color: mat-color($primary, darker);
|
||||
color: mat-color($primary, default-contrast);
|
||||
min-height: 64px;
|
||||
|
||||
.mat-expansion-indicator:after {
|
||||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
/** style and allign the nav icons the icons*/
|
||||
.main-nav {
|
||||
.ng-fa-icon {
|
||||
color: mat-color($primary, lighter-contrast);
|
||||
min-width: 20px; //puts the text to the right on the same leve
|
||||
margin-right: 10px; // the distance from the icon to the text
|
||||
}
|
||||
span {
|
||||
color: mat-color($primary, lighter-contrast);
|
||||
}
|
||||
|
||||
// color: mat-color($primary, default-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -12,7 +12,7 @@ import { BaseComponent } from 'app/base.component';
|
||||
@Component({
|
||||
selector: 'app-site',
|
||||
templateUrl: './site.component.html',
|
||||
styleUrls: ['./site.component.css']
|
||||
styleUrls: ['./site.component.scss']
|
||||
})
|
||||
export class SiteComponent extends BaseComponent implements OnInit {
|
||||
username = this.operator.username;
|
||||
|
||||
42
client/src/assets/styles/openslides-theme.scss
Normal file
42
client/src/assets/styles/openslides-theme.scss
Normal file
@ -0,0 +1,42 @@
|
||||
// define a real custom palette (using http://mcg.mbitson.com)
|
||||
$openslides-blue: (
|
||||
50: #e6eff2,
|
||||
100: #c1d6e0,
|
||||
200: #98bbcb,
|
||||
300: #6fa0b6,
|
||||
400: #508ba6,
|
||||
500: #317796,
|
||||
600: #2c6f8e,
|
||||
700: #002a42,
|
||||
800: #00253c,
|
||||
900: #001f33,
|
||||
A100: #9fd7ff,
|
||||
A200: #6cc2ff,
|
||||
A400: #39acff,
|
||||
A700: #1fa2ff,
|
||||
contrast: (
|
||||
50: #ebebeb,
|
||||
100: #535353,
|
||||
200: #ebebeb,
|
||||
300: #ebebeb,
|
||||
400: #fefefe,
|
||||
500: #fefefe,
|
||||
600: #fefefe,
|
||||
700: #fefefe,
|
||||
800: #fefefe,
|
||||
900: #fefefe,
|
||||
A100: #000000,
|
||||
A200: #000000,
|
||||
A400: #000000,
|
||||
A700: #000000
|
||||
)
|
||||
);
|
||||
|
||||
// Generate paletes using: https://material.io/design/color/
|
||||
// default values fir mat-palette: $default: 500, $lighter: 100, $darker: 700.
|
||||
$openslides-primary: mat-palette($openslides-blue);
|
||||
$openslides-accent: mat-palette($mat-pink, A200, A100, A400);
|
||||
$openslides-warn: mat-palette($mat-red);
|
||||
|
||||
// Create the theme object (a Sass map containing all of the palettes).
|
||||
$openslides-theme: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);
|
||||
@ -1,5 +1,22 @@
|
||||
/*use a 'theme' for MaterialUI. TODO We will need to build an OpenSlides-Theme*/
|
||||
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@include mat-core();
|
||||
|
||||
/** Import brand theme and (new) component themes */
|
||||
@import './assets/styles/openslides-theme';
|
||||
@import './app/site/site.component.scss-theme';
|
||||
|
||||
@mixin openslides-components-theme($theme) {
|
||||
@include app-site-theme($theme);
|
||||
/** More components are added here */
|
||||
}
|
||||
|
||||
@include angular-material-theme($openslides-theme);
|
||||
@include openslides-components-theme($openslides-theme);
|
||||
|
||||
* {
|
||||
font-family: Arial, Helvetica, sans-serif !important;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
Loading…
Reference in New Issue
Block a user