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

Updates button styles for replies and views

Browse source
This commit is contained in:
Josh Perez 2022-05-06 12:17:33 -04:00 committed by GitHub
parent 300cee2e24
commit 85df5cf1d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 93 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_locales/en/messages.json
View file

@ -7022,9 +7022,9 @@
"message": "Reply",
"description": "Button label to reply to a story"
},
"StoryViewsNRepliesModal__placeholder": {
"message": "Type a reply...",
"description": "Placeholder text for the story reply modal"
"StoryViewer__reply-group": {
"message": "Reply to Group",
"description": "Button label to reply to a group story"
},
"StoryViewsNRepliesModal__no-replies": {
"message": "No replies yet",

29
stylesheets/components/StoryViewer.scss
View file

@ -123,6 +123,35 @@
color: $color-ultramarine;
}
}
&__arrow {
display: flex;
align-items: center;
&::before {
content: '';
height: 20px;
margin-right: 12px;
width: 20px;
@include color-svg(
'../images/icons/v2/reply-outline-24.svg',
$color-white
);
}
}
&__chevron::after {
content: '';
display: inline-block;
height: 20px;
margin-left: 12px;
vertical-align: middle;
width: 20px;
@include color-svg(
'../images/icons/v2/chevron-right-24.svg',
$color-white
);
}
}
&__progress {

16
ts/components/StoryViewer.stories.tsx
View file

@ -118,6 +118,22 @@ story.add('Multi story', () => {
story.add('Caption', () => (
<StoryViewer
{...getDefaultProps()}
group={getDefaultConversation({
avatarPath: '/fixtures/kitten-4-112-112.jpg',
title: 'Broskis',
type: 'group',
})}
replyState={{
messageId: '123',
replies: [
{
...getDefaultConversation(),
body: 'Cool',
id: 'abc',
timestamp: Date.now(),
},
],
}}
stories={[
{
attachment: fakeAttachment({

70
ts/components/StoryViewer.tsx
View file

@ -513,36 +513,46 @@ export const StoryViewer = ({
type="button"
>
<>
{viewCount > 0 &&
(viewCount === 1 ? (
<Intl
i18n={i18n}
id="MyStories__views--singular"
components={[<strong>{viewCount}</strong>]}
/>
) : (
<Intl
i18n={i18n}
id="MyStories__views--plural"
components={[<strong>{viewCount}</strong>]}
/>
))}
{viewCount > 0 && replyCount > 0 && ' '}
{replyCount > 0 &&
(replyCount === 1 ? (
<Intl
i18n={i18n}
id="MyStories__replies--singular"
components={[<strong>{replyCount}</strong>]}
/>
) : (
<Intl
i18n={i18n}
id="MyStories__replies--plural"
components={[<strong>{replyCount}</strong>]}
/>
))}
{!viewCount && !replyCount && i18n('StoryViewer__reply')}
{viewCount > 0 || replyCount > 0 ? (
<span className="StoryViewer__reply__chevron">
{viewCount > 0 &&
(viewCount === 1 ? (
<Intl
i18n={i18n}
id="MyStories__views--singular"
components={[<strong>{viewCount}</strong>]}
/>
) : (
<Intl
i18n={i18n}
id="MyStories__views--plural"
components={[<strong>{viewCount}</strong>]}
/>
))}
{viewCount > 0 && replyCount > 0 && ' '}
{replyCount > 0 &&
(replyCount === 1 ? (
<Intl
i18n={i18n}
id="MyStories__replies--singular"
components={[<strong>{replyCount}</strong>]}
/>
) : (
<Intl
i18n={i18n}
id="MyStories__replies--plural"
components={[<strong>{replyCount}</strong>]}
/>
))}
</span>
) : null}
{!viewCount && !replyCount && (
<span className="StoryViewer__reply__arrow">
{isGroupStory
? i18n('StoryViewer__reply-group')
: i18n('StoryViewer__reply')}
</span>
)}
</>
</button>
)}

6
ts/components/StoryViewsNRepliesModal.tsx
View file

@ -168,7 +168,11 @@ export const StoryViewsNRepliesModal = ({
onReply(...args);
}}
onTextTooLong={onTextTooLong}
placeholder={i18n('StoryViewsNRepliesModal__placeholder')}
placeholder={
isGroupStory
? i18n('StoryViewer__reply-group')
: i18n('StoryViewer__reply')
}
theme={ThemeType.dark}
>
<EmojiButton