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

UI for when read receipts are turned off

Browse source
This commit is contained in:
Josh Perez 2022-08-31 12:11:14 -04:00 committed by GitHub
parent 7632f31cf2
commit 39143015c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 135 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_locales/en/messages.json
View file

@ -7487,6 +7487,10 @@
"message": "Unmute",
"description": "Aria label for unmuting stories"
},
"StoryViewer__views-off": {
"message": "Views off",
"description": "When the user has read receipts turned off"
},
"StoryDetailsModal__sent-time": {
"message": "Sent $time$",
"description": "Sent timestamp",
@ -7511,6 +7515,10 @@
"message": "Copy timestamp",
"description": "Context menu item to help debugging"
},
"StoryViewsNRepliesModal__read-receipts-off": {
"message": "Enable read receipts to see who's viewed your stories. Open the Signal app on your mobile device and navigate to Settings > Privacy.",
"description": "Instructions on how to enable read receipts"
},
"StoryViewsNRepliesModal__no-replies": {
"message": "No replies yet",
"description": "Placeholder text for when there are no replies"

5
stylesheets/components/StoryViewsNRepliesModal.scss
View file

@ -208,6 +208,11 @@
&__copy-icon {
@include color-svg('../images/icons/v2/copy-outline-24.svg', $color-white);
}
&__read-receipts-off {
color: $color-gray-25;
margin: 160px 16px;
}
}
.Tabs.StoryViewsNRepliesModal__tabs {

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

@ -31,6 +31,9 @@ export default {
hasAllStoriesMuted: {
defaultValue: false,
},
hasReadReceiptSetting: {
defaultValue: true,
},
i18n: {
defaultValue: i18n,
},
@ -168,3 +171,35 @@ export const YourStory = Template.bind({});
};
YourStory.storyName = 'Your story';
}
export const ReadReceiptsOff = Template.bind({});
{
const storyView = getFakeStoryView(
'/fixtures/nathan-anderson-316188-unsplash.jpg'
);
ReadReceiptsOff.args = {
hasReadReceiptSetting: false,
story: {
...storyView,
sender: {
...storyView.sender,
isMe: true,
},
sendState: [
{
recipient: getDefaultConversation(),
status: SendStatus.Viewed,
},
{
recipient: getDefaultConversation(),
status: SendStatus.Delivered,
},
{
recipient: getDefaultConversation(),
status: SendStatus.Pending,
},
],
},
};
}
ReadReceiptsOff.storyName = 'Read receipts turned off';

7
ts/components/StoryViewer.tsx
View file

