mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-16 00:06:40 +01:00
fix some navigation styling #153
This commit is contained in:
parent
9282818489
commit
e8d0a058a2
@ -1,5 +1,6 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { ListSubHeader, List, ListItem, ListDivider } from 'react-toolbox';
|
import { ListSubHeader, List, ListItem, ListDivider } from 'react-toolbox';
|
||||||
|
import style from './style';
|
||||||
|
|
||||||
export default class UnleashNav extends Component {
|
export default class UnleashNav extends Component {
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
@ -9,10 +10,10 @@ export default class UnleashNav extends Component {
|
|||||||
render () {
|
render () {
|
||||||
const createListItem = (path, caption) =>
|
const createListItem = (path, caption) =>
|
||||||
<ListItem to={this.context.router.createHref(path)} caption={caption}
|
<ListItem to={this.context.router.createHref(path)} caption={caption}
|
||||||
className={this.context.router.isActive(path) ? 'active' : 'inactive'} />;
|
className={this.context.router.isActive(path) ? style.active : ''} />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<List selectable ripple>
|
<List selectable ripple className={style.navigation}>
|
||||||
{createListItem('/features', 'Feature Toggles')}
|
{createListItem('/features', 'Feature Toggles')}
|
||||||
{createListItem('/strategies', 'Strategies')}
|
{createListItem('/strategies', 'Strategies')}
|
||||||
{createListItem('/history', 'Event History')}
|
{createListItem('/history', 'Event History')}
|
||||||
|
@ -16,14 +16,19 @@ class AddFeatureToggle extends React.Component {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static contextTypes = {
|
||||||
|
router: React.PropTypes.object,
|
||||||
|
}
|
||||||
|
|
||||||
onSubmit = (evt) => {
|
onSubmit = (evt) => {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
this.props.dispatch(addFeatureToggle(this.state.name, this.state.enabled));
|
this.props.dispatch(addFeatureToggle(this.state.name));
|
||||||
|
this.context.router.push('/features');
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChange = (key, value) => {
|
handleChange = (key, value) => {
|
||||||
const change = {};
|
const change = {};
|
||||||
change[name] = value;
|
change[key] = value;
|
||||||
|
|
||||||
const newState = Object.assign({}, this.state, change);
|
const newState = Object.assign({}, this.state, change);
|
||||||
this.setState(newState);
|
this.setState(newState);
|
||||||
|
@ -15,7 +15,10 @@ export default class FeatureList extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
this.props.fetchFeatureToggles();
|
// TODO: only fetch from server if we don't know about any toggles.
|
||||||
|
if (this.props.features.length === 0) {
|
||||||
|
this.props.fetchFeatureToggles();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
@ -5,12 +5,12 @@ export const RECEIVE_FEATURE_TOGGLES = 'RECEIVE_FEATURE_TOGGLES';
|
|||||||
export const ERROR_RECEIVE_FEATURE_TOGGLES = 'ERROR_RECEIVE_FEATURE_TOGGLES';
|
export const ERROR_RECEIVE_FEATURE_TOGGLES = 'ERROR_RECEIVE_FEATURE_TOGGLES';
|
||||||
|
|
||||||
export const addFeatureToggle = (featureName) => ({
|
export const addFeatureToggle = (featureName) => ({
|
||||||
type: 'ADD_FEATURE_TOGGLE',
|
type: ADD_FEATURE_TOGGLE,
|
||||||
name: featureName,
|
name: featureName,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const toggleFeature = (featureName) => ({
|
export const toggleFeature = (featureName) => ({
|
||||||
type: 'TOGGLE_FEATURE_TOGGLE',
|
type: TOGGLE_FEATURE_TOGGLE,
|
||||||
name: featureName,
|
name: featureName,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -6,3 +6,9 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navigation {
|
||||||
|
.active {
|
||||||
|
background-color: #EEE;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user