diff --git a/js/src/views/Application/TabBar/tabBar.css b/js/src/views/Application/TabBar/tabBar.css
index b11df4e40..7b74622d3 100644
--- a/js/src/views/Application/TabBar/tabBar.css
+++ b/js/src/views/Application/TabBar/tabBar.css
@@ -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,
.logo,
.last {
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 {
left: 3.3em;
top: 0.5em;
diff --git a/js/src/views/Application/TabBar/tabBar.js b/js/src/views/Application/TabBar/tabBar.js
index 9d9f55874..ccf1290c5 100644
--- a/js/src/views/Application/TabBar/tabBar.js
+++ b/js/src/views/Application/TabBar/tabBar.js
@@ -16,6 +16,7 @@
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
+import { Link } from 'react-router';
import { bindActionCreators } from 'redux';
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
import { Tab as MUITab } from 'material-ui/Tabs';
@@ -40,8 +41,7 @@ class Tab extends Component {
active: PropTypes.bool,
view: PropTypes.object,
children: PropTypes.node,
- pendings: PropTypes.number,
- onChange: PropTypes.func
+ pendings: PropTypes.number
};
shouldComponentUpdate (nextProps) {
@@ -60,7 +60,6 @@ class Tab extends Component {
selected={ active }
icon={ view.icon }
label={ label }
- onTouchTap={ this.handleClick }
>
{ children }
@@ -118,11 +117,6 @@ class Tab extends Component {
return this.renderLabel(label, null);
}
-
- handleClick = () => {
- const { onChange, view } = this.props;
- onChange(view);
- }
}
class TabBar extends Component {
@@ -142,34 +136,12 @@ class TabBar extends Component {
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) {
const prevViews = this.props.views.map((v) => v.id).sort();
const nextViews = nextProps.views.map((v) => v.id).sort();
return (nextProps.hash !== this.props.hash) ||
(nextProps.pending.length !== this.props.pending.length) ||
- (nextState.activeViewId !== this.state.activeViewId) ||
(!isEqual(prevViews, nextViews));
}
@@ -206,7 +178,6 @@ class TabBar extends Component {
renderTabs () {
const { views, pending } = this.props;
- const { activeViewId } = this.state;
const items = views
.map((view, index) => {
@@ -216,36 +187,29 @@ class TabBar extends Component {
)
: null;
- const active = activeViewId === view.id;
-
return (
-