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

Theme updates and style fixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-05-23 13:32:38 -05:00
parent ee69cc9d09
commit 79ebb1b9e9
16 changed files with 488 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/pages/settings/components/Theming/ThemePlaylistCard.tsx
View File

@@ -8,9 +8,9 @@ import {
Text,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiRefreshCcw, FiTrash } from 'react-icons/fi';
import { FiEdit, FiTrash } from 'react-icons/fi';
import type { Theme, ThemePlaylist } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
import ThemeMiniCard from './ThemeMiniCard';
@@ -24,14 +24,12 @@ function ThemePlaylistCard({
handleOpen: (cardPlaylist: ThemePlaylist) => void;
allThemes: Theme[];
}) {
const themePlaylistEndpoint = 'api/themePlaylists';
const [hover, setHover] = useState(false);
const { setThemeName, setCurrentThemePlaylist, theme, handleDelete } = useCommonHooks();
const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
const { mutateAsync } = useMutationAPI();
const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const themeList = JSON.parse(
cardPlaylist.themeList.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
cardPlaylist?.themeList?.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
);
return (
<Group
@@ -84,7 +82,7 @@ function ThemePlaylistCard({
>
{cardPlaylist.name}
</Text>
{syncableLists.includes(cardPlaylist.name) ? (
{!defaultLists.includes(cardPlaylist.name) && (
<ActionIcon
style={{
position: 'absolute',
@@ -100,104 +98,35 @@ function ThemePlaylistCard({
: 'var(--mantine-color-background-0)',
zIndex: 3,
}}
onClick={(event) => {
event.stopPropagation();
if (cardPlaylist.name === 'All') {
mutateAsync({
method: 'PATCH',
endpoint: themePlaylistEndpoint,
body: {
id: cardPlaylist.id,
name: 'All',
themeList: JSON.stringify(allThemes.map((theme: Theme) => theme.id)),
},
});
}
if (cardPlaylist.name === 'Backgrounds') {
mutateAsync({
method: 'PATCH',
endpoint: themePlaylistEndpoint,
body: {
id: cardPlaylist.id,
name: 'Backgrounds',
themeList: JSON.stringify(
allThemes
.filter(
(theme: Theme) => theme.backgroundImage.toLowerCase() !== 'none',
)
.map((theme: Theme) => theme.id),
),
},
});
}
if (cardPlaylist.name === 'No Backgrounds') {
mutateAsync({
method: 'PATCH',
endpoint: themePlaylistEndpoint,
body: {
id: cardPlaylist.id,
name: 'No Backgrounds',
themeList: JSON.stringify(
allThemes
.filter(
(theme: Theme) => theme.backgroundImage.toLowerCase() === 'none',
)
.map((theme: Theme) => theme.id),
),
},
});
}
onClick={() => {
handleOpen(cardPlaylist);
}}
>
<FiRefreshCcw />
<FiEdit />
</ActionIcon>
)}
{cardPlaylist.default === 0 && (
<ActionIcon
style={{
position: 'absolute',
top: -10,
right: 40,
paddingRight: 4,
paddingLeft: 4,
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)',
zIndex: 3,
}}
onClick={() => {
openModal();
}}
>
<FiTrash />
</ActionIcon>
) : (
<>
<ActionIcon
style={{
position: 'absolute',
top: -10,
right: 6,
paddingRight: 4,
paddingLeft: 4,
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)',
zIndex: 3,
}}
onClick={() => {
handleOpen(cardPlaylist);
}}
>
<FiEdit />
</ActionIcon>
{cardPlaylist.default === 0 && (
<ActionIcon
style={{
position: 'absolute',
top: -10,
right: 40,
paddingRight: 4,
paddingLeft: 4,
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)',
zIndex: 3,
}}
onClick={() => {
openModal();
}}
>
<FiTrash />
</ActionIcon>
)}
</>
)}
<Button
w={'275px'}