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

Improvements to the MyStories row

Browse source
This commit is contained in:
Josh Perez 2022-08-19 14:36:47 -04:00 • committed by GitHub
parent 6dd6a64d6c
commit f7f65de322
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 244 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

159
ts/components/MyStoriesButton.tsx
View file

@ -5,11 +5,14 @@ import React from 'react';
import classNames from 'classnames';
import type { ConversationType } from '../state/ducks/conversations';
import type { LocalizerType } from '../types/Util';
import type { ShowToastActionCreatorType } from '../state/ducks/toast';
import type { StoryViewType } from '../types/Stories';
import { Avatar, AvatarSize } from './Avatar';
import { StoryImage } from './StoryImage';
import { getAvatarColor } from '../types/Colors';
import { StoriesAddStoryButton } from './StoriesAddStoryButton';
export type PropsType = {
hasMultiple: boolean;
i18n: LocalizerType;
@ -18,6 +21,7 @@ export type PropsType = {
onAddStory: () => unknown;
onClick: () => unknown;
queueStoryDownload: (storyId: string) => unknown;
showToast: ShowToastActionCreatorType;
};
export const MyStoriesButton = ({
@ -28,6 +32,7 @@ export const MyStoriesButton = ({
onAddStory,
onClick,
queueStoryDownload,
showToast,
}: PropsType): JSX.Element => {
const {
acceptedMessageRequest,
@ -40,9 +45,14 @@ export const MyStoriesButton = ({
title,
} = me;
return (
<div className="Stories__my-stories">
<div className="StoryListItem__button">
if (!newestStory) {
return (
<StoriesAddStoryButton
i18n={i18n}
moduleClassName="StoryListItem"
onAddStory={onAddStory}
showToast={showToast}
>
<div className="MyStories__avatar-container">
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
@ -53,7 +63,6 @@ export const MyStoriesButton = ({
i18n={i18n}
isMe={Boolean(isMe)}
name={name}
onClick={onAddStory}
profileName={profileName}
sharedGroupNames={sharedGroupNames}
size={AvatarSize.FORTY_EIGHT}
@ -62,74 +71,88 @@ export const MyStoriesButton = ({
<div
aria-label={i18n('Stories__add')}
className="MyStories__avatar__add-story"
onClick={ev => {
onAddStory();
ev.stopPropagation();
ev.preventDefault();
}}
onKeyDown={ev => {
if (ev.key === 'Enter') {
onAddStory();
ev.stopPropagation();
ev.preventDefault();
}
}}
role="button"
tabIndex={0}
/>
</div>
<div
className="StoryListItem__click-container"
onClick={onClick}
onKeyDown={ev => {
if (ev.key === 'Enter') {
onClick();
ev.stopPropagation();
ev.preventDefault();
}
}}
role="button"
tabIndex={0}
>
<div className="StoryListItem__info">
<>
<div className="StoryListItem__info--title">
{i18n('Stories__mine')}
</div>
{!newestStory && (
<div className="StoryListItem__info--timestamp">
{i18n('Stories__add')}
</div>
)}
</>
</div>
<div className="StoryListItem__info">
<>
<div className="StoryListItem__info--title">
{i18n('Stories__mine')}
</div>
<div className="StoryListItem__info--timestamp">
{i18n('Stories__add')}
</div>
</>
</div>
</StoriesAddStoryButton>
);
}
return (
<div className="StoryListItem__button">
<div className="MyStories__avatar-container">
<StoriesAddStoryButton
i18n={i18n}
onAddStory={onAddStory}
showToast={showToast}
>
<Avatar
acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath}
badge={undefined}
color={getAvatarColor(color)}
conversationType="direct"
i18n={i18n}
isMe={Boolean(isMe)}
name={name}
profileName={profileName}
sharedGroupNames={sharedGroupNames}
size={AvatarSize.FORTY_EIGHT}
title={title}
/>
<div
aria-label={i18n('StoryListItem__label')}
className={classNames('StoryListItem__previews', {
'StoryListItem__previews--multiple': hasMultiple,
})}
>
{hasMultiple && <div className="StoryListItem__previews--more" />}
{newestStory ? (
<StoryImage
attachment={newestStory.attachment}
firstName={i18n('you')}
i18n={i18n}
isMe
isThumbnail
label=""
moduleClassName="StoryListItem__previews--image"
queueStoryDownload={queueStoryDownload}
storyId={newestStory.messageId}
/>
) : (
<div
aria-label={i18n('Stories__add')}
className="StoryListItem__previews--add StoryListItem__previews--image"
/>
)}
</div>
aria-label={i18n('Stories__add')}
className="MyStories__avatar__add-story"
/>
</StoriesAddStoryButton>
</div>
<div
className="StoryListItem__click-container"
onClick={onClick}
onKeyDown={ev => {
if (ev.key === 'Enter') {
onClick();
ev.stopPropagation();
ev.preventDefault();
}
}}
role="button"
tabIndex={0}
>
<div className="StoryListItem__info">
<>
<div className="StoryListItem__info--title">
{i18n('Stories__mine')}
</div>
</>
</div>
<div
aria-label={i18n('StoryListItem__label')}
className={classNames('StoryListItem__previews', {
'StoryListItem__previews--multiple': hasMultiple,
})}
>
{hasMultiple && <div className="StoryListItem__previews--more" />}
<StoryImage
attachment={newestStory.attachment}
firstName={i18n('you')}
i18n={i18n}
isMe
isThumbnail
label=""
moduleClassName="StoryListItem__previews--image"
queueStoryDownload={queueStoryDownload}
storyId={newestStory.messageId}
/>
</div>
</div>
</div>