fixed more layout to new design #153

2024-12-28 00:06:53 +01:00 · 2016-09-30 14:29:51 +02:00 · 2016-09-30 14:29:51 +02:00 · 9282818489
commit 9282818489
parent 5d10c939c8
9 changed files with 121 additions and 50 deletions
--- a/package.json
+++ b/package.json
@ -34,6 +34,7 @@
  },
  "dependencies": {},
  "devDependencies": {
+    "babel-eslint": "^7.0.0",
    "eslint": "^3.4.0",
    "eslint-config-finn": "1.0.0-alpha.11",
    "eslint-config-finn-react": "^1.0.0-alpha.2",
--- a/packages/unleash-frontend-next/index.html
+++ b/packages/unleash-frontend-next/index.html
@ -1,7 +1,7 @@
 <!doctype html>
 <html>
  <head>
-    <title>Unleash UI</title>
+    <title>Unleash Admin</title>
    <link rel="stylesheet" href="/static/bundle.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
--- a/packages/unleash-frontend-next/src/.eslintrc
+++ b/packages/unleash-frontend-next/src/.eslintrc
@ -1,4 +1,5 @@
 {
+    "parser": "babel-eslint",
    "extends": [
        "finn",
        "finn-react",
@ -8,5 +9,14 @@
        "browser": true,
        "commonjs": true,
 	    "es6": true
+    },
+    "parserOptions": {
+        "ecmaVersion": 7,
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "classes":true,
+            "spread":true,
+            "restParams": true
+        }
    }
 }
--- a/packages/unleash-frontend-next/src/App.jsx
+++ b/packages/unleash-frontend-next/src/App.jsx
@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Layout, Panel, NavDrawer, AppBar, IconButton } from 'react-toolbox';
+import { Layout, Panel, NavDrawer, AppBar } from 'react-toolbox';
 import style from './style';

 import Navigation from './Navigation';
