Merge branch 'master' of https://bitbucket.org/ivandiazwm/os4-react

README.md

@@ -1,6 +1,21 @@
 OpenSupports v4.0
 ============
 
+### Getting up and running FRONT-END
+0. update `sudo apt-get update`
+1. Clone this repo
+2. Install node 4.x version
+    `sudo apt-get install curl`
+    `curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -`
+    `sudo apt-get install -y nodejs`
+3. Install npm `sudo apt-get install npm`
+4. Install gulp `sudo npm install -g gulp`
+5. Go to repo `cd os4-react`
+6. Install dependences `sudo npm install`
+7. Rebuild node-sass `sudo npm rebuild node-sass`
+8. Run `gulp dev`
+9. Go to the main app: `http://localhost:3000/app` or the component demo `http://localhost:3000/demo`
+
 ### Getting up and running
 
 1. [Create MySQL Database](#markdown-header-create-mysql-database)

src/app/main/main-layout-header.js

@@ -5,6 +5,7 @@ import CommonActions      from 'actions/common-actions';
 
 import Button             from 'core-components/button';
 import DropDown           from 'core-components/drop-down';
+import Icon               from 'core-components/icon';
 
 var languageList = ['English', 'Spanish', 'Portuguese', 'German', 'Turkish', 'Indian'];
 var codeLanguages = {
@@ -35,7 +36,7 @@ var MainLayoutHeader = React.createClass({
             return {
                 content: (
                     <span>
-                        <img className="language-icon" src={`../images/icons/${codeLanguages[item]}.png`} />{item}
+                        <Icon name={codeLanguages[item]} />{item}
                     </span>
                 )
             };

src/core-components/drop-down.js

@@ -4,7 +4,6 @@ import _                  from 'lodash';
 import {Motion, spring}   from 'react-motion';
 
 import callback           from 'lib/callback';
-import getIcion           from 'lib/callback';
 
 var DropDown = React.createClass({
 
@@ -44,7 +43,7 @@ var DropDown = React.createClass({
         return {
             defaultStyle: closedStyle,
             style: (this.state.opened) ? openedStyle : closedStyle
-        }
+        };
     },
 
     render() {

src/core-components/icon.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+var Icon = React.createClass({
+
+    propTypes: {
+        name: React.PropTypes.string.isRequired
+    },
+
+    render() {
+        return (
+            <img className="language-icon" src={`../images/icons/${this.props.name}.png`} />
+        );
+    }
+
+});
+
+export default Icon;