#1 Draft of option page layout.

enbock · Oct 15, 2017 · 6053fc2 · 6053fc2
1 parent 6be2049
commit 6053fc2
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "description": "Tracking start and end of working time.",
   "dependencies": {
     "@material/drawer": "^0.5.9",
+    "@material/select": "^0.3.18",
     "autoprefixer": "7.1.2",
     "axios": "^0.16.2",
     "babel-core": "6.25.0",

diff --git a/public/Template/Application.html.tpl b/public/Template/Application.html.tpl
@@ -19,13 +19,13 @@
         />
 
         <main>
+            {this.state.currentComponent}
             <br/>
             <pre style={{textAlign:"right"}}>
                 Root: {this.state.history.root}<br/>
                 Page: {this.state.history.page}<br/>
                 Path: {this.state.pathname}<br/>
             </pre>
-            {this.state.currentComponent}
         </main>
     </div>
 </div>
diff --git a/public/Template/Settings.html.tpl b/public/Template/Settings.html.tpl
@@ -0,0 +1,54 @@
+<div class="settings-card-container">
+    <div class="mdc-card__horizontal-block">
+        <div class="mdc-card__actions mdc-typography--body2 hint">
+            Sprache und Farbe
+        </div>
+    </div>
+    <div class="mdc-card">
+        <div class="settings-block">
+            <div class="settings-label mdc-list-item">
+                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">language</i>
+                <div class="mdc-list-item__text">Sprache</div>
+            </div>
+            <div class="settings-content mdc-list-item">
+                <div class="mdc-select language" role="listbox" tabIndex="0">
+                    <span class="mdc-select__selected-text">Deutsch</span>
+                    <div class="mdc-simple-menu mdc-select__menu">
+                        <ul class="mdc-list mdc-simple-menu__items">
+                            <li class="mdc-list-item" role="option" id="german" tabIndex="0">
+                                Deutsch
+                            </li>
+                            <li class="mdc-list-item" role="option" id="english" tabIndex="0">
+                                Englisch
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="settings-block">
+            <div class="settings-label mdc-list-item">
+                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">palette</i>
+                Farbschema
+            </div>
+            <div class="settings-content mdc-list-item">
+                <div class="mdc-select color" role="listbox" tabIndex="0">
+                    <span class="mdc-select__selected-text">Standard</span>
+                    <div class="mdc-simple-menu mdc-select__menu">
+                        <ul class="mdc-list mdc-simple-menu__items">
+                            <li class="mdc-list-item" role="option" id="german" tabIndex="0">
+                                Standard
+                            </li>
+                            <li class="mdc-list-item" role="option" id="english" tabIndex="0">
+                                Codefrog
+                            </li>
+                            <li class="mdc-list-item" role="option" id="english" tabIndex="0">
+                                Dunkel
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/public/index.html b/public/index.html
@@ -47,6 +47,71 @@
         .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>

diff --git a/src/Application/Application.js b/src/Application/Application.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Component from '../Shared/LiveJSX';
 import Menu from '../Menu';
 import Router from '../Shared/Router';
+import Settings from '../Settings';
 
 /**
  * Root Application.
@@ -162,6 +163,19 @@ class Application extends Component {
     }
     // Go to route
     nextState.pathname = nextState.history.root + Application.routes[nextState.history.page];
+
+    // Select component
+    switch(nextState.history.page)
+    {
+      case 'settings':
+        nextState.currentComponent = (
+            <Settings/>
+        );
+        break;
+      default:
+        nextState.currentComponent = <div>Index</div>;
+        break;
+    }
   }
 
   /**

diff --git a/src/Application/Application.test.js b/src/Application/Application.test.js
@@ -6,6 +6,7 @@ import {shallow} from 'enzyme';
 import Application from './Application';
 
 jest.mock('../Menu', () => 'Menu');
+jest.mock('../Settings', () => 'Settings');
 jest.mock('../Shared/Router', () => 'Router');
 
 /**

diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import Component from '../Shared/LiveJSX';
+import {MDCSelect} from '@material/select';
+
+/**
+ * Option screen primary component.
+ */
+class Settings extends Component {
+
+  /**
+   * Define template of this component.
+   * @returns {string}
+   */
+  static get template() {
+    return '/Template/Settings.html.tpl';
+  }
+
+  onTemplateMounted(domNode) {
+    const select = new MDCSelect(domNode.querySelector('.mdc-select.language'));
+    select.listen('MDCSelect:change', () => {
+      console.log(`Selected "${select.selectedOptions[0].textContent}" at index ${select.selectedIndex} ` +
+            `with value "${select.value}"`);
+    });
+    const select2 = new MDCSelect(domNode.querySelector('.mdc-select.color'));
+    select2.listen('MDCSelect:change', () => {
+      console.log(`Selected "${select2.selectedOptions[0].textContent}" at index ${select2.selectedIndex} ` +
+            `with value "${select2.value}"`);
+    });
+  }
+}
+
+
+export default Settings;
diff --git a/src/Settings/index.js b/src/Settings/index.js
@@ -0,0 +1,6 @@
+import Settings from './Settings';
+
+export default Object.assign(
+  Settings,
+  {}
+);