From 5537910a056ca141fe6a848aee8d1f740cfb78a8 Mon Sep 17 00:00:00 2001
From: sveisvei <sveinung.rosaker@gmail.com>
Date: Sat, 10 Dec 2016 13:11:05 +0100
Subject: [PATCH] switch up selected strategies

---
 .../feature/form/strategies-list.jsx          |  2 +-
 .../feature/form/strategy-configure.jsx       | 47 ++++++++++++++-----
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/feature/form/strategies-list.jsx b/frontend/src/component/feature/form/strategies-list.jsx
index 5357f878f6..d62e049dab 100644
--- a/frontend/src/component/feature/form/strategies-list.jsx
+++ b/frontend/src/component/feature/form/strategies-list.jsx
@@ -31,7 +31,7 @@ class StrategiesList extends React.Component {
                 strategyDefinition={strategies.find(s => s.name === strat.name)} />
         ));
         return (
-            <div>
+            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                 {blocks}
             </div>
         );
diff --git a/frontend/src/component/feature/form/strategy-configure.jsx b/frontend/src/component/feature/form/strategy-configure.jsx
index d3111c9719..e76dace88c 100644
--- a/frontend/src/component/feature/form/strategy-configure.jsx
+++ b/frontend/src/component/feature/form/strategy-configure.jsx
@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { Textfield, Button }  from 'react-mdl';
+import { Textfield, Button, Card, CardTitle, CardText, CardActions, CardMenu, IconButton }  from 'react-mdl';
 
 class StrategyConfigure extends React.Component {
 
@@ -28,9 +28,14 @@ class StrategyConfigure extends React.Component {
 
     renderInputFields (strategyDefinition) {
         if (strategyDefinition.parametersTemplate) {
-            return Object.keys(strategyDefinition.parametersTemplate).map(field => (
+            const keys = Object.keys(strategyDefinition.parametersTemplate);
+            if (keys.length === 0) {
+                return null;
+            }
+            return keys.map(field => (
                 <Textfield
                     floatingLabel
+                    rows={2}
                     style={{ width: '100%' }}
                     key={field}
                     name={field}
@@ -40,6 +45,7 @@ class StrategyConfigure extends React.Component {
                 />
             ));
         }
+        return null;
     }
 
     render () {
@@ -52,19 +58,34 @@ class StrategyConfigure extends React.Component {
             );
         }
 
-        const inputFields = this.renderInputFields(this.props.strategyDefinition) || [];
+        const inputFields = this.renderInputFields(this.props.strategyDefinition);
+
+        const { name } = this.props.strategy;
 
         return (
-            <div style={{ padding: '5px 15px', backgroundColor: '#f7f8ff', marginBottom: '10px' }}>
-                <h6>
-                    <strong>{this.props.strategy.name} </strong>
-                    (<a style={{ color: '#ff4081' }} onClick={this.handleRemove} href="#remove-strat">remove</a>)
-                </h6>
-                <small>{this.props.strategyDefinition.description}</small>
-                <div>
-                    {inputFields}
-                </div>
-            </div>
+            <Card shadow={0} style={{
+                flex: '1',
+                minWidth: '300px',
+                maxWidth: '100%',
+                // flexBasis: '1',
+                margin: '5px 20px 15px 0px',
+            }}>
+                <CardTitle style={{ color: '#fff', height: '65px', background: '#607d8b' }}>
+                    { name }
+                </CardTitle>
+                <CardText>
+                    {this.props.strategyDefinition.description}
+                </CardText>
+                {
+                    inputFields && <CardActions border >
+                        {inputFields}
+                    </CardActions>
+                }
+
+                <CardMenu style={{ color: '#fff' }}>
+                    <IconButton name="delete" onClick={this.handleRemove} />
+                </CardMenu>
+            </Card>
         );
     }
 }