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

✨ Add more transparency areas and fix bugs

Browse Source
This commit is contained in:
ajnart
2022-06-11 18:37:13 +02:00
parent 74f87b570d
commit 426ba69afd
4 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/AppShelf/AppShelf.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Accordion, createStyles, Grid, Group } from '@mantine/core'; import { Accordion, createStyles, Grid, Group, Paper, useMantineColorScheme } from '@mantine/core';
import { import {
closestCenter, closestCenter,
DndContext, DndContext,
@@ -42,6 +42,7 @@ const AppShelf = (props: any) => {
}); });
const [activeId, setActiveId] = useState(null); const [activeId, setActiveId] = useState(null);
const { config, setConfig } = useConfig(); const { config, setConfig } = useConfig();
const { colorScheme } = useMantineColorScheme();
const sensors = useSensors( const sensors = useSensors(
useSensor(TouchSensor, { useSensor(TouchSensor, {
@@ -164,7 +165,16 @@ const AppShelf = (props: any) => {
) : null} ) : null}
<Accordion.Item key="Downloads" label="Your downloads"> <Accordion.Item key="Downloads" label="Your downloads">
<ModuleMenu module={DownloadsModule} /> <ModuleMenu module={DownloadsModule} />
<DownloadComponent /> <Paper
style={{
background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
${(config.settings.appOpacity || 100) / 100}`,
borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
${(config.settings.appOpacity || 100) / 100}`,
}}
>
<DownloadComponent />
</Paper>
</Accordion.Item> </Accordion.Item>
</Accordion> </Accordion>
</Group> </Group>

18
src/components/layout/Aside.tsx
View File

@@ -34,14 +34,16 @@ export default function Aside(props: any) {
base: 'auto', base: 'auto',
}} }}
> >
{matches && ( <>
<Group my="sm" grow direction="column" style={{ width: 300 }}> {matches && (
<ModuleWrapper module={CalendarModule} /> <Group my="sm" grow direction="column" style={{ width: 300 }}>
<ModuleWrapper module={TotalDownloadsModule} /> <ModuleWrapper module={CalendarModule} />
<ModuleWrapper module={WeatherModule} /> <ModuleWrapper module={TotalDownloadsModule} />
<ModuleWrapper module={DateModule} /> <ModuleWrapper module={WeatherModule} />
</Group> <ModuleWrapper module={DateModule} />
)} </Group>
)}
</>
</MantineAside> </MantineAside>
); );
} }

2
src/components/modules/downloads/DownloadsModule.tsx
View File

@@ -55,7 +55,7 @@ export default function DownloadComponent() {
setTorrents(response.data); setTorrents(response.data);
setIsLoading(false); setIsLoading(false);
}); });
}, 1000); }, 5000);
}, [config.services]); }, [config.services]);
if (downloadServices.length === 0) { if (downloadServices.length === 0) {

18
src/components/modules/moduleWrapper.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Card, Group, Menu, Switch, TextInput } from '@mantine/core'; import { Button, Card, Group, Menu, Switch, TextInput, useMantineColorScheme } from '@mantine/core';
import { useConfig } from '../../tools/state'; import { useConfig } from '../../tools/state';
import { IModule } from './modules'; import { IModule } from './modules';
@@ -91,6 +91,7 @@ function getItems(module: IModule) {
export function ModuleWrapper(props: any) { export function ModuleWrapper(props: any) {
const { module }: { module: IModule } = props; const { module }: { module: IModule } = props;
const { colorScheme } = useMantineColorScheme();
const { config, setConfig } = useConfig(); const { config, setConfig } = useConfig();
const enabledModules = config.modules ?? {}; const enabledModules = config.modules ?? {};
// Remove 'Module' from enabled modules titles // Remove 'Module' from enabled modules titles
@@ -99,8 +100,21 @@ export function ModuleWrapper(props: any) {
if (!isShown) { if (!isShown) {
return null; return null;
} }
return ( return (
<Card {...props} hidden={!isShown} withBorder radius="lg" shadow="sm"> <Card
{...props}
hidden={!isShown}
withBorder
radius="lg"
shadow="sm"
style={{
background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
${(config.settings.appOpacity || 100) / 100}`,
borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
${(config.settings.appOpacity || 100) / 100}`,
}}
>
<ModuleMenu <ModuleMenu
module={module} module={module}
styles={{ styles={{