Feature/1520 Remove custom components

src/components/tools/Background.jsx

@@ -1,15 +1,14 @@
-import '../../less/toolSketch.less';
-
 import React from 'react';
 import { pure } from 'recompose';
+import {Container, Header, Image} from "semantic-ui-react";
 
 export default pure( ({image}) => {
     return (
         <div>
-            <h2>Background</h2>
-            <div className="center-horizontal center-vertical">
-                <img className="sketch-image" src={image}/>
-            </div>
+            <Header as='h2' textAlign='center'>Background</Header>
+            <Container textAlign='center'>
+                <Image src={image}/>
+            </Container>
         </div>
     );
 } );

src/components/tools/Parameters.jsx

@@ -1,95 +1,97 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import {pure} from 'recompose';
 import PropTypes from 'prop-types';
 import {inputType} from '../../inputType';
 
-import '../../less/toolParameters.less';
-import '../../less/input-range.less';
-
 import ParameterSlider from '../../core/parameterSlider';
+import {Button, Grid, Input} from "semantic-ui-react";
 
-const renderParam = (param, handleChange) => {
-    if (!param.inputType) {
-        return (<ParameterSlider key={param.id} handleChange={handleChange} param={param}/>);
-    }
+class Parameters extends React.Component {
 
-    switch (param.inputType) {
-        case inputType.NUMBER:
-            return renderNumber(param, handleChange);
-        case inputType.RADIO_SELECT:
-            return renderRadioSelect(param, handleChange);
-        case inputType.SLIDER:
-            return (<ParameterSlider key={param.id} handleChange={handleChange} param={param}/>);
+    constructor(props) {
+        super(props);
     }
 
-    return null;
-};
-
-const renderNumber = (param, handleChange) => {
-    return (<tr key={param.id} className="parameter">
-        <td className="parameter-label">{param.label}</td>
-        <td>
-            <input name={'parameter_' + param.id + '_value'} type="number" min={param.min} max={param.max}
-                   step={param.stepSize} value={Number(param.value).toFixed(param.decimals)}
-                   onChange={handleChange}/>
-        </td>
-    </tr>);
-};
-
+    renderParam = param => {
+        if (!param.inputType) {
+            return (
+                <ParameterSlider key={param.id} handleChange={this.props.handleChange} param={param}/>
+            );
+        }
 
-const renderRadioOption = (param, option, handleChange) => {
-    return (<label key={option.id}>
-        <input name={'parameter_' + param.id + '_value'} value={option.value} type="radio"
-               checked={param.value === option.value} onChange={handleChange}/> {option.label}
-    </label>);
-};
+        switch (param.inputType) {
+            case inputType.NUMBER:
+                return this.renderNumber(param);
+            case inputType.RADIO_SELECT:
+                return this.renderRadioSelect(param);
+            case inputType.SLIDER:
+                return (<ParameterSlider key={param.id} handleChange={this.props.handleChange} param={param}/>);
+        }
 
-const renderRadioSelect = (param) => {
-    const options = param
-        .options
-        .map(option => {
-            return renderRadioOption(param, option);
+        return null;
+    };
+
+    renderNumber = param => {
+        return (
+            <Grid.Row key={param.id}>
+                <Grid.Column>{param.label}</Grid.Column>
+                <Grid.Column>
+                    <Input name={'parameter_' + param.id + '_value'} type="number" min={param.min} max={param.max}
+                           step={param.stepSize} value={Number(param.value).toFixed(param.decimals)}
+                           onChange={this.props.handleChange}/>
+                </Grid.Column>
+            </Grid.Row>
+        );
+    };
+
+
+    renderRadioOption = (param, option) => {
+        return (
+            <Input name={'parameter_' + param.id + '_value'} value={option.value} type="radio"
+                   checked={param.value === option.value} onChange={this.props.handleChange} label={option.label}/>
+        );
+    };
+
+    renderRadioSelect = (param) => {
+        const options = param
+            .options
+            .map(option => {
+                return this.renderRadioOption(param, option);
+            });
+
+        return (
+            <Grid.Row key={param.id}>
+                <Grid.Column>{param.label}</Grid.Column>
+                <Grid.Column>{options}</Grid.Column>
+            </Grid.Row>
+        );
+    };
+
+    render() {
+        const sortedParameters = this.props.parameters.sort((a, b) => {
+            if (a.order > b.order) {
+                return 1;
+            }
+            return -1;
         });
 
-    return (<tr key={param.id} className="parameter">
-        <td className="parameter-label">{param.label}</td>
-        <td>{options}</td>
-    </tr>);
-};
+        const params = sortedParameters.map(param => {
+            return this.renderParam(param, this.props.handleChange);
+        });
 
-const Parameters = ({parameters, handleChange, handleReset}) => {
-    const sortedParameters = parameters.sort((a, b) => {
-        if (a.order > b.order) {
-            return 1;
-        }
-        return -1;
-    });
-
-    const params = sortedParameters.map(param => {
-        return renderParam(param, handleChange);
-    });
-
-    return (
-        <div className="grid-container">
-            <div className="col stretch parameters-wrapper">
-                <table className="parameters">
-                    <tbody>
-                    {params}
-                    </tbody>
-                </table>
-            </div>
-
-            <div className="col col-rel-0-5">
-                <ul className="nav nav-stacked" role="navigation">
-                    <li>
-                        <button onClick={handleReset} className="button button-accent">Default</button>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    );
-};
+        return (
+            <Grid verticalAlign='middle'>
+                <Grid.Row>
+                    <Grid.Column textAlign='right'>
+                        <Button onClick={this.props.handleReset}>Default</Button>
+                    </Grid.Column>
+                </Grid.Row>
+                {params}
+            </Grid>
+
+        );
+    };
+}
 
 Parameters.propTypes = {
     handleChange: PropTypes.func.isRequired,

src/containers/Navbar.jsx

@@ -1,12 +1,20 @@
-import '../less/navbar.less';
-
-import PropTypes from 'prop-types';
 import React from 'react';
-
-import Icon from '../components/primitive/Icon';
-import {Link} from 'react-router';
+import PropTypes from 'prop-types';
+import {Dropdown, Icon, Menu} from "semantic-ui-react";
+import {Link, withRouter} from 'react-router';
 import {connect} from 'react-redux';
-import {withRouter} from 'react-router';
+
+const styles = {
+    navBar: {
+        borderRadius: 0,
+        padding: '0 101.5px 0 101.5px',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1200
+    }
+};
 
 class NavBar extends React.Component {
 
@@ -36,32 +44,37 @@ class NavBar extends React.Component {
             }
 
             let navElement = (
-                <span className="nav-element" data-active={active}>
+                <Menu.Item
+                    key={index}
+                    active={active}
+                >
                     {l.icon}{l.name}
-                </span>
+                </Menu.Item>
             );
 
             if (l.path) {
                 navElement = (
-                    <Link className="nav-element" to={l.path} data-active={active}>
+                    <Link className="item" to={l.path} data-active={active} key={index}>
                         {l.icon}{l.name}
                     </Link>
                 );
 
                 if (l.path.includes('http')) {
                     navElement = (
-                        <a className="nav-element" href={l.path} target="_blank" data-active={active}>
+                        <a className="item" href={l.path} target="_blank" data-active={active} key={index}>
                             {l.icon}{l.name}
                         </a>
                     );
                 }
             }
 
             return (
-                <li key={index} className="nav-item">
+                //<li key={index} className="nav-item">
+                <div key={index}>
                     {navElement}
                     {l.sub && <ul className="nav-list">{this.renderLinks(l.sub, recursionDepth + 1)}</ul>}
-                </li>
+                </div>
+                //</li>
             );
         });
     }
@@ -71,9 +84,9 @@ class NavBar extends React.Component {
     renderRoleSpecificItems = roles => {
         if (roles.includes('ROLE_ADMIN')) {
             return (
-                <li className="nav-item">
-                    <button className="nav-element" onClick={() => this.historyPushTo('/admin')}>Admin</button>
-                </li>
+                <Dropdown.Item onClick={() => this.historyPushTo('/admin')}>
+                    Admin
+                </Dropdown.Item>
             );
         }
 
@@ -84,35 +97,27 @@ class NavBar extends React.Component {
         const {roles, name} = this.props.user;
         if (userIsLoggedIn) {
             return (
-                <li className="nav-item nav-item-has-children">
-                    <span className="nav-element">
-                        <Icon name="person"/>{name}
-                    </span>
-                    <ul className="nav-list">
+                <Dropdown item text={name}>
+                    <Dropdown.Menu>
                         {this.renderRoleSpecificItems(roles)}
-                        <li className="nav-item">
-                            <button className="nav-element" onClick={() => this.historyPushTo('/credentials')}>Change
-                                password
-                            </button>
-                        </li>
-                        <li className="nav-item">
-                            <button className="nav-element" onClick={() => this.historyPushTo('/profile')}>Profile
-                            </button>
-                        </li>
-                        <li className="nav-item">
-                            <button className="nav-element" onClick={() => this.historyPushTo('/logout')}>Logout
-                            </button>
-                        </li>
-                    </ul>
-                </li>
+                        <Dropdown.Item onClick={() => this.historyPushTo('/credentials')}>
+                            Change password
+                        </Dropdown.Item>
+                        <Dropdown.Item onClick={() => this.historyPushTo('/profile')}>
+                            Profile
+                        </Dropdown.Item>
+                        <Dropdown.Item onClick={() => this.historyPushTo('/logout')}>
+                            Logout
+                        </Dropdown.Item>
+                    </Dropdown.Menu>
+                </Dropdown>
             );
         }
+
         return (
-            <li className="nav-item nav-item-has-children">
-                <span className="nav-element" onClick={() => this.historyPushTo('/login')}>
-                    <Icon name="person"/>Login
-                </span>
-            </li>
+            <Menu.Item onClick={() => this.historyPushTo('/login')}>
+                <Icon name="user"/> Login
+            </Menu.Item>
         );
     }
 
@@ -129,23 +134,14 @@ class NavBar extends React.Component {
         const userIsLoggedIn = this.props.session.apiKey;
 
         return (
-            <header className="navbar-wrapper">
-                <div className="navbar app-width">
-                    <nav className="nav-left">
-                        <ul className="nav-list">
-                            {this.renderLinks(standardLinks)}
-                            {userIsLoggedIn && this.renderLinks(standardLinksAuthenticationRequired.concat(this.props.links))}
-                            {!userIsLoggedIn && this.props.info && this.renderInfo(this.props.info)}
-                        </ul>
-                    </nav>
-                    <nav className="nav-right">
-                        <ul className="nav-list">
-                            {this.renderUserNavigation(userIsLoggedIn)}
-                        </ul>
-                    </nav>
-
-                </div>
-            </header>
+            <Menu inverted style={styles.navBar} color='grey'>
+                {this.renderLinks(standardLinks)}
+                {userIsLoggedIn && this.renderLinks(standardLinksAuthenticationRequired.concat(this.props.links))}
+                {!userIsLoggedIn && this.props.info && this.renderInfo(this.props.info)}
+                <Menu.Menu position='right'>
+                    {this.renderUserNavigation(userIsLoggedIn)}
+                </Menu.Menu>
+            </Menu>
         );
     }
 }