Fix alignment for 'Add new server' button
This commit is contained in:
parent
5352be1c95
commit
2307b3ca6a
|
@ -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
|
||||
|
|
|
@ -1,29 +1,6 @@
|
|||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const {Nav, NavItem, Button} = 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
|
||||
};
|
||||
const {Glyphicon, Nav, NavItem} = require('react-bootstrap');
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -10,13 +10,18 @@
|
|||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.TabBar .AddServerButton>a {
|
||||
.TabBar .TabBar-addServerButton>a {
|
||||
border: none;
|
||||
background: transparent;
|
||||
margin: 0px;
|
||||
margin-left: 1px; /*Has no border and would be placed above the last item's border due to it's margin-right: -1px */
|
||||
padding: 0;
|
||||
margin-bottom: 1px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue