Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-03 03:55:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update styling

Browse Source
This commit is contained in:
Aj - Thomas
2022-04-26 00:14:42 +02:00
parent ce17ebdb4b
commit 27687647ee
3 changed files with 16 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/AppShelf/AddAppShelfItem.tsx
View File

@@ -35,8 +35,7 @@ export default function AddItemShelfItem(props: any) {
}); });
return ( return (
<> <>
<Modal size={'xl'} opened={opened} onClose={() => setOpened(false)} title="Add a service"> <Modal size={'xl'} radius="lg" opened={props.opened || opened} onClose={() => setOpened(false)} title="Add a service">
<Paper radius="md" p="xl" withBorder {...props}>
<Center> <Center>
<Image <Image
height={120} height={120}
@@ -96,7 +95,6 @@ export default function AddItemShelfItem(props: any) {
<Button type="submit">Add service</Button> <Button type="submit">Add service</Button>
</Group> </Group>
</form> </form>
</Paper>
</Modal> </Modal>
<Grid.Col span={4} lg={2} sm={3}> <Grid.Col span={4} lg={2} sm={3}>
<AspectRatio ratio={4 / 3}> <AspectRatio ratio={4 / 3}>

9
components/AppShelf/AppShelf.story.tsx Normal file
View File

@@ -0,0 +1,9 @@
import AppShelf from './AppShelf';
export default {
title: 'Item Shelf',
};
export const Default = (args: any) => (
<AppShelf {...args} />
);

78
components/AppShelf/AppShelf.tsx
View File

@@ -7,13 +7,13 @@ import AddItemShelfItem from './AddAppShelfItem';
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
main: { main: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0], backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
textAlign: 'center', textAlign: 'center',
padding: theme.spacing.xl, padding: theme.spacing.xl,
borderRadius: theme.radius.md, borderRadius: theme.radius.md,
'&:hover': { '&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1], backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
}, },
}, },
})); }));
@@ -35,9 +35,9 @@ const AppShelf = () => {
localStorage.setItem('services', JSON.stringify([...services, item])); localStorage.setItem('services', JSON.stringify([...services, item]));
} }
function removeItem(item: serviceItem) { function removeItem(name: string) {
setServices(services.filter((s) => s.url !== item.url)); setServices(services.filter((s) => s.name !== name));
localStorage.setItem('services', JSON.stringify(services.filter((s) => s.url !== item.url))); localStorage.setItem('services', JSON.stringify(services.filter((s) => s.name !== name)));
} }
return ( return (
@@ -75,70 +75,4 @@ const AppShelf = () => {
); );
}; };
export default AppShelf; export default AppShelf;
const MockServices = [
{
name: 'Radarr',
type: 'Radarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Radarr/icon.png',
url: 'http://server:7878/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
];
function saveLocal(arg0: any) {
// localStorage.setItem('services', JSON.stringify(arg0));
console.log(`saving ${arg0}`);
}
function loadLocal(arg0: string) {
const local = localStorage.getItem(arg0);
if (local) {
return JSON.parse(local);
}
return [
...MockServices,
{
name: 'Radarr',
type: 'Radarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Radarr/icon.png',
url: 'http://server:7878/',
},
];
}