mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

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

Browse source
This commit is contained in:
Scott Nonnenberg 2021-09-17 13:57:54 -07:00 • committed by GitHub
parent 65ddf0a9e8
commit e2454ef7c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 191 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

30
_locales/en/messages.json
View file

@ -3374,7 +3374,7 @@
}, },
"member-of-2-groups": { "member-of-2-groups": {
"message": "Member of $group1$ and $group2$", "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": { "placeholders": {
"group1": { "group1": {
"content": "$1", "content": "$1",
@ -3388,7 +3388,7 @@
}, },
"member-of-3-groups": { "member-of-3-groups": {
"message": "Member of $group1$, $group2$, and $group3$", "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": { "placeholders": {
"group1": { "group1": {
"content": "$1", "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", "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": { "placeholders": {
"group1": { "group1": {
"content": "$1", "content": "$1",
@ -3701,7 +3719,7 @@
"description": "Title for the select your screen sharing sources modal" "description": "Title for the select your screen sharing sources modal"
}, },
"calling__SelectPresentingSourcesModal--confirm": { "calling__SelectPresentingSourcesModal--confirm": {
"message": "Share screen", "message": "Start sharing",
"description": "Confirm button for sharing screen modal" "description": "Confirm button for sharing screen modal"
}, },
"calling__SelectPresentingSourcesModal--entireScreen": { "calling__SelectPresentingSourcesModal--entireScreen": {
@ -5230,7 +5248,7 @@
} }
}, },
"ContactModal--rm-admin-info": { "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", "description": "Shown in a confirmation dialog when you are about to remove admin privileges from someone",
"placeholders": { "placeholders": {
"contact": { "contact": {

11
stylesheets/components/ConversationHeader.scss
View file

@ -83,6 +83,17 @@
$color-gray-02 $color-gray-02
); );
} }
@include keyboard-mode {
&:focus {
background-color: $color-ultramarine;
}
}
@include dark-keyboard-mode {
&:focus {
background-color: $color-ultramarine-light;
}
}
} }
&__header { &__header {

17
ts/components/SharedGroupNames.tsx
View file

@ -27,12 +27,12 @@ export const SharedGroupNames: FunctionComponent<PropsType> = ({
</strong> </strong>
)); ));
if (sharedGroupNames.length > 3) { if (sharedGroupNames.length >= 5) {
const remainingCount = sharedGroupNames.length - 3; const remainingCount = sharedGroupNames.length - 3;
return ( return (
<Intl <Intl
i18n={i18n} i18n={i18n}
id="member-of-more-than-3-groups" id="member-of-more-than-3-groups--multiple-more"
components={{ components={{
group1: firstThreeGroups[0], group1: firstThreeGroups[0],
group2: firstThreeGroups[1], 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) { if (firstThreeGroups.length === 3) {
return ( return (
<Intl <Intl

55
ts/components/conversation/ConversationHero.stories.tsx
View file

@ -23,6 +23,61 @@ const getPhoneNumber = () => text('phoneNumber', '+1 (646) 327-2700');
const updateSharedGroups = action('updateSharedGroups'); const updateSharedGroups = action('updateSharedGroups');
storiesOf('Components/Conversation/ConversationHero', module) 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)', () => { .add('Direct (Three Other Groups)', () => {
return ( return (
<div style={{ width: '480px' }}> <div style={{ width: '480px' }}>

149
ts/components/conversation/GroupNotification.stories.tsx
View file

@ -8,6 +8,7 @@ import { storiesOf } from '@storybook/react';
import { setup as setupI18n } from '../../../js/modules/i18n'; import { setup as setupI18n } from '../../../js/modules/i18n';
import enMessages from '../../../_locales/en/messages.json'; import enMessages from '../../../_locales/en/messages.json';
import { GroupNotification, Props } from './GroupNotification'; import { GroupNotification, Props } from './GroupNotification';
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
const book = storiesOf('Components/Conversation', module); const book = storiesOf('Components/Conversation', module);
const i18n = setupI18n('en', enMessages); const i18n = setupI18n('en', enMessages);
@ -21,22 +22,22 @@ const stories: Array<GroupNotificationStory> = [
'Combo', 'Combo',
[ [
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'add', type: 'add',
contacts: [ contacts: [
{ getDefaultConversation({
title: 'Mrs. Ice', title: 'Mrs. Ice',
phoneNumber: '(202) 555-1001', phoneNumber: '(202) 555-1001',
}, }),
{ getDefaultConversation({
phoneNumber: '(202) 555-1002', phoneNumber: '(202) 555-1002',
title: 'Ms. Earth', title: 'Ms. Earth',
}, }),
], ],
}, },
{ type: 'name', newName: 'Fishing Stories' }, { type: 'name', newName: 'Fishing Stories' },
@ -45,23 +46,23 @@ const stories: Array<GroupNotificationStory> = [
i18n, i18n,
}, },
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
isMe: true, isMe: true,
}, }),
changes: [ changes: [
{ {
type: 'add', type: 'add',
contacts: [ contacts: [
{ getDefaultConversation({
title: 'Mrs. Ice', title: 'Mrs. Ice',
phoneNumber: '(202) 555-1001', phoneNumber: '(202) 555-1001',
}, }),
{ getDefaultConversation({
title: 'Ms. Earth', title: 'Ms. Earth',
phoneNumber: '(202) 555-1002', phoneNumber: '(202) 555-1002',
}, }),
], ],
}, },
{ type: 'name', newName: 'Fishing Stories' }, { type: 'name', newName: 'Fishing Stories' },
@ -75,132 +76,132 @@ const stories: Array<GroupNotificationStory> = [
'Joined group', 'Joined group',
[ [
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'add', type: 'add',
contacts: [ contacts: [
{ getDefaultConversation({
title: '(202) 555-1000', title: '(202) 555-1000',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
{ getDefaultConversation({
title: 'Mrs. Ice', title: 'Mrs. Ice',
phoneNumber: '(202) 555-1001', phoneNumber: '(202) 555-1001',
}, }),
{ getDefaultConversation({
title: 'Ms. Earth', title: 'Ms. Earth',
phoneNumber: '(202) 555-1002', phoneNumber: '(202) 555-1002',
}, }),
], ],
}, },
], ],
i18n, i18n,
}, },
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'add', type: 'add',
contacts: [ contacts: [
{ getDefaultConversation({
title: '(202) 555-1000', title: '(202) 555-1000',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
isMe: true, isMe: true,
}, }),
{ getDefaultConversation({
title: 'Mrs. Ice', title: 'Mrs. Ice',
phoneNumber: '(202) 555-1001', phoneNumber: '(202) 555-1001',
}, }),
{ getDefaultConversation({
title: 'Ms. Earth', title: 'Ms. Earth',
phoneNumber: '(202) 555-1002', phoneNumber: '(202) 555-1002',
}, }),
], ],
}, },
], ],
i18n, i18n,
}, },
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'add', type: 'add',
contacts: [ contacts: [
{ getDefaultConversation({
title: 'Mr. Fire', title: 'Mr. Fire',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
], ],
}, },
], ],
i18n, i18n,
}, },
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
isMe: true, isMe: true,
}, }),
changes: [ changes: [
{ {
type: 'add', type: 'add',
contacts: [ contacts: [
{ getDefaultConversation({
title: 'Mr. Fire', title: 'Mr. Fire',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
], ],
}, },
], ],
i18n, i18n,
}, },
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'add', type: 'add',
contacts: [ contacts: [
{ getDefaultConversation({
title: 'Mr. Fire', title: 'Mr. Fire',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
isMe: true, isMe: true,
}, }),
], ],
}, },
], ],
i18n, i18n,
}, },
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'add', type: 'add',
contacts: [ contacts: [
{ getDefaultConversation({
title: 'Mr. Fire', title: 'Mr. Fire',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
isMe: true, isMe: true,
}, }),
{ getDefaultConversation({
title: 'Mrs. Ice', title: 'Mrs. Ice',
phoneNumber: '(202) 555-1001', phoneNumber: '(202) 555-1001',
}, }),
], ],
}, },
], ],
@ -212,64 +213,64 @@ const stories: Array<GroupNotificationStory> = [
'Left group', 'Left group',
[ [
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'remove', type: 'remove',
contacts: [ contacts: [
{ getDefaultConversation({
title: 'Mr. Fire', title: 'Mr. Fire',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
{ getDefaultConversation({
title: 'Mrs. Ice', title: 'Mrs. Ice',
phoneNumber: '(202) 555-1001', phoneNumber: '(202) 555-1001',
}, }),
{ getDefaultConversation({
title: 'Ms. Earth', title: 'Ms. Earth',
phoneNumber: '(202) 555-1002', phoneNumber: '(202) 555-1002',
}, }),
], ],
}, },
], ],
i18n, i18n,
}, },
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'remove', type: 'remove',
contacts: [ contacts: [
{ getDefaultConversation({
title: 'Mr. Fire', title: 'Mr. Fire',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
], ],
}, },
], ],
i18n, i18n,
}, },
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
isMe: true, isMe: true,
}, }),
changes: [ changes: [
{ {
type: 'remove', type: 'remove',
contacts: [ contacts: [
{ getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
isMe: true, isMe: true,
}, }),
], ],
}, },
], ],
@ -281,10 +282,10 @@ const stories: Array<GroupNotificationStory> = [
'Title changed', 'Title changed',
[ [
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'name', type: 'name',
@ -294,11 +295,11 @@ const stories: Array<GroupNotificationStory> = [
i18n, i18n,
}, },
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
isMe: true, isMe: true,
}, }),
changes: [ changes: [
{ {
type: 'name', type: 'name',
@ -313,10 +314,10 @@ const stories: Array<GroupNotificationStory> = [
'Avatar changed', 'Avatar changed',
[ [
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'avatar', type: 'avatar',
@ -326,11 +327,11 @@ const stories: Array<GroupNotificationStory> = [
i18n, i18n,
}, },
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
isMe: true, isMe: true,
}, }),
changes: [ changes: [
{ {
type: 'avatar', type: 'avatar',
@ -345,10 +346,10 @@ const stories: Array<GroupNotificationStory> = [
'Generic group update', 'Generic group update',
[ [
{ {
from: { from: getDefaultConversation({
title: 'Alice', title: 'Alice',
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'general', type: 'general',
@ -362,10 +363,10 @@ const stories: Array<GroupNotificationStory> = [
'Long name', 'Long name',
[ [
{ {
from: { from: getDefaultConversation({
title: longName, title: longName,
phoneNumber: '(202) 555-1000', phoneNumber: '(202) 555-1000',
}, }),
changes: [ changes: [
{ {
type: 'general', type: 'general',

15
ts/components/conversation/GroupNotification.tsx
View file

@ -10,23 +10,18 @@ import { Intl } from '../Intl';
import { LocalizerType } from '../../types/Util'; import { LocalizerType } from '../../types/Util';
import { missingCaseError } from '../../util/missingCaseError'; import { missingCaseError } from '../../util/missingCaseError';
import { ConversationType } from '../../state/ducks/conversations';
type Contact = {
phoneNumber?: string;
title: string;
isMe?: boolean;
};
export type ChangeType = 'add' | 'remove' | 'name' | 'avatar' | 'general'; export type ChangeType = 'add' | 'remove' | 'name' | 'avatar' | 'general';
type Change = { type Change = {
type: ChangeType; type: ChangeType;
newName?: string; newName?: string;
contacts?: Array<Contact>; contacts?: Array<ConversationType>;
}; };
export type PropsData = { export type PropsData = {
from: Contact; from: ConversationType;
changes: Array<Change>; changes: Array<Change>;
}; };
@ -39,7 +34,7 @@ export type Props = PropsData & PropsHousekeeping;
export class GroupNotification extends React.Component<Props> { export class GroupNotification extends React.Component<Props> {
public renderChange( public renderChange(
change: Change, change: Change,
from: Contact from: ConversationType
): JSX.Element | string | null | undefined { ): JSX.Element | string | null | undefined {
const { contacts, type, newName } = change; const { contacts, type, newName } = change;
const { i18n } = this.props; const { i18n } = this.props;
@ -52,7 +47,7 @@ export class GroupNotification extends React.Component<Props> {
return ( return (
<span <span
key={`external-${contact.phoneNumber}`} key={`external-${contact.id}`}
className="module-group-notification__contact" className="module-group-notification__contact"
> >
<ContactName title={contact.title} /> <ContactName title={contact.title} />

12
ts/components/conversation/Timeline.stories.tsx
View file

@ -157,22 +157,22 @@ const items: Record<string, TimelineItemType> = {
{ {
type: 'add', type: 'add',
contacts: [ contacts: [
{ getDefaultConversation({
phoneNumber: '(202) 555-0002', phoneNumber: '(202) 555-0002',
title: 'Mr. Fire', title: 'Mr. Fire',
}, }),
{ getDefaultConversation({
phoneNumber: '(202) 555-0003', phoneNumber: '(202) 555-0003',
title: 'Ms. Water', title: 'Ms. Water',
}, }),
], ],
}, },
], ],
from: { from: getDefaultConversation({
phoneNumber: '(202) 555-0001', phoneNumber: '(202) 555-0001',
title: 'Mrs. Ice', title: 'Mrs. Ice',
isMe: false, isMe: false,
}, }),
}, },
}, },
'id-9': { 'id-9': {