1
0
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:
ivaosthu 2016-09-30 15:09:26 +02:00
parent 9282818489
commit e8d0a058a2
5 changed files with 22 additions and 7 deletions

View File

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

View File

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

View File

@ -15,8 +15,11 @@ export default class FeatureList extends React.Component {
} }
componentDidMount () { componentDidMount () {
// TODO: only fetch from server if we don't know about any toggles.
if (this.props.features.length === 0) {
this.props.fetchFeatureToggles(); this.props.fetchFeatureToggles();
} }
}
render () { render () {
const onFeatureClick = this.props.onFeatureClick; const onFeatureClick = this.props.onFeatureClick;

View File

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

View File

@ -6,3 +6,9 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
.navigation {
.active {
background-color: #EEE;
}
}