[PLT-4374] Added active state for recent mentions and flagged posts. (m…

…attermost#6253) * [PLT-4374] Added active state for recent mentions and flagged posts. * Increased hover opacity to 0.7 on mention and flag icon.
koox00 · May 9, 2017 · 71cfeeb · 71cfeeb
1 parent 8814657
commit 71cfeeb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/components/search_bar.jsx b/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,13 +264,16 @@ export default class SearchBar extends React.Component {
  href='#'
  type='button'
  onClick={this.searchMentions}
+ className={mentionBtnClass}
  >
  {'@'}
  </a>
  </OverlayTrigger>
  </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/sass/layout/_headers.scss b/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;
+ }
+ }
  }
  }