new design

web/.gitignore

@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+src/**/*.css

web/package.json

@@ -3,14 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.1.1",
+    "react": "^16.2.0",
-    "react-dom": "^16.1.1",
+    "react-dom": "^16.2.0",
+    "react-md": "^1.2.8",
     "react-scripts": "1.0.17"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "build-css": "node-sass-chokidar --include-path ./node_modules src/ -o src/",
+    "watch-css-mine": "npm run build-css && npm run build-css --watch --recursive",
+    "watch-css": "nodemon -e scss -x \"npm run watch-css-mine\"",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "node-sass": "^4.7.2",
+    "nodemon": "^1.12.1"
   }
 }

web/src/App.js

@@ -10,7 +10,7 @@ class App extends Component {
   constructor(props){
     super(props);
 
-    this.state={allIntents:[], selectedIntent: {questions:[''],answer:''}};
+    this.state={allIntents:[], selectedIntent: {questions:[''],answer:''}, selectedIndex:-1};
 
     getAllIntents().then(l=> l.text()).then(result=>{
       this.setState({allIntents: JSON.parse(result), selectedIntent: this.state.selectedIntent})
@@ -30,7 +30,8 @@ class App extends Component {
         </div>
         <IntentList allIntents={this.state.allIntents} 
                     onIntentClick={this.handleIntentClick}
-                    onAddIntentClick={this.handleAddIntentClick}>
+                    onAddIntentClick={this.handleAddIntentClick}
+                    selectedIndex={this.state.selectedIndex}>
         </IntentList>
         <IntentDetails  selectedIntent={this.state.selectedIntent}
                         onDeleteIntentClick={this.handleDeleteIntentClick}
@@ -40,8 +41,8 @@ class App extends Component {
     );
   }
 
-  handleIntentClick(selectedIntent){
+  handleIntentClick(selectedIntent, index){
-    this.setState({selectedIntent:selectedIntent});
+    this.setState({selectedIntent:selectedIntent, selectedIndex: index});
   }
 
   handleDeleteIntentClick(selectedIntent){

web/src/components/IntentDetails.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import {Button, SVGIcon, TextField} from 'react-md';
 import '../css/Intent.css'
 
 class IntentDetails extends Component {
@@ -18,26 +19,41 @@ class IntentDetails extends Component {
   render() {
     return (
       <div className="IntentDetails">
-        <p> Questions </p>
+        <h5 style={{marginTop:'20px', marginLeft: '30px', float: 'left'}}>Questions</h5>
         {
           this.state.intent.questions.map((question, index)=>{
             return (
               <div key={index} className="QuestionBox">
-                <input value={question}></input>
+                <TextField
-                <button onClick={()=>{this.deleteQuestion(question)}}>Del</button>
+                  id="floating-center-title"
+                  lineDirection="center"
+                  placeholder="Question"
+                  className="md-cell md-cell--bottom"
+                  style={{width:'60%'}}
+                  rightIcon={<SVGIcon onClick={()=>{this.deleteQuestion(question)}}> <path fill="#000000" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/> </SVGIcon>}
+                  value={question}/>
               </div>
             );
           })
         }
-        <p> Answer </p>
+        <br></br>
         {
-          <input value={this.state.intent.answer}></input>
+          <div className="QuestionBox">
+            <TextField
+              id="floating-center-title"
+              lineDirection="center"
+              label="Answer"
+              placeholder="Answer"
+              style={{width:'60%'}}
+              className="md-cell md-cell--bottom"
+              value={this.state.intent.answer}/>
+          </div>
         }
         <br></br>
         <br></br>
-        <button onClick={this.addQuestion}>Add question</button>
+        <Button style={{float:'left', marginLeft: '25px'}} flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete intent</Button>
-        <button onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete</button>
+        <Button style={{float:'left', marginLeft: '22%'}} flat primary swapTheming onClick={this.addQuestion}>Add question</Button>        
-        <button onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}}>Save</button>
+        <Button style={{float:'left', marginLeft: '20px'}} flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}}>Save</Button>
       </div>
     );
   }

web/src/components/IntentItem.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import {Button} from 'react-md';
 import '../css/Intent.css'
 
 class IntentItem extends Component {
@@ -10,10 +11,21 @@ class IntentItem extends Component {
     }
   
     render() {
-        return (
+        /*
-            <div className={false ? 'IntentItem-selected' : 'IntentItem'} onClick={()=>{this.state.onClick(this.state.intent)}}>
+        <div className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'} onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}>
+                <Button className={"IntentItem"} flat swapTheming>OK</Button>
                 <p> {this.state.index+1}. {this.state.intent.questions[0]} </p>
             </div>
+        */
+        return (
+            <div>
+                <Button className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'}
+                        onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}
+                        flat>
+                            {this.state.index+1}. {this.state.intent.questions[0]}
+                </Button>  
+                <br></br>
+            </div>
         );
     }
 }

web/src/components/IntentList.js

@@ -1,34 +1,36 @@
 import React, { Component } from 'react';
-import QuestionItem from './IntentItem';
+import {Button} from 'react-md';
+import IntentItem from './IntentItem';
 import '../css/Intent.css'
 
 class IntentList extends Component {
     constructor (props){
         super(props);
 
-        this.state = {intents: props.allIntents, selected:0, onIntentClick:props.onIntentClick};
+        this.state = {intents: props.allIntents, selectedIndex:props.selectedIndex, onIntentClick:props.onIntentClick};
     }
 
     componentWillReceiveProps(props){
-        this.setState({intents: props.allIntents});
+        this.setState({intents: props.allIntents, selectedIndex: props.selectedIndex, onIntentClick: props.onIntentClick});
     }
 
     render() {
         return (
             <div className="IntentList">
                 <div className="IntentList-title">
-                    <p>Intents</p>
+                    <h3>Intents</h3>
                 </div>
                 {
                     this.state.intents.map((intent,index)=>{
-                    return <QuestionItem 
+                    return <IntentItem 
                                 key={index} intent={intent} index={index} 
+                                selectedIndex={this.props.selectedIndex} 
                                 onClick={this.state.onIntentClick}>
-                            </QuestionItem>
+                            </IntentItem>
                     })
                 }
                 <br></br>
-                <button onClick={this.props.handleAddIntentClick}>Add intent</button>
+                <Button className={"AddIntent"} flat primary swapTheming onClick={this.props.handleAddIntentClick}>Add intent</Button>
             </div>  
         );
     }

web/src/css/App.css

@@ -1,28 +1,13 @@
 .App {
-  text-align: center;
+  text-align: center; }
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
 
 .App-header {
-  background-color: #222;
+  background-color: white;
-  height: 150px;
+  height: 80px;
-  padding: 20px;
+  padding: 20px; }
-  color: white;
-}
 
 .App-title {
-  font-size: 1.5em;
+  font-size: 1.5em; }
-}
 
 .App-intro {
-  font-size: large;
+  font-size: large; }
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}

web/src/css/App.scss

@@ -0,0 +1,17 @@
+.App {
+  text-align: center;
+}
+
+.App-header {
+  background-color:white;
+  height: 80px;
+  padding: 20px;
+}
+
+.App-title {
+  font-size: 1.5em;
+}
+
+.App-intro {
+  font-size: large;
+}

web/src/css/Intent.css

@@ -1,35 +1,44 @@
 /*IntentList and IntentItem CSS*/
-
 .IntentList {
-    max-width: 300px;
   width: 30%;
-    border: 2px solid black;
+  min-height: 9999px;
+  height: 9999px;
   float: left;
-    background-color: gray;
+  background-color: #d5dae2; }
-}
 
 .IntentList-title {
   font-size: 1.5em;
-}
+  height: 70px;
+  padding: 20px;
+  text-align: left; }
+
+.AddIntent {
+  float: right;
+  margin: 12px; }
 
 .IntentItem {
-    margin-top: 1px;
+  margin-top: 2px;
-    margin-bottom: 1px;
+  margin-bottom: 2px;
-    background-color: blue;
+  height: 50px;
-}
+  width: 100%;
+  text-align: left;
+  background-color: #adb0b5; }
 
 .IntentItem-selected {
-    background-color: yellow;
+  margin-top: 2px;
-}
+  margin-bottom: 2px;
-
+  height: 50px;
-
+  width: 100%;
+  text-align: left;
+  background-color: #e8ecf2; }
 
 /*IntentDetails CSS*/
-
 .IntentDetails {
-    border: 2px solid blue;
   float: left;
   width: 70%;
+  min-height: 9999px;
+  height: 9999px;
+  background-color: #e8ecf2; }
 
-
+.QuestionBox {
-}
+  margin: 25px; }

web/src/css/Intent.scss

@@ -0,0 +1,54 @@
+/*IntentList and IntentItem CSS*/
+
+.IntentList{
+    width: 30%;
+    min-height:9999px;
+    height:9999px;
+    float:left;
+    background-color: #d5dae2;
+}
+
+.IntentList-title{
+    font-size: 1.5em;
+    height: 70px;
+    padding: 20px;
+    text-align:left;
+}
+
+.AddIntent{
+    float: right;
+    margin: 12px;
+}
+
+.IntentItem{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    height: 50px;
+    width:100%;
+    text-align:left;
+    background-color: #adb0b5;
+}
+
+.IntentItem-selected{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    height: 50px;
+    width:100%;
+    text-align:left;
+    background-color:#e8ecf2;
+    
+}
+
+/*IntentDetails CSS*/
+
+.IntentDetails{
+    float: left;
+    width: 70%;
+    min-height:9999px;
+    height:9999px;
+    background-color:#e8ecf2;
+}
+
+.QuestionBox{
+    margin:25px;
+}

web/src/css/_globals.scss

@@ -0,0 +1,5 @@
+@import 'react-md/src/scss/react-md';
+
+// Any variable overrides. The following just changes the default theme to use teal and purple.
+$md-primary-color: $md-teal-500;
+$md-secondary-color: $md-purple-a-400;

web/src/css/index.scss

@@ -0,0 +1,9 @@
+@import 'globals';
+
+@include react-md-everything;
+
+
+body {
+  margin: 0;
+  padding: 0;
+}

web/src/index.js

@@ -4,5 +4,13 @@ import './css/index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
+import WebFontLoader from 'webfontloader';
+
+WebFontLoader.load({
+  google: {
+    families: ['Roboto:300,400,500,700', 'Material Icons'],
+  },
+});
+
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();