Hover/focus styles for embedded contacts, default action

js/views/conversation_view.js

@@ -1640,6 +1640,10 @@
     },
 
     async showAllMedia() {
+      if (this.panels && this.panels.length > 0) {
+        return;
+      }
+
       // We fetch more documents than media as they don’t require to be loaded
       // into memory right away. Revisit this once we have infinite scrolling:
       const DEFAULT_MEDIA_FETCH_COUNT = 50;

stylesheets/_modules.scss

@@ -1203,7 +1203,7 @@
 .module-message__send-message-button {
   @include button-reset;
 
-  width: 100%;
+  width: calc(100% + 24px);
 
   @include font-body-2-bold;
 
@@ -1228,6 +1228,11 @@
     background-color: $color-gray-75;
     border: 1px solid $color-gray-45;
   }
+
+  &:focus,
+  &:hover {
+    box-shadow: 0px 0px 0px 2px $color-signal-blue;
+  }
 }
 
 .module-message__author-avatar {
@@ -1776,10 +1781,16 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   @include button-reset;
 
   width: 100%;
+  padding: 5px;
 
   display: flex;
   flex-direction: row;
   align-items: center;
+
+  &:focus,
+  &:hover {
+    box-shadow: 0px 0px 0px 2px $color-signal-blue;
+  }
 }
 
 .module-embedded-contact--with-content-above {

ts/components/conversation/EmbeddedContact.md

@@ -30,6 +30,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -40,6 +41,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -50,6 +52,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -61,6 +64,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
 </util.ConversationContext>;
@@ -96,6 +100,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -106,6 +111,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
 </util.ConversationContext>;
@@ -113,10 +119,11 @@ const contact = {
 
 #### Really long data
 
-```
+```jsx
 const contact = {
   name: {
-    displayName: 'Dr. First Middle Last Junior Senior and all that and a bag of chips',
+    displayName:
+      'Dr. First Middle Last Junior Senior and all that and a bag of chips',
   },
   number: [
     {
@@ -130,23 +137,27 @@ const contact = {
     },
   },
 };
-<util.ConversationContext theme={util.theme}  ios={util.ios}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="module-message-container">
     <Message
-    authorColor="green"
+      authorColor="green"
-    direction="incoming"
+      direction="incoming"
-    i18n={util.i18n}
+      i18n={util.i18n}
-    timestamp={Date.now()}
+      timestamp={Date.now()}
-    contact={contact}/>
+      contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
+    />
   </div>
   <div className="module-message-container">
-  <Message
+    <Message
-    authorColor="green"
+      authorColor="green"
-    direction="outgoing"
+      direction="outgoing"
-    status="delivered"
+      status="delivered"
-    i18n={util.i18n}
+      i18n={util.i18n}
-    timestamp={Date.now()}
+      timestamp={Date.now()}
-    contact={contact}/>
+      contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
+    />
   </div>
 </util.ConversationContext>;
 ```
@@ -182,6 +193,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -194,6 +206,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -206,6 +219,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
 </util.ConversationContext>;
@@ -238,6 +252,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -248,6 +263,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -258,6 +274,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -269,6 +286,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
 </util.ConversationContext>;
@@ -299,6 +317,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -309,6 +328,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -319,6 +339,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -330,6 +351,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
 </util.ConversationContext>;
@@ -363,6 +385,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -373,6 +396,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -383,6 +407,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -394,6 +419,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
 </util.ConversationContext>;
@@ -421,6 +447,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -431,6 +458,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -441,6 +469,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -452,6 +481,7 @@ const contact = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
 </util.ConversationContext>;
@@ -469,6 +499,7 @@ const contact = {};
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -479,6 +510,7 @@ const contact = {};
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -489,6 +521,7 @@ const contact = {};
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -500,6 +533,7 @@ const contact = {};
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
 </util.ConversationContext>;
@@ -550,6 +584,7 @@ const contactWithoutAccount = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contactWithAccount}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -561,6 +596,7 @@ const contactWithoutAccount = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contactWithAccount}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -571,6 +607,7 @@ const contactWithoutAccount = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contactWithAccount}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -582,6 +619,7 @@ const contactWithoutAccount = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contactWithAccount}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -593,6 +631,7 @@ const contactWithoutAccount = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contactWithoutAccount}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -605,6 +644,7 @@ const contactWithoutAccount = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contactWithoutAccount}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -616,6 +656,7 @@ const contactWithoutAccount = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contactWithoutAccount}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
   <div className="module-message-container">
@@ -628,6 +669,7 @@ const contactWithoutAccount = {
       i18n={util.i18n}
       timestamp={Date.now()}
       contact={contactWithoutAccount}
+      selectMessage={(...args) => console.log('selectMessage', args)}
     />
   </div>
 </util.ConversationContext>;

ts/components/conversation/EmbeddedContact.tsx

@@ -16,6 +16,7 @@ interface Props {
   isIncoming: boolean;
   withContentAbove: boolean;
   withContentBelow: boolean;
+  tabIndex: number;
   onClick?: () => void;
 }
 
@@ -26,6 +27,7 @@ export class EmbeddedContact extends React.Component<Props> {
       i18n,
       isIncoming,
       onClick,
+      tabIndex,
       withContentAbove,
       withContentBelow,
     } = this.props;
@@ -43,6 +45,18 @@ export class EmbeddedContact extends React.Component<Props> {
             ? 'module-embedded-contact--with-content-below'
             : null
         )}
+        onKeyDown={(event: React.KeyboardEvent) => {
+          if (event.key !== 'Enter' && event.key !== 'Space') {
+            return;
+          }
+
+          if (onClick) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            onClick();
+          }
+        }}
         onClick={(event: React.MouseEvent) => {
           if (onClick) {
             event.stopPropagation();
@@ -51,6 +65,7 @@ export class EmbeddedContact extends React.Component<Props> {
             onClick();
           }
         }}
+        tabIndex={tabIndex}
       >
         {renderAvatar({ contact, i18n, size: 52, direction })}
         <div className="module-embedded-contact__text-container">

ts/components/conversation/Message.tsx

@@ -738,6 +738,9 @@ export class Message extends React.PureComponent<Props, State> {
       conversationType === 'group' && direction === 'incoming';
     const withContentBelow = withCaption || !collapseMetadata;
 
+    const otherContent = (contact && contact.signalAccount) || withCaption;
+    const tabIndex = otherContent ? 0 : -1;
+
     return (
       <EmbeddedContact
         contact={contact}
@@ -748,6 +751,7 @@ export class Message extends React.PureComponent<Props, State> {
         }}
         withContentAbove={withContentAbove}
         withContentBelow={withContentBelow}
+        tabIndex={tabIndex}
       />
     );
   }
@@ -1250,10 +1254,13 @@ export class Message extends React.PureComponent<Props, State> {
   ) => {
     const {
       attachments,
+      contact,
       displayTapToViewMessage,
       id,
       isTapToView,
       isTapToViewExpired,
+      openConversation,
+      showContactDetail,
       showVisualAttachment,
     } = this.props;
     const { imageBroken } = this.state;
@@ -1321,6 +1328,20 @@ export class Message extends React.PureComponent<Props, State> {
         this.audioRef.current.pause();
       }
     }
+
+    if (contact && contact.signalAccount) {
+      openConversation(contact.signalAccount);
+
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (contact) {
+      showContactDetail({ contact, signalAccount: contact.signalAccount });
+
+      event.preventDefault();
+      event.stopPropagation();
+    }
   };
 
   public openGenericAttachment = (event?: React.MouseEvent) => {