Improve a few strings, highlight back button on focus, proper key value
This commit is contained in:
Scott Nonnenberg
GitHub
parent
65ddf0a9e8
commit
e2454ef7c5
7 changed files with 191 additions and 98 deletions
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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' }}>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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': {
|
||||
|
|
|
|||
Loading…
Reference in a new issue