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, 58 insertions, 69 deletions
diff --git a/webapp/components/channel_members_modal.jsx b/webapp/components/channel_members_modal.jsx index 9f6a2a2eb..70547d409 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' + dialogClassName='more-modal more-modal--action' 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 b9b841ad8..b0064f18a 100644 --- a/webapp/components/more_channels.jsx +++ b/webapp/components/more_channels.jsx @@ -163,7 +163,7 @@ export default class MoreChannels extends React.Component { return ( <Modal - dialogClassName='more-modal more-public-channels' + dialogClassName='more-modal more-modal--action' 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 1b287b3b2..a3318d0c8 100644 --- a/webapp/components/more_direct_channels.jsx +++ b/webapp/components/more_direct_channels.jsx @@ -195,7 +195,9 @@ 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 @@ -226,7 +228,7 @@ export default class MoreDirectChannels extends React.Component { return ( <Modal - dialogClassName='more-modal more-direct-channels' + dialogClassName={'more-modal more-direct-channels ' + memberClass} 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 a342f312f..8b431b643 100644 --- a/webapp/components/profile_popover.jsx +++ b/webapp/components/profile_popover.jsx @@ -152,34 +152,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/searchable_channel_list.jsx b/webapp/components/searchable_channel_list.jsx index afd113975..df1fb61f7 100644 --- a/webapp/components/searchable_channel_list.jsx +++ b/webapp/components/searchable_channel_list.jsx @@ -180,7 +180,9 @@ export default class SearchableChannelList extends React.Component { ref='channelList' className='more-modal__list' > - {listContent} + <div> + {listContent} + </div> </div> <div className='filter-controls'> {previousButton} 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/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; diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 4012a4611..e23630c3b 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -464,24 +464,10 @@ 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; @@ -496,7 +482,6 @@ } .filter-row { - @include clearfix; margin: 5px 0 10px; width: 300px; } @@ -561,7 +546,11 @@ .more-modal__list { display: flex; flex-direction: column; - overflow: auto; + + > div { + min-height: 100%; + overflow: auto; + } .popover & { font-size: .95em; @@ -606,6 +595,7 @@ .more-modal__actions { flex-grow: 0; flex-shrink: 0; + margin: 5px 0 10px; padding-left: 20px; } @@ -628,8 +618,7 @@ .more-modal__row { border-bottom: 1px solid $light-gray; display: flex; - min-height: 70px; - padding: 8px 15px; + padding: 10px 15px; } p { @@ -650,16 +639,15 @@ .filtered-user-list { display: flex; flex-direction: column; + height: calc(90vh - 120px); width: 100%; - .filter-row { - flex-grow: 0; - flex-shrink: 0; + > div { + flex: 1; } - .user-list { - flex-grow: 1; - flex-shrink: 1; + .more-modal__list { + flex-grow: 500; } .filter-button { @@ -669,9 +657,6 @@ } .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 16f0d3851..39f2b1a35 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1206,6 +1206,16 @@ } @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 { @@ -1213,10 +1223,6 @@ max-height: calc(100vh - 62px); padding-bottom: 5px; } - - .more-modal__list { - max-height: calc(100vh - 230px); - } } } @@ -1377,15 +1383,14 @@ @media screen and (max-width: 550px) { .app__body { .more-modal { - .filter-row { - width: 100%; - } - - &.more-direct-channels { + &.more-system-members { .filter-row { - padding-bottom: 50px; + min-height: 80px; + width: 100%; } + } + &.more-direct-channels { .member-show { display: none; } @@ -1443,16 +1448,6 @@ .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 { |