Improve a few strings, highlight back button on focus, proper key value

2021-09-17 13:57:54 -07:00 · 2021-09-17 13:57:54 -07:00 · e2454ef7c5
parent 65ddf0a9e8
commit e2454ef7c5
7 changed files with 191 additions and 98 deletions
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@ -3374,7 +3374,7 @@
  },
  "member-of-2-groups": {
    "message": "Member of $group1$ and $group2$",
-    "description": "Shown in the conversation hero to indicate this user is a member of at least two mutual groups",
+    "description": "Shown in the conversation hero to indicate this user is a member of two mutual groups",
    "placeholders": {
      "group1": {
        "content": "$1",
@ -3388,7 +3388,7 @@
  },
  "member-of-3-groups": {
    "message": "Member of $group1$, $group2$, and $group3$",
-    "description": "Shown in the conversation hero to indicate this user is a member of at least three mutual groups",
+    "description": "Shown in the conversation hero to indicate this user is a member of three mutual groups",
    "placeholders": {
      "group1": {
        "content": "$1",
@ -3404,9 +3404,27 @@
      }
    }
  },
-  "member-of-more-than-3-groups": {
+  "member-of-more-than-3-groups--one-more": {
+    "message": "Member of $group1$, $group2$, $group3$ and one more",
+    "description": "Shown in the conversation hero to indicate this user is a member of four mutual groups",
+    "placeholders": {
+      "group1": {
+        "content": "$1",
+        "example": "NYC Rock Climbers"
+      },
+      "group2": {
+        "content": "$2",
+        "example": "Dinner Party"
+      },
+      "group3": {
+        "content": "$3",
+        "example": "Friends 🌿"
+      }
+    }
+  },
+  "member-of-more-than-3-groups--multiple-more": {
    "message": "Member of $group1$, $group2$, $group3$ and $remainingCount$ more",
-    "description": "Shown in the conversation hero to indicate this user is a member of at least three mutual groups",
+    "description": "Shown in the conversation hero to indicate this user is a member of 5+ mutual groups.",
    "placeholders": {
      "group1": {
        "content": "$1",
@ -3701,7 +3719,7 @@
    "description": "Title for the select your screen sharing sources modal"
  },
  "calling__SelectPresentingSourcesModal--confirm": {
-    "message": "Share screen",
+    "message": "Start sharing",
    "description": "Confirm button for sharing screen modal"
  },
  "calling__SelectPresentingSourcesModal--entireScreen": {
@ -5230,7 +5248,7 @@
    }
  },
  "ContactModal--rm-admin-info": {
-    "message": "Remove $contact$ as group admin",
+    "message": "Remove $contact$ as group admin?",
    "description": "Shown in a confirmation dialog when you are about to remove admin privileges from someone",
    "placeholders": {
      "contact": {
--- a/stylesheets/components/ConversationHeader.scss
+++ b/stylesheets/components/ConversationHeader.scss
@ -83,6 +83,17 @@
        $color-gray-02
      );
    }
+
+    @include keyboard-mode {
+      &:focus {
+        background-color: $color-ultramarine;
+      }
+    }
+    @include dark-keyboard-mode {
+      &:focus {
+        background-color: $color-ultramarine-light;
+      }
+    }
  }

  &__header {
--- a/ts/components/SharedGroupNames.tsx
+++ b/ts/components/SharedGroupNames.tsx
@ -27,12 +27,12 @@ export const SharedGroupNames: FunctionComponent<PropsType> = ({
    </strong>
  ));

-  if (sharedGroupNames.length > 3) {
+  if (sharedGroupNames.length >= 5) {
    const remainingCount = sharedGroupNames.length - 3;
    return (
      <Intl
        i18n={i18n}
-        id="member-of-more-than-3-groups"
+        id="member-of-more-than-3-groups--multiple-more"
        components={{
          group1: firstThreeGroups[0],
          group2: firstThreeGroups[1],
@ -42,6 +42,19 @@ export const SharedGroupNames: FunctionComponent<PropsType> = ({
      />
    );
  }
+  if (sharedGroupNames.length === 4) {
+    return (
+      <Intl
+        i18n={i18n}
+        id="member-of-more-than-3-groups--one-more"
+        components={{
+          group1: firstThreeGroups[0],
+          group2: firstThreeGroups[1],
+          group3: firstThreeGroups[2],
+        }}
+      />
+    );
+  }
  if (firstThreeGroups.length === 3) {
    return (
      <Intl
--- a/ts/components/conversation/ConversationHero.stories.tsx
+++ b/ts/components/conversation/ConversationHero.stories.tsx
@ -23,6 +23,61 @@ const getPhoneNumber = () => text('phoneNumber', '+1 (646) 327-2700');
 const updateSharedGroups = action('updateSharedGroups');

 storiesOf('Components/Conversation/ConversationHero', module)
+  .add('Direct (Five Other Groups)', () => {
+    return (
+      <div style={{ width: '480px' }}>
+        <ConversationHero
+          about={getAbout()}
+          acceptedMessageRequest
+          i18n={i18n}
+          isMe={false}
+          title={getTitle()}
+          avatarPath={getAvatarPath()}
+          name={getName()}
+          profileName={getProfileName()}
+          phoneNumber={getPhoneNumber()}
+          conversationType="direct"
+          updateSharedGroups={updateSharedGroups}
+          sharedGroupNames={[
+            'NYC Rock Climbers',
+            'Dinner Party',
+            'Friends 🌿',
+            'Fourth',
+            'Fifth',
+          ]}
+          unblurAvatar={action('unblurAvatar')}
+          onHeightChange={action('onHeightChange')}
+        />
+      </div>
+    );
+  })
+  .add('Direct (Four Other Groups)', () => {
+    return (
+      <div style={{ width: '480px' }}>
+        <ConversationHero
+          about={getAbout()}
+          acceptedMessageRequest
+          i18n={i18n}
+          isMe={false}
+          title={getTitle()}
+          avatarPath={getAvatarPath()}
+          name={getName()}
+          profileName={getProfileName()}
+          phoneNumber={getPhoneNumber()}
+          conversationType="direct"
+          updateSharedGroups={updateSharedGroups}
+          sharedGroupNames={[
+            'NYC Rock Climbers',
+            'Dinner Party',
+            'Friends 🌿',
+            'Fourth',
+          ]}
+          unblurAvatar={action('unblurAvatar')}
+          onHeightChange={action('onHeightChange')}
+        />
+      </div>
+    );
+  })
  .add('Direct (Three Other Groups)', () => {
    return (
      <div style={{ width: '480px' }}>
--- a/ts/components/conversation/GroupNotification.stories.tsx
+++ b/ts/components/conversation/GroupNotification.stories.tsx
@ -8,6 +8,7 @@ import { storiesOf } from '@storybook/react';
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
 import { GroupNotification, Props } from './GroupNotification';
+import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';

 const book = storiesOf('Components/Conversation', module);
 const i18n = setupI18n('en', enMessages);
@ -21,22 +22,22 @@ const stories: Array<GroupNotificationStory> = [
    'Combo',
    [
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'add',
            contacts: [
-              {
+              getDefaultConversation({
                title: 'Mrs. Ice',
                phoneNumber: '(202) 555-1001',
-              },
-              {
+              }),
+              getDefaultConversation({
                phoneNumber: '(202) 555-1002',
                title: 'Ms. Earth',
-              },
+              }),
            ],
          },
          { type: 'name', newName: 'Fishing Stories' },
@ -45,23 +46,23 @@ const stories: Array<GroupNotificationStory> = [
        i18n,
      },
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
          isMe: true,
-        },
+        }),
        changes: [
          {
            type: 'add',
            contacts: [
-              {
+              getDefaultConversation({
                title: 'Mrs. Ice',
                phoneNumber: '(202) 555-1001',
-              },
-              {
+              }),
+              getDefaultConversation({
                title: 'Ms. Earth',
                phoneNumber: '(202) 555-1002',
-              },
+              }),
            ],
          },
          { type: 'name', newName: 'Fishing Stories' },
@ -75,132 +76,132 @@ const stories: Array<GroupNotificationStory> = [
    'Joined group',
    [
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'add',
            contacts: [
-              {
+              getDefaultConversation({
                title: '(202) 555-1000',
                phoneNumber: '(202) 555-1000',
-              },
-              {
+              }),
+              getDefaultConversation({
                title: 'Mrs. Ice',
                phoneNumber: '(202) 555-1001',
-              },
-              {
+              }),
+              getDefaultConversation({
                title: 'Ms. Earth',
                phoneNumber: '(202) 555-1002',
-              },
+              }),
            ],
          },
        ],
        i18n,
      },
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'add',
            contacts: [
-              {
+              getDefaultConversation({
                title: '(202) 555-1000',
                phoneNumber: '(202) 555-1000',
                isMe: true,
-              },
-              {
+              }),
+              getDefaultConversation({
                title: 'Mrs. Ice',
                phoneNumber: '(202) 555-1001',
-              },
-              {
+              }),
+              getDefaultConversation({
                title: 'Ms. Earth',
                phoneNumber: '(202) 555-1002',
-              },
+              }),
            ],
          },
        ],
        i18n,
      },
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'add',
            contacts: [
-              {
+              getDefaultConversation({
                title: 'Mr. Fire',
                phoneNumber: '(202) 555-1000',
-              },
+              }),
            ],
          },
        ],
        i18n,
      },
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
          isMe: true,
-        },
+        }),
        changes: [
          {
            type: 'add',
            contacts: [
-              {
+              getDefaultConversation({
                title: 'Mr. Fire',
                phoneNumber: '(202) 555-1000',
-              },
+              }),
            ],
          },
        ],
        i18n,
      },
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'add',
            contacts: [
-              {
+              getDefaultConversation({
                title: 'Mr. Fire',
                phoneNumber: '(202) 555-1000',
                isMe: true,
-              },
+              }),
            ],
          },
        ],
        i18n,
      },
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'add',
            contacts: [
-              {
+              getDefaultConversation({
                title: 'Mr. Fire',
                phoneNumber: '(202) 555-1000',
                isMe: true,
-              },
-              {
+              }),
+              getDefaultConversation({
                title: 'Mrs. Ice',
                phoneNumber: '(202) 555-1001',
-              },
+              }),
            ],
          },
        ],
