fix(ui): tweak settings scheduler styling

This commit is contained in:
psychedelicious 2023-05-13 23:59:03 +10:00
parent 658b556544
commit 0020457fc7

View File

@ -1,4 +1,5 @@
import { import {
Box,
Menu, Menu,
MenuButton, MenuButton,
MenuItemOption, MenuItemOption,
@ -12,8 +13,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import { setSchedulers } from 'features/ui/store/uiSlice'; import { setSchedulers } from 'features/ui/store/uiSlice';
import { isArray } from 'lodash-es'; import { isArray } from 'lodash-es';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { ReactNode } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
export default function SettingsSchedulers() { export default function SettingsSchedulers() {
@ -26,32 +26,22 @@ export default function SettingsSchedulers() {
if (isArray(v)) dispatch(setSchedulers(v.sort())); if (isArray(v)) dispatch(setSchedulers(v.sort()));
}; };
const renderSchedulerMenuItems = () => {
const schedulerMenuItemsToRender: ReactNode[] = [];
SCHEDULERS.forEach((scheduler) => {
schedulerMenuItemsToRender.push(
<MenuItemOption key={scheduler} value={scheduler}>
{scheduler}
</MenuItemOption>
);
});
return schedulerMenuItemsToRender;
};
return ( return (
<Menu closeOnSelect={false}> <Menu closeOnSelect={false}>
<MenuButton as={IAIButton}> <MenuButton as={IAIButton}>
{t('settings.availableSchedulers')} {t('settings.availableSchedulers')}
</MenuButton> </MenuButton>
<MenuList minWidth="480px" maxHeight="39vh" overflowY="scroll"> <MenuList maxHeight={64} overflowY="scroll">
<MenuOptionGroup <MenuOptionGroup
value={schedulers} value={schedulers}
type="checkbox" type="checkbox"
onChange={schedulerSettingsHandler} onChange={schedulerSettingsHandler}
> >
{renderSchedulerMenuItems()} {SCHEDULERS.map((scheduler) => (
<MenuItemOption key={scheduler} value={scheduler}>
{scheduler}
</MenuItemOption>
))}
</MenuOptionGroup> </MenuOptionGroup>
</MenuList> </MenuList>
</Menu> </Menu>