Merge pull request #25 from yetu/feature/use-grid-layout

Feature/use grid layout

public/app/app.jsx

@@ -17,26 +17,15 @@ var NotFoundRoute = Router.NotFoundRoute;
 var Redirect = Router.Redirect;
 var Link = Router.Link;
 
-var MainScreen = require('./screens/main').MainScreen;
-var DevicesRegion = require('./screens/main').DevicesRegion;
-var SettingsRegion = require('./screens/main').SettingsRegion;
-
-var ControlCenter = React.createClass({
-  render: function () {
-    return (
-      <RouteHandler/>
-    )
-  }
-});
+var MainScreen = require('./screens/main');
+var DevicesRegion = require('./screens/main/sections/devices');
+var SettingsRegion = require('./screens/main/sections/settings');
 
 var routes = (
-  <Route path="/" handler={ControlCenter}>
-    <Route name="main" handler={MainScreen}>
-      <Route name="settings" handler={SettingsRegion}/>
-      <Route name="devices" handler={DevicesRegion}/>
-      <Redirect from="/" to="devices"/>
-    </Route>
-    <Redirect from="/" to="main"/>
+  <Route path="/" handler={MainScreen}>
+    <Route name="settings" handler={SettingsRegion}/>
+    <Route name="devices" handler={DevicesRegion}/>
+    <Redirect from="/" to="devices"/>
   </Route>
 );
 

public/app/project-setup/theme/_base.scss

@@ -1,6 +1,8 @@
+// Items should not be rearranged as the order has implications
+@import "foundation/components/global";
 @import "foundation/components/type";
 @import "foundation/components/grid";
-@import "foundation/components/side-nav";
 @import "foundation/components/buttons";
 @import "foundation/components/panels";
 @import "foundation/components/icon-bar";
+@import "foundation/components/visibility";

public/app/project-setup/theme/variables/_base.scss

@@ -6,4 +6,10 @@ $include-html-global-classes: true;
 
 // this is used for Headers
 $include-html-type-classes: true;
-$include-html-grid-classes: true;
+
+$include-html-grid-classes: false;
+
+// this is used as extensions for sass-based styles
+$include-html-visibility-classes: true;
+
+$include-html-icon-bar-classes: true;

public/app/project-setup/theme/variables/_grid.scss

@@ -1,5 +1,5 @@
 @import "foundation/functions";
 
-$row-width: rem-calc(1000);
+$row-width: 1000px;
 $total-columns: 20;
 $column-gutter: rem-calc(0);

public/app/screens/main/main-screen.jsx

@@ -3,35 +3,40 @@ var React = require("react");
 var Router = require('react-router');
 var RouteHandler = Router.RouteHandler;
 
-var Navigation = require('common/regions/navigation');
-var navigationStore = require('stores/navigation')
+var Navigation = require('./navigation');
+var navigationStore = require('stores/navigation');
+var StyleMixin = require('mixins/style-mixin');
 
 var style = require("./style.scss");
 
 var MainScreen = React.createClass({
-
-    getInitialState: function() {
-        return {
-            navItems: navigationStore.getItems()
-        }
-    },
+  mixins: [StyleMixin(require('./style.scss'))],
 
-	render: function () {
-		return (
-			<div className="main-screen">
-				<div className="main-screen__navigation">
-					<Navigation items={this.state.navItems}/>
-				</div>
-				<div className="main-screen__content">
-					<RouteHandler/>
-				</div>
-			</div>
-		)
-	}
+  getInitialState: function () {
+    return {
+      navItems: navigationStore.getItems()
+    }
+  },
+
+  render: function () {
+    var navigation = <Navigation items={this.state.navItems} orientation="medium-vertical small-horizontal"/>;
+
+    return (
+      <div className="main-screen">
+        <div className="main-screen__top-row main-screen--visible-for-small-only">
+          {navigation}
+        </div>
+        <div className="main-screen__content-row">
+          <div className="main-screen__sidebar-column main-screen--hidden-for-small">
+            {navigation}
+          </div>
+          <div className="main-screen__content-column">
+            <RouteHandler/>
+          </div>
+        </div>
+      </div>
+    )
+  }
 });
 
-module.exports = {
-	MainScreen: MainScreen,
-	DevicesRegion: require('./devices'),
-	SettingsRegion: require('./settings')
-};
+module.exports = MainScreen;

public/app/screens/main/navigation/navigation.jsx

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react'),
+  Link = require('react-router').Link,
+  StyleMixin = require('mixins/style-mixin');
+
+var Navigation = React.createClass({
+  mixins: [StyleMixin(require("./style.scss"))],
+  render: function () {
+    // TODO: Use mixins instead of CSS classes
+    // TODO: Pass number of elements to mixin instead of specifying class name
+    var classes = "cc_navigation icon-bar two-up " + this.props.orientation;
+
+    var items = this.props.items.map(function (item, i) {
+      return (
+        <Link to={item.linkTo} key={i} className="cc_navigation__link item">
+          <label>{item.title}</label>
+        </Link>
+      );
+    });
+
+    return (
+      <div className={classes}>
+        {items}
+      </div>
+    );
+  }
+});
+
+module.exports = Navigation;

