senaduka/old-tellall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new design

Browse Source
This commit is contained in:
GotPPay
2017-12-01 11:03:48 +01:00
parent 4f36fc7738
commit 0e193fa5a8
14 changed files with 3827 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/.gitignore vendored
View File

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

15
web/package.json
View File

@@ -3,14 +3,23 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react": "^16.2.0",
"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"
}
}

9
web/src/App.js
View File

@@ -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){
this.setState({selectedIntent:selectedIntent});
handleIntentClick(selectedIntent, index){
this.setState({selectedIntent:selectedIntent, selectedIndex: index});
}
handleDeleteIntentClick(selectedIntent){

32
web/src/components/IntentDetails.js
View File

@@ -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>
<button onClick={()=>{this.deleteQuestion(question)}}>Del</button>
<TextField
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 onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete</button>
<button onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}}>Save</button>
<Button style={{float:'left', marginLeft: '25px'}} flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete intent</Button>
<Button style={{float:'left', marginLeft: '22%'}} flat primary swapTheming onClick={this.addQuestion}>Add question</Button>
<Button style={{float:'left', marginLeft: '20px'}} flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}}>Save</Button>
</div>
);
}

16
web/src/components/IntentItem.js
View File

@@ -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>
);
}
}

16
web/src/components/IntentList.js
View File

@@ -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>
);
}

27
web/src/css/App.css
View File

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

17
web/src/css/App.scss Normal file
View File

@@ -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;
}

45
web/src/css/Intent.css
View File

@@ -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-bottom: 1px;
background-color: blue;
}
margin-top: 2px;
margin-bottom: 2px;
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; }

54
web/src/css/Intent.scss Normal file
View File

@@ -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;
}

5
web/src/css/_globals.scss Normal file
View File

@@ -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;

3628
web/src/css/index.css
View File

File diff suppressed because it is too large Load Diff

9
web/src/css/index.scss Normal file
View File

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

8
web/src/index.js
View File

@@ -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();