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));
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue