create OpenSlides3 Material CSS Theme

Add theming options, custom component theming.
Creating themes for specfic brands is very easy now.

client/angular.json

@@ -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": {

client/package-lock.json

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

client/package.json

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

client/src/app/site/settings/settings-list/settings-list.component.html

@@ -1,3 +1,19 @@
-<p>
+<mat-toolbar color='primary'>
-  settings-list works!
+    <span class='app-name' translate>Settings</span>
-</p>
+</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>

client/src/app/site/site.component.html

@@ -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>
+        <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>
+                <a *appOsPerms="['core.can_see_frontpage']" mat-list-item routerLink='/' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
-                <span translate>Home</span>
+                    <fa-icon icon='home'></fa-icon>
-            </a>
+
-            <a *appOsPerms="['agenda.can_see']" mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+                    <span translate>Home</span>
-                <fa-icon icon='calendar'></fa-icon>
+                </a>
-                <span translate>Agenda</span>
+            
-            </a>
+            
-            <a *appOsPerms="['motions.can_see']" mat-list-item routerLink='/motions' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+                <a *appOsPerms="['agenda.can_see']" mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
-                <fa-icon icon='file-alt'></fa-icon>
+                    <fa-icon icon='calendar'></fa-icon>
-                <span translate>Motions</span>
+
-            </a>
+                    <span translate>Agenda</span>
-            <a *appOsPerms="['assignments.can_see']" mat-list-item routerLink='/assignments' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+                </a>
-                <fa-icon icon='chart-pie'></fa-icon>
+            
-                <span translate>Assignments</span>
+            
-            </a>
+                <a *appOsPerms="['motions.can_see']" mat-list-item routerLink='/motions' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
-            <a *appOsPerms="['users.can_see_name']" mat-list-item routerLink='/users' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+                    <fa-icon icon='file-alt'></fa-icon>
-                <fa-icon icon='user'></fa-icon>
+
-                <span translate>Participants</span>
+                    <span translate>Motions</span>
-            </a>
+                </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 *appOsPerms="['assignments.can_see']" mat-list-item routerLink='/assignments' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
-            </a>
+                    <fa-icon icon='chart-pie'></fa-icon>
-            <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>Assignments</span>
-                <span translate>Settings</span>
+                </a>
-            </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>

client/src/app/site/site.component.scss-theme.scss

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

client/src/app/site/site.component.ts

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

client/src/assets/styles/openslides-theme.scss

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

client/src/styles.scss

@@ -1,5 +1,22 @@
-/*use a 'theme' for MaterialUI. TODO We will need to build an OpenSlides-Theme*/
+@import '~@angular/material/theming';
-@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+
+@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 {