Improvements to the MyStories row
This commit is contained in:
parent
6dd6a64d6c
commit
f7f65de322
8 changed files with 244 additions and 149 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue