Disable header more menu in select mode

stylesheets/components/ConversationHeader.scss

@@ -162,39 +162,42 @@
 
     &:disabled {
       cursor: default;
+      opacity: 0.5;
     }
 
     &--show-disabled {
       opacity: 0.5;
     }
 
-    @include light-theme {
+    &:not(:disabled) {
-      &:hover,
+      @include light-theme {
-      &:focus {
+        &:hover,
-        background: $color-gray-02;
+        &:focus {
+          background: $color-gray-02;
+        }
+        &:active {
+          background: $color-gray-05;
+        }
       }
-      &:active {
+      @include dark-theme {
-        background: $color-gray-05;
+        &:hover,
+        &:focus {
+          background: $color-gray-80;
+        }
+        &:active {
+          background: $color-gray-75;
+        }
       }
-    }
-    @include dark-theme {
-      &:hover,
-      &:focus {
-        background: $color-gray-80;
-      }
-      &:active {
-        background: $color-gray-75;
-      }
-    }
 
-    @include keyboard-mode {
+      @include keyboard-mode {
-      &:focus {
+        &:focus {
-        border-color: $color-ultramarine;
+          border-color: $color-ultramarine;
+        }
       }
-    }
+      @include dark-keyboard-mode {
-    @include dark-keyboard-mode {
+        &:focus {
-      &:focus {
+          border-color: $color-ultramarine-light;
-        border-color: $color-ultramarine-light;
+        }
       }
     }
 

ts/components/conversation/ConversationHeader.stories.tsx

@@ -35,6 +35,7 @@ const commonProps = {
   cannotLeaveBecauseYouAreLastAdmin: false,
   showBackButton: false,
   outgoingCallButtonStyle: OutgoingCallButtonStyle.Both,
+  isSelectMode: false,
 
   i18n,
 

ts/components/conversation/ConversationHeader.tsx

@@ -57,6 +57,7 @@ export type PropsDataType = {
   isMissingMandatoryProfileSharing?: boolean;
   outgoingCallButtonStyle: OutgoingCallButtonStyle;
   isSMSOnly?: boolean;
+  isSelectMode: boolean;
   isSignalConversation?: boolean;
   theme: ThemeType;
 } & Pick<
@@ -287,10 +288,14 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
   }
 
   private renderMoreButton(triggerId: string): ReactNode {
-    const { i18n } = this.props;
+    const { i18n, isSelectMode } = this.props;
 
     return (
-      <ContextMenuTrigger id={triggerId} ref={this.menuTriggerRef}>
+      <ContextMenuTrigger
+        id={triggerId}
+        ref={this.menuTriggerRef}
+        disable={isSelectMode}
+      >
         <button
           type="button"
           onClick={this.showMenuBound}
@@ -299,6 +304,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
             'module-ConversationHeader__button--more'
           )}
           aria-label={i18n('icu:moreInfo')}
+          disabled={isSelectMode}
         />
       </ContextMenuTrigger>
     );
@@ -339,6 +345,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
       onArchive,
       onMarkUnread,
       toggleSelectMode,
+      isSelectMode,
       onMoveToInbox,
       pushPanelForConversation,
       setDisappearingMessages,
@@ -346,6 +353,11 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
       setPinned,
       type,
     } = this.props;
+
+    if (isSelectMode) {
+      return null;
+    }
+
     const isRTL = i18n.getLocaleDirection() === 'rtl';
 
     const muteOptions = getMuteOptions(muteExpiresAt, i18n);

ts/state/smart/ConversationHeader.tsx

@@ -15,6 +15,7 @@ import {
   getConversationByServiceIdSelector,
   getConversationSelector,
   getHasPanelOpen,
+  getSelectedMessageIds,
   isMissingRequiredProfileSharing,
 } from '../selectors/conversations';
 import { CallMode } from '../../types/Calling';
@@ -123,6 +124,9 @@ export function SmartConversationHeader({ id }: OwnProps): JSX.Element {
   const cannotLeaveBecauseYouAreLastAdmin =
     getCannotLeaveBecauseYouAreLastAdmin(groupMemberships.memberships, isAdmin);
 
+  const selectedMessageIds = useSelector(getSelectedMessageIds);
+  const isSelectMode = selectedMessageIds != null;
+
   return (
     <ConversationHeader
       {...pick(conversation, [
@@ -175,6 +179,7 @@ export function SmartConversationHeader({ id }: OwnProps): JSX.Element {
       setMuteExpiration={setMuteExpiration}
       setPinned={setPinned}
       theme={theme}
+      isSelectMode={isSelectMode}
       toggleSelectMode={toggleSelectMode}
       viewUserStories={viewUserStories}
     />