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

Fix story reply box interactions

Browse source
This commit is contained in:
Josh Perez 2022-04-22 23:16:13 -04:00 committed by GitHub
parent 7775f7d806
commit 72f979ea1d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 180 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_locales/en/messages.json
View file

@ -7026,6 +7026,10 @@
"message": "Type a reply...",
"description": "Placeholder text for the story reply modal"
},
"StoryViewsNRepliesModal__no-replies": {
"message": "No replies yet",
"description": "Placeholder text for when there are no replies"
},
"StoryViewsNRepliesModal__tab--views": {
"message": "Views",
"description": "Title for views tab"

20
stylesheets/components/StoryViewsNRepliesModal.scss
View file

@ -3,9 +3,27 @@
.StoryViewsNRepliesModal {
min-width: 320px;
overflow: hidden;
&--group {
min-height: 360px;
display: flex;
flex-direction: column;
min-height: 400px;
}
&__replies {
flex: 1;
max-height: 75vh;
overflow-y: overlay;
&--none {
align-items: center;
color: $color-gray-45;
display: flex;
flex: 1;
justify-content: center;
user-select: none;
}
}
&__overlay-container {

1
stylesheets/components/TextAttachment.scss
View file

@ -6,7 +6,6 @@
&__story {
align-items: center;
border-radius: 12px;
display: flex;
flex-direction: column;
height: 1280px;

92
ts/components/StoryViewer.tsx
View file

@ -60,6 +60,7 @@ export type PropsType = {
replyState?: ReplyStateType;
skinTone?: number;
stories: Array<StoryViewType>;
views?: Array<string>;
};
const CAPTION_BUFFER = 20;
@ -88,6 +89,7 @@ export const StoryViewer = ({
replyState,
skinTone,
stories,
views,
}: PropsType): JSX.Element => {
const [currentStoryIndex, setCurrentStoryIndex] = useState(0);
const [storyDuration, setStoryDuration] = useState<number | undefined>();
@ -268,7 +270,7 @@ export const StoryViewer = ({
const replies =
replyState && replyState.messageId === messageId ? replyState.replies : [];
const viewCount = 0;
const viewCount = (views || []).length;
const replyCount = replies.length;
return (
@ -388,49 +390,46 @@ export const StoryViewer = ({
))}
</div>
<div className="StoryViewer__actions">
{isMe ? (
<>
{viewCount &&
(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 && replyCount && ' '}
{replyCount &&
(replyCount === 1 ? (
<Intl
i18n={i18n}
id="MyStories__replies--singular"
components={[<strong>{replyCount}</strong>]}
/>
) : (
<Intl
i18n={i18n}
id="MyStories__replies--plural"
components={[<strong>{replyCount}</strong>]}
/>
))}
</>
) : (
canReply && (
<button
className="StoryViewer__reply"
onClick={() => setHasReplyModal(true)}
tabIndex={0}
type="button"
>
{i18n('StoryViewer__reply')}
</button>
)
{canReply && (
<button
className="StoryViewer__reply"
onClick={() => setHasReplyModal(true)}
tabIndex={0}
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')}
</>
</button>
)}
</div>
</div>
@ -454,13 +453,16 @@ export const StoryViewer = ({
authorTitle={title}
getPreferredBadge={getPreferredBadge}
i18n={i18n}
isGroupStory={isGroupStory}
isMyStory={isMe}
onClose={() => setHasReplyModal(false)}
onReact={emoji => {
onReactToStory(emoji, visibleStory);
}}
onReply={(message, mentions, replyTimestamp) => {
setHasReplyModal(false);
if (!isGroupStory) {
setHasReplyModal(false);
}
onReplyToStory(message, mentions, replyTimestamp, visibleStory);
}}
onSetSkinTone={onSetSkinTone}

5
ts/components/StoryViewsNRepliesModal.stories.tsx
View file

@ -112,12 +112,17 @@ story.add('Views only', () => (
/>
));
story.add('In a group (no replies)', () => (
<StoryViewsNRepliesModal {...getDefaultProps()} isGroupStory />
));
story.add('In a group', () => {
const { views, replies } = getViewsAndReplies();
return (
<StoryViewsNRepliesModal
{...getDefaultProps()}
isGroupStory
replies={replies}
views={views}
/>

184
ts/components/StoryViewsNRepliesModal.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useCallback, useState } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { usePopper } from 'react-popper';
import type { AttachmentType } from '../types/Attachment';
@ -52,6 +52,7 @@ export type PropsType = {
authorTitle: string;
getPreferredBadge: PreferredBadgeSelectorType;
i18n: LocalizerType;
isGroupStory?: boolean;
isMyStory?: boolean;
onClose: () => unknown;
onReact: (emoji: string) => unknown;
@ -76,6 +77,7 @@ export const StoryViewsNRepliesModal = ({
authorTitle,
getPreferredBadge,
i18n,
isGroupStory,
isMyStory,
onClose,
onReact,
@ -91,7 +93,8 @@ export const StoryViewsNRepliesModal = ({
storyPreviewAttachment,
views,
}: PropsType): JSX.Element => {
const inputApiRef = React.useRef<InputApi | undefined>();
const inputApiRef = useRef<InputApi | undefined>();
const [bottom, setBottom] = useState<HTMLDivElement | null>(null);
const [messageBodyText, setMessageBodyText] = useState('');
const [showReactionPicker, setShowReactionPicker] = useState(false);
@ -122,13 +125,19 @@ export const StoryViewsNRepliesModal = ({
strategy: 'fixed',
});
useEffect(() => {
if (replies.length) {
bottom?.scrollIntoView({ behavior: 'smooth' });
}
}, [bottom, replies.length]);
let composerElement: JSX.Element | undefined;
if (!isMyStory) {
composerElement = (
<div className="StoryViewsNRepliesModal__compose-container">
<div className="StoryViewsNRepliesModal__composer">
{!replies.length && (
{!isGroupStory && (
<Quote
authorTitle={authorTitle}
conversationColor="ultramarine"
@ -154,7 +163,10 @@ export const StoryViewsNRepliesModal = ({
setMessageBodyText(messageText);
}}
onPickEmoji={insertEmoji}
onSubmit={onReply}
onSubmit={(...args) => {
inputApiRef.current?.reset();
onReply(...args);
}}
onTextTooLong={onTextTooLong}
placeholder={i18n('StoryViewsNRepliesModal__placeholder')}
theme={ThemeType.dark}
@ -204,12 +216,48 @@ export const StoryViewsNRepliesModal = ({
);
}
const repliesElement = replies.length ? (
<div className="StoryViewsNRepliesModal__replies">
{replies.map(reply =>
reply.reactionEmoji ? (
<div className="StoryViewsNRepliesModal__reaction" key={reply.id}>
<div className="StoryViewsNRepliesModal__reaction--container">
let repliesElement: JSX.Element | undefined;
if (replies.length) {
repliesElement = (
<div className="StoryViewsNRepliesModal__replies">
{replies.map(reply =>
reply.reactionEmoji ? (
<div className="StoryViewsNRepliesModal__reaction" key={reply.id}>
<div className="StoryViewsNRepliesModal__reaction--container">
<Avatar
acceptedMessageRequest={reply.acceptedMessageRequest}
avatarPath={reply.avatarPath}
badge={undefined}
color={getAvatarColor(reply.color)}
conversationType="direct"
i18n={i18n}
isMe={Boolean(reply.isMe)}
name={reply.name}
profileName={reply.profileName}
sharedGroupNames={reply.sharedGroupNames || []}
size={AvatarSize.TWENTY_EIGHT}
title={reply.title}
/>
<div className="StoryViewsNRepliesModal__reaction--body">
<div className="StoryViewsNRepliesModal__reply--title">
<ContactName
contactNameColor={reply.contactNameColor}
title={reply.title}
/>
</div>
{i18n('StoryViewsNRepliesModal__reacted')}
<MessageTimestamp
i18n={i18n}
module="StoryViewsNRepliesModal__reply--timestamp"
timestamp={reply.timestamp}
/>
</div>
</div>
<Emojify text={reply.reactionEmoji} />
</div>
) : (
<div className="StoryViewsNRepliesModal__reply" key={reply.id}>
<Avatar
acceptedMessageRequest={reply.acceptedMessageRequest}
avatarPath={reply.avatarPath}
@ -224,14 +272,32 @@ export const StoryViewsNRepliesModal = ({
size={AvatarSize.TWENTY_EIGHT}
title={reply.title}
/>
<div className="StoryViewsNRepliesModal__reaction--body">
<div
className={classNames(
'StoryViewsNRepliesModal__message-bubble',
{
'StoryViewsNRepliesModal__message-bubble--doe': Boolean(
reply.deletedForEveryone
),
}
)}
>
<div className="StoryViewsNRepliesModal__reply--title">
<ContactName
contactNameColor={reply.contactNameColor}
title={reply.title}
/>
</div>
{i18n('StoryViewsNRepliesModal__reacted')}
<MessageBody
i18n={i18n}
text={
reply.deletedForEveryone
? i18n('message--deletedForEveryone')
: String(reply.body)
}
/>
<MessageTimestamp
i18n={i18n}
module="StoryViewsNRepliesModal__reply--timestamp"
@ -239,58 +305,18 @@ export const StoryViewsNRepliesModal = ({
/>
</div>
</div>
<Emojify text={reply.reactionEmoji} />
</div>
) : (
<div className="StoryViewsNRepliesModal__reply" key={reply.id}>
<Avatar
acceptedMessageRequest={reply.acceptedMessageRequest}
avatarPath={reply.avatarPath}
badge={undefined}
color={getAvatarColor(reply.color)}
conversationType="direct"
i18n={i18n}
isMe={Boolean(reply.isMe)}
name={reply.name}
profileName={reply.profileName}
sharedGroupNames={reply.sharedGroupNames || []}
size={AvatarSize.TWENTY_EIGHT}
title={reply.title}
/>
<div
className={classNames('StoryViewsNRepliesModal__message-bubble', {
'StoryViewsNRepliesModal__message-bubble--doe': Boolean(
reply.deletedForEveryone
),
})}
>
<div className="StoryViewsNRepliesModal__reply--title">
<ContactName
contactNameColor={reply.contactNameColor}
title={reply.title}
/>
</div>
<MessageBody
i18n={i18n}
text={
reply.deletedForEveryone
? i18n('message--deletedForEveryone')
: String(reply.body)
}
/>
<MessageTimestamp
i18n={i18n}
module="StoryViewsNRepliesModal__reply--timestamp"
timestamp={reply.timestamp}
/>
</div>
</div>
)
)}
</div>
) : undefined;
)
)}
<div ref={setBottom} />
</div>
);
} else if (isGroupStory) {
repliesElement = (
<div className="StoryViewsNRepliesModal__replies--none">
{i18n('StoryViewsNRepliesModal__no-replies')}
</div>
);
}
const viewsElement = views.length ? (
<div className="StoryViewsNRepliesModal__views">
@ -358,28 +384,26 @@ export const StoryViewsNRepliesModal = ({
</Tabs>
) : undefined;
const hasOnlyViewsElement =
viewsElement && !repliesElement && !composerElement;
return (
<Modal
i18n={i18n}
moduleClassName={classNames('StoryViewsNRepliesModal', {
'StoryViewsNRepliesModal--group': Boolean(
views.length && replies.length
),
})}
moduleClassName="StoryViewsNRepliesModal"
onClose={onClose}
useFocusTrap={!hasOnlyViewsElement}
useFocusTrap={Boolean(composerElement)}
theme={Theme.Dark}
>
{tabsElement || (
<>
{viewsElement}
{repliesElement}
{composerElement}
</>
)}
<div
className={classNames({
'StoryViewsNRepliesModal--group': Boolean(isGroupStory),
})}
>
{tabsElement || (
<>
{viewsElement || repliesElement}
{composerElement}
</>
)}
</div>
</Modal>
);
};

2
ts/util/lint/exceptions.json
View file

@ -7702,7 +7702,7 @@
{
"rule": "React-useRef",
"path": "ts/components/StoryViewsNRepliesModal.tsx",
"line": " const inputApiRef = React.useRef<InputApi | undefined>();",
"line": " const inputApiRef = useRef<InputApi | undefined>();",
"reasonCategory": "usageTrusted",
"updated": "2022-02-15T17:57:06.507Z"
},