public/app/screens/main/navigation/style.scss

@@ -0,0 +1,12 @@
+@import "theme";
+
+.cc_navigation {
+  @include icon-bar();
+
+  .cc_navigation__link {
+    // .active is applied to selected link by foundation automatically
+    &.active {
+      font-weight: bold;
+    }
+  }
+}

public/app/screens/main/sections/devices/device/device.jsx

@@ -0,0 +1,19 @@
+'use strict';
+var React = require('react');
+var StyleMixin = require('mixins/style-mixin');
+
+var Device = React.createClass({
+  mixins: [StyleMixin(require('./style.scss'))],
+  render: function () {
+    return (
+      <div className="cc-devices__device row">
+        <div className="cc-devices__device--title small-6 column">{this.props.device.title}</div>
+        <div className="cc-devices__device--type small-6 column">{this.props.device.type}</div>
+        <div className="cc-devices__device--control small-4 column">Control</div>
+        <div className="cc-devices__device--state small-4 column">{this.props.device.state}</div>
+      </div>
+    );
+  }
+});
+
+module.exports = Device;

public/app/screens/main/sections/devices/device/style.scss

@@ -0,0 +1,10 @@
+@import "theme";
+
+.cc-devices {
+  .cc-devices__device {
+    .cc-devices__device--title {
+      font-weight: bold;
+
+    }
+  }
+}

public/app/screens/main/devices/device/test/device.spec.jsx → public/app/screens/main/sections/devices/device/test/device.spec.jsx

@@ -1,4 +1,4 @@
-var Device = require('screens/main/devices/device/device.jsx');
+var Device = require('../device.jsx');
 
 var React = require('react/addons'),
 	TestUtils = React.addons.TestUtils;

public/app/screens/main/devices/devices.jsx → public/app/screens/main/sections/devices/devices.jsx

@@ -7,11 +7,14 @@ var Room = require('./room');
 var roomStore = require('stores/room');
 var roomActions = require('actions/room');
 
-require('./style.scss');
+var StyleMixin = require('mixins/style-mixin');
 
 // TODO: Rename to DevicesSection
 var DeviceRegion = React.createClass({
-    mixins: [Reflux.connect(roomStore, "rooms")],
+    mixins: [
+      Reflux.connect(roomStore, "rooms"),
+      StyleMixin(require('./style.scss'))
+    ],
 
     getInitialState: function() {
         return {rooms: roomStore.getRooms()};

public/app/screens/main/devices/room/room.jsx → public/app/screens/main/sections/devices/room/room.jsx

@@ -1,7 +1,9 @@
 'use strict';
 
 var React = require('react');
-var Device = require('screens/main/devices/device/index');
+var Device = require('../device');
+
+require('./style.scss');
 
 var Room = React.createClass({
     render: function () {

public/app/screens/main/style.scss

@@ -2,12 +2,38 @@
 
 .main-screen {
   @include grid-row();
+  height: 100%;
+}
+
+.main-screen__top-row-small-only {
+  @include grid-row();
+}
+
+.main-screen__content-row {
+  @include grid-row();
+  height: 100%;
+}
 
-  .main-screen__navigation {
-    @include grid-column(4);
-  }
 
-  .main-screen__content {
-    @include grid-column(8);
+.main-screen__sidebar-column {
+  @include grid-column(6);
+  height: 100%;
+}
+
+.main-screen__content-column {
+  @include grid-column(20);
+  background-color: $shade-gray;
+  height: 100%;
+
+  @media #{$medium-up} {
+    @include grid-column(14);
   }
-}
+}
+
+.main-screen--hidden-for-small {
+  @extend .hide-for-small-only;
+}
+
+.main-screen--visible-for-small-only{
+  @extend .visible-for-small-only
+}

public/app/stores/room/room-store.js

@@ -7,11 +7,11 @@ var roomActions = require('actions/room');
 
 var _rooms = [
     {title: 'Living room', devices: [
-        {title: 'yetu Home Gateway'},
-        {title: 'Nest'}
+        {title: 'yetu Home Gateway', type: 'Home Gateway', state: 'connected'},
+        {title: 'Nest', type: 'Thermostat', state: 'not conn.'}
     ]},
     {title: 'Bed room', devices: [
-        {title: 'Nest'}
+        {title: 'Nest', type: 'Thermostat', state: 'connected'}
     ]},
     {title: 'Bath room', devices: []}
 ];