#1 Reorganise CSS and library loading.

public/Template/Application.html.tpl

@@ -1,4 +1,5 @@
 <div class="page-wrapper mdc-typography">
+    <Style src="/css/Application.css"/>
     <div class="content">
         <header class="mdc-toolbar mdc-elevation--z4">
             <div class="mdc-toolbar__row">
@@ -12,7 +13,6 @@
             </div>
         </header>
         <this.components.MainMenu
-                class="mdc-temporary-drawer"
                 adapter={this.menuAdapter}
                 page={this.state.history.page}
                 onMenu={this.onMenuChange.bind(this)}

public/Template/Menu/Main.html.tpl

@@ -1,12 +1,13 @@
 <MDC.Drawer class="mdc-temporary-drawer" open={this.state.open} onClose={this.closeMenu.bind(this)}>
-    <aside class={this.props.className}>
-        <nav class={this.props.className + "__drawer"}>
-            <div class={this.props.className + "__toolbar-spacer"}></div>
+    <aside class="mdc-temporary-drawer">
+        <Style src="/css/Menu/Main.css"/>
+        <nav class="mdc-temporary-drawer__drawer">
+            <div class="mdc-temporary-drawer__toolbar-spacer"></div>
             <div class="mdc-list-group">
                 <nav class="mdc-list">
                     <a
                             ref="settingsMenu"
-                            class={(this.props.page == 'settings' ? this.props.className + "--selected mdc-list--theme-dark" : "") + " mdc-list-item"}
+                            class={(this.props.page == 'settings' ? "mdc-temporary-drawer--selected mdc-list--theme-dark" : "") + " mdc-list-item"}
                     >
                         <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">settings applications</i> Anwendungseinstellungen
                     </a>

public/Template/Settings.html.tpl

@@ -1,4 +1,5 @@
 <div class="settings-card-container">
+    <Style src="/css/Settings.css" />
     <div class="mdc-card__horizontal-block">
         <div class="mdc-card__actions mdc-typography--body2 hint">
             Sprache und Farbe

public/css/Application.css

@@ -0,0 +1,19 @@
+
+html {
+    height: 100%;
+}
+body {
+    padding: 0;
+    margin: 0;
+    height: 100vh;
+}
+.height100p {
+    height: 100vh;
+}
+
+/**
+ * Put drawer under the toolbar.
+ */
+.mdc-toolbar {
+    z-index: 60;
+}

public/css/Menu/Main.css

@@ -0,0 +1,17 @@
+
+.page-wrapper {
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    height: 100vh;
+    width: 100%;
+}
+.content {
+    display: inline-flex;
+    flex-direction: column;
+    flex-grow: 1;
+    height: 100vh;
+    box-sizing: border-box;
+}

public/css/Settings.css

@@ -0,0 +1,65 @@
+/**
+ * Settings Page layout
+ */
+
+.settings-card-container {
+    width: 60%;
+    margin: 0 auto;
+    padding-top: 10px;
+}
+.setting-cart-container, .hint {
+    color: var(--mdc-theme-text-hint-on-light);
+}
+
+.settings-block {
+    margin: var(--mdc-layout-grid-margin-desktop)
+}
+
+.settings-block .mdc-list-item {
+    height: auto;
+}
+
+.settings-label {
+    width: 40%;
+    float: left;
+}
+
+.settings-content {
+    width: 100% !important;
+}
+
+.settings-content .mdc-select {
+    width: 100% !important;
+}
+
+@media (min-width: 840px) {
+    .settings-content {
+        width: 60% !important;
+        float: left;
+    }
+    .settings-content .mdc-select {
+        width: 100% !important;
+    }
+}
+
+
+@media (min-width: 480px) and (max-width: 839px) {
+    .settings-card-container {
+        width: 80%;
+    }
+    .settings-block {
+        margin: var(--mdc-layout-grid-margin-tablet)
+    }
+}
+@media (max-width: 479px) {
+    .settings-card-container {
+        width: 94%;
+    }
+    .settings-card-container .mdc-card {
+        box-shadow: unset;
+    }
+
+    .settings-block {
+        margin: var(--mdc-layout-grid-margin-phone)
+    }
+}

public/index.html

@@ -11,116 +11,11 @@
     <link rel="apple-touch-icon" sizes="128x128" href="%PUBLIC_URL%/favicon-128.png">
     <link rel="apple-touch-icon-precomposed" sizes="128x128" href="%PUBLIC_URL%/favicon-128.png">
     <title>Codefrog Time Tracker</title>
