Skip to content

Commit 6e36c27

Browse files
blessedcoolantblessedcoolant
authored
feat: Add Setting Switch Component (#3847)
1 parent f6d5e93 commit 6e36c27

File tree

4 files changed

+90
-26
lines changed

4 files changed

+90
-26
lines changed

‎invokeai/frontend/web/public/locales/en.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -547,7 +547,8 @@
547547
"saveSteps": "Save images every n steps",
548548
"confirmOnDelete": "Confirm On Delete",
549549
"displayHelpIcons": "Display Help Icons",
550-
"useCanvasBeta": "Use Canvas Beta Layout",
550+
"alternateCanvasLayout": "Alternate Canvas Layout",
551+
"enableNodesEditor": "Enable Nodes Editor",
551552
"enableImageDebugging": "Enable Image Debugging",
552553
"useSlidersForAll": "Use Sliders For All Options",
553554
"showProgressInViewer": "Show Progress Images in Viewer",
@@ -564,7 +565,9 @@
564565
"ui": "User Interface",
565566
"favoriteSchedulers": "Favorite Schedulers",
566567
"favoriteSchedulersPlaceholder": "No schedulers favorited",
567-
"showAdvancedOptions": "Show Advanced Options"
568+
"showAdvancedOptions": "Show Advanced Options",
569+
"experimental": "Experimental",
570+
"beta": "Beta"
568571
},
569572
"toast": {
570573
"serverError": "Server Error",

‎invokeai/frontend/web/src/common/components/IAISwitch.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from '@chakra-ui/react';
1010
import { memo } from 'react';
1111

12-
interface Props extends SwitchProps {
12+
export interface IAISwitchProps extends SwitchProps {
1313
label?: string;
1414
width?: string | number;
1515
formControlProps?: FormControlProps;
@@ -20,7 +20,7 @@ interface Props extends SwitchProps {
2020
/**
2121
* Customized Chakra FormControl + Switch multi-part component.
2222
*/
23-
const IAISwitch = (props: Props) => {
23+
const IAISwitch = (props: IAISwitchProps) => {
2424
const {
2525
label,
2626
isDisabled = false,

‎invokeai/frontend/web/src/features/system/components/SettingsModal/SettingSwitch.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Badge, BadgeProps, Flex, Text, TextProps } from '@chakra-ui/react';
2+
import IAISwitch, { IAISwitchProps } from 'common/components/IAISwitch';
3+
import { useTranslation } from 'react-i18next';
4+
5+
type SettingSwitchProps = IAISwitchProps & {
6+
label: string;
7+
useBadge?: boolean;
8+
badgeLabel?: string;
9+
textProps?: TextProps;
10+
badgeProps?: BadgeProps;
11+
};
12+
13+
export default function SettingSwitch(props: SettingSwitchProps) {
14+
const { t } = useTranslation();
15+
16+
const {
17+
label,
18+
textProps,
19+
useBadge = false,
20+
badgeLabel = t('settings.experimental'),
21+
badgeProps,
22+
...rest
23+
} = props;
24+
25+
return (
26+
<Flex justifyContent="space-between" py={1}>
27+
<Flex gap={2} alignItems="center">
28+
<Text
29+
sx={{
30+
fontSize: 14,
31+
_dark: {
32+
color: 'base.300',
33+
},
34+
}}
35+
{...textProps}
36+
>
37+
{label}
38+
</Text>
39+
{useBadge && (
40+
<Badge
41+
size="xs"
42+
sx={{
43+
px: 2,
44+
color: 'base.700',
45+
bg: 'accent.200',
46+
_dark: { bg: 'accent.500', color: 'base.200' },
47+
}}
48+
{...badgeProps}
49+
>
50+
{badgeLabel}
51+
</Badge>
52+
)}
53+
</Flex>
54+
<IAISwitch {...rest} />
55+
</Flex>
56+
);
57+
}

‎invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@ import {
1111
Text,
1212
useDisclosure,
1313
} from '@chakra-ui/react';
14-
import { createSelector, current } from '@reduxjs/toolkit';
14+
import { createSelector } from '@reduxjs/toolkit';
1515
import { VALID_LOG_LEVELS } from 'app/logging/useLogger';
1616
import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
1717
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
1818
import IAIButton from 'common/components/IAIButton';
1919
import IAIMantineSelect from 'common/components/IAIMantineSelect';
20-
import IAISwitch from 'common/components/IAISwitch';
2120
import { systemSelector } from 'features/system/store/systemSelectors';
2221
import {
2322
SystemState,
@@ -48,8 +47,9 @@ import {
4847
} from 'react';
4948
import { useTranslation } from 'react-i18next';
5049
import { LogLevelName } from 'roarr';
51-
import SettingsSchedulers from './SettingsSchedulers';
50+
import SettingSwitch from './SettingSwitch';
5251
import SettingsClearIntermediates from './SettingsClearIntermediates';
52+
import SettingsSchedulers from './SettingsSchedulers';
5353

5454
const selector = createSelector(
5555
[systemSelector, uiSelector],
@@ -206,15 +206,15 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
206206
<Flex sx={{ gap: 4, flexDirection: 'column' }}>
207207
<StyledFlex>
208208
<Heading size="sm">{t('settings.general')}</Heading>
209-
<IAISwitch
209+
<SettingSwitch
210210
label={t('settings.confirmOnDelete')}
211211
isChecked={shouldConfirmOnDelete}
212212
onChange={(e: ChangeEvent<HTMLInputElement>) =>
213213
dispatch(setShouldConfirmOnDelete(e.target.checked))
214214
}
215215
/>
216216
{shouldShowAdvancedOptionsSettings && (
217-
<IAISwitch
217+
<SettingSwitch
218218
label={t('settings.showAdvancedOptions')}
219219
isChecked={shouldShowAdvancedOptions}
220220
onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -231,37 +231,29 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
231231

232232
<StyledFlex>
233233
<Heading size="sm">{t('settings.ui')}</Heading>
234-
<IAISwitch
234+
<SettingSwitch
235235
label={t('settings.displayHelpIcons')}
236236
isChecked={shouldDisplayGuides}
237237
onChange={(e: ChangeEvent<HTMLInputElement>) =>
238238
dispatch(setShouldDisplayGuides(e.target.checked))
239239
}
240240
/>
241-
{shouldShowBetaLayout && (
242-
<IAISwitch
243-
label={t('settings.useCanvasBeta')}
244-
isChecked={shouldUseCanvasBetaLayout}
245-
onChange={(e: ChangeEvent<HTMLInputElement>) =>
246-
dispatch(setShouldUseCanvasBetaLayout(e.target.checked))
247-
}
248-
/>
249-
)}
250-
<IAISwitch
241+
242+
<SettingSwitch
251243
label={t('settings.useSlidersForAll')}
252244
isChecked={shouldUseSliders}
253245
onChange={(e: ChangeEvent<HTMLInputElement>) =>
254246
dispatch(setShouldUseSliders(e.target.checked))
255247
}
256248
/>
257-
<IAISwitch
249+
<SettingSwitch
258250
label={t('settings.showProgressInViewer')}
259251
isChecked={shouldShowProgressInViewer}
260252
onChange={(e: ChangeEvent<HTMLInputElement>) =>
261253
dispatch(setShouldShowProgressInViewer(e.target.checked))
262254
}
263255
/>
264-
<IAISwitch
256+
<SettingSwitch
265257
label={t('settings.antialiasProgressImages')}
266258
isChecked={shouldAntialiasProgressImage}
267259
onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -270,9 +262,21 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
270262
)
271263
}
272264
/>
265+
{shouldShowBetaLayout && (
266+
<SettingSwitch
267+
label={t('settings.alternateCanvasLayout')}
268+
useBadge
269+
badgeLabel={t('settings.beta')}
270+
isChecked={shouldUseCanvasBetaLayout}
271+
onChange={(e: ChangeEvent<HTMLInputElement>) =>
272+
dispatch(setShouldUseCanvasBetaLayout(e.target.checked))
273+
}
274+
/>
275+
)}
273276
{shouldShowNodesToggle && (
274-
<IAISwitch
275-
label="Enable Nodes Editor (Experimental)"
277+
<SettingSwitch
278+
label={t('settings.enableNodesEditor')}
279+
useBadge
276280
isChecked={isNodesEnabled}
277281
onChange={handleToggleNodes}
278282
/>
@@ -282,7 +286,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
282286
{shouldShowDeveloperSettings && (
283287
<StyledFlex>
284288
<Heading size="sm">{t('settings.developer')}</Heading>
285-
<IAISwitch
289+
<SettingSwitch
286290
label={t('settings.shouldLogToConsole')}
287291
isChecked={shouldLogToConsole}
288292
onChange={handleLogToConsoleChanged}
@@ -294,7 +298,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
294298
value={consoleLogLevel}
295299
data={VALID_LOG_LEVELS.concat()}
296300
/>
297-
<IAISwitch
301+
<SettingSwitch
298302
label={t('settings.enableImageDebugging')}
299303
isChecked={enableImageDebugging}
300304
onChange={(e: ChangeEvent<HTMLInputElement>) =>

0 commit comments

Comments
 (0)