MM-23120 Custom status issues

components/channel_header/__snapshots__/channel_header.test.jsx.snap

@@ -1268,7 +1268,7 @@ exports[`components/ChannelHeader should render properly when custom status is s
  id="status_dropdown.set_offline"
  />
  <CustomStatusEmoji
- emojiSize={15}
+ emojiSize={16}
  emojiStyle={
  Object {
  "margin": "0 4px 1px",

components/channel_header/channel_header.js

@@ -231,7 +231,6 @@ class ChannelHeader extends React.PureComponent {
  <>
  <CustomStatusEmoji
  userID={this.props.dmUser.id}
- emojiSize={15}
  emojiStyle={{
  verticalAlign: 'top',
  margin: '0 4px 1px',

components/custom_status/custom_status.scss

@@ -151,7 +151,8 @@
 }
 
 .statusSuggestion {
- height: 232px;
+ min-height: 232px;
+ max-height: 264px;
  overflow: auto;
  margin-top: 8px;
 
@@ -222,3 +223,7 @@
  margin: 0;
  }
 }
+
+span.emoticon[style]:hover {
+ opacity: 1 !important;
+}

components/custom_status/custom_status_emoji.tsx

@@ -58,12 +58,14 @@ const CustomStatusEmoji = (props: ComponentProps) => {
  marginTop: 2,
  }}
  />
- <span
- className='custom-status-text'
- style={{marginLeft: 5}}
- >
- {customStatus.text}
- </span>
+ {customStatus.text &&
+ <span
+ className='custom-status-text'
+ style={{marginLeft: 5}}
+ >
+ {customStatus.text}
+ </span>
+ }
  </div>
  </Tooltip>
  }

components/custom_status/custom_status_modal.tsx

@@ -103,8 +103,8 @@ const CustomStatusModal: React.FC<Props> = (props: Props) => {
  ) : <EmojiIcon className={'icon icon--emoji'}/>;
 
  const clearHandle = () => {
- setText('');
  setEmoji('');
+ setText('');
  };
 
  const disableSetStatus = (currentCustomStatus.text === text && currentCustomStatus.emoji === emoji) ||
@@ -189,6 +189,8 @@ const CustomStatusModal: React.FC<Props> = (props: Props) => {
  </div>
  );
 
+ const showSuggestions = !isStatusSet || (currentCustomStatus?.emoji === emoji && text && currentCustomStatus?.text === text);
+
  return (
  <GenericModal
  enforceFocus={false}
@@ -260,7 +262,7 @@ const CustomStatusModal: React.FC<Props> = (props: Props) => {
  placeholder={formatMessage({id: 'custom_status.set_status', defaultMessage: 'Set a status'})}
  />
  </div>
- {!isStatusSet && suggestion}
+ {showSuggestions && suggestion}
  </div>
  </GenericModal>
  );

components/legacy_sidebar/header/sidebar_header_dropdown_button.jsx

@@ -128,7 +128,6 @@ export default class SidebarHeaderDropdownButton extends React.PureComponent {
  <CustomStatusEmoji
  showTooltip={true}
  tooltipDirection='bottom'
- emojiSize={13}
  emojiStyle={{
  verticalAlign: 'top',
  marginLeft: 2,

components/legacy_sidebar/sidebar_channel_button_or_link/__snapshots__/sidebar_channel_button_or_link.test.jsx.snap

@@ -29,7 +29,7 @@ exports[`component/legacy_sidebar/sidebar_channel_button_or_link/SidebarChannelB
  emojiSize={16}
  emojiStyle={
  Object {
- "marginLeft": 4,
+ "opacity": 0.8,
  }
  }
  showTooltip={true}
@@ -76,7 +76,7 @@ exports[`component/legacy_sidebar/sidebar_channel_button_or_link/SidebarChannelB
  emojiSize={16}
  emojiStyle={
  Object {
- "marginLeft": 4,
+ "opacity": 0.8,
  }
  }
  showTooltip={true}
@@ -129,7 +129,7 @@ exports[`component/legacy_sidebar/sidebar_channel_button_or_link/SidebarChannelB
  emojiSize={16}
  emojiStyle={
  Object {
- "marginLeft": 4,
+ "opacity": 0.8,
  }
  }
  showTooltip={true}
@@ -175,7 +175,7 @@ exports[`component/legacy_sidebar/sidebar_channel_button_or_link/SidebarChannelB
  emojiSize={16}
  emojiStyle={
  Object {
- "marginLeft": 4,
+ "opacity": 0.8,
  }
  }
  showTooltip={true}
@@ -228,7 +228,7 @@ exports[`component/legacy_sidebar/sidebar_channel_button_or_link/SidebarChannelB
  emojiSize={16}
  emojiStyle={
  Object {
- "marginLeft": 4,
+ "opacity": 0.8,
  }
  }
  showTooltip={true}

components/legacy_sidebar/sidebar_channel_button_or_link/sidebar_channel_button_or_link.jsx

@@ -105,6 +105,7 @@ export default class SidebarChannelButtonOrLink extends React.PureComponent {
  <CustomStatusEmoji
  userID={this.props.teammateId}
  showTooltip={true}
+ emojiStyle={{opacity: 0.8}}
  />
  ) : null;
 

components/post_view/post_header/post_header_custom_status.tsx

@@ -36,7 +36,6 @@ const PostHeaderCustomStatus = (props: ComponentProps) => {
  <CustomStatusEmoji
  userID={userId}
  showTooltip={true}
- emojiSize={14}
  emojiStyle={{
  marginLeft: 4,
  marginTop: 2,

components/profile_popover/profile_popover.jsx

@@ -275,6 +275,7 @@ class ProfilePopover extends React.PureComponent {
  showTooltip={false}
  emojiStyle={{
  marginRight: 4,
+ marginTop: 1,
  }}
  />
  </span>

components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx

@@ -206,6 +206,7 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
  marginTop: -4,
  marginLeft: 6,
  marginBottom: 0,
+ opacity: 0.8,
  }}
  />
  ) : null;

components/suggestion/switch_channel_provider.jsx

@@ -38,6 +38,7 @@ import {sortChannelsByTypeAndDisplayName, isGroupChannelVisible, isUnreadChannel
 import SharedChannelIndicator from 'components/shared_channel_indicator';
 import BotBadge from 'components/widgets/badges/bot_badge';
 import GuestBadge from 'components/widgets/badges/guest_badge';
+import CustomStatusEmoji from 'components/custom_status/custom_status_emoji';
 
 import {getPostDraft} from 'selectors/rhs';
 import store from 'stores/redux_store.jsx';
@@ -134,6 +135,7 @@ class SwitchChannelSuggestion extends Suggestion {
  }
 
  let tag = null;
+ let customStatus = null;
  if (channel.type === Constants.DM_CHANNEL) {
  tag = (
  <React.Fragment>
@@ -148,6 +150,17 @@ class SwitchChannelSuggestion extends Suggestion {
  </React.Fragment>
  );
 
+ customStatus = (
+ <CustomStatusEmoji
+ showTooltip={true}
+ userID={userItem.id}
+ emojiStyle={{
+ marginBottom: 2,
+ marginLeft: 8,
+ }}
+ />
+ );
+
  let deactivated;
  if (userItem.delete_at) {
  deactivated = (' - ' + Utils.localizeMessage('channel_switch_modal.deactivated', 'Deactivated'));
@@ -208,6 +221,7 @@ class SwitchChannelSuggestion extends Suggestion {
  <span className='suggestion-list__info_user'>
  {displayName}
  </span>
+ {customStatus}
  {sharedIcon}
  {tag}
  {badge}

components/user_settings/notifications/user_settings_notifications.jsx

@@ -350,7 +350,7 @@ export default class NotificationsTab extends React.PureComponent {
  <span>
  <FormattedMessage
  id='user.settings.push_notification.status_info'
- defaultMessage='Notification alerts are only pushed to your mobile device when your online status matches the selection above.'
+ defaultMessage='Notification alerts are only pushed to your mobile device when your availability matches the selection above.'
  />
  </span>
  );

i18n/en.json

@@ -4500,7 +4500,7 @@
  "user.settings.push_notification.onlyMentionsOffline": "For mentions and direct messages when offline",
  "user.settings.push_notification.onlyMentionsOnline": "For mentions and direct messages when online, away or offline",
  "user.settings.push_notification.send": "Send mobile push notifications",
- "user.settings.push_notification.status_info": "Notification alerts are only pushed to your mobile device when your online status matches the selection above.",
+ "user.settings.push_notification.status_info": "Notification alerts are only pushed to your mobile device when your availability matches the selection above.",
  "user.settings.security.active": "Active",
  "user.settings.security.close": "Close",
  "user.settings.security.currentPassword": "Current Password",

sass/components/_suggestion-list.scss

@@ -139,6 +139,7 @@
 
  .suggestion-list__info_user {
  display: flex;
+ max-width: 89%;
  }
 }
 

sass/layout/_headers.scss

@@ -461,19 +461,12 @@
  display: flex;
  margin-right: 7px;
  line-height: 16px;
- max-width: calc(100% - 225px);
+ overflow: hidden;
  align-items: center;
 
  p {
  margin: 0;
  }
-
- &:after {
- content: '\2022';
- margin: 0 2px 0 5px;
- position: relative;
- top: 1px;
- }
  }
 
  .status {