Put MyStories into NavSidebar
This commit is contained in:
parent
da35ffada6
commit
e78da67a51
2 changed files with 55 additions and 42 deletions
|
@ -18,23 +18,29 @@ import { StoryImage } from './StoryImage';
|
||||||
import { Theme } from '../util/theme';
|
import { Theme } from '../util/theme';
|
||||||
import { resolveStorySendStatus } from '../util/resolveStorySendStatus';
|
import { resolveStorySendStatus } from '../util/resolveStorySendStatus';
|
||||||
import { useRetryStorySend } from '../hooks/useRetryStorySend';
|
import { useRetryStorySend } from '../hooks/useRetryStorySend';
|
||||||
|
import { NavSidebar } from './NavSidebar';
|
||||||
|
|
||||||
export type PropsType = {
|
export type PropsType = {
|
||||||
i18n: LocalizerType;
|
i18n: LocalizerType;
|
||||||
|
navTabsCollapsed: boolean;
|
||||||
myStories: Array<MyStoryType>;
|
myStories: Array<MyStoryType>;
|
||||||
onBack: () => unknown;
|
onBack: () => unknown;
|
||||||
onDelete: (story: StoryViewType) => unknown;
|
onDelete: (story: StoryViewType) => unknown;
|
||||||
onForward: (storyId: string) => unknown;
|
onForward: (storyId: string) => unknown;
|
||||||
onSave: (story: StoryViewType) => unknown;
|
onSave: (story: StoryViewType) => unknown;
|
||||||
onMediaPlaybackStart: () => void;
|
onMediaPlaybackStart: () => void;
|
||||||
|
onToggleNavTabsCollapse: (navTabsCollapsed: boolean) => void;
|
||||||
queueStoryDownload: (storyId: string) => unknown;
|
queueStoryDownload: (storyId: string) => unknown;
|
||||||
retryMessageSend: (messageId: string) => unknown;
|
retryMessageSend: (messageId: string) => unknown;
|
||||||
viewStory: ViewStoryActionCreatorType;
|
viewStory: ViewStoryActionCreatorType;
|
||||||
hasViewReceiptSetting: boolean;
|
hasViewReceiptSetting: boolean;
|
||||||
|
preferredLeftPaneWidth: number;
|
||||||
|
savePreferredLeftPaneWidth: (preferredLeftPaneWidth: number) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function MyStories({
|
export function MyStories({
|
||||||
i18n,
|
i18n,
|
||||||
|
navTabsCollapsed,
|
||||||
myStories,
|
myStories,
|
||||||
onBack,
|
onBack,
|
||||||
onDelete,
|
onDelete,
|
||||||
|
@ -45,6 +51,9 @@ export function MyStories({
|
||||||
viewStory,
|
viewStory,
|
||||||
hasViewReceiptSetting,
|
hasViewReceiptSetting,
|
||||||
onMediaPlaybackStart,
|
onMediaPlaybackStart,
|
||||||
|
onToggleNavTabsCollapse,
|
||||||
|
preferredLeftPaneWidth,
|
||||||
|
savePreferredLeftPaneWidth,
|
||||||
}: PropsType): JSX.Element {
|
}: PropsType): JSX.Element {
|
||||||
const [confirmDeleteStory, setConfirmDeleteStory] = useState<
|
const [confirmDeleteStory, setConfirmDeleteStory] = useState<
|
||||||
StoryViewType | undefined
|
StoryViewType | undefined
|
||||||
|
@ -68,17 +77,16 @@ export function MyStories({
|
||||||
{i18n('icu:MyStories__delete')}
|
{i18n('icu:MyStories__delete')}
|
||||||
</ConfirmationDialog>
|
</ConfirmationDialog>
|
||||||
)}
|
)}
|
||||||
<div className="Stories__pane__header Stories__pane__header--centered">
|
<NavSidebar
|
||||||
<button
|
i18n={i18n}
|
||||||
aria-label={i18n('icu:back')}
|
title={i18n('icu:MyStories__title')}
|
||||||
className="Stories__pane__header--back"
|
navTabsCollapsed={navTabsCollapsed}
|
||||||
onClick={onBack}
|
onBack={onBack}
|
||||||
type="button"
|
onToggleNavTabsCollapse={onToggleNavTabsCollapse}
|
||||||
/>
|
preferredLeftPaneWidth={preferredLeftPaneWidth}
|
||||||
<div className="Stories__pane__header--title">
|
requiresFullWidth
|
||||||
{i18n('icu:MyStories__title')}
|
savePreferredLeftPaneWidth={savePreferredLeftPaneWidth}
|
||||||
</div>
|
>
|
||||||
</div>
|
|
||||||
<div className="Stories__pane__list">
|
<div className="Stories__pane__list">
|
||||||
{myStories.map(list => (
|
{myStories.map(list => (
|
||||||
<div className="MyStories__distribution" key={list.id}>
|
<div className="MyStories__distribution" key={list.id}>
|
||||||
|
@ -112,6 +120,7 @@ export function MyStories({
|
||||||
{i18n('icu:Stories__list-empty')}
|
{i18n('icu:Stories__list-empty')}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</NavSidebar>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -107,13 +107,17 @@ export function StoriesTab({
|
||||||
hasViewReceiptSetting={hasViewReceiptSetting}
|
hasViewReceiptSetting={hasViewReceiptSetting}
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
myStories={myStories}
|
myStories={myStories}
|
||||||
|
navTabsCollapsed={navTabsCollapsed}
|
||||||
onBack={() => setIsMyStories(false)}
|
onBack={() => setIsMyStories(false)}
|
||||||
onDelete={deleteStoryForEveryone}
|
onDelete={deleteStoryForEveryone}
|
||||||
onForward={onForwardStory}
|
onForward={onForwardStory}
|
||||||
onSave={onSaveStory}
|
onSave={onSaveStory}
|
||||||
onMediaPlaybackStart={onMediaPlaybackStart}
|
onMediaPlaybackStart={onMediaPlaybackStart}
|
||||||
|
onToggleNavTabsCollapse={onToggleNavTabsCollapse}
|
||||||
|
preferredLeftPaneWidth={preferredLeftPaneWidth}
|
||||||
queueStoryDownload={queueStoryDownload}
|
queueStoryDownload={queueStoryDownload}
|
||||||
retryMessageSend={retryMessageSend}
|
retryMessageSend={retryMessageSend}
|
||||||
|
savePreferredLeftPaneWidth={savePreferredLeftPaneWidth}
|
||||||
viewStory={viewStory}
|
viewStory={viewStory}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue