diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-05-22 23:17:29 +0500 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2017-05-22 11:17:29 -0700 |
commit | 52f73c30cafd6afaa11361b05972e25ebc223a81 (patch) | |
tree | 35885388a47ddca9b71c3914245be1d9cfc79c79 | |
parent | 9eb9c115de3a70e26ebacc528a6e50e21e06e9c3 (diff) | |
download | chat-52f73c30cafd6afaa11361b05972e25ebc223a81.tar.gz chat-52f73c30cafd6afaa11361b05972e25ebc223a81.tar.bz2 chat-52f73c30cafd6afaa11361b05972e25ebc223a81.zip |
PLT-6651 - Overlay issue modal (#6473)
* PLT-6651 - Overlay issue modal
* Fixing mentions badge
-rw-r--r-- | webapp/components/channel_switch_modal.jsx | 2 | ||||
-rw-r--r-- | webapp/components/notify_counts.jsx | 4 | ||||
-rw-r--r-- | webapp/components/sidebar.jsx | 2 | ||||
-rw-r--r-- | webapp/components/team_sidebar/components/team_button.jsx | 2 | ||||
-rw-r--r-- | webapp/sass/components/_mentions.scss | 2 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 6 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-left.scss | 2 | ||||
-rw-r--r-- | webapp/sass/layout/_team-sidebar.scss | 2 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 8 |
9 files changed, 18 insertions, 12 deletions
diff --git a/webapp/components/channel_switch_modal.jsx b/webapp/components/channel_switch_modal.jsx index 1ad9249e8..0f1fc4252 100644 --- a/webapp/components/channel_switch_modal.jsx +++ b/webapp/components/channel_switch_modal.jsx @@ -139,7 +139,7 @@ export default class SwitchChannelModal extends React.Component { const message = this.state.error; return ( <Modal - dialogClassName='channel-switch-modal' + dialogClassName='channel-switch-modal modal--overflow' ref='modal' show={this.props.show} onHide={this.onHide} diff --git a/webapp/components/notify_counts.jsx b/webapp/components/notify_counts.jsx index 6fcb3acdf..f05ecbf12 100644 --- a/webapp/components/notify_counts.jsx +++ b/webapp/components/notify_counts.jsx @@ -37,9 +37,9 @@ export default class NotifyCounts extends React.Component { } render() { if (this.state.mentionCount) { - return <span className='mention-badge badge-notify'>{this.state.mentionCount}</span>; + return <span className='badge badge-notify'>{this.state.mentionCount}</span>; } else if (this.state.messageCount) { - return <span className='mention-badge badge-notify'>{'•'}</span>; + return <span className='badge badge-notify'>{'•'}</span>; } return null; } diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index a0e69c52a..f8b3616f3 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -517,7 +517,7 @@ export default class Sidebar extends React.Component { var badge = null; if (channelMember) { if (unreadCount.mentions) { - badge = <span className='mention-badge pull-right small'>{unreadCount.mentions}</span>; + badge = <span className='badge pull-right small'>{unreadCount.mentions}</span>; this.badgesActive = true; } } else if (this.state.loadingDMChannel === index && channel.type === Constants.DM_CHANNEL) { diff --git a/webapp/components/team_sidebar/components/team_button.jsx b/webapp/components/team_sidebar/components/team_button.jsx index 5a9b9dd59..e0670d6da 100644 --- a/webapp/components/team_sidebar/components/team_button.jsx +++ b/webapp/components/team_sidebar/components/team_button.jsx @@ -42,7 +42,7 @@ export default class TeamButton extends React.Component { if (this.props.mentions) { badge = ( - <span className='mention-badge pull-right small'>{this.props.mentions}</span> + <span className='badge pull-right small'>{this.props.mentions}</span> ); } } diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss index 17a72e5a9..cfc12f1ce 100644 --- a/webapp/sass/components/_mentions.scss +++ b/webapp/sass/components/_mentions.scss @@ -9,7 +9,7 @@ z-index: 10; } -.mention-badge { +.badge { background-color: #777; border-radius: 10px; color: #fff; diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index fc1584ea9..f5489aa2b 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -76,6 +76,12 @@ color: alpha-color($black, .9); width: 100%; + .modal--overflow { + .modal-body { + overflow: visible; + } + } + &.modal-image { .modal-backdrop { &.in { diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index 25f1d2913..a7a99249b 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -53,7 +53,7 @@ padding: 1em 1em 0; } - .mention-badge { + .badge { background-color: $primary-color; position: absolute; right: 10px; diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss index 9d1cc72f5..cb003c828 100644 --- a/webapp/sass/layout/_team-sidebar.scss +++ b/webapp/sass/layout/_team-sidebar.scss @@ -54,7 +54,7 @@ width: 31px; } - .mention-badge { + .badge { font-size: 10px; position: absolute; right: -6px; diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index b860585cb..da0f1fa67 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -558,14 +558,14 @@ export function applyTheme(theme) { if (theme.mentionBj) { changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'background:' + theme.mentionBj); - changeCss('.app__body .sidebar--left .mention-badge', 'background:' + theme.mentionBj); - changeCss('.multi-teams .team-sidebar .mention-badge', 'background:' + theme.mentionBj); + changeCss('.app__body .sidebar--left .badge', 'background:' + theme.mentionBj); + changeCss('.multi-teams .team-sidebar .badge', 'background:' + theme.mentionBj); } if (theme.mentionColor) { changeCss('.app__body .sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'color:' + theme.mentionColor); - changeCss('.app__body .sidebar--left .mention-badge', 'color:' + theme.mentionColor); - changeCss('.app__body .multi-teams .team-sidebar .mention-badge', 'color:' + theme.mentionColor); + changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor); + changeCss('.app__body .multi-teams .team-sidebar .badge', 'color:' + theme.mentionColor); } if (theme.centerChannelBg) { |