@ -212,64 +213,64 @@ const stories: Array<GroupNotificationStory> = [
    'Left group',
    [
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'remove',
            contacts: [
-              {
+              getDefaultConversation({
                title: 'Mr. Fire',
                phoneNumber: '(202) 555-1000',
-              },
-              {
+              }),
+              getDefaultConversation({
                title: 'Mrs. Ice',
                phoneNumber: '(202) 555-1001',
-              },
-              {
+              }),
+              getDefaultConversation({
                title: 'Ms. Earth',
                phoneNumber: '(202) 555-1002',
-              },
+              }),
            ],
          },
        ],
        i18n,
      },
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'remove',
            contacts: [
-              {
+              getDefaultConversation({
                title: 'Mr. Fire',
                phoneNumber: '(202) 555-1000',
-              },
+              }),
            ],
          },
        ],
        i18n,
      },
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
          isMe: true,
-        },
+        }),
        changes: [
          {
            type: 'remove',
            contacts: [
-              {
+              getDefaultConversation({
                title: 'Alice',
                phoneNumber: '(202) 555-1000',
                isMe: true,
-              },
+              }),
            ],
          },
        ],
@ -281,10 +282,10 @@ const stories: Array<GroupNotificationStory> = [
    'Title changed',
    [
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'name',
@ -294,11 +295,11 @@ const stories: Array<GroupNotificationStory> = [
        i18n,
      },
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
          isMe: true,
-        },
+        }),
        changes: [
          {
            type: 'name',
@ -313,10 +314,10 @@ const stories: Array<GroupNotificationStory> = [
    'Avatar changed',
    [
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'avatar',
@ -326,11 +327,11 @@ const stories: Array<GroupNotificationStory> = [
        i18n,
      },
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
          isMe: true,
-        },
+        }),
        changes: [
          {
            type: 'avatar',
@ -345,10 +346,10 @@ const stories: Array<GroupNotificationStory> = [
    'Generic group update',
    [
      {
-        from: {
+        from: getDefaultConversation({
          title: 'Alice',
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'general',
@ -362,10 +363,10 @@ const stories: Array<GroupNotificationStory> = [
    'Long name',
    [
      {
-        from: {
+        from: getDefaultConversation({
          title: longName,
          phoneNumber: '(202) 555-1000',
-        },
+        }),
        changes: [
          {
            type: 'general',
--- a/ts/components/conversation/GroupNotification.tsx
+++ b/ts/components/conversation/GroupNotification.tsx
@ -10,23 +10,18 @@ import { Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';

 import { missingCaseError } from '../../util/missingCaseError';
-
-type Contact = {
-  phoneNumber?: string;
-  title: string;
-  isMe?: boolean;
-};
+import { ConversationType } from '../../state/ducks/conversations';

 export type ChangeType = 'add' | 'remove' | 'name' | 'avatar' | 'general';

 type Change = {
  type: ChangeType;
  newName?: string;
-  contacts?: Array<Contact>;
+  contacts?: Array<ConversationType>;
 };

 export type PropsData = {
-  from: Contact;
+  from: ConversationType;
  changes: Array<Change>;
 };

@ -39,7 +34,7 @@ export type Props = PropsData & PropsHousekeeping;
 export class GroupNotification extends React.Component<Props> {
  public renderChange(
    change: Change,
-    from: Contact
+    from: ConversationType
  ): JSX.Element | string | null | undefined {
    const { contacts, type, newName } = change;
    const { i18n } = this.props;
@ -52,7 +47,7 @@ export class GroupNotification extends React.Component<Props> {

        return (
          <span
-            key={`external-${contact.phoneNumber}`}
+            key={`external-${contact.id}`}
            className="module-group-notification__contact"
          >
            <ContactName title={contact.title} />
--- a/ts/components/conversation/Timeline.stories.tsx
+++ b/ts/components/conversation/Timeline.stories.tsx
@ -157,22 +157,22 @@ const items: Record<string, TimelineItemType> = {
        {
          type: 'add',
          contacts: [
-            {
+            getDefaultConversation({
              phoneNumber: '(202) 555-0002',
              title: 'Mr. Fire',
-            },
-            {
+            }),
+            getDefaultConversation({
              phoneNumber: '(202) 555-0003',
              title: 'Ms. Water',
-            },
+            }),
          ],
        },
      ],
-      from: {
+      from: getDefaultConversation({
        phoneNumber: '(202) 555-0001',
        title: 'Mrs. Ice',
        isMe: false,
-      },
+      }),
    },
  },
  'id-9': {