@ -59,6 +59,7 @@ export type PropsType = {
>;
hasActiveCall?: boolean;
hasAllStoriesMuted: boolean;
hasReadReceiptSetting: boolean;
i18n: LocalizerType;
loadStoryReplies: (conversationId: string, messageId: string) => unknown;
markStoryRead: (mId: string) => unknown;
@ -107,6 +108,7 @@ export const StoryViewer = ({
group,
hasActiveCall,
hasAllStoriesMuted,
hasReadReceiptSetting,
i18n,
loadStoryReplies,
markStoryRead,
@ -661,7 +663,11 @@ export const StoryViewer = ({
<>
{sendState || replyCount > 0 ? (
<span className="StoryViewer__reply__chevron">
{sendState && !hasReadReceiptSetting && !replyCount && (
<>{i18n('StoryViewer__views-off')}</>
)}
{sendState &&
hasReadReceiptSetting &&
(viewCount === 1 ? (
<Intl
i18n={i18n}
@ -749,6 +755,7 @@ export const StoryViewer = ({
authorTitle={firstName || title}
canReply={Boolean(canReply)}
getPreferredBadge={getPreferredBadge}
hasReadReceiptSetting={hasReadReceiptSetting}
i18n={i18n}
isGroupStory={isGroupStory}
onClose={() => setHasStoryViewsNRepliesModal(false)}

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

@ -28,6 +28,9 @@ export default {
defaultValue: true,
},
getPreferredBadge: { action: true },
hasReadReceiptSetting: {
defaultValue: true,
},
i18n: {
defaultValue: i18n,
},
@ -202,3 +205,23 @@ export const InAGroupCantReply = Template.bind({});
};
}
InAGroupCantReply.storyName = "In a group (can't reply)";
export const ReadReceiptsTurnedOff = Template.bind({});
ReadReceiptsTurnedOff.args = {
canReply: false,
hasReadReceiptSetting: false,
views: getViewsAndReplies().views,
};
ReadReceiptsTurnedOff.storyName = 'Read receipts turned off';
export const GroupReadReceiptsOff = Template.bind({});
{
const { views, replies } = getViewsAndReplies();
GroupReadReceiptsOff.args = {
hasReadReceiptSetting: false,
isGroupStory: true,
replies,
views,
};
}
GroupReadReceiptsOff.storyName = 'Read receipts turned off (group)';

80
ts/components/StoryViewsNRepliesModal.tsx
View file

@ -87,6 +87,7 @@ export type PropsType = {
authorTitle: string;
canReply: boolean;
getPreferredBadge: PreferredBadgeSelectorType;
hasReadReceiptSetting: boolean;
i18n: LocalizerType;
isGroupStory?: boolean;
onClose: () => unknown;
@ -113,6 +114,7 @@ export const StoryViewsNRepliesModal = ({
authorTitle,
canReply,
getPreferredBadge,
hasReadReceiptSetting,
i18n,
isGroupStory,
onClose,
@ -353,40 +355,52 @@ export const StoryViewsNRepliesModal = ({
);
}
const viewsElement = views.length ? (
<div className="StoryViewsNRepliesModal__views">
{views.map(view => (
<div className="StoryViewsNRepliesModal__view" key={view.recipient.id}>
<div>
<Avatar
acceptedMessageRequest={view.recipient.acceptedMessageRequest}
avatarPath={view.recipient.avatarPath}
badge={undefined}
color={getAvatarColor(view.recipient.color)}
conversationType="direct"
i18n={i18n}
isMe={Boolean(view.recipient.isMe)}
name={view.recipient.name}
profileName={view.recipient.profileName}
sharedGroupNames={view.recipient.sharedGroupNames || []}
size={AvatarSize.TWENTY_EIGHT}
title={view.recipient.title}
/>
<span className="StoryViewsNRepliesModal__view--name">
<ContactName title={view.recipient.title} />
</span>
let viewsElement: JSX.Element | undefined;
if (!hasReadReceiptSetting) {
viewsElement = (
<div className="StoryViewsNRepliesModal__read-receipts-off">
{i18n('StoryViewsNRepliesModal__read-receipts-off')}
</div>
);
} else if (views.length) {
viewsElement = (
<div className="StoryViewsNRepliesModal__views">
{views.map(view => (
<div
className="StoryViewsNRepliesModal__view"
key={view.recipient.id}
>
<div>
<Avatar
acceptedMessageRequest={view.recipient.acceptedMessageRequest}
avatarPath={view.recipient.avatarPath}
badge={undefined}
color={getAvatarColor(view.recipient.color)}
conversationType="direct"
i18n={i18n}
isMe={Boolean(view.recipient.isMe)}
name={view.recipient.name}
profileName={view.recipient.profileName}
sharedGroupNames={view.recipient.sharedGroupNames || []}
size={AvatarSize.TWENTY_EIGHT}
title={view.recipient.title}
/>
<span className="StoryViewsNRepliesModal__view--name">
<ContactName title={view.recipient.title} />
</span>
</div>
{view.updatedAt && (
<MessageTimestamp
i18n={i18n}
module="StoryViewsNRepliesModal__view--timestamp"
timestamp={view.updatedAt}
/>
)}
</div>
{view.updatedAt && (
<MessageTimestamp
i18n={i18n}
module="StoryViewsNRepliesModal__view--timestamp"
timestamp={view.updatedAt}
/>
)}
</div>
))}
</div>
) : undefined;
))}
</div>
);
}
const tabsElement =
views.length && replies.length ? (

5
ts/state/selectors/items.ts
View file

@ -130,3 +130,8 @@ export const getHasSetMyStoriesPrivacy = createSelector(
getItems,
(state: ItemsStateType): boolean => Boolean(state.hasSetMyStoriesPrivacy)
);
export const getHasReadReceiptSetting = createSelector(
getItems,
(state: ItemsStateType): boolean => Boolean(state['read-receipt-setting'])
);

5
ts/state/smart/StoryViewer.tsx
View file

@ -14,6 +14,7 @@ import { getConversationSelector } from '../selectors/conversations';
import {
getEmojiSkinTone,
getHasAllStoriesMuted,
getHasReadReceiptSetting,
getPreferredReactionEmoji,
} from '../selectors/items';
import { getIntl } from '../selectors/user';
@ -76,6 +77,9 @@ export function SmartStoryViewer(): JSX.Element | null {
);
const hasActiveCall = useSelector(isInFullScreenCall);
const hasReadReceiptSetting = useSelector<StateType, boolean>(
getHasReadReceiptSetting
);
return (
<StoryViewer
@ -84,6 +88,7 @@ export function SmartStoryViewer(): JSX.Element | null {
group={conversationStory.group}
hasActiveCall={hasActiveCall}
hasAllStoriesMuted={hasAllStoriesMuted}
hasReadReceiptSetting={hasReadReceiptSetting}
i18n={i18n}
numStories={selectedStoryData.numStories}
onHideStory={toggleHideStories}