Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-01 00:08:27 +01:00
Code Issues Projects Releases Wiki Activity

fixed more layout to new design #153

Browse Source
This commit is contained in:
ivaosthu 2016-09-30 14:29:51 +02:00
parent 5d10c939c8
commit 9282818489
9 changed files with 121 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -34,6 +34,7 @@
}, },
"dependencies": {}, "dependencies": {},
"devDependencies": { "devDependencies": {
"babel-eslint": "^7.0.0",
"eslint": "^3.4.0", "eslint": "^3.4.0",
"eslint-config-finn": "1.0.0-alpha.11", "eslint-config-finn": "1.0.0-alpha.11",
"eslint-config-finn-react": "^1.0.0-alpha.2", "eslint-config-finn-react": "^1.0.0-alpha.2",

2
packages/unleash-frontend-next/index.html
View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Unleash UI</title> <title>Unleash Admin</title>
<link rel="stylesheet" href="/static/bundle.css" /> <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/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

10
packages/unleash-frontend-next/src/.eslintrc
View File

@ -1,4 +1,5 @@
{ {
"parser": "babel-eslint",
"extends": [ "extends": [
"finn", "finn",
"finn-react", "finn-react",
@ -8,5 +9,14 @@
"browser": true, "browser": true,
"commonjs": true, "commonjs": true,
"es6": true "es6": true
},
"parserOptions": {
"ecmaVersion": 7,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"classes":true,
"spread":true,
"restParams": true
}
} }
} }

6
packages/unleash-frontend-next/src/App.jsx
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'; 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 style from './style';
import Navigation from './Navigation'; import Navigation from './Navigation';
@ -17,9 +17,7 @@ export default class App extends Component {
render () { render () {
return ( return (
<div className={style.container}> <div className={style.container}>
<AppBar> <AppBar title="Unleash Admin" leftIcon="menu" onLeftIconClick={this.toggleDrawerActive} />
<IconButton icon="menu" onClick={ this.toggleDrawerActive }/>
</AppBar>
<Layout> <Layout>
<NavDrawer active={this.state.drawerActive} permanentAt="sm" style={{ width: '200px' }}> <NavDrawer active={this.state.drawerActive} permanentAt="sm" style={{ width: '200px' }}>
<Navigation /> <Navigation />

27
packages/unleash-frontend-next/src/Navigation.jsx
View File

@ -1,19 +1,32 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router';
import { ListSubHeader, List, ListItem, ListDivider } from 'react-toolbox'; import { ListSubHeader, List, ListItem, ListDivider } from 'react-toolbox';
export default class UnleashNav extends Component { export default class UnleashNav extends Component {
static contextTypes = {
router: React.PropTypes.object,
}
render () { render () {
const createListItem = (path, caption) =>
<ListItem to={this.context.router.createHref(path)} caption={caption}
className={this.context.router.isActive(path) ? 'active' : 'inactive'} />;
return ( return (
<List selectable ripple> <List selectable ripple>
<Link to="/"><ListItem selectable className="active" caption="Feature Toggles" /></Link> {createListItem('/features', 'Feature Toggles')}
<Link to="/strategies"><ListItem selectable caption="Strategies" /></Link> {createListItem('/strategies', 'Strategies')}
<Link to="/history"><ListItem selectable caption="Event History" /></Link> {createListItem('/history', 'Event History')}
<Link to="/archive"><ListItem selectable caption="Archive" /></Link> {createListItem('/archive', 'Archived Toggles')}
<ListDivider /> <ListDivider />
<ListSubHeader Resources/> <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 /> <ListDivider />
<ListItem selectable={false} ripple="false"> <ListItem selectable={false} ripple="false">
<p>A product by <a href="https://finn.no" target="_blank">FINN.no</a></p> <p>A product by <a href="https://finn.no" target="_blank">FINN.no</a></p>

85
packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
View File

@ -1,36 +1,65 @@
import { React, PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Input, Switch, Button } from 'react-toolbox';
import { addFeatureToggle } from '../../store/actions'; import { addFeatureToggle } from '../../store/actions';
let AddFeatureToggle = ({ dispatch }) => { class AddFeatureToggle extends React.Component {
let input; constructor () {
super();
this.state = { name: '', description: '', enabled: false };
}
return ( static propTypes () {
<div> return {
<form onSubmit={e => { dispatch: PropTypes.func.isRequired,
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);
AddFeatureToggle.propTypes = { onSubmit = (evt) => {
dispatch: PropTypes.func.isRequired, 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);

7
packages/unleash-frontend-next/src/index.jsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; 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 { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk'; import thunkMiddleware from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux'; import { createStore, applyMiddleware } from 'redux';
@ -9,6 +9,7 @@ import store from './store';
import App from './App'; import App from './App';
import Features from './page/features'; import Features from './page/features';
import CreateFeatureToggle from './page/features/create';
import Strategies from './page/strategies'; import Strategies from './page/strategies';
import HistoryPage from './page/history'; import HistoryPage from './page/history';
import Archive from './page/archive'; import Archive from './page/archive';
@ -24,7 +25,9 @@ ReactDOM.render(
<Provider store={unleashStore}> <Provider store={unleashStore}>
<Router history={hashHistory}> <Router history={hashHistory}>
<Route path="/" component={App}> <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="/strategies" component={Strategies} />
<Route path="/history" component={HistoryPage} /> <Route path="/history" component={HistoryPage} />
<Route path="/archive" component={Archive} /> <Route path="/archive" component={Archive} />

13
packages/unleash-frontend-next/src/page/features/create.js Normal file
View File

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

20
packages/unleash-frontend-next/src/page/features/index.js
View File

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