diff options
-rw-r--r-- | webapp/components/channel_members_modal.jsx | 2 | ||||
-rw-r--r-- | webapp/components/more_channels.jsx | 2 | ||||
-rw-r--r-- | webapp/components/more_direct_channels.jsx | 4 | ||||
-rw-r--r-- | webapp/components/profile_popover.jsx | 32 | ||||
-rw-r--r-- | webapp/components/searchable_channel_list.jsx | 4 | ||||
-rw-r--r-- | webapp/components/setting_item_max.jsx | 4 | ||||
-rw-r--r-- | webapp/sass/base/_typography.scss | 5 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 39 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 35 |
9 files changed, 69 insertions, 58 deletions
diff --git a/webapp/components/channel_members_modal.jsx b/webapp/components/channel_members_modal.jsx index 70547d409..9f6a2a2eb 100644 --- a/webapp/components/channel_members_modal.jsx +++ b/webapp/components/channel_members_modal.jsx @@ -168,7 +168,7 @@ export default class ChannelMembersModal extends React.Component { return ( <div> <Modal - dialogClassName='more-modal more-modal--action' + dialogClassName='more-modal' show={this.state.show} onHide={this.onHide} onExited={this.props.onModalDismissed} diff --git a/webapp/components/more_channels.jsx b/webapp/components/more_channels.jsx index 5374c3344..783aeff50 100644 --- a/webapp/components/more_channels.jsx +++ b/webapp/components/more_channels.jsx @@ -159,7 +159,7 @@ export default class MoreChannels extends React.Component { return ( <Modal - dialogClassName='more-modal more-modal--action' + dialogClassName='more-modal more-public-channels' show={this.state.show} onHide={this.handleHide} onExited={this.handleExit} diff --git a/webapp/components/more_direct_channels.jsx b/webapp/components/more_direct_channels.jsx index a3318d0c8..1b287b3b2 100644 --- a/webapp/components/more_direct_channels.jsx +++ b/webapp/components/more_direct_channels.jsx @@ -195,9 +195,7 @@ export default class MoreDirectChannels extends React.Component { render() { let teamToggle; - let memberClass = ''; if (global.window.mm_config.RestrictDirectMessage === 'any') { - memberClass = 'more-system-members'; teamToggle = ( <div className='member-select__container'> <select @@ -228,7 +226,7 @@ export default class MoreDirectChannels extends React.Component { return ( <Modal - dialogClassName={'more-modal more-direct-channels ' + memberClass} + dialogClassName='more-modal more-direct-channels' show={this.state.show} onHide={this.handleHide} onExited={this.handleExit} diff --git a/webapp/components/profile_popover.jsx b/webapp/components/profile_popover.jsx index d7d9929ee..7cb2f7261 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( - <OverlayTrigger - delayShow={Constants.WEBRTC_TIME_DELAY} - placement='top' - overlay={<Tooltip id='fullNameTooltip'>{fullname}</Tooltip>} + <div + data-toggle='tooltip' + title={fullname} + key='user-popover-fullname' > - <div - className='overflow--ellipsis text-nowrap padding-bottom' + <p + className='text-nowrap' > {fullname} - </div> - </OverlayTrigger> + </p> + </div> ); } if (this.props.user.position) { const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH); dataContent.push( - <OverlayTrigger - delayShow={Constants.WEBRTC_TIME_DELAY} - placement='top' - overlay={<Tooltip id='positionTooltip'>{position}</Tooltip>} + <div + data-toggle='tooltip' + title={position} + key='user-popover-position' > - <div - className='overflow--ellipsis text-nowrap padding-bottom' + <p + className='text-nowrap' > {position} - </div> - </OverlayTrigger> + </p> + </div> ); } diff --git a/webapp/components/searchable_channel_list.jsx b/webapp/components/searchable_channel_list.jsx index df1fb61f7..afd113975 100644 --- a/webapp/components/searchable_channel_list.jsx +++ b/webapp/components/searchable_channel_list.jsx @@ -180,9 +180,7 @@ export default class SearchableChannelList extends React.Component { ref='channelList' className='more-modal__list' > - <div> - {listContent} - </div> + {listContent} </div> <div className='filter-controls'> {previousButton} diff --git a/webapp/components/setting_item_max.jsx b/webapp/components/setting_item_max.jsx index 5971ce584..904e6c8d1 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 pull-right' + className='btn btn-sm btn-primary' 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 pull-right' + className='btn btn-sm theme' href='#' onClick={this.props.updateSection} > diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss index 1d3f1d052..f595e0ed9 100644 --- a/webapp/sass/base/_typography.scss +++ b/webapp/sass/base/_typography.scss @@ -26,11 +26,6 @@ body { word-break: break-all; } -.overflow--ellipsis { - overflow: hidden; - text-overflow: ellipsis; -} - .fa { &.fa-margin--left { margin-left: 2px; diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index f98d23341..d17ba1706 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -460,10 +460,24 @@ float: right; margin-top: 5px; } + + .more-modal__list { + max-height: calc(100vh - 270px); + } } } .more-modal { + .more-modal__list { + height: 100vh; + max-height: calc(100vh - 340px); + } + + &.more-direct-channels { + .more-modal__list { + max-height: calc(100vh - 325px); + } + } .user-list { margin-top: 10px; @@ -478,6 +492,7 @@ } .filter-row { + @include clearfix; margin: 5px 0 10px; width: 300px; } @@ -542,11 +557,7 @@ .more-modal__list { display: flex; flex-direction: column; - - > div { - min-height: 100%; - overflow: auto; - } + overflow: auto; .popover & { font-size: .95em; @@ -591,7 +602,6 @@ .more-modal__actions { flex-grow: 0; flex-shrink: 0; - margin: 5px 0 10px; padding-left: 20px; } @@ -614,7 +624,8 @@ .more-modal__row { border-bottom: 1px solid $light-gray; display: flex; - padding: 10px 15px; + min-height: 70px; + padding: 8px 15px; } p { @@ -635,15 +646,16 @@ .filtered-user-list { display: flex; flex-direction: column; - height: calc(90vh - 120px); width: 100%; - > div { - flex: 1; + .filter-row { + flex-grow: 0; + flex-shrink: 0; } - .more-modal__list { - flex-grow: 500; + .user-list { + flex-grow: 1; + flex-shrink: 1; } .filter-button { @@ -653,6 +665,9 @@ } .filter-controls { + @include clearfix; + flex-grow: 0; + flex-shrink: 0; padding: 1em 1.5em 0; .filter-control__next { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 02525aec5..d9a929690 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1214,16 +1214,6 @@ } @media screen and (max-width: 640px) { - .filtered-user-list { - height: calc(100vh - 80px); - } - - .more-modal--action { - .filtered-user-list { - height: calc(100vh - 110px); - } - } - .app__body { .modal { .more-modal { @@ -1231,6 +1221,10 @@ max-height: calc(100vh - 62px); padding-bottom: 5px; } + + .more-modal__list { + max-height: calc(100vh - 230px); + } } } @@ -1391,14 +1385,15 @@ @media screen and (max-width: 550px) { .app__body { .more-modal { - &.more-system-members { - .filter-row { - min-height: 80px; - width: 100%; - } + .filter-row { + width: 100%; } &.more-direct-channels { + .filter-row { + padding-bottom: 50px; + } + .member-show { display: none; } @@ -1456,6 +1451,16 @@ .app__body { .modal { + &.more-channel__modal { + .more-modal__list { + max-height: calc(100vh - 250px); + } + + .modal-body { + padding-bottom: 35px; + } + } + .settings-modal { &.display--content { .modal-body { |