Merge pull request #541 from yuya-oc/fix-add-button-align

Fix alignment for 'Add new server' button

src/browser/components/MainPage.jsx

@@ -111,9 +111,6 @@ const MainPage = createReactClass({
     }
   },
   handleSelect(key) {
-    if (key === 'addServerButton') {
-      return;
-    }
     const newKey = (this.props.teams.length + key) % this.props.teams.length;
     this.setState({
       key: newKey

src/browser/components/TabBar.jsx

@@ -1,29 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-const {Nav, NavItem, Button} = require('react-bootstrap');
+const {Glyphicon, Nav, NavItem} = require('react-bootstrap');
-
-function AddServerButton(props) {
-  return (
-    <NavItem
-      className='AddServerButton'
-      key='addServerButton'
-      eventKey='addServerButton'
-    >
-      <Button
-        id='tabBarAddNewTeam'
-        onClick={props.onClick}
-        className='AddServerButton-button'
-        title='Add new server'
-      >
-        {'+'}
-      </Button>
-    </NavItem>
-  );
-}
-
-AddServerButton.propTypes = {
-  onClick: PropTypes.func
-};
 
 function TabBar(props) {
   const tabs = props.teams.map((team, index) => {
@@ -76,16 +53,32 @@ function TabBar(props) {
         { badgeDiv }
       </NavItem>);
   });
+  tabs.push(
+    <NavItem
+      className='TabBar-addServerButton'
+      key='addServerButton'
+      id='addServerButton'
+      eventKey='addServerButton'
+      title='Add new server'
+    >
+      <Glyphicon glyph='plus'/>
+    </NavItem>
+  );
   return (
     <Nav
       className='TabBar'
       id={props.id}
       bsStyle='tabs'
       activeKey={props.activeKey}
-      onSelect={props.onSelect}
+      onSelect={(eventKey) => {
+        if (eventKey === 'addServerButton') {
+          props.onAddServer();
+        } else {
+          props.onSelect(eventKey);
+        }
+      }}
     >
       { tabs }
-      <AddServerButton onClick={props.onAddServer}/>
     </Nav>
   );
 }

src/browser/css/components/TabBar.css

@@ -10,13 +10,18 @@
   padding: 0 15px;
 }
 
-.TabBar .AddServerButton>a {
+.TabBar .TabBar-addServerButton>a {
   border: none;
   background: transparent;
-  margin: 0px;
+  color: #999;
-  margin-left: 1px; /*Has no border and would be placed above the last item's border due to it's margin-right: -1px */
+  font-size: 10px;
-  padding: 0;
+  line-height: 31px;
-  margin-bottom: 1px;
+}
+
+.TabBar .TabBar-addServerButton>a:hover {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
 }
 
 .TabBar .TabBar-badge {
@@ -32,30 +37,3 @@
   margin-top: 5px;
   border-radius: 50%;
 };
-
-
-.TabBar .AddServerButton-button {
-  background-color: #fff;
-  border-color: #ccc;
-  color: #333;
-  margin-top: 3px;
-}
-
-.TabBar .AddServerButton-button {
-  border: none;
-  font-size: 20px;
-  height: 31px;
-  padding: 2px 0 0 0;
-  width: 40px;
-  color: #999;
-  font-weight: bold;
-  margin: 0;
-  border-radius: 2px 2px 0 0;
-  outline: none;
-}
-
-.TabBar .AddServerButton-button:hover {
-  color: #333;
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}

test/specs/browser/index_test.js

@@ -185,7 +185,7 @@ describe('browser/index.html', function desc() {
   it('should open the new server prompt after clicking the add button', () => {
     // See settings_test for specs that cover the actual prompt
     return this.app.client.waitUntilWindowLoaded().
-      click('#tabBarAddNewTeam').
+      click('#addServerButton').
       pause(500).
       isExisting('#newServerModal').then((existing) => existing.should.be.true);
   });