@ -17,9 +17,7 @@ export default class App extends Component {
    render () {
        return (
            <div className={style.container}>
-                <AppBar>
-                    <IconButton icon="menu" onClick={ this.toggleDrawerActive }/>
-                </AppBar>
+                <AppBar title="Unleash Admin" leftIcon="menu" onLeftIconClick={this.toggleDrawerActive} />
                <Layout>
                    <NavDrawer active={this.state.drawerActive} permanentAt="sm" style={{ width: '200px' }}>
                        <Navigation />
--- a/packages/unleash-frontend-next/src/Navigation.jsx
+++ b/packages/unleash-frontend-next/src/Navigation.jsx
@ -1,19 +1,32 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router';
 import { ListSubHeader, List, ListItem, ListDivider } from 'react-toolbox';

 export default class UnleashNav extends Component {
+    static contextTypes = {
+        router: React.PropTypes.object,
+    }
+
    render () {
+        const createListItem = (path, caption) =>
+            <ListItem to={this.context.router.createHref(path)} caption={caption}
+                className={this.context.router.isActive(path) ? 'active' : 'inactive'} />;
+
        return (
                <List selectable ripple>
-                    <Link to="/"><ListItem selectable className="active" caption="Feature Toggles" /></Link>
-                    <Link to="/strategies"><ListItem selectable caption="Strategies" /></Link>
-                    <Link to="/history"><ListItem selectable caption="Event History" /></Link>
-                    <Link to="/archive"><ListItem selectable caption="Archive" /></Link>
+                    {createListItem('/features', 'Feature Toggles')}
+                    {createListItem('/strategies', 'Strategies')}
+                    {createListItem('/history', 'Event History')}
+                    {createListItem('/archive', 'Archived Toggles')}
+
                    <ListDivider />
+
                    <ListSubHeader Resources/>
-                    <Link to="/archive"><ListItem selectable caption="Documentation" /></Link>
-                    <a href="https://github.com/finn-no/unleash/" target="_blank"><ListItem selectable caption="GitHub" /></a>
+
+                    {createListItem('/docs', 'Documentation')}
+                    <a href="https://github.com/finn-no/unleash/" target="_blank">
+                        <ListItem caption="GitHub" />
+                    </a>
+
                    <ListDivider />
                    <ListItem selectable={false} ripple="false">
                        <p>A product by <a href="https://finn.no" target="_blank">FINN.no</a></p>
--- a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
+++ b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
@ -1,36 +1,65 @@
-import { React, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { Input, Switch, Button } from 'react-toolbox';
 import { addFeatureToggle } from '../../store/actions';


-let AddFeatureToggle = ({ dispatch }) => {
-    let input;
+class AddFeatureToggle extends React.Component {
+    constructor () {
+        super();
+        this.state = { name: '', description: '', enabled: false };
+    }

-    return (
-    <div>
-      <form onSubmit={e => {
-          e.preventDefault();
-          if (!input.value.trim()) {
-              return;
-          }
-          dispatch(addFeatureToggle(input.value));
-          input.value = '';
-      }}>
-        <input ref={node => {
-            input = node;
-        }} />
-        <button type="submit">
-          Add Feature Toggle.
-        </button>
-      </form>
-    </div>
-  );
-};
-AddFeatureToggle = connect()(AddFeatureToggle);
+    static propTypes () {
+        return {
+            dispatch: PropTypes.func.isRequired,
+        };
+    }

-AddFeatureToggle.propTypes = {
-    dispatch: PropTypes.func.isRequired,
-};
+    onSubmit = (evt) => {
+        evt.preventDefault();
+        this.props.dispatch(addFeatureToggle(this.state.name, this.state.enabled));
+    };

+    handleChange = (key, value) => {
+        const change = {};
+        change[name] = value;

-export default AddFeatureToggle;
+        const newState = Object.assign({}, this.state, change);
+        this.setState(newState);
+    };
+
+    render () {
+        return (
+            <div>
+                <form onSubmit={this.onSubmit}>
+                    <Input
+                        type="text"
+                        label="Name"
+                        name="name"
+                        value={this.state.name}
+                        onChange={this.handleChange.bind(this, 'name')} />
+                    <Input
+                        type="text"
+                        multiline label="Description"
+                        value={this.state.description}
+                        onChange={this.handleChange.bind(this, 'description')} />
+
+                    <br />
+
+                    <Switch
+                        checked={this.state.enabled}
+                        label="Enabled"
+                        onChange={this.handleChange.bind(this, 'enabled')} />
+
+                    <br />
+                    <Button type="submit"  raised primary>
+                        Create Feature Toggle.
+                    </Button>
+                </form>
+            </div>
+        );
+    }
+}
+
+export default connect()(AddFeatureToggle);
--- a/packages/unleash-frontend-next/src/index.jsx
+++ b/packages/unleash-frontend-next/src/index.jsx
@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route, IndexRoute, hashHistory } from 'react-router';
+import { Router, Route, IndexRedirect, hashHistory } from 'react-router';
 import { Provider } from 'react-redux';
 import thunkMiddleware from 'redux-thunk';
 import { createStore, applyMiddleware } from 'redux';
@ -9,6 +9,7 @@ import store from './store';
 import App from './App';

 import Features from './page/features';
+import CreateFeatureToggle from './page/features/create';
 import Strategies from './page/strategies';
 import HistoryPage from './page/history';
 import Archive from './page/archive';
@ -24,7 +25,9 @@ ReactDOM.render(
    <Provider store={unleashStore}>
        <Router history={hashHistory}>
            <Route path="/" component={App}>
-                <IndexRoute component={Features} />
+                <IndexRedirect to="/features" />
+                <Route path="/features" component={Features} />
+                <Route path="/features/create" component={CreateFeatureToggle} />
                <Route path="/strategies" component={Strategies} />
                <Route path="/history" component={HistoryPage} />
                <Route path="/archive" component={Archive} />
--- a/packages/unleash-frontend-next/src/page/features/create.js
+++ b/packages/unleash-frontend-next/src/page/features/create.js
@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import AddFeatureToggle from '../../component/feature/AddFeatureToggle';
+
+export default class Features extends Component {
+    render () {
+        return (
+            <div>
+                <h1>Create Feature Toggle</h1>
+                <AddFeatureToggle />
+            </div>
+        );
+    }
+};
--- a/packages/unleash-frontend-next/src/page/features/index.js
+++ b/packages/unleash-frontend-next/src/page/features/index.js
@ -1,17 +1,21 @@
 import React, { Component } from 'react';
 import FeatureListContainer from '../../component/feature/FeatureListContainer';
-import AddFeatureToggle from '../../component/feature/AddFeatureToggle';
+import { Button } from 'react-toolbox';
+

 export default class Features extends Component {
+    static contextTypes = {
+        router: React.PropTypes.object,
+    }
+
    render () {
+        const createHref = this.context.router.createHref('/features/create');
        return (
-                <div>
-                    <h1>Feature Toggles</h1>
-                    <AddFeatureToggle />
-                    <FeatureListContainer />
-
-                </div>
-
+            <div>
+                <h1>Feature Toggles</h1>
+                <Button href={createHref} icon="add" label="Create feature toggle"/>
+                <FeatureListContainer />
+            </div>
        );
    }
 };