Menu overlay
This commit is contained in:
Sean Edmunds
@@ -4,6 +4,7 @@ import {
|
||||
Group,
|
||||
Menu,
|
||||
MultiSelect,
|
||||
Overlay,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
@@ -43,7 +44,7 @@ function SettingsButton() {
|
||||
} = useCommonHooks();
|
||||
|
||||
const [selectedClient, setSelectedClient] = useState<any>(wolClients?.[0]);
|
||||
|
||||
const [overlayOpened, setOverlayOpened] = useState(false);
|
||||
const handleWakeRequest = () => {
|
||||
wakeRequest({
|
||||
method: 'POST',
|
||||
@@ -63,179 +64,186 @@ function SettingsButton() {
|
||||
}, [data, isFetched]);
|
||||
|
||||
return (
|
||||
<Menu
|
||||
classNames={menuClasses}
|
||||
withinPortal={false}
|
||||
withArrow
|
||||
shadow='md'
|
||||
position='top'
|
||||
>
|
||||
<Menu.Target>
|
||||
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
|
||||
<FiMenu />
|
||||
</Button>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Stack gap={0} display={'flex'} pb={'1rem'} pt={'2rem'} align='center'>
|
||||
<Tooltip label='Settings' color={theme.primaryColor} withArrow>
|
||||
<FiSettings
|
||||
size={20}
|
||||
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
position: 'absolute',
|
||||
top: '.5rem',
|
||||
right: isMobile ? undefined : '.5rem',
|
||||
left: isMobile ? '.5rem' : undefined,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<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');
|
||||
<>
|
||||
{overlayOpened && <Overlay />}
|
||||
<Menu
|
||||
classNames={menuClasses}
|
||||
withinPortal={false}
|
||||
withArrow
|
||||
shadow='md'
|
||||
position='top'
|
||||
onOpen={() => setOverlayOpened(true)}
|
||||
onClose={() => setOverlayOpened(false)}
|
||||
>
|
||||
<Menu.Target>
|
||||
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
|
||||
<FiMenu />
|
||||
</Button>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Stack gap={0} display={'flex'} pb={'1rem'} pt={'2rem'} align='center'>
|
||||
<Tooltip label='Settings' color={theme.primaryColor} withArrow>
|
||||
<FiSettings
|
||||
size={20}
|
||||
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
position: 'absolute',
|
||||
top: '.5rem',
|
||||
right: isMobile ? undefined : '.5rem',
|
||||
left: isMobile ? '.5rem' : undefined,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<Stack
|
||||
gap={0}
|
||||
align='center'
|
||||
className={stackClasses.menuStack}
|
||||
classNames={stackClasses}
|
||||
>
|
||||
<Stack gap={0} align='center'>
|
||||
<FiMonitor size={40} />
|
||||
</Stack>
|
||||
</Button>
|
||||
<Select
|
||||
labelProps={{ display: 'none' }}
|
||||
placeholder='Pick a host...'
|
||||
defaultValue={wolClients?.[0]?.hostname}
|
||||
data={
|
||||
wolClients?.map((wolClient: any) => {
|
||||
return {
|
||||
value: wolClient.hostname,
|
||||
label: `${wolClient.hostname} (${wolClient.macAddress})`,
|
||||
hostname: wolClient.hostname,
|
||||
macAddress: wolClient.macAddress,
|
||||
};
|
||||
}) || []
|
||||
}
|
||||
classNames={selectClasses}
|
||||
comboboxProps={{ withinPortal: false }}
|
||||
onChange={(_value, option: any) => setSelectedClient(option)}
|
||||
onLoad={(option: any) => setSelectedClient(option)}
|
||||
/>
|
||||
</Stack>
|
||||
<Menu.Label>Wake on LAN</Menu.Label>
|
||||
<Button
|
||||
classNames={buttonClasses}
|
||||
className={buttonClasses.wakeButton}
|
||||
disabled={!wolClients?.length || selectedClient === null}
|
||||
onClick={() => {
|
||||
handleWakeRequest();
|
||||
notify('Wake command sent');
|
||||
}}
|
||||
>
|
||||
<Stack gap={0} align='center'>
|
||||
<FiMonitor size={40} />
|
||||
</Stack>
|
||||
</Button>
|
||||
<Select
|
||||
labelProps={{ display: 'none' }}
|
||||
placeholder='Pick a host...'
|
||||
defaultValue={wolClients?.[0]?.hostname}
|
||||
data={
|
||||
wolClients?.map((wolClient: any) => {
|
||||
return {
|
||||
value: wolClient.hostname,
|
||||
label: `${wolClient.hostname} (${wolClient.macAddress})`,
|
||||
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
|
||||
gap={0}
|
||||
align='center'
|
||||
w={'85%'}
|
||||
h={'100px'}
|
||||
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>
|
||||
<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>
|
||||
<Text fw={'bold'} fz={20}>
|
||||
Currently:{' '}
|
||||
</Text>
|
||||
{theme.name}
|
||||
</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>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user