Hover/focus styles for embedded contacts, default action

2019-11-14 18:12:31 -08:00 · 2019-11-14 18:12:31 -08:00 · 5750412fda
parent bb02fa3a7e
commit 5750412fda
5 changed files with 109 additions and 16 deletions
--- a/js/views/conversation_view.js
+++ b/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;
--- a/stylesheets/_modules.scss
+++ b/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 {
--- a/ts/components/conversation/EmbeddedContact.md
+++ b/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"
-    direction="incoming"
-    i18n={util.i18n}
-    timestamp={Date.now()}
-    contact={contact}/>
+      authorColor="green"
+      direction="incoming"
+      i18n={util.i18n}
+      timestamp={Date.now()}
+      contact={contact}
+      selectMessage={(...args) => console.log('selectMessage', args)}
+    />
  </div>
  <div className="module-message-container">
-  <Message
-    authorColor="green"
-    direction="outgoing"
-    status="delivered"
-    i18n={util.i18n}
-    timestamp={Date.now()}
-    contact={contact}/>
+    <Message
+      authorColor="green"
+      direction="outgoing"
+      status="delivered"
+      i18n={util.i18n}
+      timestamp={Date.now()}
+      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>;
--- a/ts/components/conversation/EmbeddedContact.tsx
+++ b/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">
--- a/ts/components/conversation/Message.tsx
+++ b/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) => {