Update strings and design around custom stories

This commit is contained in:
Scott Nonnenberg 2022-10-25 16:57:16 -07:00 committed by GitHub
parent 0308f208d8
commit 08f2a966a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 203 additions and 99 deletions

View file

@ -3037,11 +3037,15 @@
},
"ConversationHero--members": {
"message": "$count$ members",
"description": "Specifies the number of members in a group conversation"
"description": "(deleted 2022/11/21) Specifies the number of members in a group conversation"
},
"ConversationHero--members-1": {
"message": "1 member",
"description": "Specifies the number of members in a group conversation when there is one member"
"description": "(deleted 2022/11/21) Specifies the number of members in a group conversation when there is one member"
},
"icu:ConversationHero--members": {
"messageformat": "{count, plural, one {1 member} other {# members}}",
"description": "Specifies the number of members in a group conversation"
},
"member-of-1-group": {
"message": "Member of $group$",
@ -5039,10 +5043,6 @@
"message": "Learn More",
"description": "Text that links to a support article"
},
"ProfileEditor--learnMore": {
"message": "Learn More",
"description": "Text that links to a support article"
},
"Bio--speak-freely": {
"message": "Speak Freely",
"description": "A default bio option"
@ -5516,19 +5516,27 @@
"description": "Title for the story settings modal"
},
"StoriesSettings__new-list": {
"message": "New private story",
"description": "Label to create a new private story list"
"message": "New custom story",
"description": "Label to create a new custom distribution list"
},
"StoriesSettings__new-list--visibility": {
"message": "Only you can see the name of this story.",
"description": "Explanation about the visibility of custom distribution list names"
},
"StoriesSettings__viewers--singular": {
"message": "$num$ viewer",
"description": "A single viewer"
"description": "(deleted 2022/10/21) A single viewer"
},
"StoriesSettings__viewers--plural": {
"message": "$num$ viewers",
"description": "More than one viewer"
"description": "(deleted 2022/10/21) More than one viewer"
},
"icu:StoriesSettings__viewers": {
"messageformat": "{count, plural, one {1 viewer} other {# viewers}}",
"description": "The number of viewers for a story distribution list"
},
"StoriesSettings__who-can-see": {
"message": "Who can see this story",
"message": "Who can view this story",
"description": "Title for the who can see this story section"
},
"StoriesSettings__add-viewer": {
@ -5537,7 +5545,7 @@
},
"StoriesSettings__remove--action": {
"message": "Remove",
"description": "Button to remove a member from a private list"
"description": "Button to remove a member from a custom list"
},
"StoriesSettings__remove--title": {
"message": "Remove $title$",
@ -5545,7 +5553,7 @@
},
"StoriesSettings__remove--body": {
"message": "This person will no longer see your story.",
"description": "Body of the confirmation dialog to remove someone from a private distribution list"
"description": "Body of the confirmation dialog to remove someone from a custom distribution list"
},
"StoriesSettings__replies-reactions--title": {
"message": "Replies & reactions",
@ -5560,20 +5568,20 @@
"description": "Description of checkbox to allow or disallow replies to your stories"
},
"StoriesSettings__delete-list": {
"message": "Delete private story",
"description": "Button label to delete a private distribution list"
"message": "Delete custom story",
"description": "Button label to delete a custom distribution list"
},
"StoriesSettings__delete-list--confirm": {
"message": "Are you sure you want to delete \"$name$\"? Updates shared to this story will also be deleted.",
"description": "Confirmation text to delete a private distribution list"
"description": "Confirmation text to delete a custom distribution list"
},
"StoriesSettings__choose-viewers": {
"message": "Choose Viewers",
"description": "Modal title when choosing to add a viewer to a private distribution list"
"description": "Modal title when choosing to add a viewer to a custom distribution list"
},
"StoriesSettings__name-story": {
"message": "Name this story",
"description": "Modal title when naming a private distribution list"
"message": "Name story",
"description": "Modal title when naming a custom distribution list"
},
"StoriesSettings__name-placeholder": {
"message": "Story name (required)",
@ -5601,7 +5609,7 @@
},
"StoriesSettings__mine__only--label": {
"message": "Only share with...",
"description": "Input label to create an exclusive allow list"
"description": "Input label to create an exclude list"
},
"StoriesSettings__mine__only--description": {
"message": "Only share with selected people",
@ -5643,17 +5651,45 @@
"message": "Send story",
"description": "aria-label for the send story button"
},
"SendStoryModal__custom-story": {
"message": "Custom story",
"description": "Subtitle for custom stories in the 'send to' list - shown next to the viewer count"
},
"SendStoryModal__group-story": {
"message": "Group story",
"description": "Subtitle for group stories in the 'send to' list - shown next to the member count"
},
"SendStoryModal__only-share-with": {
"message": "Only share with",
"description": "Subtitle for My Story when the user has chosen an exclude list"
},
"icu:SendStoryModal__excluded": {
"messageformat": "{count, plural, one {1 excluded} other {# excluded}}",
"description": "Label for excluded count for My Story as an exclude list"
},
"SendStoryModal__new": {
"message": "New story",
"message": "New",
"description": "button to create a new distribution list to send story to"
},
"SendStoryModal__new-custom--title": {
"message": "New custom story",
"description": "Create a new distribution list"
},
"SendStoryModal__new-custom--name-visibility": {
"message": "Only you can see the name of this story.",
"description": "Clarification below the text box to name your story distribution list"
},
"SendStoryModal__new-custom--description": {
"message": "Visible only to specific people",
"description": "Description of what a distribution list would do"
},
"SendStoryModal__new-private--title": {
"message": "New private story",
"description": "Create a new distribution list"
"description": "(deleted 2022/11/21) Create a new distribution list"
},
"SendStoryModal__new-private--description": {
"message": "Visible only to specific people",
"description": "Description of what a distribution list would do"
"description": "(deleted 2022/11/21) Description of what a distribution list would do"
},
"SendStoryModal__new-group--title": {
"message": "New group story",

View file

@ -1 +1,4 @@
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m10.0762 1.20386c-1.51881 0-2.75003 1.23122-2.75003 2.75v16.00004c0 1.5187 1.23122 2.75 2.75003 2.75h8c1.5188 0 2.75-1.2313 2.75-2.75v-16.00004c0-1.51879-1.2312-2.75-2.75-2.75zm-1.25003 2.75c0-.69036.55965-1.25 1.25003-1.25h8c.6903 0 1.25.55964 1.25 1.25v16.00004c0 .6903-.5597 1.25-1.25 1.25h-8c-.69038 0-1.25003-.5597-1.25003-1.25zm-4.32617.04613c0-.33212.04048-.65478.11676-.96332-.92123.17877-1.61676.98982-1.61676 1.96332v14.00001c0 .9735.69553 1.7845 1.61676 1.9633-.07628-.3085-.11676-.6312-.11676-.9633z" fill="#000" fill-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15564 4C7.15564 2.34315 8.49879 1 10.1556 1H19.1556C20.8125 1 22.1556 2.34315 22.1556 4V20C22.1556 21.6569 20.8125 23 19.1556 23H10.1556C8.49879 23 7.15564 21.6569 7.15564 20V4ZM10.1556 2.5H19.1556C19.9841 2.5 20.6556 3.17157 20.6556 4V20C20.6556 20.8284 19.9841 21.5 19.1556 21.5H10.1556C9.32721 21.5 8.65564 20.8284 8.65564 20V4C8.65564 3.17157 9.32721 2.5 10.1556 2.5Z" fill="black"/>
<path d="M2.59128 7.41026L5 14.0282V18.4026C4.98023 18.3558 4.96154 18.3082 4.94396 18.2599L1.18174 7.92329C0.615061 6.36635 1.41782 4.64483 2.97476 4.07815L5.43588 3.18237C5.16614 3.71024 5.01022 4.30594 5.00048 4.93711L3.48779 5.48769C2.70932 5.77103 2.30794 6.63179 2.59128 7.41026Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 676 B

After

Width:  |  Height:  |  Size: 845 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.07782 2.5C6.24939 2.5 5.57782 3.17157 5.57782 4V12C5.57782 12.8284 6.24939 13.5 7.07782 13.5H11.5778C12.4062 13.5 13.0778 12.8284 13.0778 12V4C13.0778 3.17157 12.4062 2.5 11.5778 2.5H7.07782Z" fill="black"/>
<path d="M4.5 4.50002C4.5 4.17277 4.5786 3.86388 4.71794 3.59119L3.48738 4.03908C2.70891 4.32241 2.30753 5.18318 2.59087 5.96164L4.47198 11.13C4.48077 11.1541 4.49012 11.1779 4.5 11.2013V4.50002Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 535 B

View file

@ -9,6 +9,11 @@
}
}
// Used to ensure that a set of spans reverse order under RTL
&__rtl-span {
display: inline-block;
}
// don't re-layout buttons on wrap,
// since we have things beyond same-sized-rectangles in the footer
.module-Modal__button-footer {
@ -59,8 +64,20 @@
}
}
&__option--description {
color: $color-gray-25;
&__option {
padding: 10px;
&--icon {
margin-right: 15px;
}
&--container {
align-items: center;
}
&--description {
color: $color-gray-25;
}
}
}
@ -75,14 +92,14 @@
width: 14px;
}
&--lock {
&--custom {
@include color-svg(
'../images/icons/v2/lock-outline-24.svg',
'../images/icons/v2/stories-outline-24.svg',
$color-white
);
height: 14px;
margin-top: 4px;
width: 11px;
height: 16px;
margin-top: 2px;
width: 16px;
}
&--group {
@ -90,9 +107,9 @@
'../images/icons/v2/group-outline-24.svg',
$color-white
);
height: 14px;
height: 16px;
margin-top: 2px;
width: 14px;
width: 16px;
}
&--settings {
@ -121,7 +138,7 @@
&__distribution-list {
&__container {
justify-content: space-between;
margin: 8px 0;
padding: 8px 0;
user-select: none;
}

View file

@ -2,11 +2,6 @@
// SPDX-License-Identifier: AGPL-3.0-only
.StoriesSettingsModal {
&__modal__body {
display: flex;
flex-direction: column;
}
&__conversation-list {
.module-conversation-list {
padding-left: 0;
@ -118,22 +113,12 @@
@include avatar('../images/icons/v2/plus-20.svg');
}
&--private {
@include avatar('../images/icons/v2/lock-outline-24.svg');
&--custom {
@include avatar('../images/icons/v2/stories-outline-24.svg');
&::after {
height: 16px;
width: 12px;
}
&--large {
height: 64px;
width: 64px;
&::after {
height: 24px;
width: 18px;
}
height: 20px;
width: 20px;
}
}
}
@ -161,11 +146,23 @@
&__divider {
border-color: $color-gray-65;
border-style: solid;
width: 100%;
}
&__input__container {
margin-top: 15px;
margin-bottom: 0px;
}
&__visibility {
@include font-subtitle;
color: $color-gray-25;
margin-top: 10px;
}
&__title {
@include font-body-1-bold;
margin-top: 24px;
margin-top: 32px;
}
&__delete-list {
@ -198,12 +195,6 @@
overflow: hidden;
}
&__name-story-avatar-container {
align-items: center;
display: flex;
justify-content: center;
}
&__disclaimer {
@include font-subtitle;
color: $color-gray-25;

View file

@ -68,11 +68,10 @@
align-items: center;
display: flex;
color: $color-white-alpha-80;
margin-left: 8px;
&::before {
@include color-svg(
'../images/icons/v2/lock-solid-24.svg',
'../images/icons/v2/stories-solid-16.svg',
$color-white-alpha-80
);
content: '';
@ -87,11 +86,15 @@
margin-left: -8px;
}
&--title-container {
padding-left: 8px;
}
&--title {
@include font-body-1-bold;
color: $color-white;
display: inline;
margin: 0 8px;
margin-right: 8px;
}
&--timestamp {

View file

@ -80,6 +80,26 @@ Modal.args = {
distributionLists: getFakeDistributionListsWithMembers(),
};
export const BlockList = Template.bind({});
BlockList.args = {
distributionLists: [
{ ...getMyStories(), members: [getDefaultConversation()] },
],
groupStories: [],
};
export const AllowList = Template.bind({});
AllowList.args = {
distributionLists: [
{
...getMyStories(),
isBlockList: false,
members: [getDefaultConversation()],
},
],
groupStories: [],
};
export const FirstTime = Template.bind({});
FirstTime.args = {
distributionLists: [myStories],

View file

@ -101,6 +101,18 @@ function getListMemberUuids(
return memberUuids;
}
function getKeyForMyStoryType(list: StoryDistributionListWithMembersDataType) {
if (list.members.length === 0) {
return 'StoriesSettings__mine__all--label';
}
if (!list.isBlockList) {
return 'SendStoryModal__only-share-with';
}
return 'StoriesSettings__mine__all--label';
}
function getListViewers(
list: StoryDistributionListWithMembersDataType,
i18n: LocalizerType,
@ -114,9 +126,7 @@ function getListViewers(
: signalConnections.length;
}
return memberCount === 1
? i18n('StoriesSettings__viewers--singular', ['1'])
: i18n('StoriesSettings__viewers--plural', [String(memberCount)]);
return i18n('icu:StoriesSettings__viewers', { count: memberCount });
}
export const SendStoryModal = ({
@ -560,11 +570,9 @@ export const SendStoryModal = ({
</div>
<div className="SendStoryModal__distribution-list__description">
{group.membersCount === 1
? i18n('ConversationHero--members-1')
: i18n('ConversationHero--members', [
String(group.membersCount),
])}
{i18n('icu:ConversationHero--members', {
count: group.membersCount,
})}
</div>
</div>
</label>
@ -633,9 +641,9 @@ export const SendStoryModal = ({
i18n={i18n}
menuOptions={[
{
label: i18n('SendStoryModal__new-private--title'),
description: i18n('SendStoryModal__new-private--description'),
icon: 'SendStoryModal__icon--lock',
label: i18n('SendStoryModal__new-custom--title'),
description: i18n('SendStoryModal__new-custom--description'),
icon: 'SendStoryModal__icon--custom',
onClick: () => setPage(Page.ChooseViewers),
},
{
@ -749,7 +757,7 @@ export const SendStoryModal = ({
title={me.title}
/>
) : (
<span className="StoriesSettingsModal__list__avatar--private" />
<span className="StoriesSettingsModal__list__avatar--custom" />
)}
<div className="SendStoryModal__distribution-list__info">
@ -762,9 +770,28 @@ export const SendStoryModal = ({
</div>
<div className="SendStoryModal__distribution-list__description">
{hasFirstStoryPostExperience && list.id === MY_STORIES_ID
? i18n('SendStoryModal__choose-who-can-view')
: getListViewers(list, i18n, signalConnections)}
{hasFirstStoryPostExperience &&
list.id === MY_STORIES_ID ? (
i18n('SendStoryModal__choose-who-can-view')
) : (
<>
<span className="SendStoryModal__rtl-span">
{list.id === MY_STORIES_ID
? i18n(getKeyForMyStoryType(list))
: i18n('SendStoryModal__custom-story')}
</span>
<span className="SendStoryModal__rtl-span">
&nbsp;&middot;&nbsp;
</span>
<span className="SendStoryModal__rtl-span">
{list.isBlockList && list.members.length > 0
? i18n('icu:SendStoryModal__excluded', {
count: list.members.length,
})
: getListViewers(list, i18n, signalConnections)}
</span>
</>
)}
</div>
</div>
</label>
@ -844,11 +871,17 @@ export const SendStoryModal = ({
</div>
<div className="SendStoryModal__distribution-list__description">
{group.membersCount === 1
? i18n('ConversationHero--members-1')
: i18n('ConversationHero--members', [
String(group.membersCount),
])}
<span className="SendStoryModal__rtl-span">
{i18n('SendStoryModal__group-story')}
</span>
<span className="SendStoryModal__rtl-span">
&nbsp;&middot;&nbsp;
</span>
<span className="SendStoryModal__rtl-span">
{i18n('icu:ConversationHero--members', {
count: group.membersCount,
})}
</span>
</div>
</div>
</label>

View file

@ -265,18 +265,16 @@ export const StoriesSettingsModal = ({
type="button"
>
<span className="StoriesSettingsModal__list__left">
<span className="StoriesSettingsModal__list__avatar--private" />
<span className="StoriesSettingsModal__list__avatar--custom" />
<span className="StoriesSettingsModal__list__title">
{list.name}
</span>
</span>
<span className="StoriesSettingsModal__list__viewers">
{list.members.length === 1
? i18n('StoriesSettings__viewers--singular', ['1'])
: i18n('StoriesSettings__viewers--plural', [
String(list.members.length),
])}
{i18n('icu:StoriesSettings__viewers', {
count: list.members.length,
})}
</span>
</button>
))}
@ -399,7 +397,7 @@ export const DistributionListSettingsModal = ({
<>
<div className="StoriesSettingsModal__list StoriesSettingsModal__list--no-pointer">
<span className="StoriesSettingsModal__list__left">
<span className="StoriesSettingsModal__list__avatar--private" />
<span className="StoriesSettingsModal__list__avatar--custom" />
<span className="StoriesSettingsModal__list__title">
<StoryDistributionListName
i18n={i18n}
@ -776,17 +774,18 @@ export const EditDistributionListModal = ({
onClose={onClose}
{...modalCommonProps}
>
<div className="StoriesSettingsModal__name-story-avatar-container">
<div className="StoriesSettingsModal__list__avatar--private StoriesSettingsModal__list__avatar--private--large" />
</div>
<Input
i18n={i18n}
onChange={setStoryName}
placeholder={i18n('StoriesSettings__name-placeholder')}
moduleClassName="StoriesSettingsModal__input"
value={storyName}
/>
<div className="StoriesSettingsModal__visibility">
{i18n('SendStoryModal__new-custom--name-visibility')}
</div>
<div className="StoriesSettingsModal__title">
{i18n('StoriesSettings__who-can-see')}
</div>

View file

@ -631,7 +631,7 @@ export const StoryViewer = ({
title={group.title}
/>
)}
<div>
<div className="StoryViewer__meta--title-container">
<div className="StoryViewer__meta--title">
{(group &&
i18n('Stories__from-to-group', {

View file

@ -200,10 +200,8 @@ export const ConversationHero = ({
title={title}
text={groupDescription}
/>
) : membersCount === 1 ? (
i18n('ConversationHero--members-1')
) : membersCount !== undefined ? (
i18n('ConversationHero--members', [`${membersCount}`])
) : membersCount != null ? (
i18n('icu:ConversationHero--members', { count: membersCount })
) : phoneNumberOnly ? null : (
phoneNumber
)}