diff options
| author | Asaad Mahmood <asaad@spinpunch.com> | 2015-12-03 22:22:46 +0500 |
|---|---|---|
| committer | Asaad Mahmood <asaad@spinpunch.com> | 2015-12-03 22:22:46 +0500 |
| commit | 010cc0675f074ce0bb5539847f55a0a4f0693e2c (patch) | |
| tree | 7c0e6f45cb9b5039d53036efd102e4f68be651ef | |
| parent | 865b42c7be8761b3dff0dc52837a13366f1e2af6 (diff) | |
| download | chat-010cc0675f074ce0bb5539847f55a0a4f0693e2c.tar.gz chat-010cc0675f074ce0bb5539847f55a0a4f0693e2c.tar.bz2 chat-010cc0675f074ce0bb5539847f55a0a4f0693e2c.zip | |
Improvements to the system console
| -rw-r--r-- | web/react/components/admin_console/admin_sidebar.jsx | 25 | ||||
| -rw-r--r-- | web/react/components/admin_console/select_team_modal.jsx | 2 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_admin-console.scss | 19 |
3 files changed, 37 insertions, 9 deletions
diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx index 076a07618..cc98c495e 100644 --- a/web/react/components/admin_console/admin_sidebar.jsx +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -5,6 +5,9 @@ import AdminSidebarHeader from './admin_sidebar_header.jsx'; import SelectTeamModal from './select_team_modal.jsx'; import * as Utils from '../../utils/utils.jsx'; +const Tooltip = ReactBootstrap.Tooltip; +const OverlayTrigger = ReactBootstrap.OverlayTrigger; + export default class AdminSidebar extends React.Component { constructor(props) { super(props); @@ -80,6 +83,12 @@ export default class AdminSidebar extends React.Component { render() { var count = '*'; var teams = 'Loading'; + const removeTooltip = ( + <Tooltip id='remove-team-tooltip'>{'Remove team from sidebar menu'}</Tooltip> + ); + const addTeamTooltip = ( + <Tooltip id='add-team-tooltip'>{'Add team from sidebar menu'}</Tooltip> + ); if (this.props.teams != null) { count = '' + Object.keys(this.props.teams).length; @@ -102,14 +111,19 @@ export default class AdminSidebar extends React.Component { className={'nav__sub-menu-item ' + this.isSelected('team_users', team.id)} > {team.name} + <OverlayTrigger + delayShow={1000} + placement='top' + overlay={removeTooltip} + > <span className='menu-icon--right menu__close' onClick={this.removeTeam.bind(this, team.id)} style={{cursor: 'pointer'}} - title='Remove team from sidebar menu' > - {'x'} + {'×'} </span> + </OverlayTrigger> </a> </li> <li> @@ -245,15 +259,20 @@ export default class AdminSidebar extends React.Component { <span className='icon fa fa-gear'></span> <span>{'TEAMS (' + count + ')'}</span> <span className='menu-icon--right'> + <OverlayTrigger + delayShow={1000} + placement='top' + overlay={addTeamTooltip} + > <a href='#' onClick={this.showTeamSelect} > <i className='fa fa-plus' - title='Add team to sidebar menu' ></i> </a> + </OverlayTrigger> </span> </h4> </li> diff --git a/web/react/components/admin_console/select_team_modal.jsx b/web/react/components/admin_console/select_team_modal.jsx index 22189821b..858b6bbfe 100644 --- a/web/react/components/admin_console/select_team_modal.jsx +++ b/web/react/components/admin_console/select_team_modal.jsx @@ -57,7 +57,7 @@ export default class SelectTeamModal extends React.Component { <select ref='team' size='10' - style={{width: '100%'}} + className='form-control' > {options} </select> diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss index 206d5bfca..af827a7f8 100644 --- a/web/sass-files/sass/partials/_admin-console.scss +++ b/web/sass-files/sass/partials/_admin-console.scss @@ -37,13 +37,22 @@ background: #333; padding: 10px 10px; margin: 1px 0 0; + .menu-icon--right { + top: 6px; + right: 12px; + } } } .menu-icon--right { - vertical-align: top; - padding: 5px 10px; - margin: -5px; - float: right; + position: absolute; + right: 10px; + top: 3px; + font-size: 18px; + font-weight: 600; + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; .fa { font-size: 13px; right: -2px; @@ -60,7 +69,7 @@ li { > a { font-size: 13px; - padding: 5px 15px; + padding: 5px 35px 5px 15px; background: transparent; color: #bbb; &:hover { |