Early tests with theming

ui/.angular-cli.json

@@ -28,7 +28,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.scss",
+        "theme.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

ui/src/app/billdata/billdata.component.html

@@ -146,7 +146,7 @@ <h2 class="top-spacing" translate>payment_details</h2>
         </div>
 
         <div class="form-line">
-          <mat-form-field class="form-field s12">
+          <mat-form-field class="form-field s4">
               <mat-select placeholder="{{ 'slip_lang' | translate}}" formControlName="language" required>
                   <mat-option value="de"><span translate>lang.de</span></mat-option>
                   <mat-option value="fr"><span translate>lang.fr</span></mat-option>

ui/src/app/billdata/billdata.component.ts

@@ -140,6 +140,8 @@ export class BillData implements OnInit {
 
     if (messages) {
       // TODO: set focus to first field with error
+      if (this.previewPressed && this.validationInProgress == 0)
+      this.previewPressed = false;
     } else {
       // user clicked on "Preview" and is waiting for validation
       if (this.previewPressed && this.validationInProgress == 0)

ui/src/app/preview/preview.component.html

@@ -3,7 +3,7 @@ <h2 mat-dialog-title translate>preview_n_download</h2>
 <mat-dialog-content>
 
   <div class="output-size">
-    <mat-button-toggle-group [(ngModel)]="outputSize">
+    <mat-button-toggle-group [(ngModel)]="outputSize" color="primary">
       <mat-button-toggle value="a6Landscape"><span translate>a6_landscape</span></mat-button-toggle>
       <mat-button-toggle value="a5Landscape"><span translate>a5_landscape</span></mat-button-toggle>
       <mat-button-toggle value="a4Portrait"><span translate>a4_portrait</span></mat-button-toggle>
@@ -20,5 +20,5 @@ <h2 mat-dialog-title translate>preview_n_download</h2>
 <mat-dialog-actions>
   <a mat-raised-button color="primary" href="../qrbill-api/bill/pdf/{{outputSize}}/{{billID}}" download="qrbill.pdf" target="_blank"><span translate>download_pdf</span></a>
   <a mat-raised-button color="primary" href="../qrbill-api/bill/svg/{{outputSize}}/{{billID}}" download="qrbill.svg" target="_blank"><span translate>download_svg</span></a>
-  <button mat-raised-button mat-dialog-close><span translate>close</span></button>
+  <button mat-raised-button mat-dialog-close color="accent"><span translate>close</span></button>
 </mat-dialog-actions>

ui/src/styles.css → ui/src/styles.scss

@@ -41,7 +41,7 @@ html, body {
   min-height: 100%;
 }
 
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+/** @import "~@angular/material/prebuilt-themes/indigo-pink.css"; **/
 
 
 /** Sections **/

ui/src/theme.scss

@@ -0,0 +1,41 @@
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue.
+$custom-app-primary: mat-palette($mat-brown, 600, 100, 900);
+$custom-app-accent:  mat-palette($mat-brown, 300, 100, 800);
+
+// The warn palette is optional (defaults to red).
+$custom-app-warn:    mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$custom-app-theme: mat-light-theme($custom-app-primary, $custom-app-accent, $custom-app-warn);
+
+@mixin mix-app-theme($app-theme) {
+    $primary: map-get($app-theme, primary);
+    $accent: map-get($app-theme, accent);
+
+    .mat-button-toggle {
+        background-color: mat-color($accent);
+        color: mat-color($accent, default-contrast);
+    }
+
+    .mat-button-toggle-checked {
+        background-color: mat-color($accent, 100);
+        color: mat-color($accent, 500);
+      }
+    }
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($custom-app-theme);
+
+@include mix-app-theme($custom-app-theme);