diff options
| author | Kacper Kula <kulak@kulak.at> | 2017-05-09 14:53:47 +0200 |
|---|---|---|
| committer | Joram Wilander <jwawilander@gmail.com> | 2017-05-09 07:53:47 -0500 |
| commit | 2b18e782d63792d48b199982522d3f674921b056 (patch) | |
| tree | ada53a8a9e17ad262836b751c1ef7f6bc6105f23 | |
| parent | 7a618b8973fe1d2b1488738eaa6bfb28912a9d60 (diff) | |
| download | chat-2b18e782d63792d48b199982522d3f674921b056.tar.gz chat-2b18e782d63792d48b199982522d3f674921b056.tar.bz2 chat-2b18e782d63792d48b199982522d3f674921b056.zip | |
[PLT-4374] Added active state for recent mentions and flagged posts. (#6253)
* [PLT-4374] Added active state for recent mentions and flagged posts.
* Increased hover opacity to 0.7 on mention and flag icon.
| -rw-r--r-- | webapp/components/search_bar.jsx | 6 | ||||
| -rw-r--r-- | webapp/sass/layout/_headers.scss | 10 |
2 files changed, 15 insertions, 1 deletions
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index 23f7d1762..1ed8445f8 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -248,6 +248,8 @@ export default class SearchBar extends React.Component { let mentionBtn; let flagBtn; if (this.props.showMentionFlagBtns) { + var mentionBtnClass = SearchStore.isMentionSearch ? 'active' : ''; + mentionBtn = ( <div className='dropdown channel-header__links' @@ -262,6 +264,7 @@ export default class SearchBar extends React.Component { href='#' type='button' onClick={this.searchMentions} + className={mentionBtnClass} > {'@'} </a> @@ -269,6 +272,8 @@ export default class SearchBar extends React.Component { </div> ); + var flagBtnClass = SearchStore.isFlaggedPosts ? 'active' : ''; + flagBtn = ( <div className='dropdown channel-header__links' @@ -283,6 +288,7 @@ export default class SearchBar extends React.Component { href='#' type='button' onClick={this.getFlagged} + className={flagBtnClass} > <span className='icon icon__flag' diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 000a7819e..5e4abcb0e 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -462,12 +462,20 @@ text-decoration: none; &:hover { - @include opacity(1); + @include opacity(0.7); } &:focus { color: inherit; } + + &.active { + color: $primary-color; + @include opacity(1); + .icon { + fill: $primary-color; + } + } } } |