smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Menu overlay

Browse Source
This commit is contained in:
Sean Edmunds
2025-01-28 16:42:38 -06:00
parent 7f1dd022a0
commit f9cc1ab63a
1 changed files with 171 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

334
src/pages/homepage/components/SettingsButton.tsx
View File

@@ -4,6 +4,7 @@ import {
Group, Group,
Menu, Menu,
MultiSelect, MultiSelect,
Overlay,
Select, Select,
Stack, Stack,
Text, Text,
@@ -43,7 +44,7 @@ function SettingsButton() {
} = useCommonHooks(); } = useCommonHooks();
const [selectedClient, setSelectedClient] = useState<any>(wolClients?.[0]); const [selectedClient, setSelectedClient] = useState<any>(wolClients?.[0]);
const [overlayOpened, setOverlayOpened] = useState(false);
const handleWakeRequest = () => { const handleWakeRequest = () => {
wakeRequest({ wakeRequest({
method: 'POST', method: 'POST',
@@ -63,179 +64,186 @@ function SettingsButton() {
}, [data, isFetched]); }, [data, isFetched]);
return ( return (
<Menu <>
classNames={menuClasses} {overlayOpened && <Overlay />}
withinPortal={false} <Menu
withArrow classNames={menuClasses}
shadow='md' withinPortal={false}
position='top' withArrow
> shadow='md'
<Menu.Target> position='top'
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}> onOpen={() => setOverlayOpened(true)}
<FiMenu /> onClose={() => setOverlayOpened(false)}
</Button> >
</Menu.Target> <Menu.Target>
<Menu.Dropdown> <Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
<Stack gap={0} display={'flex'} pb={'1rem'} pt={'2rem'} align='center'> <FiMenu />
<Tooltip label='Settings' color={theme.primaryColor} withArrow> </Button>
<FiSettings </Menu.Target>
size={20} <Menu.Dropdown>
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)} <Stack gap={0} display={'flex'} pb={'1rem'} pt={'2rem'} align='center'>
style={{ <Tooltip label='Settings' color={theme.primaryColor} withArrow>
cursor: 'pointer', <FiSettings
position: 'absolute', size={20}
top: '.5rem', onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
right: isMobile ? undefined : '.5rem', style={{
left: isMobile ? '.5rem' : undefined, cursor: 'pointer',
}} position: 'absolute',
/> top: '.5rem',
</Tooltip> right: isMobile ? undefined : '.5rem',
<Group w={'100%'} justify='center'> left: isMobile ? '.5rem' : undefined,
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
>
<Menu.Label>Wake on LAN</Menu.Label>
<Button
classNames={buttonClasses}
className={buttonClasses.wakeButton}
disabled={!wolClients?.length || selectedClient === null}
onClick={() => {
handleWakeRequest();
notify('Wake command sent');
}} }}
/>
</Tooltip>
<Group w={'100%'} justify='center'>
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
> >
<Stack gap={0} align='center'> <Menu.Label>Wake on LAN</Menu.Label>
<FiMonitor size={40} /> <Button
</Stack> classNames={buttonClasses}
</Button> className={buttonClasses.wakeButton}
<Select disabled={!wolClients?.length || selectedClient === null}
labelProps={{ display: 'none' }} onClick={() => {
placeholder='Pick a host...' handleWakeRequest();
defaultValue={wolClients?.[0]?.hostname} notify('Wake command sent');
data={ }}
wolClients?.map((wolClient: any) => { >
return { <Stack gap={0} align='center'>
value: wolClient.hostname, <FiMonitor size={40} />
label: `${wolClient.hostname} (${wolClient.macAddress})`, </Stack>
hostname: wolClient.hostname, </Button>
macAddress: wolClient.macAddress, <Select
}; labelProps={{ display: 'none' }}
}) || [] placeholder='Pick a host...'
} defaultValue={wolClients?.[0]?.hostname}
classNames={selectClasses} data={
comboboxProps={{ withinPortal: false }} wolClients?.map((wolClient: any) => {
onChange={(_value, option: any) => setSelectedClient(option)} return {
onLoad={(option: any) => setSelectedClient(option)} value: wolClient.hostname,
/> label: `${wolClient.hostname} (${wolClient.macAddress})`,
</Stack> hostname: wolClient.hostname,
macAddress: wolClient.macAddress,
};
}) || []
}
classNames={selectClasses}
comboboxProps={{ withinPortal: false }}
onChange={(_value, option: any) => setSelectedClient(option)}
onLoad={(option: any) => setSelectedClient(option)}
/>
</Stack>
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
>
<Menu.Label pb={'1rem'}>Themes</Menu.Label>
<Group pb={'1rem'}>
<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
style={{
backgroundColor:
currentTheme === 'random'
? `${theme.primaryColor}88`
: 'transparent',
color:
currentTheme === 'random'
? theme.accentColor
: theme.primaryColor,
}}
onClick={() => {
setCurrentTheme(
currentTheme === 'random' ? theme.name : 'random',
);
}}
>
<FiShuffle />
</ActionIcon>
</Tooltip>
<Tooltip label='Random Theme' color={theme.primaryColor} withArrow>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
style={{
backgroundColor: 'transparent',
color: theme.primaryColor,
}}
onClick={() => {
handleThemeChange(allThemes, true);
}}
>
<FaDice />
</ActionIcon>
</Tooltip>
</Group>
<Text fw={'bold'} fz={20}>
Currently:{' '}
</Text>
{theme.name}
</Stack>
</Group>
<Menu.Divider
w={'85%'}
m={'.75rem'}
style={{ borderColor: theme.accentColor }}
/>
<Stack <Stack
gap={0} gap={0}
align='center' align='center'
w={'85%'}
h={'100px'}
className={stackClasses.menuStack} className={stackClasses.menuStack}
classNames={stackClasses} classNames={stackClasses}
> >
<Menu.Label pb={'1rem'}>Themes</Menu.Label> <Menu.Label>Filters</Menu.Label>
<Group pb={'1rem'}> <Group>
<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow> <MultiSelect
<ActionIcon label='Apps'
className={actionIconClasses.menuActions} data={categories ?? []}
classNames={actionIconClasses} placeholder={
style={{ appFilter.length > 0
backgroundColor: ? appFilter.length === 1
currentTheme === 'random' ? appFilter[0]
? `${theme.primaryColor}88` : `${appFilter.length} apps selected`
: 'transparent', : 'No apps selected'
color: }
currentTheme === 'random' defaultValue={appFilter}
? theme.accentColor onChange={(data: any) => {
: theme.primaryColor, setAppFilter(data);
}} }}
onClick={() => { classNames={selectClasses}
setCurrentTheme(currentTheme === 'random' ? theme.name : 'random'); comboboxProps={{ withinPortal: false }}
}} />
> <MultiSelect
<FiShuffle /> label='Bookmarks'
</ActionIcon> data={categories ?? []}
</Tooltip> placeholder={
<Tooltip label='Random Theme' color={theme.primaryColor} withArrow> bookmarkFilter.length > 0
<ActionIcon ? bookmarkFilter.length === 1
className={actionIconClasses.menuActions} ? bookmarkFilter[0]
classNames={actionIconClasses} : `${bookmarkFilter.length} bookmarks selected`
style={{ : 'No bookmarks selected'
backgroundColor: 'transparent', }
color: theme.primaryColor, defaultValue={bookmarkFilter}
}} onChange={(data: any) => {
onClick={() => { setBookmarkFilter(data);
handleThemeChange(allThemes, true); }}
}} classNames={selectClasses}
> comboboxProps={{ withinPortal: false }}
<FaDice /> />
</ActionIcon>
</Tooltip>
</Group> </Group>
<Text fw={'bold'} fz={20}>
Currently:{' '}
</Text>
{theme.name}
</Stack> </Stack>
</Group>
<Menu.Divider
w={'85%'}
m={'.75rem'}
style={{ borderColor: theme.accentColor }}
/>
<Stack
gap={0}
align='center'
w={'85%'}
h={'100px'}
className={stackClasses.menuStack}
classNames={stackClasses}
>
<Menu.Label>Filters</Menu.Label>
<Group>
<MultiSelect
label='Apps'
data={categories ?? []}
placeholder={
appFilter.length > 0
? appFilter.length === 1
? appFilter[0]
: `${appFilter.length} apps selected`
: 'No apps selected'
}
defaultValue={appFilter}
onChange={(data: any) => {
setAppFilter(data);
}}
classNames={selectClasses}
comboboxProps={{ withinPortal: false }}
/>
<MultiSelect
label='Bookmarks'
data={categories ?? []}
placeholder={
bookmarkFilter.length > 0
? bookmarkFilter.length === 1
? bookmarkFilter[0]
: `${bookmarkFilter.length} bookmarks selected`
: 'No bookmarks selected'
}
defaultValue={bookmarkFilter}
onChange={(data: any) => {
setBookmarkFilter(data);
}}
classNames={selectClasses}
comboboxProps={{ withinPortal: false }}
/>
</Group>
</Stack> </Stack>
</Stack> </Menu.Dropdown>
</Menu.Dropdown> </Menu>
</Menu> </>
); );
} }