Ensure MyStories is part of the stories pane list
This commit is contained in:
parent
76cff75730
commit
f1c9db543e
2 changed files with 80 additions and 76 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue