Ensure MyStories is part of the stories pane list

This commit is contained in:
Josh Perez 2022-07-29 15:26:40 -04:00 committed by GitHub
parent 76cff75730
commit f1c9db543e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 80 additions and 76 deletions

View File

@ -22,20 +22,19 @@
padding-top: calc(14px + var(--title-bar-drag-area-height)); padding-top: calc(14px + var(--title-bar-drag-area-height));
&__settings__button { &__settings__button {
@include dark-theme {
@include color-svg(
'../images/icons/v2/more-horiz-24.svg',
$color-white
);
}
height: 22px;
margin-left: 24px; margin-left: 24px;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
right: 12px; right: 14px;
top: -6px; top: 0px;
width: 22px;
&::after {
@include dark-theme {
@include color-svg(
'../images/icons/v2/more-horiz-24.svg',
$color-white
);
}
}
} }
&__header { &__header {
@ -99,6 +98,8 @@
&__list { &__list {
@include scrollbar; @include scrollbar;
display: flex;
flex-direction: column;
flex: 1; flex: 1;
overflow-y: overlay; overflow-y: overlay;
padding: 0 14px; padding: 0 14px;
@ -108,6 +109,7 @@
align-items: center; align-items: center;
color: $color-gray-45; color: $color-gray-45;
display: flex; display: flex;
flex: 1;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
@ -168,8 +170,4 @@
} }
} }
} }
&__my-stories {
padding: 0 10px;
}
} }

View File

@ -149,70 +149,76 @@ export const StoriesPane = ({
placeholder={i18n('search')} placeholder={i18n('search')}
value={searchTerm} value={searchTerm}
/> />
<MyStoriesButton <div className="Stories__pane__list">
hasMultiple={myStories.length ? myStories[0].stories.length > 1 : false} <>
i18n={i18n} <MyStoriesButton
me={me} hasMultiple={
newestStory={ myStories.length ? myStories[0].stories.length > 1 : false
myStories.length ? getNewestMyStory(myStories[0]) : undefined }
}
onClick={onMyStoriesClicked}
queueStoryDownload={queueStoryDownload}
/>
<div
className={classNames('Stories__pane__list', {
'Stories__pane__list--empty': !stories.length,
})}
>
{renderedStories.map(story => (
<StoryListItem
conversationId={story.conversationId}
getPreferredBadge={getPreferredBadge}
group={story.group}
i18n={i18n} i18n={i18n}
key={story.storyView.timestamp} me={me}
onHideStory={toggleHideStories} newestStory={
onGoToConversation={conversationId => { myStories.length ? getNewestMyStory(myStories[0]) : undefined
showConversation({ conversationId }); }
toggleStoriesView(); onClick={onMyStoriesClicked}
}}
queueStoryDownload={queueStoryDownload} queueStoryDownload={queueStoryDownload}
story={story.storyView}
viewUserStories={viewUserStories}
/> />
))} {renderedStories.map(story => (
{Boolean(hiddenStories.length) && ( <StoryListItem
<> conversationId={story.conversationId}
<button group={story.group}
className={classNames('Stories__hidden-stories', { getPreferredBadge={getPreferredBadge}
'Stories__hidden-stories--expanded': isShowingHiddenStories, i18n={i18n}
})} key={story.storyView.timestamp}
onClick={() => setIsShowingHiddenStories(!isShowingHiddenStories)} onHideStory={toggleHideStories}
type="button" onGoToConversation={conversationId => {
> showConversation({ conversationId });
{i18n('Stories__hidden-stories')} toggleStoriesView();
</button> }}
{isShowingHiddenStories && queueStoryDownload={queueStoryDownload}
hiddenStories.map(story => ( story={story.storyView}
<StoryListItem viewUserStories={viewUserStories}
conversationId={story.conversationId} />
getPreferredBadge={getPreferredBadge} ))}
key={story.storyView.timestamp} {Boolean(hiddenStories.length) && (
i18n={i18n} <>
isHidden <button
onHideStory={toggleHideStories} className={classNames('Stories__hidden-stories', {
onGoToConversation={conversationId => { 'Stories__hidden-stories--expanded': isShowingHiddenStories,
showConversation({ conversationId }); })}
toggleStoriesView(); onClick={() =>
}} setIsShowingHiddenStories(!isShowingHiddenStories)
queueStoryDownload={queueStoryDownload} }
story={story.storyView} type="button"
viewUserStories={viewUserStories} >
/> {i18n('Stories__hidden-stories')}
))} </button>
</> {isShowingHiddenStories &&
)} hiddenStories.map(story => (
{!stories.length && i18n('Stories__list-empty')} <StoryListItem
conversationId={story.conversationId}
key={story.storyView.timestamp}
getPreferredBadge={getPreferredBadge}
i18n={i18n}
isHidden
onHideStory={toggleHideStories}
onGoToConversation={conversationId => {
showConversation({ conversationId });
toggleStoriesView();
}}
queueStoryDownload={queueStoryDownload}
story={story.storyView}
viewUserStories={viewUserStories}
/>
))}
</>
)}
{!stories.length && (
<div className="Stories__pane__list--empty">
{i18n('Stories__list-empty')}
</div>
)}
</>
</div> </div>
</> </>
); );