diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-05-18 17:57:19 +0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-05-18 08:57:19 -0400 |
commit | fc58174747cd25eded07c30f5f122d4f8122e7e5 (patch) | |
tree | adf214b31013afacb3a6dba145389466d1519fee /webapp | |
parent | 2df5f65f55456a29f6fe75ea533051b99e271756 (diff) | |
download | chat-fc58174747cd25eded07c30f5f122d4f8122e7e5.tar.gz chat-fc58174747cd25eded07c30f5f122d4f8122e7e5.tar.bz2 chat-fc58174747cd25eded07c30f5f122d4f8122e7e5.zip |
PLT-6614 - Mentions badge styling and dropdown icon style (#6426)
* Mentions badge styling and dropdown icon style
* PLT-6134 - Fixing emoji picker border in RHS
Diffstat (limited to 'webapp')
-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 | 15 | ||||
-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 | 12 |
7 files changed, 27 insertions, 12 deletions
diff --git a/webapp/components/notify_counts.jsx b/webapp/components/notify_counts.jsx index f05ecbf12..6fcb3acdf 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='badge badge-notify'>{this.state.mentionCount}</span>; + return <span className='mention-badge badge-notify'>{this.state.mentionCount}</span>; } else if (this.state.messageCount) { - return <span className='badge badge-notify'>{'•'}</span>; + return <span className='mention-badge badge-notify'>{'•'}</span>; } return null; } diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index f8b3616f3..a0e69c52a 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='badge pull-right small'>{unreadCount.mentions}</span>; + badge = <span className='mention-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 2a35e1172..4be1b5c13 100644 --- a/webapp/components/team_sidebar/components/team_button.jsx +++ b/webapp/components/team_sidebar/components/team_button.jsx @@ -40,7 +40,7 @@ export default class TeamButton extends React.Component { if (this.props.mentions) { badge = ( - <span className='badge pull-right small'>{this.props.mentions}</span> + <span className='mention-badge pull-right small'>{this.props.mentions}</span> ); } } diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss index 86e7c0a28..17a72e5a9 100644 --- a/webapp/sass/components/_mentions.scss +++ b/webapp/sass/components/_mentions.scss @@ -9,6 +9,21 @@ z-index: 10; } +.mention-badge { + background-color: #777; + border-radius: 10px; + color: #fff; + display: inline-block; + font-size: 12px; + font-weight: bold; + line-height: 1; + min-width: 10px; + padding: 3px 7px; + text-align: center; + vertical-align: middle; + white-space: nowrap; +} + .mentions__name { @include clearfix; cursor: pointer; diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index a7a99249b..25f1d2913 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -53,7 +53,7 @@ padding: 1em 1em 0; } - .badge { + .mention-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 cb003c828..9d1cc72f5 100644 --- a/webapp/sass/layout/_team-sidebar.scss +++ b/webapp/sass/layout/_team-sidebar.scss @@ -54,7 +54,7 @@ width: 31px; } - .badge { + .mention-badge { font-size: 10px; position: absolute; right: -6px; diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 3404a0b82..b860585cb 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -534,7 +534,7 @@ export function applyTheme(theme) { if (theme.sidebarHeaderTextColor) { changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn, .sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor); - changeCss('.app__body .sidebar-header-dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor); + changeCss('.app__body .sidebar-header-dropdown__icon svg', 'fill:' + theme.sidebarHeaderTextColor); changeCss('.sidebar--left .team__header .user__name, .app__body .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8)); changeCss('.sidebar--left .team__header:hover .user__name, .app__body .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor); changeCss('.app__body .modal .modal-header .modal-title, .app__body .modal .modal-header .modal-title .name, .app__body .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor); @@ -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 .badge', 'background:' + theme.mentionBj); - changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'background:' + theme.mentionBj + ' !important'); + changeCss('.app__body .sidebar--left .mention-badge', 'background:' + theme.mentionBj); + changeCss('.multi-teams .team-sidebar .mention-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 .badge', 'color:' + theme.mentionColor); - changeCss('.app__body .multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'color:' + theme.mentionColor + ' !important'); + changeCss('.app__body .sidebar--left .mention-badge', 'color:' + theme.mentionColor); + changeCss('.app__body .multi-teams .team-sidebar .mention-badge', 'color:' + theme.mentionColor); } if (theme.centerChannelBg) { @@ -671,7 +671,7 @@ export function applyTheme(theme) { changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor); changeCss('.app__body .emoji-picker-react', 'color:' + theme.centerChannelColor); changeCss('.app__body .emoji-picker-bottom', 'color:' + theme.centerChannelColor); - changeCss('.app__body .emoji-picker, .app__body .emoji-picker-react, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); + changeCss('.app__body .emoji-picker, .app__body .emoji-picker-react-rhs-comment, .app__body .emoji-picker-react, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .emoji-picker, .app__body .emoji-picker__items .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__items .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); |