Add a stories toggle to Preferences
This commit is contained in:
Josh Perez
GitHub
parent
4d67c6b056
commit
0d2e6493f5
9 changed files with 199 additions and 110 deletions
|
|
@ -1,16 +1,17 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import type { Meta, Story } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
import type { PropsType } from './Preferences';
|
||||
import type { PropsDataType, PropsType } from './Preferences';
|
||||
import { Preferences } from './Preferences';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import { DEFAULT_CONVERSATION_COLOR } from '../types/Colors';
|
||||
import { PhoneNumberSharingMode } from '../util/phoneNumberSharingMode';
|
||||
import { PhoneNumberDiscoverability } from '../util/phoneNumberDiscoverability';
|
||||
import { objectMap } from '../util/objectMap';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
|
|
@ -42,7 +43,7 @@ const availableSpeakers = [
|
|||
},
|
||||
];
|
||||
|
||||
const createProps = (): PropsType => ({
|
||||
const getDefaultArgs = (): PropsDataType => ({
|
||||
availableCameras: [
|
||||
{
|
||||
deviceId:
|
||||
|
|
@ -73,6 +74,7 @@ const createProps = (): PropsType => ({
|
|||
hasCallNotifications: true,
|
||||
hasCallRingtoneNotification: false,
|
||||
hasCountMutedConversations: false,
|
||||
hasCustomTitleBar: true,
|
||||
hasHideMenuBar: false,
|
||||
hasIncomingCallNotifications: true,
|
||||
hasLinkPreviews: true,
|
||||
|
|
@ -85,38 +87,9 @@ const createProps = (): PropsType => ({
|
|||
hasReadReceipts: true,
|
||||
hasRelayCalls: false,
|
||||
hasSpellCheck: true,
|
||||
hasStoriesEnabled: true,
|
||||
hasTypingIndicators: true,
|
||||
lastSyncTime: Date.now(),
|
||||
notificationContent: 'name',
|
||||
selectedCamera:
|
||||
'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c',
|
||||
selectedMicrophone: availableMicrophones[0],
|
||||
selectedSpeaker: availableSpeakers[1],
|
||||
themeSetting: 'system',
|
||||
universalExpireTimer: 3600,
|
||||
whoCanFindMe: PhoneNumberDiscoverability.Discoverable,
|
||||
whoCanSeeMe: PhoneNumberSharingMode.Everybody,
|
||||
zoomFactor: 1,
|
||||
|
||||
addCustomColor: action('addCustomColor'),
|
||||
closeSettings: action('closeSettings'),
|
||||
doDeleteAllData: action('doDeleteAllData'),
|
||||
doneRendering: action('doneRendering'),
|
||||
editCustomColor: action('editCustomColor'),
|
||||
getConversationsWithCustomColor: () => Promise.resolve([]),
|
||||
initialSpellCheckSetting: true,
|
||||
makeSyncRequest: () => {
|
||||
action('makeSyncRequest');
|
||||
return Promise.resolve();
|
||||
},
|
||||
removeCustomColor: action('removeCustomColor'),
|
||||
removeCustomColorOnConversations: action('removeCustomColorOnConversations'),
|
||||
resetAllChatColors: action('resetAllChatColors'),
|
||||
resetDefaultChatColor: action('resetDefaultChatColor'),
|
||||
setGlobalDefaultConversationColor: action(
|
||||
'setGlobalDefaultConversationColor'
|
||||
),
|
||||
|
||||
isAudioNotificationsSupported: true,
|
||||
isAutoDownloadUpdatesSupported: true,
|
||||
isAutoLaunchSupported: true,
|
||||
|
|
@ -125,62 +98,95 @@ const createProps = (): PropsType => ({
|
|||
isPhoneNumberSharingSupported: false,
|
||||
isSyncSupported: true,
|
||||
isSystemTraySupported: true,
|
||||
lastSyncTime: Date.now(),
|
||||
notificationContent: 'name',
|
||||
selectedCamera:
|
||||
'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c',
|
||||
selectedMicrophone: availableMicrophones[0],
|
||||
selectedSpeaker: availableSpeakers[1],
|
||||
shouldShowStoriesSettings: true,
|
||||
themeSetting: 'system',
|
||||
universalExpireTimer: 3600,
|
||||
whoCanFindMe: PhoneNumberDiscoverability.Discoverable,
|
||||
whoCanSeeMe: PhoneNumberSharingMode.Everybody,
|
||||
zoomFactor: 1,
|
||||
});
|
||||
|
||||
onAudioNotificationsChange: action('onAudioNotificationsChange'),
|
||||
onAutoDownloadUpdateChange: action('onAutoDownloadUpdateChange'),
|
||||
onAutoLaunchChange: action('onAutoLaunchChange'),
|
||||
onCallNotificationsChange: action('onCallNotificationsChange'),
|
||||
onCallRingtoneNotificationChange: action('onCallRingtoneNotificationChange'),
|
||||
onCountMutedConversationsChange: action('onCountMutedConversationsChange'),
|
||||
onHideMenuBarChange: action('onHideMenuBarChange'),
|
||||
onIncomingCallNotificationsChange: action(
|
||||
'onIncomingCallNotificationsChange'
|
||||
),
|
||||
onLastSyncTimeChange: action('onLastSyncTimeChange'),
|
||||
onMediaCameraPermissionsChange: action('onMediaCameraPermissionsChange'),
|
||||
onMediaPermissionsChange: action('onMediaPermissionsChange'),
|
||||
onMinimizeToAndStartInSystemTrayChange: action(
|
||||
'onMinimizeToAndStartInSystemTrayChange'
|
||||
),
|
||||
onMinimizeToSystemTrayChange: action('onMinimizeToSystemTrayChange'),
|
||||
onNotificationAttentionChange: action('onNotificationAttentionChange'),
|
||||
onNotificationContentChange: action('onNotificationContentChange'),
|
||||
onNotificationsChange: action('onNotificationsChange'),
|
||||
onRelayCallsChange: action('onRelayCallsChange'),
|
||||
onSelectedCameraChange: action('onSelectedCameraChange'),
|
||||
onSelectedMicrophoneChange: action('onSelectedMicrophoneChange'),
|
||||
onSelectedSpeakerChange: action('onSelectedSpeakerChange'),
|
||||
onSpellCheckChange: action('onSpellCheckChange'),
|
||||
onThemeChange: action('onThemeChange'),
|
||||
onUniversalExpireTimerChange: action('onUniversalExpireTimerChange'),
|
||||
onZoomFactorChange: action('onZoomFactorChange'),
|
||||
|
||||
i18n,
|
||||
|
||||
executeMenuRole: action('executeMenuRole'),
|
||||
hasCustomTitleBar: true,
|
||||
const defaultArgTypes: Record<string, { defaultValue: unknown }> = {};
|
||||
objectMap(getDefaultArgs(), (key, defaultValue) => {
|
||||
defaultArgTypes[key] = { defaultValue };
|
||||
});
|
||||
|
||||
export default {
|
||||
title: 'Components/Preferences',
|
||||
component: Preferences,
|
||||
argTypes: {
|
||||
// ...defaultArgTypes,
|
||||
|
||||
i18n: {
|
||||
defaultValue: i18n,
|
||||
},
|
||||
|
||||
addCustomColor: { action: true },
|
||||
closeSettings: { action: true },
|
||||
doDeleteAllData: { action: true },
|
||||
doneRendering: { action: true },
|
||||
editCustomColor: { action: true },
|
||||
executeMenuRole: { action: true },
|
||||
getConversationsWithCustomColor: { action: true },
|
||||
makeSyncRequest: { action: true },
|
||||
onAudioNotificationsChange: { action: true },
|
||||
onAutoDownloadUpdateChange: { action: true },
|
||||
onAutoLaunchChange: { action: true },
|
||||
onCallNotificationsChange: { action: true },
|
||||
onCallRingtoneNotificationChange: { action: true },
|
||||
onCountMutedConversationsChange: { action: true },
|
||||
onHasStoriesEnabledChanged: { action: true },
|
||||
onHideMenuBarChange: { action: true },
|
||||
onIncomingCallNotificationsChange: { action: true },
|
||||
onLastSyncTimeChange: { action: true },
|
||||
onMediaCameraPermissionsChange: { action: true },
|
||||
onMediaPermissionsChange: { action: true },
|
||||
onMinimizeToAndStartInSystemTrayChange: { action: true },
|
||||
onMinimizeToSystemTrayChange: { action: true },
|
||||
onNotificationAttentionChange: { action: true },
|
||||
onNotificationContentChange: { action: true },
|
||||
onNotificationsChange: { action: true },
|
||||
onRelayCallsChange: { action: true },
|
||||
onSelectedCameraChange: { action: true },
|
||||
onSelectedMicrophoneChange: { action: true },
|
||||
onSelectedSpeakerChange: { action: true },
|
||||
onSpellCheckChange: { action: true },
|
||||
onThemeChange: { action: true },
|
||||
onUniversalExpireTimerChange: { action: true },
|
||||
onZoomFactorChange: { action: true },
|
||||
removeCustomColor: { action: true },
|
||||
removeCustomColorOnConversations: { action: true },
|
||||
resetAllChatColors: { action: true },
|
||||
resetDefaultChatColor: { action: true },
|
||||
setGlobalDefaultConversationColor: { action: true },
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<PropsType> = args => <Preferences {...args} />;
|
||||
|
||||
export const _Preferences = Template.bind({});
|
||||
_Preferences.args = getDefaultArgs();
|
||||
|
||||
export const Blocked1 = Template.bind({});
|
||||
Blocked1.args = {
|
||||
blockedCount: 1,
|
||||
};
|
||||
|
||||
export const _Preferences = (): JSX.Element => (
|
||||
<Preferences {...createProps()} />
|
||||
);
|
||||
|
||||
export const Blocked1 = (): JSX.Element => (
|
||||
<Preferences {...createProps()} blockedCount={1} />
|
||||
);
|
||||
|
||||
export const BlockedMany = (): JSX.Element => (
|
||||
<Preferences {...createProps()} blockedCount={55} />
|
||||
);
|
||||
|
||||
export const CustomUniversalExpireTimer = (): JSX.Element => (
|
||||
<Preferences {...createProps()} universalExpireTimer={9000} />
|
||||
);
|
||||
export const BlockedMany = Template.bind({});
|
||||
BlockedMany.args = {
|
||||
blockedCount: 55,
|
||||
};
|
||||
|
||||
export const CustomUniversalExpireTimer = Template.bind({});
|
||||
CustomUniversalExpireTimer.args = {
|
||||
universalExpireTimer: 9000,
|
||||
};
|
||||
CustomUniversalExpireTimer.story = {
|
||||
name: 'Custom universalExpireTimer',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ import { useTheme } from '../hooks/useTheme';
|
|||
type CheckboxChangeHandlerType = (value: boolean) => unknown;
|
||||
type SelectChangeHandlerType<T = string | number> = (value: T) => unknown;
|
||||
|
||||
export type PropsType = {
|
||||
export type PropsDataType = {
|
||||
// Settings
|
||||
blockedCount: number;
|
||||
customColors: Record<string, CustomColorType>;
|
||||
|
|
@ -68,6 +68,7 @@ export type PropsType = {
|
|||
hasReadReceipts: boolean;
|
||||
hasRelayCalls?: boolean;
|
||||
hasSpellCheck: boolean;
|
||||
hasStoriesEnabled: boolean;
|
||||
hasTypingIndicators: boolean;
|
||||
lastSyncTime?: number;
|
||||
notificationContent: NotificationSettingType;
|
||||
|
|
@ -80,16 +81,37 @@ export type PropsType = {
|
|||
whoCanSeeMe: PhoneNumberSharingMode;
|
||||
zoomFactor: ZoomFactorType;
|
||||
|
||||
// Other props
|
||||
hasCustomTitleBar: boolean;
|
||||
initialSpellCheckSetting: boolean;
|
||||
shouldShowStoriesSettings: boolean;
|
||||
|
||||
// Limited support features
|
||||
isAudioNotificationsSupported: boolean;
|
||||
isAutoDownloadUpdatesSupported: boolean;
|
||||
isAutoLaunchSupported: boolean;
|
||||
isHideMenuBarSupported: boolean;
|
||||
isNotificationAttentionSupported: boolean;
|
||||
isPhoneNumberSharingSupported: boolean;
|
||||
isSyncSupported: boolean;
|
||||
isSystemTraySupported: boolean;
|
||||
|
||||
availableCameras: Array<
|
||||
Pick<MediaDeviceInfo, 'deviceId' | 'groupId' | 'kind' | 'label'>
|
||||
>;
|
||||
} & Omit<MediaDeviceSettings, 'availableCameras'>;
|
||||
|
||||
type PropsFunctionType = {
|
||||
// Other props
|
||||
addCustomColor: (color: CustomColorType) => unknown;
|
||||
closeSettings: () => unknown;
|
||||
doDeleteAllData: () => unknown;
|
||||
doneRendering: () => unknown;
|
||||
editCustomColor: (colorId: string, color: CustomColorType) => unknown;
|
||||
executeMenuRole: ExecuteMenuRoleType;
|
||||
getConversationsWithCustomColor: (
|
||||
colorId: string
|
||||
) => Promise<Array<ConversationType>>;
|
||||
initialSpellCheckSetting: boolean;
|
||||
makeSyncRequest: () => unknown;
|
||||
removeCustomColor: (colorId: string) => unknown;
|
||||
removeCustomColorOnConversations: (colorId: string) => unknown;
|
||||
|
|
@ -102,18 +124,6 @@ export type PropsType = {
|
|||
value: CustomColorType;
|
||||
}
|
||||
) => unknown;
|
||||
hasCustomTitleBar: boolean;
|
||||
executeMenuRole: ExecuteMenuRoleType;
|
||||
|
||||
// Limited support features
|
||||
isAudioNotificationsSupported: boolean;
|
||||
isAutoDownloadUpdatesSupported: boolean;
|
||||
isAutoLaunchSupported: boolean;
|
||||
isHideMenuBarSupported: boolean;
|
||||
isNotificationAttentionSupported: boolean;
|
||||
isPhoneNumberSharingSupported: boolean;
|
||||
isSyncSupported: boolean;
|
||||
isSystemTraySupported: boolean;
|
||||
|
||||
// Change handlers
|
||||
onAudioNotificationsChange: CheckboxChangeHandlerType;
|
||||
|
|
@ -122,6 +132,7 @@ export type PropsType = {
|
|||
onCallNotificationsChange: CheckboxChangeHandlerType;
|
||||
onCallRingtoneNotificationChange: CheckboxChangeHandlerType;
|
||||
onCountMutedConversationsChange: CheckboxChangeHandlerType;
|
||||
onHasStoriesEnabledChanged: SelectChangeHandlerType<boolean>;
|
||||
onHideMenuBarChange: CheckboxChangeHandlerType;
|
||||
onIncomingCallNotificationsChange: CheckboxChangeHandlerType;
|
||||
onLastSyncTimeChange: (time: number) => unknown;
|
||||
|
|
@ -141,13 +152,11 @@ export type PropsType = {
|
|||
onUniversalExpireTimerChange: SelectChangeHandlerType<number>;
|
||||
onZoomFactorChange: SelectChangeHandlerType<ZoomFactorType>;
|
||||
|
||||
availableCameras: Array<
|
||||
Pick<MediaDeviceInfo, 'deviceId' | 'groupId' | 'kind' | 'label'>
|
||||
>;
|
||||
|
||||
// Localization
|
||||
i18n: LocalizerType;
|
||||
} & Omit<MediaDeviceSettings, 'availableCameras'>;
|
||||
};
|
||||
|
||||
export type PropsType = PropsDataType & PropsFunctionType;
|
||||
|
||||
enum Page {
|
||||
// Accessible through left nav
|
||||
|
|
@ -218,6 +227,7 @@ export const Preferences = ({
|
|||
hasReadReceipts,
|
||||
hasRelayCalls,
|
||||
hasSpellCheck,
|
||||
hasStoriesEnabled,
|
||||
hasTypingIndicators,
|
||||
i18n,
|
||||
initialSpellCheckSetting,
|
||||
|
|
@ -239,6 +249,7 @@ export const Preferences = ({
|
|||
onCallNotificationsChange,
|
||||
onCallRingtoneNotificationChange,
|
||||
onCountMutedConversationsChange,
|
||||
onHasStoriesEnabledChanged,
|
||||
onHideMenuBarChange,
|
||||
onIncomingCallNotificationsChange,
|
||||
onLastSyncTimeChange,
|
||||
|
|
@ -265,12 +276,14 @@ export const Preferences = ({
|
|||
selectedMicrophone,
|
||||
selectedSpeaker,
|
||||
setGlobalDefaultConversationColor,
|
||||
shouldShowStoriesSettings,
|
||||
themeSetting,
|
||||
universalExpireTimer = 0,
|
||||
whoCanFindMe,
|
||||
whoCanSeeMe,
|
||||
zoomFactor,
|
||||
}: PropsType): JSX.Element => {
|
||||
const storiesId = useUniqueId();
|
||||
const themeSelectId = useUniqueId();
|
||||
const zoomSelectId = useUniqueId();
|
||||
|
||||
|
|
@ -947,6 +960,39 @@ export const Preferences = ({
|
|||
}
|
||||
/>
|
||||
</SettingsRow>
|
||||
{shouldShowStoriesSettings && (
|
||||
<SettingsRow title={i18n('Stories__title')}>
|
||||
<Control
|
||||
left={
|
||||
<label htmlFor={storiesId}>
|
||||
<div>{i18n('Stories__settings-toggle--title')}</div>
|
||||
<div className="Preferences__description">
|
||||
{i18n('Stories__settings-toggle--description')}
|
||||
</div>
|
||||
</label>
|
||||
}
|
||||
right={
|
||||
<Select
|
||||
id={storiesId}
|
||||
onChange={value => {
|
||||
onHasStoriesEnabledChanged(value === 'true');
|
||||
}}
|
||||
options={[
|
||||
{
|
||||
text: i18n('on'),
|
||||
value: 'true',
|
||||
},
|
||||
{
|
||||
text: i18n('off'),
|
||||
value: 'false',
|
||||
},
|
||||
]}
|
||||
value={String(hasStoriesEnabled)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</SettingsRow>
|
||||
)}
|
||||
<SettingsRow>
|
||||
<Control
|
||||
left={
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue