diff options
author | Sudheer <sudheer.105@gmail.com> | 2017-08-21 19:42:40 +0530 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2017-08-21 10:12:40 -0400 |
commit | b2e53086b3b4527af04d4689f0d836fefd10f8fb (patch) | |
tree | e365d0b520a6e3b0532f6de5faa73f37e8af5974 | |
parent | 2986c384690951b2e87c016efaa6f447d844e6b2 (diff) | |
download | chat-b2e53086b3b4527af04d4689f0d836fefd10f8fb.tar.gz chat-b2e53086b3b4527af04d4689f0d836fefd10f8fb.tar.bz2 chat-b2e53086b3b4527af04d4689f0d836fefd10f8fb.zip |
PLT-5747: Fixed inconsistent on-hover, tooltip, and active states for buttons. (#7174)
* Fixed LHS Team Sidebar on hover highlight.
* Fixed LHS Main Menu on hover tooltip to show "Main menu".
* Added On-hover highlight for Favorite button in channel heading.
* Added active state for channel members icon.
* Added active class based on internal react state with new changeCss rule.
* Changed cursor to pointer on hovering a theme.
* Fixed Invite New Member Add Button to have text-underline on hover.
-rw-r--r-- | webapp/components/popover_list_members/popover_list_members.jsx | 2 | ||||
-rw-r--r-- | webapp/components/sidebar_header_dropdown_button.jsx | 39 | ||||
-rwxr-xr-x | webapp/i18n/en.json | 1 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 6 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 9 | ||||
-rw-r--r-- | webapp/sass/layout/_team-sidebar.scss | 3 | ||||
-rw-r--r-- | webapp/sass/routes/_settings.scss | 3 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 6 |
8 files changed, 49 insertions, 20 deletions
diff --git a/webapp/components/popover_list_members/popover_list_members.jsx b/webapp/components/popover_list_members/popover_list_members.jsx index eca0fa5c2..1b790e923 100644 --- a/webapp/components/popover_list_members/popover_list_members.jsx +++ b/webapp/components/popover_list_members/popover_list_members.jsx @@ -239,7 +239,7 @@ export default class PopoverListMembers extends React.Component { ); return ( - <div className='channel-header__icon wide'> + <div className={'channel-header__icon wide ' + (this.state.showPopover ? 'active' : '')}> <OverlayTrigger trigger={['hover', 'focus']} delayShow={Constants.OVERLAY_TIME_DELAY} diff --git a/webapp/components/sidebar_header_dropdown_button.jsx b/webapp/components/sidebar_header_dropdown_button.jsx index 45e40f655..82dd6eccf 100644 --- a/webapp/components/sidebar_header_dropdown_button.jsx +++ b/webapp/components/sidebar_header_dropdown_button.jsx @@ -6,6 +6,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import Constants from 'utils/constants.jsx'; +import {Tooltip, OverlayTrigger} from 'react-bootstrap'; +import {FormattedMessage} from 'react-intl'; export default class SidebarHeaderDropdownButton extends React.PureComponent { static propTypes = { @@ -14,19 +16,34 @@ export default class SidebarHeaderDropdownButton extends React.PureComponent { }; render() { + const mainMenuToolTip = ( + <Tooltip id='main-menu__tooltip'> + <FormattedMessage + id='sidebar.mainMenu' + defaultMessage='Main menu' + /> + </Tooltip> + ); + return ( - <a - href='#' - id='sidebarHeaderDropdownButton' - className='sidebar-header-dropdown__toggle' - onClick={this.props.onClick} + <OverlayTrigger + trigger={['hover', 'focus']} + delayShow={Constants.OVERLAY_TIME_DELAY} + placement='right' + overlay={mainMenuToolTip} > - <span - className='sidebar-header-dropdown__icon' - dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} - /> - </a> + <a + href='#' + id='sidebarHeaderDropdownButton' + className='sidebar-header-dropdown__toggle' + onClick={this.props.onClick} + > + <span + className='sidebar-header-dropdown__icon' + dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} + /> + </a> + </OverlayTrigger> ); } } - diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index b7ecc1b63..f345685e4 100755 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -2155,6 +2155,7 @@ "shortcuts.browser.highlight_next": "Highlight text to the next line:\tShift|Down", "shortcuts.browser.newline": "Create a new line:\tShift|Enter", "sidebar.channels": "PUBLIC CHANNELS", + "sidebar.mainMenu": "Main Menu", "sidebar.createChannel": "Create new public channel", "sidebar.createGroup": "Create new private channel", "sidebar.direct": "DIRECT MESSAGES", diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 5ecc0d43e..58887b0bc 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -692,3 +692,9 @@ padding-left: 0; } } + +.modal-invite-member { + .btn:hover { + text-decoration: underline; + } +} diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 3e0a51422..4b7348d7b 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -157,12 +157,10 @@ .channel-header__info { margin-top: 12px; white-space: nowrap; - + .header-dropdown__icon { + color: $dark-gray; + } .channel-header__title { - .header-dropdown__icon { - color: $dark-gray; - } - > a { display: inline-block; text-decoration: none; @@ -458,7 +456,6 @@ &.inactive { color: inherit; - &:hover, &:active { color: inherit; } diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss index cb003c828..f44454eb7 100644 --- a/webapp/sass/layout/_team-sidebar.scss +++ b/webapp/sass/layout/_team-sidebar.scss @@ -25,6 +25,9 @@ display: block; margin-left: 11px; text-decoration: none; + &:hover .team-btn { + border-color: white; + } } .team-btn { diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index f33417200..0c690178e 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -225,6 +225,9 @@ img { border: 3px solid transparent; + &:hover { + cursor: pointer; + } } .active { diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 0af1ee220..0424792ad 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -631,7 +631,7 @@ export function applyTheme(theme) { changeCss('.app__body .shortcut-key, .app__body .post__body hr, .app__body .loading-screen .loading__content .round, .app__body .tutorial__circles .circle', 'background:' + theme.centerChannelColor); changeCss('.app__body .channel-header .heading', 'color:' + theme.centerChannelColor); changeCss('.app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07)); - changeCss('.app__body .channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8)); + changeCss('.app__body .channel-header__info .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8)); changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.4)); changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6)); changeCss('.app__body .custom-textarea, .app__body .custom-textarea:focus, .app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); @@ -712,13 +712,15 @@ export function applyTheme(theme) { changeCss('.app__body .channel-header__links .icon:hover, .app__body .channel-header__links > a.active .icon, .app__body .post .flag-icon__container.visible, .app__body .post .reacticon__container, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor); changeCss('@media(min-width: 768px){.app__body .search__form.focused .search__icon svg', 'stroke:' + theme.linkColor); changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor); - changeCss('.app__body .channel-header .channel-header__icon:hover #member_popover', 'color:' + theme.linkColor); + changeCss('.app__body .channel-header .channel-header__icon:hover #member_popover, .app__body .channel-header .channel-header__icon.active #member_popover', 'color:' + theme.linkColor); changeCss('.app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + changeOpacity(theme.linkColor, 0.6)); changeCss('.app__body .member-list__popover .more-modal__actions svg, .app__body .channel-header .channel-header__icon:hover svg, .app__body .channel-header .channel-header__icon.active svg', 'fill:' + theme.linkColor); changeCss('.app__body .post-reaction.post-reaction--current-user', 'background:' + changeOpacity(theme.linkColor, 0.1)); changeCss('.app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4)); changeCss('.app__body .member-list__popover .more-modal__list .more-modal__row:hover, .app__body .channel-header .channel-header__icon:hover, .app__body .channel-header .channel-header__icon.active, .app__body .search-bar__container .search__form.focused', 'border-color:' + theme.linkColor); changeCss('.app__body .post-reaction.post-reaction--current-user', 'color:' + theme.linkColor); + changeCss('.app__body .channel-header__title.open .heading, .app__body .channel-header__info .channel-header__title.open .header-dropdown__icon', 'color:' + theme.linkColor); + changeCss('.app__body .channel-header .dropdown-toggle:hover .heading, .app__body .channel-header .dropdown-toggle:hover .header-dropdown__icon', 'color:' + theme.linkColor); } if (theme.buttonBg) { |