Treat tabs as real link (enable Ctrl+Click for new Tab)

This commit is contained in:
Nicolas Gotchac 2016-12-10 01:56:38 +01:00
parent f6564dcc2f
commit 0d9b1882a3
2 changed files with 33 additions and 62 deletions

View File

@ -30,24 +30,31 @@
} }
} }
.tabs button, .tabLink {
display: flex;
> * {
flex: 1;
}
&:hover {
background: rgba(0, 0, 0, 0.4) !important;
}
&.tabactive, &.tabactive:hover {
color: white !important;
background: rgba(0, 0, 0, 0.25) !important;
border-radius: 4px 4px 0 0;
}
}
.tabLink,
.settings, .settings,
.logo, .logo,
.last { .last {
background: rgba(0, 0, 0, 0.5) !important; /* rgba(0, 0, 0, 0.25) !important; */ background: rgba(0, 0, 0, 0.5) !important; /* rgba(0, 0, 0, 0.25) !important; */
} }
.tabs button:hover {
background: rgba(0, 0, 0, 0.4) !important;
}
button.tabactive,
button.tabactive:hover {
color: white !important;
background: rgba(0, 0, 0, 0.25) !important;
border-radius: 4px 4px 0 0;
}
.tabbarTooltip { .tabbarTooltip {
left: 3.3em; left: 3.3em;
top: 0.5em; top: 0.5em;

View File

@ -16,6 +16,7 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Link } from 'react-router';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar'; import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
import { Tab as MUITab } from 'material-ui/Tabs'; import { Tab as MUITab } from 'material-ui/Tabs';
@ -40,8 +41,7 @@ class Tab extends Component {
active: PropTypes.bool, active: PropTypes.bool,
view: PropTypes.object, view: PropTypes.object,
children: PropTypes.node, children: PropTypes.node,
pendings: PropTypes.number, pendings: PropTypes.number
onChange: PropTypes.func
}; };
shouldComponentUpdate (nextProps) { shouldComponentUpdate (nextProps) {
@ -60,7 +60,6 @@ class Tab extends Component {
selected={ active } selected={ active }
icon={ view.icon } icon={ view.icon }
label={ label } label={ label }
onTouchTap={ this.handleClick }
> >
{ children } { children }
</MUITab> </MUITab>
@ -118,11 +117,6 @@ class Tab extends Component {
return this.renderLabel(label, null); return this.renderLabel(label, null);
} }
handleClick = () => {
const { onChange, view } = this.props;
onChange(view);
}
} }
class TabBar extends Component { class TabBar extends Component {
@ -142,34 +136,12 @@ class TabBar extends Component {
pending: [] pending: []
}; };
state = {
activeViewId: ''
};
setActiveView (props = this.props) {
const { hash, views } = props;
const view = views.find((view) => view.value === hash);
this.setState({ activeViewId: view.id });
}
componentWillMount () {
this.setActiveView();
}
componentWillReceiveProps (nextProps) {
if (nextProps.hash !== this.props.hash) {
this.setActiveView(nextProps);
}
}
shouldComponentUpdate (nextProps, nextState) { shouldComponentUpdate (nextProps, nextState) {
const prevViews = this.props.views.map((v) => v.id).sort(); const prevViews = this.props.views.map((v) => v.id).sort();
const nextViews = nextProps.views.map((v) => v.id).sort(); const nextViews = nextProps.views.map((v) => v.id).sort();
return (nextProps.hash !== this.props.hash) || return (nextProps.hash !== this.props.hash) ||
(nextProps.pending.length !== this.props.pending.length) || (nextProps.pending.length !== this.props.pending.length) ||
(nextState.activeViewId !== this.state.activeViewId) ||
(!isEqual(prevViews, nextViews)); (!isEqual(prevViews, nextViews));
} }
@ -206,7 +178,6 @@ class TabBar extends Component {
renderTabs () { renderTabs () {
const { views, pending } = this.props; const { views, pending } = this.props;
const { activeViewId } = this.state;
const items = views const items = views
.map((view, index) => { .map((view, index) => {
@ -216,36 +187,29 @@ class TabBar extends Component {
) )
: null; : null;
const active = activeViewId === view.id;
return ( return (
<Tab <Link
active={ active }
view={ view }
onChange={ this.onChange }
key={ view.id } key={ view.id }
to={ view.route }
activeClassName={ styles.tabactive }
className={ styles.tabLink }
>
<Tab
view={ view }
pendings={ pending.length } pendings={ pending.length }
> >
{ body } { body }
</Tab> </Tab>
</Link>
); );
}); });
return ( return (
<div <div className={ styles.tabs }>
className={ styles.tabs }
onChange={ this.onChange }>
{ items } { items }
</div> </div>
); );
} }
onChange = (view) => {
const { router } = this.context;
router.push(view.route);
this.setState({ activeViewId: view.id });
}
} }
function mapStateToProps (state) { function mapStateToProps (state) {