Quick wins bucket 4 (mattermost#5303)

* MM-22807 - Improving mention highlight * Updating emoji css * Updating click effect and variable * Updating padding for mention
koox00 · Apr 16, 2020 · 9c00316 · 9c00316
1 parent 9084b88
commit 9c00316
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 52 deletions.
diff --git a/components/post_view/reaction_list/__snapshots__/reactions_list.test.jsx.snap b/components/post_view/reaction_list/__snapshots__/reactions_list.test.jsx.snap
@@ -85,7 +85,7 @@ exports[`components/ReactionList should render when there are reactions 1`] = `
  className="post-reaction__add"
  id="addReaction-post_id"
  >
- +
+ <AddReactionIcon />
  </span>
  </button>
  </OverlayTrigger>

diff --git a/components/post_view/reaction_list/reaction_list.jsx b/components/post_view/reaction_list/reaction_list.jsx
@@ -10,6 +10,7 @@ import Permissions from 'mattermost-redux/constants/permissions';
 import Constants from 'utils/constants';
 import Reaction from 'components/post_view/reaction';
 import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx';
+import AddReactionIcon from 'components/widgets/icons/add_reaction_icon';
 import OverlayTrigger from 'components/overlay_trigger';
 import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
 import {localizeMessage} from 'utils/utils.jsx';
@@ -159,7 +160,7 @@ export default class ReactionList extends React.PureComponent {
  className='post-reaction__add'
  ref='addReactionButton'
  >
- {'+'}
+ <AddReactionIcon/>
  </span>
  </button>
  </OverlayTrigger>

diff --git a/components/widgets/icons/add_reaction_icon.jsx b/components/widgets/icons/add_reaction_icon.jsx
@@ -0,0 +1,31 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+export default class AddReactionIcon extends React.PureComponent {
+ render() {
+ return (
+ <span {...this.props}>
+ <FormattedMessage
+ id='generic_icons.add-reaction'
+ defaultMessage='Add Reaction Icon'
+ >
+ {(ariaLabel) => (
+ <svg
+ width='16px'
+ height='16px'
+ viewBox='0 0 16 16'
+ role='img'
+ aria-label={ariaLabel}
+ >
+ <path d='M10 8.00001C10.32 8.00001 10.5973 7.88267 10.832 7.64801C11.0773 7.40267 11.2 7.12001 11.2 6.80001C11.2 6.48001 11.0773 6.20267 10.832 5.96801C10.5973 5.72267 10.32 5.60001 10 5.60001C9.68 5.60001 9.39733 5.72267 9.152 5.96801C8.91733 6.20267 8.8 6.48001 8.8 6.80001C8.8 7.12001 8.91733 7.40267 9.152 7.64801C9.39733 7.88267 9.68 8.00001 10 8.00001ZM5.2 8.00001C5.52 8.00001 5.79733 7.88267 6.032 7.64801C6.27733 7.40267 6.4 7.12001 6.4 6.80001C6.4 6.48001 6.27733 6.20267 6.032 5.96801C5.79733 5.72267 5.52 5.60001 5.2 5.60001C4.88 5.60001 4.59733 5.72267 4.352 5.96801C4.11733 6.20267 4 6.48001 4 6.80001C4 7.12001 4.11733 7.40267 4.352 7.64801C4.59733 7.88267 4.88 8.00001 5.2 8.00001ZM13.584 7.93601C13.584 7.97867 13.584 8.05334 13.584 8.16001L13.6 8.40001C13.6 9.48801 13.328 10.496 12.784 11.424C12.2507 12.3307 11.5307 13.0507 10.624 13.584C9.696 14.128 8.688 14.4 7.6 14.4C6.512 14.4 5.504 14.128 4.576 13.584C3.66933 13.0507 2.94933 12.3307 2.416 11.424C1.872 10.496 1.6 9.48801 1.6 8.40001C1.6 7.31201 1.872 6.30401 2.416 5.37601C2.94933 4.46934 3.66933 3.74934 4.576 3.21601C5.504 2.67201 6.512 2.40001 7.6 2.40001L8.064 2.41601C8.17067 1.84001 8.352 1.32801 8.608 0.880006C8.23467 0.826673 7.89867 0.800006 7.6 0.800006C6.224 0.800006 4.944 1.14667 3.76 1.84001C2.61867 2.51201 1.712 3.41867 1.04 4.56001C0.346667 5.74401 0 7.02401 0 8.40001C0 9.77601 0.346667 11.056 1.04 12.24C1.712 13.3813 2.61867 14.288 3.76 14.96C4.944 15.6533 6.224 16 7.6 16C8.976 16 10.256 15.6533 11.44 14.96C12.5813 14.288 13.488 13.3813 14.16 12.24C14.8533 11.056 15.2 9.77601 15.2 8.40001C15.2 8.10134 15.1733 7.76534 15.12 7.39201C14.672 7.64801 14.16 7.82934 13.584 7.93601ZM12 5.72205e-06H13.6V2.40001H16V4.00001H13.6V6.40001H12V4.00001H9.6V2.40001H12V5.72205e-06ZM3.504 10C3.83467 10.832 4.36267 11.504 5.088 12.016C5.84533 12.5387 6.68267 12.8 7.6 12.8C8.51733 12.8 9.35467 12.5387 10.112 12.016C10.8373 11.504 11.3653 10.832 11.696 10H3.504Z'/>
+ </svg>
+
+ )}
+ </FormattedMessage>
+ </span>
+ );
+ }
+}
diff --git a/i18n/en.json b/i18n/en.json
@@ -2372,6 +2372,7 @@
  "general_tab.yes": "Yes",
  "generic_icons.add": "Add Icon",
  "generic_icons.add-mail": "Add Mail Icon",
+ "generic_icons.add-reaction": "Add Reaction Icon",
  "generic_icons.alert": "Alert Icon",
  "generic_icons.archive": "Archive Icon",
  "generic_icons.arrow.down": "Down Arrow Icon",

diff --git a/sass/components/_mentions.scss b/sass/components/_mentions.scss
@@ -105,7 +105,13 @@
 }
 
 .mention--highlight {
+ padding: 0 1px;
+ border-radius: 4px;
  background-color: $yellow;
+
+ .mention--highlight {
+ padding: 0;
+ }
 }
 
 .mention__purpose {

diff --git a/sass/components/_post.scss b/sass/components/_post.scss
@@ -1448,66 +1448,106 @@
  color: $white;
  }
  }
+ }
 
-  .post-reaction-list {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 4px 0 0;
-  align-items: center;
-  min-height: 30px;
-  position: relative;
-  z-index: 5;
+ .post-reaction-list {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 4px 0 0;
+ align-items: center;
+ min-height: 30px;
+ position: relative;
+ z-index: 5;
 
-  .post-add-reaction-emoji-picker-open {
-  display: inline-block;
+ .post-add-reaction-emoji-picker-open {
+ display: inline-block;
 
- .post-reaction {
- @include opacity(1);
- visibility: visible;
- }
+ .post-reaction {
+ @include opacity(1);
+ visibility: visible;
  }
  }
+ }
 
+ .post-add-reaction-emoji-picker-open {
  .post-reaction {
- @include user-select(none);
- @include border-radius(3px);
- border: 1px solid $primary-color;
- cursor: pointer;
- display: inline-flex;
- align-items: center;
- font-size: 11px;
- height: 24px;
- margin-bottom: 5px;
- margin-right: 5px;
- padding: 0 4px 0 3px;
+ background-color: v(button-bg-08);
+ color: v(button-bg);
+ fill: v(button-bg);
+ }
+ }
 
- .post-reaction__emoji {
- margin: 0 3px 0 0;
- max-height: 16px;
- min-height: 16px;
- max-width: 16px;
- min-width: 16px;
- vertical-align: middle;
+ .post-reaction {
+ @include user-select(none);
+ @include border-radius(4px);
+ border: 1px solid transparent;
+ background: v(center-channel-color-08);
+ fill: v(center-channel-color-56);
+ color: v(center-channel-color-64);
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ font-size: 11px;
+ font-weight: 600;
+ min-width: 28px;
+ height: 24px;
+ margin: 0 4px 4px 0;
+ padding: 0 5px;
+
+ &:not(.post-reaction--current-user) {
+ &:hover {
+ background: v(center-channel-bg);
+ border-color: v(center-channel-color-16);
+ color: v(center-channel-color-72);
+ fill: v(center-channel-color-72);
  }
 
- .post-reaction__add {
- font-size: 20px;
- line-height: 0;
- margin: 0 5px;
- position: relative;
- vertical-align: middle;
+ &:active {
+ background-color: v(button-bg-08);
+ color: v(button-bg);
+ fill: v(button-bg);
  }
+ }
 
- &--current-user {
- .post-reaction__count {
- font-weight: 600;
- }
+ &--current-user {
+ color: v(button-bg);
+ background-color: v(button-bg-08);
+ border-color: v(button-bg);
+
+ &:hover {
+ border-color: v(button-bg);
+ background: v(center-channel-bg);
  }
 
- &--read-only {
- cursor: default;
+ &:active {
+ background-color: v(button-bg-08);
+ color: v(button-bg);
+ fill: v(button-bg);
  }
  }
+
+ .post-reaction__count {
+ line-height: 16px;
+ }
+
+ .post-reaction__emoji {
+ margin: 0 2px 0 0;
+ max-height: 16px;
+ min-height: 16px;
+ max-width: 16px;
+ min-width: 16px;
+ vertical-align: middle;
+ }
+
+ .post-reaction__add {
+ display: block;
+ width: 16px;
+ height: 16px;
+ }
+
+ &--read-only {
+ cursor: default;
+ }
  }
 
  .post__link {

diff --git a/utils/utils.jsx b/utils/utils.jsx
@@ -720,8 +720,6 @@ export function applyTheme(theme) {
  changeCss('.app__body .post.post--comment.current--user .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
  changeCss('.app__body .channel-header__info .status .offline--icon', 'fill:' + theme.centerChannelColor);
  changeCss('.app__body .navbar .status .offline--icon', 'fill:' + theme.centerChannelColor);
- changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.25));
- changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.7));
  changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor);
  changeCss('.app__body .emoji-picker', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
  changeCss('.app__body .emoji-picker__search-icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
@@ -872,18 +870,15 @@ export function applyTheme(theme) {
  changeCss('.app__body .more-modal__list .a11y--focused, .app__body .post.a11y--focused, .app__body .channel-header.a11y--focused, .app__body .post-create.a11y--focused, .app__body .user-popover.a11y--focused, .app__body .post-message__text.a11y--focused, #archive-link-home>a.a11y--focused', 'box-shadow: inset 0 0 1px 3px ' + changeOpacity(theme.linkColor, 0.5) + ', inset 0 0 0 1px ' + theme.linkColor);
  changeCss('.multi-select__focused > div', 'box-shadow: 0 0 1px 3px ' + changeOpacity(theme.linkColor, 0.5) + ', 0 0 0 1px ' + theme.linkColor);
  changeCss('.app__body .a11y--focused', 'box-shadow: 0 0 1px 3px ' + changeOpacity(theme.linkColor, 0.5) + ', 0 0 0 1px ' + theme.linkColor);
- changeCss('.app__body .DayPicker-Day--today, .app__body .post-add-reaction:hover .post-reaction, .app__body .channel-header .channel-header__favorites.inactive:hover, .app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .channel-header__links > .color--link.active, .app__body .color--link, .app__body a:focus, .app__body .color--link:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor);
+ changeCss('.app__body .DayPicker-Day--today, .app__body .channel-header .channel-header__favorites.inactive:hover, .app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .channel-header__links > .color--link.active, .app__body .color--link, .app__body a:focus, .app__body .color--link:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor);
  changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5));
  changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover, .app__body .member-list__popover .more-modal__list .more-modal__row:hover', 'background:' + changeOpacity(theme.linkColor, 0.08));
  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 .post__reply', 'fill:' + theme.linkColor);
  changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .card-icon__container.active svg, .app__body .post .post__reply', 'fill:' + 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', 'fill:' + theme.linkColor);
- changeCss('.app__body .post-reaction.post-reaction--current-user, .app__body .post-reaction:hover', 'background:' + changeOpacity(theme.linkColor, 0.1));
- changeCss('.app__body .post-add-reaction:hover .post-reaction, .app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4));
  changeCss('.app__body .modal-tabs .nav-tabs > li.active, .app__body .channel-header .channel-header_plugin-dropdown a:hover, .app__body .member-list__popover .more-modal__list .more-modal__row:hover', 'border-color:' + theme.linkColor);
  changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover svg', 'fill:' + theme.linkColor);
- changeCss('.app__body .post-reaction.post-reaction--current-user, .app__body .post-reaction:hover', 'color:' + theme.linkColor);
  changeCss('.app__body .channel-header .dropdown-toggle:hover .heading, .app__body .channel-header .dropdown-toggle:hover .header-dropdown__icon, .app__body .channel-header__title .open .heading, .app__body .channel-header__info .channel-header__title .open .header-dropdown__icon, .app__body .channel-header__title .open .heading, .app__body .channel-header__info .channel-header__title .open .heading', 'color:' + theme.linkColor);
  changeCss('.emoji-picker__container .icon--emoji.active svg', 'fill:' + theme.linkColor);
  changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover .fa, .sidebar--right--expanded .sidebar--right__expand', 'color:' + theme.linkColor);