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

🐛 Fix opacity in Header and AppShelf accordion

Browse Source
This commit is contained in:
ajnart
2022-09-03 00:40:44 +02:00
parent 1dc90e1e03
commit 247e950713
2 changed files with 43 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -155,20 +155,47 @@ const AppShelf = (props: any) => {
}} }}
> >
{categoryList.map((category, idx) => ( {categoryList.map((category, idx) => (
<Accordion.Item key={category} value={idx.toString()}> <Accordion.Item
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}`,
}}
key={category}
value={idx.toString()}
>
<Accordion.Control>{category}</Accordion.Control> <Accordion.Control>{category}</Accordion.Control>
<Accordion.Panel>{getItems(category)}</Accordion.Panel> <Accordion.Panel>{getItems(category)}</Accordion.Panel>
</Accordion.Item> </Accordion.Item>
))} ))}
{/* Return the item for all services without category */} {/* Return the item for all services without category */}
{noCategory && noCategory.length > 0 ? ( {noCategory && noCategory.length > 0 ? (
<Accordion.Item key="Other" value="Other"> <Accordion.Item
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}`,
}}
key="Other"
value="Other"
>
<Accordion.Control>{t('accordions.others.text')}</Accordion.Control> <Accordion.Control>{t('accordions.others.text')}</Accordion.Control>
<Accordion.Panel>{getItems()}</Accordion.Panel> <Accordion.Panel>{getItems()}</Accordion.Panel>
</Accordion.Item> </Accordion.Item>
) : null} ) : null}
{downloadEnabled ? ( {downloadEnabled ? (
<Accordion.Item key="Downloads" value="Your downloads"> <Accordion.Item
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}`,
}}
key="Downloads"
value="Your downloads"
>
<Accordion.Control>{t('accordions.downloads.text')}</Accordion.Control> <Accordion.Control>{t('accordions.downloads.text')}</Accordion.Control>
<Accordion.Panel> <Accordion.Panel>
<Paper <Paper

15
src/components/layout/Header.tsx
View File

@@ -1,10 +1,11 @@
import { Box, createStyles, Group, Header as Head } from '@mantine/core'; import { Box, createStyles, Group, Header as Head, useMantineColorScheme } from '@mantine/core';
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem'; import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
import DockerMenuButton from '../../modules/docker/DockerModule'; import DockerMenuButton from '../../modules/docker/DockerModule';
import SearchBar from '../../modules/search/SearchModule'; import SearchBar from '../../modules/search/SearchModule';
import { SettingsMenuButton } from '../Settings/SettingsMenu'; import { SettingsMenuButton } from '../Settings/SettingsMenu';
import { Logo } from './Logo'; import { Logo } from './Logo';
import { useConfig } from '../../tools/state';
const HEADER_HEIGHT = 60; const HEADER_HEIGHT = 60;
@@ -23,9 +24,19 @@ const useStyles = createStyles((theme) => ({
export function Header(props: any) { export function Header(props: any) {
const { classes, cx } = useStyles(); const { classes, cx } = useStyles();
const { config } = useConfig();
const { colorScheme } = useMantineColorScheme();
return ( return (
<Head height="auto"> <Head
height="auto"
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}`,
}}
>
<Group p="xs" position="apart"> <Group p="xs" position="apart">
<Box className={classes.hide}> <Box className={classes.hide}>
<Logo style={{ fontSize: 22 }} /> <Logo style={{ fontSize: 22 }} />