Style updates and bugfixes
This commit is contained in:
Sean Edmunds
55
src/components/AddItemModal.tsx
Normal file
55
src/components/AddItemModal.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { Card, Modal } from '@mantine/core';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import type React from 'react';
|
||||
import { cardClasses, modalClasses } from 'styles';
|
||||
|
||||
export function AddItemModal({
|
||||
modalOpened,
|
||||
handleClose,
|
||||
body,
|
||||
title,
|
||||
}: {
|
||||
modalOpened: boolean;
|
||||
handleClose: () => void;
|
||||
body: React.ReactNode;
|
||||
title: string;
|
||||
}) {
|
||||
const { isMobile } = useCommonHooks();
|
||||
return (
|
||||
<Modal.Root
|
||||
size={'60%'}
|
||||
className={modalClasses.helpModal}
|
||||
classNames={modalClasses}
|
||||
opened={modalOpened}
|
||||
fullScreen={isMobile}
|
||||
onClose={handleClose}
|
||||
closeOnEscape
|
||||
closeOnClickOutside
|
||||
centered
|
||||
>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content h={'auto'}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>{title}</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body
|
||||
h={isMobile ? '90%' : undefined}
|
||||
style={{
|
||||
justifyContent: 'center',
|
||||
alignContent: 'center',
|
||||
paddingBottom: '2rem',
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
style={{ alignContent: 'center', justifyContent: 'center' }}
|
||||
className={cardClasses.settingsItem}
|
||||
classNames={cardClasses}
|
||||
>
|
||||
{body}
|
||||
</Card>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
);
|
||||
}
|
||||
58
src/components/DeleteItemModal.tsx
Normal file
58
src/components/DeleteItemModal.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { Button, Card, Group, Modal } from '@mantine/core';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { cardClasses, modalClasses } from 'styles';
|
||||
|
||||
export function DeleteItemModal({
|
||||
modalOpened,
|
||||
handleClose,
|
||||
handleDelete,
|
||||
body,
|
||||
title,
|
||||
}: {
|
||||
modalOpened: boolean;
|
||||
handleClose: () => void;
|
||||
handleDelete: () => void;
|
||||
body: React.ReactNode;
|
||||
title: string;
|
||||
}) {
|
||||
const { isMobile } = useCommonHooks();
|
||||
return (
|
||||
<Modal.Root
|
||||
size={'60%'}
|
||||
className={modalClasses.helpModal}
|
||||
classNames={modalClasses}
|
||||
opened={modalOpened}
|
||||
fullScreen={isMobile}
|
||||
onClose={handleClose}
|
||||
closeOnEscape
|
||||
closeOnClickOutside
|
||||
centered
|
||||
>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>{title}</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
||||
{body}
|
||||
<Group justify='center' mt={'-1.5rem'}>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
handleDelete();
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<Button onClick={handleClose}>Cancel</Button>
|
||||
</Group>
|
||||
</Card>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
);
|
||||
}
|
||||
74
src/components/ManagementPill.tsx
Normal file
74
src/components/ManagementPill.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { ActionIcon, Group, Switch, Tooltip } from '@mantine/core';
|
||||
import { FiPower, FiTrash } from 'react-icons/fi';
|
||||
import { switchClasses } from 'styles';
|
||||
|
||||
export function ManagementPill({
|
||||
enabled,
|
||||
onChange,
|
||||
openModal,
|
||||
}: {
|
||||
enabled: number;
|
||||
onChange: any;
|
||||
openModal: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Group
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '1rem',
|
||||
top: '.5rem',
|
||||
width: 'fit-content',
|
||||
backgroundColor:
|
||||
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
|
||||
padding: '.5rem',
|
||||
borderRadius: '10px',
|
||||
color: 'var(--mantine-color-search-0)',
|
||||
backdropFilter: 'brightness(0.5)',
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
c={'var(--mantine-color-primary-0)'}
|
||||
bg={'var(--mantine-color-background-0)'}
|
||||
bd={'solid 1px var(--mantine-color-border-0)'}
|
||||
label={enabled === 1 ? 'Enabled' : 'Disabled'}
|
||||
refProp='rootRef'
|
||||
styles={{
|
||||
tooltip: { marginTop: '-.5rem' },
|
||||
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
|
||||
}}
|
||||
withArrow
|
||||
>
|
||||
<Switch
|
||||
className={switchClasses.enable}
|
||||
classNames={switchClasses}
|
||||
defaultChecked={enabled === 1}
|
||||
defaultValue={enabled}
|
||||
thumbIcon={
|
||||
<FiPower
|
||||
style={{
|
||||
color: enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
|
||||
}}
|
||||
/>
|
||||
}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
|
||||
<Tooltip
|
||||
c={'var(--mantine-color-primary-0)'}
|
||||
bg={'var(--mantine-color-background-0)'}
|
||||
bd={'solid 1px var(--mantine-color-border-0)'}
|
||||
label={'Delete'}
|
||||
>
|
||||
<ActionIcon
|
||||
color='red'
|
||||
onClick={() => {
|
||||
openModal();
|
||||
}}
|
||||
>
|
||||
<FiTrash color='black' />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
20
src/components/NoItemsFound.tsx
Normal file
20
src/components/NoItemsFound.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { Card, Text } from '@mantine/core';
|
||||
import { cardClasses } from 'styles';
|
||||
|
||||
export function NoItemsFound() {
|
||||
return (
|
||||
<Card
|
||||
className={cardClasses.settingsItem}
|
||||
classNames={cardClasses}
|
||||
w={'40rem'}
|
||||
h={'10rem'}
|
||||
p={'xl'}
|
||||
m={'xl'}
|
||||
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
|
||||
>
|
||||
<Text fw={300} size={'xl'}>
|
||||
No items found
|
||||
</Text>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
183
src/components/SettingsHeader.tsx
Normal file
183
src/components/SettingsHeader.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Group,
|
||||
Highlight,
|
||||
Popover,
|
||||
Stack,
|
||||
Switch,
|
||||
Text,
|
||||
TextInput,
|
||||
} from '@mantine/core';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { useState } from 'react';
|
||||
import { FiHelpCircle, FiLoader, FiPlus, FiX } from 'react-icons/fi';
|
||||
import {
|
||||
actionIconClasses,
|
||||
buttonClasses,
|
||||
popoverClasses,
|
||||
switchClasses,
|
||||
textClasses,
|
||||
textInputClasses,
|
||||
} from 'styles';
|
||||
|
||||
export function SettingsHeader({
|
||||
setDragging,
|
||||
openModal,
|
||||
title,
|
||||
tooltip,
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
searchPlaceholder,
|
||||
isLoading,
|
||||
setIsLoading,
|
||||
}: {
|
||||
setDragging: undefined | ((dragging: boolean) => void);
|
||||
openModal: () => void;
|
||||
title: string;
|
||||
tooltip: {
|
||||
title: string;
|
||||
highlightList: string[];
|
||||
description: string;
|
||||
};
|
||||
searchValue: string | undefined;
|
||||
setSearchValue: (searchValue: string) => void;
|
||||
searchPlaceholder: string | undefined;
|
||||
isLoading: boolean;
|
||||
setIsLoading: (isLoading: boolean) => void;
|
||||
}) {
|
||||
const { isMobile, theme } = useCommonHooks();
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
return (
|
||||
<Group
|
||||
align='center'
|
||||
justify='center'
|
||||
style={{
|
||||
backdropFilter: 'blur(5px) brightness(.75)',
|
||||
zIndex: 199,
|
||||
paddingTop: '1.5rem',
|
||||
paddingBottom: '1.5rem',
|
||||
paddingLeft: '1rem',
|
||||
height: 'min-content',
|
||||
width: '100%',
|
||||
marginTop: 0,
|
||||
position: 'absolute',
|
||||
}}
|
||||
>
|
||||
<Group w={isMobile ? undefined : '100%'}>
|
||||
<Text
|
||||
miw={isMobile ? 100 : undefined}
|
||||
className={textClasses.settingsSubTitle}
|
||||
classNames={textClasses}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
<Popover withArrow withOverlay classNames={popoverClasses}>
|
||||
<Popover.Target>
|
||||
<ActionIcon
|
||||
className={actionIconClasses.settingsTooltip}
|
||||
classNames={actionIconClasses}
|
||||
>
|
||||
<FiHelpCircle />
|
||||
</ActionIcon>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown
|
||||
style={{
|
||||
color: 'var(--mantine-color-primary-0)',
|
||||
backgroundColor: 'var(--mantine-color-background-0)',
|
||||
width: isMobile ? '95%' : '500px',
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
|
||||
{tooltip.title}
|
||||
</Text>
|
||||
<Highlight
|
||||
highlight={tooltip.highlightList}
|
||||
className={textClasses.settingsTooltip}
|
||||
classNames={textClasses}
|
||||
highlightStyles={{
|
||||
backgroundImage:
|
||||
'linear-gradient(45deg, var(--mantine-color-accent-0), var(--mantine-color-primary-0))',
|
||||
fontWeight: 700,
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
{tooltip.description}
|
||||
</Highlight>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
{searchValue !== undefined && (
|
||||
<Button
|
||||
className={buttonClasses.newItemButton}
|
||||
classNames={buttonClasses}
|
||||
onClick={openModal}
|
||||
>
|
||||
<FiPlus />
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
{searchValue !== undefined && (
|
||||
<TextInput
|
||||
disabled={disabled}
|
||||
w={isMobile ? undefined : '35%'}
|
||||
pos={isMobile ? undefined : 'absolute'}
|
||||
className={textInputClasses.default}
|
||||
classNames={textInputClasses}
|
||||
autoFocus={!isMobile}
|
||||
placeholder={searchPlaceholder ?? 'Search...'}
|
||||
value={searchValue}
|
||||
onInput={(event: any) => {
|
||||
setIsLoading(true);
|
||||
setSearchValue(event.target.value);
|
||||
}}
|
||||
style={{
|
||||
zIndex: 100,
|
||||
}}
|
||||
styles={
|
||||
theme.textShadowsEnabled && {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
}
|
||||
rightSection={
|
||||
isLoading ? (
|
||||
<ActionIcon
|
||||
className={actionIconClasses.loadingSpinner}
|
||||
classNames={actionIconClasses}
|
||||
>
|
||||
<FiLoader />
|
||||
</ActionIcon>
|
||||
) : (
|
||||
searchValue && (
|
||||
<ActionIcon
|
||||
className={actionIconClasses.settingsTooltip}
|
||||
classNames={actionIconClasses}
|
||||
onClick={() => setSearchValue('')}
|
||||
>
|
||||
<FiX />
|
||||
</ActionIcon>
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{setDragging && (
|
||||
<Switch
|
||||
className={switchClasses.default}
|
||||
classNames={switchClasses}
|
||||
label={'Reorder'}
|
||||
labelPosition='left'
|
||||
pos={'absolute'}
|
||||
right={isMobile ? '2rem' : '1rem'}
|
||||
top={isMobile ? '3.5rem' : undefined}
|
||||
onChange={(e) => {
|
||||
setDragging(e.target.checked);
|
||||
setDisabled(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,10 @@
|
||||
export { AddItemModal } from './AddItemModal';
|
||||
export { AppItem } from './Applications/AppItem';
|
||||
export { DeleteItemModal } from './DeleteItemModal';
|
||||
export { HelpModal } from './HelpModal/HelpModal';
|
||||
export { Loading } from './Loading';
|
||||
export { MainLayout } from './MainLayout';
|
||||
export { ManagementPill } from './ManagementPill';
|
||||
export { NoItemsFound } from './NoItemsFound';
|
||||
export { SettingsHeader } from './SettingsHeader';
|
||||
export { WeatherModal } from './WeatherModal/WeatherModal';
|
||||
|
||||
Reference in New Issue
Block a user