diff --git a/package.json b/package.json index 9811ee7..f2c3510 100644 --- 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 index 980d150..c46fba9 100644 --- a/public/Template/Application.html.tpl +++ b/public/Template/Application.html.tpl @@ -19,13 +19,13 @@ />
+ {this.state.currentComponent} 
                 Root: {this.state.history.root}

                 Page: {this.state.history.page}

                 Path: {this.state.pathname}
- {this.state.currentComponent}
diff --git a/public/Template/Settings.html.tpl b/public/Template/Settings.html.tpl new file mode 100644 index 0000000..0662616 --- /dev/null +++ b/public/Template/Settings.html.tpl @@ -0,0 +1,54 @@ +
+
+
+ Sprache und Farbe +
+
+
+
+
+ +
Sprache
+
+
+
+ Deutsch +
+
    +
  • + Deutsch +
    • +
  • + Englisch +
    • +
+
+
+
+
+
+
+ + Farbschema +
+
+
+ Standard +
+
    +
  • + Standard +
    • +
  • + Codefrog +
    • +
  • + Dunkel +
    • +
+
+
+
+
+
+
diff --git a/public/index.html b/public/index.html index bd2cc80..68609ba 100644 --- 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) + } + } diff --git a/src/Application/Application.js b/src/Application/Application.js index 79f2b39..9c09ffc 100644 --- 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 = ( + + ); + break; + default: + nextState.currentComponent =
Index
; + break; + } } /** diff --git a/src/Application/Application.test.js b/src/Application/Application.test.js index 8dfb828..9c7d4ce 100644 --- 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 new file mode 100644 index 0000000..3b32d5d --- /dev/null +++ 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 new file mode 100644 index 0000000..98a5cdd --- /dev/null +++ b/src/Settings/index.js @@ -0,0 +1,6 @@ +import Settings from './Settings'; + +export default Object.assign( + Settings, + {} +);