mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Introduce a new design for the left pane

Browse source
This commit is contained in:
Evan Hahn 2021-10-12 18:59:08 -05:00 • committed by GitHub
parent d60600d6fb
commit 35a54cdc02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
63 changed files with 1205 additions and 576 deletions
Download patch file Download diff file Expand all files Collapse all files

79
ts/components/DialogNetworkStatus.stories.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020 Signal Messenger, LLC
// Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
@ -10,10 +10,13 @@ import { DialogNetworkStatus } from './DialogNetworkStatus';
import { SocketStatus } from '../types/SocketStatus';
import { setupI18n } from '../util/setupI18n';
import enMessages from '../../_locales/en/messages.json';
import { WidthBreakpoint } from './_util';
import { FakeLeftPaneContainer } from '../test-both/helpers/FakeLeftPaneContainer';
const i18n = setupI18n('en', enMessages);
const defaultProps = {
containerWidthBreakpoint: WidthBreakpoint.Wide,
hasNetworkDialog: true,
i18n,
isOnline: true,
@ -26,6 +29,11 @@ const defaultProps = {
const story = storiesOf('Components/DialogNetworkStatus', module);
story.add('Knobs Playground', () => {
const containerWidthBreakpoint = select(
'containerWidthBreakpoint',
WidthBreakpoint,
WidthBreakpoint.Wide
);
const hasNetworkDialog = boolean('hasNetworkDialog', true);
const isOnline = boolean('isOnline', true);
const socketStatus = select(
@ -40,30 +48,57 @@ story.add('Knobs Playground', () => {
);
return (
<DialogNetworkStatus
{...defaultProps}
hasNetworkDialog={hasNetworkDialog}
isOnline={isOnline}
socketStatus={socketStatus}
/>
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogNetworkStatus
{...defaultProps}
containerWidthBreakpoint={containerWidthBreakpoint}
hasNetworkDialog={hasNetworkDialog}
isOnline={isOnline}
socketStatus={socketStatus}
/>
</FakeLeftPaneContainer>
);
});
story.add('Connecting', () => (
<DialogNetworkStatus
{...defaultProps}
socketStatus={SocketStatus.CONNECTING}
/>
));
([
['wide', WidthBreakpoint.Wide],
['narrow', WidthBreakpoint.Narrow],
] as const).forEach(([name, containerWidthBreakpoint]) => {
const defaultPropsForBreakpoint = {
...defaultProps,
containerWidthBreakpoint,
};
story.add('Closing', () => (
<DialogNetworkStatus {...defaultProps} socketStatus={SocketStatus.CLOSING} />
));
story.add(`Connecting (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogNetworkStatus
{...defaultPropsForBreakpoint}
socketStatus={SocketStatus.CONNECTING}
/>
</FakeLeftPaneContainer>
));
story.add('Closed', () => (
<DialogNetworkStatus {...defaultProps} socketStatus={SocketStatus.CLOSED} />
));
story.add(`Closing (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogNetworkStatus
{...defaultPropsForBreakpoint}
socketStatus={SocketStatus.CLOSING}
/>
</FakeLeftPaneContainer>
));
story.add('Offline', () => (
<DialogNetworkStatus {...defaultProps} isOnline={false} />
));
story.add(`Closed (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogNetworkStatus
{...defaultPropsForBreakpoint}
socketStatus={SocketStatus.CLOSED}
/>
</FakeLeftPaneContainer>
));
story.add(`Offline (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogNetworkStatus {...defaultPropsForBreakpoint} isOnline={false} />
</FakeLeftPaneContainer>
));
});