Permalink
Browse files

Prototype Settings Screen

  • Loading branch information...
alexjstubbs committed Apr 12, 2018
1 parent cbbdeba commit 918eb786814a36cd781b34d93a95964130b4519d
View
@@ -3,6 +3,7 @@ import Header from './components/Header';
import ScreenDashboard from './components/ScreenDashboard';
import ScreenCommunity from './components/ScreenCommunity';
import ScreenTools from './components/ScreenTools';
import ScreenSettings from './components/ScreenSettings';
import ScreenNext from './components/ScreenNext';
import ScreenPrev from './components/ScreenPrev';
import navigation from './client/io-keyboard-events.js';
@@ -21,7 +22,8 @@ class App extends Component {
this.screens = {
0: <ScreenDashboard />,
1: <ScreenCommunity />,
2: <ScreenTools />
2: <ScreenTools />,
3: <ScreenSettings />
}
}
@@ -77,7 +79,7 @@ class App extends Component {
{screen}
</div>
{this.state.screen != 2 ?
{this.state.screen != 3 ?
<div className="one column nopadding-nomargin">
<ScreenNext />
</div>
@@ -59,6 +59,9 @@
.h-40-vh {
height: 40vh; }
.h-45-vh {
height: 45vh; }
.h-50-vh {
height: 50vh; }
@@ -83,11 +83,14 @@ $green: #1EFB58;
height: 35vh;
}
.h-40-vh {
height: 40vh;
}
.h-45-vh {
height: 45vh;
}
.h-50-vh {
height: 50vh;
}
@@ -0,0 +1,21 @@
import React from 'react';
const Components = {
NavBlockExplorer: function NavBlockExplorer(props) {
return (
<div data-nav-column="0" data-nav-row="0" className="nav-item navigation-button h-25-vh twelve columns">
<h4 className="nopadding-nomargin">Audio</h4>
<span className="mute nopadding-nomargin">Configure your systems audio</span>
</div>
);
}
}
function NavBlockExplorer() {
return <Components.NavBlockExplorer />;
}
export default NavBlockExplorer;
@@ -0,0 +1,21 @@
import React from 'react';
const Components = {
NavBlockExplorer: function NavBlockExplorer(props) {
return (
<div data-nav-column="0" data-nav-row="2" className="nav-item navigation-button h-25-vh twelve columns">
<h4 className="nopadding-nomargin">Input</h4>
<span className="mute nopadding-nomargin">Configure your gamepads/keyboard</span>
</div>
);
}
}
function NavBlockExplorer() {
return <Components.NavBlockExplorer />;
}
export default NavBlockExplorer;
@@ -0,0 +1,21 @@
import React from 'react';
const Components = {
NavBlockExplorer: function NavBlockExplorer(props) {
return (
<div data-nav-column="1" data-nav-row="1" className="nav-item navigation-button h-25-vh twelve columns">
<h4 className="nopadding-nomargin">Reboot</h4>
<span className="mute nopadding-nomargin">Reboot Your System</span>
</div>
);
}
}
function NavBlockExplorer() {
return <Components.NavBlockExplorer />;
}
export default NavBlockExplorer;
@@ -0,0 +1,21 @@
import React from 'react';
const Components = {
NavBlockExplorer: function NavBlockExplorer(props) {
return (
<div data-nav-column="1" data-nav-row="0" className="nav-item navigation-button h-45-vh twelve columns">
<h4 className="nopadding-nomargin">Themes</h4>
<span className="mute nopadding-nomargin">Change ignitions look and feel</span>
</div>
);
}
}
function NavBlockExplorer() {
return <Components.NavBlockExplorer />;
}
export default NavBlockExplorer;
@@ -0,0 +1,21 @@
import React from 'react';
const Components = {
NavBlockExplorer: function NavBlockExplorer(props) {
return (
<div data-nav-column="0" data-nav-row="1" className="nav-item navigation-button h-20-vh twelve columns">
<h4 className="nopadding-nomargin">Video</h4>
<span className="mute nopadding-nomargin">Configure Visual Settings</span>
</div>
);
}
}
function NavBlockExplorer() {
return <Components.NavBlockExplorer />;
}
export default NavBlockExplorer;
@@ -4,7 +4,7 @@ const Components = {
NavBlockExplorer: function NavBlockExplorer(props) {
return (
<div data-nav-column="1" data-nav-row="0" className="nav-item navigation-button h-75-vh twelve columns">
<div data-nav-column="0" data-nav-row="0" className="nav-item navigation-button h-75-vh twelve columns">
<h4 className="nopadding-nomargin">Web Browser</h4>
<span className="mute nopadding-nomargin">Browse your favorite websites</span>
</div>
@@ -0,0 +1,34 @@
import React, { Component } from 'react';
import NavBlockAudio from './NavBlockAudio';
import NavBlockVideo from './NavBlockVideo';
import NavBlockInput from './NavBlockInput';
import NavBlockThemes from './NavBlockThemes';
import NavBlockReboot from './NavBlockReboot';
class ScreenDashboard extends Component {
render() {
return (
<div data-screen="ScreenSettings" className="twelve columns nopadding-nomargin">
<div className="content">
<div className="six columns h-80-vh">
<NavBlockAudio />
<NavBlockVideo />
<NavBlockInput />
</div>
<div className="six columns h-80-vh">
<NavBlockThemes />
<NavBlockReboot />
</div>
</div>
</div>
);
}
}
export default ScreenDashboard;

0 comments on commit 918eb78

Please sign in to comment.