diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-01-06 22:11:42 +0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-01-06 12:11:42 -0500 |
commit | 1aa235b10d298926f2d683b2d1a5c82f6a9591e9 (patch) | |
tree | f36945318cae0542f35e89432fcc8534bafd2248 | |
parent | 61771a0fc53a9c50f096b0dcc422f12ce80baf20 (diff) | |
download | chat-1aa235b10d298926f2d683b2d1a5c82f6a9591e9.tar.gz chat-1aa235b10d298926f2d683b2d1a5c82f6a9591e9.tar.bz2 chat-1aa235b10d298926f2d683b2d1a5c82f6a9591e9.zip |
Ui fixes (#4987)
* PLT-5090 - Adding overflow for usrename on popover
* PLT-5089 - Updatng save button position
* PLT-5146 - Removing anchor on teamname/username
* Minor fixes for profile popover
* Adjusting constants call for sidebar header
-rw-r--r-- | webapp/components/profile_popover.jsx | 32 | ||||
-rw-r--r-- | webapp/components/setting_item_max.jsx | 4 | ||||
-rw-r--r-- | webapp/components/setting_picture.jsx | 4 | ||||
-rw-r--r-- | webapp/components/sidebar_header.jsx | 11 | ||||
-rw-r--r-- | webapp/sass/base/_typography.scss | 5 |
5 files changed, 29 insertions, 27 deletions
diff --git a/webapp/components/profile_popover.jsx b/webapp/components/profile_popover.jsx index 7cb2f7261..d7d9929ee 100644 --- a/webapp/components/profile_popover.jsx +++ b/webapp/components/profile_popover.jsx @@ -185,34 +185,34 @@ export default class ProfilePopover extends React.Component { const fullname = Utils.getFullName(this.props.user); if (fullname) { dataContent.push( - <div - data-toggle='tooltip' - title={fullname} - key='user-popover-fullname' + <OverlayTrigger + delayShow={Constants.WEBRTC_TIME_DELAY} + placement='top' + overlay={<Tooltip id='fullNameTooltip'>{fullname}</Tooltip>} > - <p - className='text-nowrap' + <div + className='overflow--ellipsis text-nowrap padding-bottom' > {fullname} - </p> - </div> + </div> + </OverlayTrigger> ); } if (this.props.user.position) { const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH); dataContent.push( - <div - data-toggle='tooltip' - title={position} - key='user-popover-position' + <OverlayTrigger + delayShow={Constants.WEBRTC_TIME_DELAY} + placement='top' + overlay={<Tooltip id='positionTooltip'>{position}</Tooltip>} > - <p - className='text-nowrap' + <div + className='overflow--ellipsis text-nowrap padding-bottom' > {position} - </p> - </div> + </div> + </OverlayTrigger> ); } diff --git a/webapp/components/setting_item_max.jsx b/webapp/components/setting_item_max.jsx index 904e6c8d1..5971ce584 100644 --- a/webapp/components/setting_item_max.jsx +++ b/webapp/components/setting_item_max.jsx @@ -49,7 +49,7 @@ export default class SettingItemMax extends React.Component { submit = ( <input type='submit' - className='btn btn-sm btn-primary' + className='btn btn-sm btn-primary pull-right' href='#' onClick={this.props.submit} value={Utils.localizeMessage('setting_item_max.save', 'Save')} @@ -88,7 +88,7 @@ export default class SettingItemMax extends React.Component { {clientError} {submit} <a - className='btn btn-sm theme' + className='btn btn-sm pull-right' href='#' onClick={this.props.updateSection} > diff --git a/webapp/components/setting_picture.jsx b/webapp/components/setting_picture.jsx index b74ee8eb7..d1ff60c6a 100644 --- a/webapp/components/setting_picture.jsx +++ b/webapp/components/setting_picture.jsx @@ -73,7 +73,7 @@ export default class SettingPicture extends React.Component { /> ); } else { - var confirmButtonClass = 'btn btn-sm'; + var confirmButtonClass = 'btn btn-sm pull-right'; if (this.props.submitActive) { confirmButtonClass += ' btn-primary'; } else { @@ -132,7 +132,7 @@ export default class SettingPicture extends React.Component { </span> {confirmButton} <a - className='btn btn-sm theme' + className='btn btn-sm theme pull-right' href='#' onClick={self.props.updateSection} > diff --git a/webapp/components/sidebar_header.jsx b/webapp/components/sidebar_header.jsx index a5fbd2659..d5db54c14 100644 --- a/webapp/components/sidebar_header.jsx +++ b/webapp/components/sidebar_header.jsx @@ -10,7 +10,7 @@ import * as Utils from 'utils/utils.jsx'; import SidebarHeaderDropdown from './sidebar_header_dropdown.jsx'; import {Tooltip, OverlayTrigger} from 'react-bootstrap'; -import {Preferences, TutorialSteps} from 'utils/constants.jsx'; +import {Preferences, TutorialSteps, OVERLAY_TIME_DELAY} from 'utils/constants.jsx'; import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx'; export default class SidebarHeader extends React.Component { @@ -78,7 +78,7 @@ export default class SidebarHeader extends React.Component { teamNameWithToolTip = ( <OverlayTrigger trigger={['hover', 'focus']} - delayShow={1000} + delayShow={OVERLAY_TIME_DELAY} placement='bottom' overlay={<Tooltip id='team-name__tooltip'>{this.props.teamDescription}</Tooltip>} ref='descriptionOverlay' @@ -91,16 +91,13 @@ export default class SidebarHeader extends React.Component { return ( <div className='team__header theme'> {tutorialTip} - <a - href='#' - onClick={this.toggleDropdown} - > + <div> {profilePicture} <div className='header__info'> <div className='user__name'>{'@' + me.username}</div> {teamNameWithToolTip} </div> - </a> + </div> <SidebarHeaderDropdown ref='dropdown' teamType={this.props.teamType} diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss index f595e0ed9..1d3f1d052 100644 --- a/webapp/sass/base/_typography.scss +++ b/webapp/sass/base/_typography.scss @@ -26,6 +26,11 @@ body { word-break: break-all; } +.overflow--ellipsis { + overflow: hidden; + text-overflow: ellipsis; +} + .fa { &.fa-margin--left { margin-left: 2px; |