Skip to content

Commit

Permalink
Update strings and design around custom stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@scottnonnenberg-signal
scottnonnenberg-signal committed Oct 25, 2022
1 parent 0308f20 commit 08f2a96
Show file tree
Hide file tree
Showing 11 changed files with 203 additions and 99 deletions.
82 changes: 59 additions & 23 deletions _locales/en/messages.json
View file
Expand Up @@ -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$",
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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": {
Expand All @@ -5537,15 +5545,15 @@
},
"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$",
"description": "Title of the confirmation dialog, has a person's name"
},
"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",
Expand All @@ -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)",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion images/icons/v2/stories-outline-24.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions images/icons/v2/stories-solid-16.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 27 additions & 10 deletions stylesheets/components/SendStoryModal.scss
View file
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
}

Expand All @@ -75,24 +92,24 @@
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 {
@include color-svg(
'../images/icons/v2/group-outline-24.svg',
$color-white
);
height: 14px;
height: 16px;
margin-top: 2px;
width: 14px;
width: 16px;
}

&--settings {
Expand Down Expand Up @@ -121,7 +138,7 @@
&__distribution-list {
&__container {
justify-content: space-between;
margin: 8px 0;
padding: 8px 0;
user-select: none;
}

Expand Down
43 changes: 17 additions & 26 deletions stylesheets/components/StoriesSettingsModal.scss
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
9 changes: 6 additions & 3 deletions stylesheets/components/StoryViewer.scss
View file
Expand Up @@ -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: '';
Expand All @@ -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 {
Expand Down
20 changes: 20 additions & 0 deletions ts/components/SendStoryModal.stories.tsx
View file
Expand Up @@ -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],
Expand Down

0 comments on commit 08f2a96

Please sign in to comment.