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

View file

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