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

Mobile improvements and packages updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-06 14:07:58 -05:00
parent 44fc088b2a
commit a148335284
20 changed files with 391 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -340,8 +340,12 @@ const ApplicationSettings = () => {
<Popover
withArrow
withOverlay
trapFocus
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
middlewares={{ shift: { padding: 20 } }}
position='bottom'
offset={isMobile ? -100 : 0}
>
<Popover.Target>
<Box
@@ -358,7 +362,7 @@ const ApplicationSettings = () => {
/>
</Box>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
<DebouncedApplication
application={application}
setIsOpen={setIsOpen}

22
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -24,7 +24,7 @@ function DebouncedApplication({
setIsOpen,
allIcons,
}: { application: Application; setIsOpen: (isOpen: boolean) => void; allIcons: any }) {
const { handleDelete } = useCommonHooks();
const { handleDelete, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -47,7 +47,11 @@ function DebouncedApplication({
}
}, [update]);
return (
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card
p={isMobile ? 'xl' : undefined}
className={cardClasses.settingsItem}
classNames={cardClasses}
>
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
@@ -79,6 +83,7 @@ function DebouncedApplication({
>
<ActionIcon
pos={'absolute'}
top={16}
right={16}
color='red'
onClick={() => {
@@ -112,7 +117,7 @@ function DebouncedApplication({
}}
/>
</Tooltip>
<Group w={'100%'} justify='center'>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
@@ -140,11 +145,11 @@ function DebouncedApplication({
}}
/>
</Group>
<Group w={'100%'} justify='center'>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
w={'100%'}
w={isMobile ? undefined : '100%'}
pt={16}
classNames={textInputClasses}
defaultValue={app.url}
@@ -156,9 +161,12 @@ function DebouncedApplication({
}}
/>
</Group>
<Group w={'100%'} justify='space-between'>
<Group
justify='space-between'
style={{ flexDirection: isMobile ? 'column' : 'row' }}
>
<Select
w={'48%'}
w={isMobile ? '80%' : '48%'}
label={'Icon'}
className={selectClasses.settingsItem}
classNames={{

15
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -11,7 +11,7 @@ function DebouncedBookmarkItem({
bookmarkItem,
setIsOpen,
}: { bookmarkItem: Bookmark; setIsOpen: (isOpen: boolean) => void }) {
const { handleDelete } = useCommonHooks();
const { handleDelete, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -35,7 +35,11 @@ function DebouncedBookmarkItem({
}, [update]);
return (
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card
p={isMobile ? 'xl' : undefined}
className={cardClasses.settingsItem}
classNames={cardClasses}
>
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
@@ -68,6 +72,7 @@ function DebouncedBookmarkItem({
<ActionIcon
pos={'absolute'}
right={16}
top={16}
color='red'
onClick={() => {
setIsOpen(true);
@@ -77,7 +82,7 @@ function DebouncedBookmarkItem({
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
<Group w={'100%'} justify='center'>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
@@ -105,11 +110,11 @@ function DebouncedBookmarkItem({
}}
/>
</Group>
<Group w={'100%'} justify='center'>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
w={'100%'}
w={isMobile ? '80%' : '100%'}
pt={16}
classNames={textInputClasses}
defaultValue={bookmark.url}

12
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -193,7 +193,7 @@ function DebouncedGroupSettingsItem({
borderRadius: '100%',
backgroundColor: 'var(--mantine-color-accent-0)',
position: 'absolute',
top: isMobile ? 164 : 78,
top: isMobile ? 140 : 78,
right: 18,
zIndex: 10,
fontSize: 20,
@@ -226,8 +226,11 @@ function DebouncedGroupSettingsItem({
<Popover
withArrow
withOverlay
trapFocus
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
middlewares={{ shift: { padding: 20 } }}
position='bottom'
>
<Popover.Target>
<Box pos={'relative'}>
@@ -252,7 +255,7 @@ function DebouncedGroupSettingsItem({
<BookmarkSettingsItem bookmark={bookmark} />
</Box>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
<DebouncedBookmarkItem
bookmarkItem={bookmark}
setIsOpen={setIsOpen}
@@ -279,7 +282,8 @@ function DebouncedGroupSettingsItem({
<Popover
withArrow
withOverlay
position='top'
trapFocus
position='bottom'
opened={popoverOpened}
onChange={setPopoverOpened}
closeOnEscape
@@ -301,7 +305,7 @@ function DebouncedGroupSettingsItem({
<FiPlus /> Bookmark
</Button>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Stack w={'100%'} display={'flex'} pos={'relative'}>
<Group w={'100%'} justify='center'>

11
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
View File

@@ -14,7 +14,7 @@ function DebouncedSearchProvider({
searchProvider: Provider;
setIsOpen: (isOpen: boolean) => void;
}) {
const { handleDelete } = useCommonHooks();
const { handleDelete, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -40,7 +40,11 @@ function DebouncedSearchProvider({
}, [update]);
return (
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card
p={isMobile ? 'xl' : undefined}
className={cardClasses.settingsItem}
classNames={cardClasses}
>
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
@@ -82,7 +86,7 @@ function DebouncedSearchProvider({
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
<Stack>
<Stack w={'100%'} align='center'>
<Group w={'100%'} justify='center'>
<TextInput
label={'Name'}
@@ -113,6 +117,7 @@ function DebouncedSearchProvider({
</Group>
<TextInput
label={'Url'}
w={isMobile ? '80%' : '100%'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}

8
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -71,7 +71,7 @@ const SearchProviderSettings = () => {
title={'Add a new Search Provider'}
body={
<Stack gap={0} w={'100%'} align='center'>
<Stack>
<Stack w={'100%'} align='center'>
<Group w={'100%'} justify='center'>
<TextInput
label={'Name'}
@@ -104,6 +104,7 @@ const SearchProviderSettings = () => {
label={'Url'}
className={textInputClasses.settingsItem}
pt={16}
w={isMobile ? '64%' : '100%'}
classNames={textInputClasses}
defaultValue={newProvider.url}
onChange={(event) => {
@@ -171,8 +172,11 @@ const SearchProviderSettings = () => {
<Popover
withArrow
withOverlay
trapFocus
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
middlewares={{ shift: { padding: 20 } }}
position='bottom'
>
<Popover.Target>
<Box
@@ -183,7 +187,7 @@ const SearchProviderSettings = () => {
<SearchProviderSettingsItem provider={provider} />
</Box>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
<DebouncedSearchProvider
searchProvider={provider}
setIsOpen={setIsOpen}

2
src/pages/settings/components/Shared/AddItemModal.tsx
View File

@@ -28,7 +28,7 @@ function AddItemModal({
centered
>
<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
<Modal.Content style={{ zIndex: 1000 }}>
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
<Modal.Header>
<Modal.Title>{title}</Modal.Title>
<Modal.CloseButton />

2
src/pages/settings/components/Shared/DeleteItemModal.tsx
View File

@@ -29,7 +29,7 @@ function DeleteItemModal({
centered
>
<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
<Modal.Content style={{ zIndex: 1000 }}>
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
<Modal.Header>
<Modal.Title>{title}</Modal.Title>
<Modal.CloseButton />

18
src/pages/settings/components/Theming/ThemeModal.tsx
View File

@@ -160,8 +160,13 @@ function ThemeModal({
<Modal.Body p={'2rem'}>
<ThemeModalContent selectedTheme={selectedTheme} />
<Divider color='black' my='sm' />
<Group w={'100%'} h={'100%'} gap={0}>
<Stack w={'50%'}>
<Group
w={'100%'}
h={'100%'}
gap={isMobile ? 20 : 0}
style={{ flexDirection: isMobile ? 'column' : 'row' }}
>
<Stack w={isMobile ? '100%' : '50%'}>
{pickerOpen ? (
<Group justify='center'>
<ColorPicker
@@ -330,7 +335,12 @@ function ThemeModal({
</Stack>
)}
</Stack>
<Stack h={'100%'} w={'50%'} align='center' justify='center'>
<Stack
h={'100%'}
w={isMobile ? '100%' : '50%'}
align='center'
justify='center'
>
<Group gap={0}>
<Text mr={8}>Search:</Text>
<TextInput
@@ -393,7 +403,7 @@ function ThemeModal({
</Stack>
</Group>
<Divider color='black' my='sm' />
<Group pos={'absolute'} bottom={isMobile ? -64 : 8}>
<Group pos={'absolute'} bottom={isMobile ? -72 : 8}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}

6
src/pages/settings/components/Theming/Themes.tsx
View File

@@ -149,7 +149,7 @@ function ThemesSettings() {
align='center'
pos={'relative'}
mt={isMobile ? '10rem' : '7rem'}
mb={isMobile ? '8rem' : '6.5rem'}
mb={isMobile ? '12rem' : '6.5rem'}
>
<Overlay
display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
@@ -222,7 +222,7 @@ function ThemesSettings() {
style={{
backdropFilter: 'blur(10px) brightness(.75)',
zIndex: 199,
paddingTop: '1.5rem',
paddingTop: isMobile ? '.5rem' : '1.5rem',
paddingBottom: '1.5rem',
paddingLeft: '1rem',
paddingRight: '1rem',
@@ -230,7 +230,7 @@ function ThemesSettings() {
width: '100%',
marginTop: 0,
position: 'absolute',
bottom: 0,
bottom: isMobile ? '3.25rem' : 0,
}}
>
<Group w={isMobile ? undefined : '100%'}>

8
src/pages/settings/components/WoL/DebouncedWolClient.tsx
View File

@@ -14,7 +14,7 @@ function DebouncedWolClient({
wolClient: WolClient;
setIsOpen: (isOpen: boolean) => void;
}) {
const { handleDelete } = useCommonHooks();
const { handleDelete, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -39,7 +39,11 @@ function DebouncedWolClient({
}, [update]);
return (
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card
p={isMobile ? 'xl' : undefined}
className={cardClasses.settingsItem}
classNames={cardClasses}
>
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}

6
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -152,8 +152,12 @@ const WolClientSettings = () => {
<Popover
withArrow
withOverlay
trapFocus
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
middlewares={{ shift: { padding: 20 } }}
position='bottom'
offset={isMobile ? -100 : 0}
>
<Popover.Target>
<Group
@@ -165,7 +169,7 @@ const WolClientSettings = () => {
<WolClientSettingsItem client={client} />
</Group>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
</Popover.Dropdown>
</Popover>