From 41ba616dc1c6b7db2eb1a5698370ef29f4cc599a Mon Sep 17 00:00:00 2001 From: Sean Engelhardt Date: Thu, 26 Jul 2018 16:40:34 +0200 Subject: [PATCH] create OpenSlides3 Material CSS Theme Add theming options, custom component theming. Creating themes for specfic brands is very easy now. --- client/angular.json | 2 +- client/package-lock.json | 49 +++++++---- client/package.json | 2 +- .../settings-list.component.html | 22 ++++- client/src/app/site/site.component.html | 83 ++++++++++++------- ...site.component.css => site.component.scss} | 0 .../app/site/site.component.scss-theme.scss | 42 ++++++++++ client/src/app/site/site.component.ts | 2 +- .../src/assets/styles/openslides-theme.scss | 42 ++++++++++ client/src/{styles.css => styles.scss} | 21 ++++- 10 files changed, 209 insertions(+), 56 deletions(-) rename client/src/app/site/{site.component.css => site.component.scss} (100%) create mode 100644 client/src/app/site/site.component.scss-theme.scss create mode 100644 client/src/assets/styles/openslides-theme.scss rename client/src/{styles.css => styles.scss} (51%) diff --git a/client/angular.json b/client/angular.json index 8e071135b..051c86ffa 100644 --- a/client/angular.json +++ b/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": { diff --git a/client/package-lock.json b/client/package-lock.json index b93bda9a1..ed8995738 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index 7d63012e4..a8de03233 100644 --- a/client/package.json +++ b/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" diff --git a/client/src/app/site/settings/settings-list/settings-list.component.html b/client/src/app/site/settings/settings-list/settings-list.component.html index 20e005b5d..6ad1a1dc8 100644 --- a/client/src/app/site/settings/settings-list/settings-list.component.html +++ b/client/src/app/site/settings/settings-list/settings-list.component.html @@ -1,3 +1,19 @@ -

- settings-list works! -

+ + Settings + + +
+ + + + + + Title + + + +

CONTENT

+ + + +
\ No newline at end of file diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html index e0c9cc706..a92ea29d2 100644 --- a/client/src/app/site/site.component.html +++ b/client/src/app/site/site.component.html @@ -1,6 +1,6 @@ - + @@ -9,7 +9,7 @@ - + {{username}} @@ -20,35 +20,56 @@ - - - - Home - - - - Agenda - - - - Motions - - - - Assignments - - - - Participants - - - - Files - - - - Settings - + + + + + + Home + + + + + + + Agenda + + + + + + + Motions + + + + + + + Assignments + + + + + + + Participants + + + + + + + Files + + + + + + + Settings + + diff --git a/client/src/app/site/site.component.css b/client/src/app/site/site.component.scss similarity index 100% rename from client/src/app/site/site.component.css rename to client/src/app/site/site.component.scss diff --git a/client/src/app/site/site.component.scss-theme.scss b/client/src/app/site/site.component.scss-theme.scss new file mode 100644 index 000000000..d54e470ee --- /dev/null +++ b/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); + } + } +} diff --git a/client/src/app/site/site.component.ts b/client/src/app/site/site.component.ts index 2c2aecad4..83abccb45 100644 --- a/client/src/app/site/site.component.ts +++ b/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; diff --git a/client/src/assets/styles/openslides-theme.scss b/client/src/assets/styles/openslides-theme.scss new file mode 100644 index 000000000..94b73eb46 --- /dev/null +++ b/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); diff --git a/client/src/styles.css b/client/src/styles.scss similarity index 51% rename from client/src/styles.css rename to client/src/styles.scss index 6e8db01d4..481f967ee 100644 --- a/client/src/styles.css +++ b/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/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 {