-    <script src="%PUBLIC_URL%/lib/babel.min.js"></script>
-    <style>
-        html {
-            height: 100%;
-        }
-        body {
-            padding: 0;
-            margin: 0;
-            height: 100vh;
-        }
-        .height100p {
-            height: 100vh;
-        }
-        .page-wrapper {
-            display: flex;
-            flex-direction: row;
-            padding: 0;
-            margin: 0;
-            box-sizing: border-box;
-            height: 100vh;
-            width: 100%;
-        }
-        .content {
-            display: inline-flex;
-            flex-direction: column;
-            flex-grow: 1;
-            height: 100vh;
-            box-sizing: border-box;
-        }
-
-        /**
-         * Put drawer under the toolbar.
-         */
-        .mdc-toolbar {
-            z-index: 60;
-        }
-
-        /**
-         * Seetings Page layout
-         */
-        .settings-card-container {
-            width: 60%;
-            margin: 0 auto;
-            padding-top: 10px;
-        }
-        .setting-cart-container, .hint {
-            color: var(--mdc-theme-text-hint-on-light);
-        }
-
-        .settings-block {
-            margin: var(--mdc-layout-grid-margin-desktop)
-        }
-
-        .settings-block .mdc-list-item {
-            height: auto;
-        }
-
-        .settings-label {
-            width: 40%;
-            float: left;
-        }
-
-        .settings-content {
-            width: 100% !important;
-        }
-
-        .settings-content .mdc-select {
-            width: 100% !important;
-        }
-
-        @media (min-width: 840px) {
-            .settings-content {
-                width: 60% !important;
-                float: left;
-            }
-            .settings-content .mdc-select {
-                width: 100% !important;
-            }
-        }
-
-
-        @media (min-width: 480px) and (max-width: 839px) {
-            .settings-card-container {
-                width: 80%;
-            }
-            .settings-block {
-                margin: var(--mdc-layout-grid-margin-tablet)
-            }
-        }
-        @media (max-width: 479px) {
-            .settings-card-container {
-                width: 94%;
-            }
-            .settings-card-container .mdc-card {
-                box-shadow: unset;
-            }
-
-            .settings-block {
-                margin: var(--mdc-layout-grid-margin-phone)
-            }
-        }
-    </style>
 </head>
 <body>
 <noscript>
-    <img height="96px" src="%PUBLIC_URL%/favicon-128.png">
     You need to enable JavaScript to run this app.
 </noscript>
 <div id="root" class="height100p"></div>
-<link rel="stylesheet" href="%PUBLIC_URL%/css/google.css">
-<link rel="stylesheet" href="%PUBLIC_URL%/css/material-components-web.min.css">
 </body>
 </html>

src/Application/Application.js

@@ -3,6 +3,7 @@ import Component from '../Shared/LiveJSX';
 import Menu from '../Menu';
 import Router from '../Shared/Router';
 import Settings from '../Settings';
+import Style from '../Shared/Style';
 
 /**
  * Root Application.
@@ -191,6 +192,8 @@ class Application extends Component {
           state={this.state.history}
           pathname={this.state.pathname}
         />
+        <Style src="/css/google.css" />
+        <Style src="/css/material-components-web.min.css" />
         {super.render()}
       </div>
     );

src/Menu/Main/Main.js

@@ -23,7 +23,6 @@ class MainMenu extends Component
    */
   static get propTypes() {
     return {
-      className: PropTypes.string.isRequired,
       adapter:   PropTypes.object,
       onMenu:    PropTypes.func
     };

src/Shared/Style.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * An CSS file loader and importer.
+ */
+class Style extends React.Component {
+
+  /**
+   * Define properties.
+   *
+   * @returns {Object}
+   */
+  static get propTypes() {
+    return {
+      src:     PropTypes.string.isRequired,
+      enabled: PropTypes.bool
+    };
+  }
+
+  /**
+   * Constructor.
+   *
+   * @param {Object} props
+   * @param {Object} context
+   * @param {Object} updater
+   */
+  constructor(props, context, updater) {
+    super(props, context, updater);
+  }
+
+  render() {
+    return <link rel="stylesheet" href={this.props.enabled === false ? '' : this.props.src}/>;
+  }
+}
+
+export default Style;

src/Shared/Styte.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import Style from './Style';
+
+/**
+ * Test the style loader.
+ */
+describe('Shared: Style', function testSharedStyle() {
+  'use strict';
+
+  /**
+   * Test that url passing correctly.
+   */
+  it('Loads css file', function testFileLoad() {
+    const wrapper = shallow(<Style src="/test.css"/>);
+    expect(wrapper.html()).toBe('<link rel="stylesheet" href="/test.css"/>');
+  });
+
+  /**
+   * Test that url not passed if not enabled.
+   */
+  it('Turn off if not enabled', function testFileLoad() {
+    const wrapper = shallow(<Style src="/test.css" enabled={false}/>);
+    expect(wrapper.html()).toBe('<link rel="stylesheet" href=""/>');
+  });
+});

src/bootstrap.js

@@ -1,5 +1,7 @@
 //import './material.min.css'; // custom colors
 
 import MDC from './Shared/MDC';
+import Style from './Shared/Style';
 
 global.MDC = MDC;
+global.Style = Style;

src/index.js

@@ -2,8 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Application from './Application';
 import registerServiceWorker from './registerServiceWorker';
+import Axios from 'axios';
 import './bootstrap';
 
 registerServiceWorker();
 
-ReactDOM.render(<Application />, document.getElementById('root'));
+Axios.get('/lib/babel.min.js')
+  .then(
+    response => {
+      const babel = new Function(response.data);
+      babel.apply(global);
+      ReactDOM.render(<Application/>, document.getElementById('root'));
+    }
+  )
+;