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

♻️ Add static CSS class names (#699)

Browse Source
This commit is contained in:
Manuel
2023-02-10 23:37:08 +01:00
committed by GitHub
parent fab018a10e
commit fef47b96ee
7 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Dashboard/Tiles/Apps/AppTile.tsx
View File

@@ -33,9 +33,10 @@ export const AppTile = ({ className, app }: AppTileProps) => {
justify="space-around" justify="space-around"
align="center" align="center"
style={{ height: '100%', width: '100%' }} style={{ height: '100%', width: '100%' }}
className="dashboard-tile-app"
> >
<Box hidden={false}> <Box hidden={false}>
<Title order={5} size="md" ta="center" lineClamp={1} className={classes.appName}> <Title order={5} size="md" ta="center" lineClamp={1} className={cx(classes.appName, 'dashboard-tile-app-title')}>
{app.name} {app.name}
</Title> </Title>
</Box> </Box>

2
src/components/Dashboard/Tiles/HomarrCardWrapper.tsx
View File

@@ -18,7 +18,7 @@ export const HomarrCardWrapper = ({ ...props }: HomarrCardWrapperProps) => {
return ( return (
<Card <Card
{...restProps} {...restProps}
className={cx(restProps.className, cardClass)} className={cx(restProps.className, cardClass, 'dashboard-gs-generic-item')}
withBorder withBorder
style={{ cursor: isEditMode ? 'move' : 'default' }} style={{ cursor: isEditMode ? 'move' : 'default' }}
radius="lg" radius="lg"

4
src/components/Dashboard/Wrappers/Category/Category.tsx
View File

@@ -16,7 +16,7 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
const { refs, apps, widgets } = useGridstack('category', category.id); const { refs, apps, widgets } = useGridstack('category', category.id);
const isEditMode = useEditModeStore((x) => x.enabled); const isEditMode = useEditModeStore((x) => x.enabled);
const { config } = useConfigContext(); const { config } = useConfigContext();
const { classes: cardClasses } = useCardStyles(true); const { classes: cardClasses, cx } = useCardStyles(true);
const categoryList = config?.categories.map((x) => x.name) ?? []; const categoryList = config?.categories.map((x) => x.name) ?? [];
const [toggledCategories, setToggledCategories] = useLocalStorage({ const [toggledCategories, setToggledCategories] = useLocalStorage({
@@ -28,7 +28,7 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
return ( return (
<Accordion <Accordion
classNames={{ classNames={{
item: cardClasses.card, item: cx(cardClasses.card, 'dashboard-gs-category'),
}} }}
mx={10} mx={10}
chevronPosition="left" chevronPosition="left"

1
src/components/layout/Layout.tsx
View File

@@ -19,6 +19,7 @@ export default function Layout({ children }: any) {
minHeight: 'calc(100vh - var(--mantine-header-height))', minHeight: 'calc(100vh - var(--mantine-header-height))',
}, },
}} }}
className="dashboard-app-shell"
> >
<Head /> <Head />
<Background /> <Background />

2
src/components/layout/Logo.tsx
View File

@@ -17,12 +17,14 @@ export function Logo({ size = 'md', withoutText = false }: LogoProps) {
width={size === 'md' ? 50 : 12} width={size === 'md' ? 50 : 12}
src={config?.settings.customization.logoImageUrl || '/imgs/logo/logo-color.svg'} src={config?.settings.customization.logoImageUrl || '/imgs/logo/logo-color.svg'}
alt="Homarr Logo" alt="Homarr Logo"
className="dashboard-header-logo-image"
/> />
{withoutText ? null : ( {withoutText ? null : (
<Text <Text
size={size === 'md' ? 22 : 10} size={size === 'md' ? 22 : 10}
weight="bold" weight="bold"
variant="gradient" variant="gradient"
className="dashboard-header-logo-text"
gradient={primaryGradient} gradient={primaryGradient}
> >
{config?.settings.customization.pageTitle || 'Homarr'} {config?.settings.customization.pageTitle || 'Homarr'}

8
src/components/layout/header/Header.tsx
View File

@@ -13,7 +13,7 @@ export const HeaderHeight = 64;
export function Header(props: any) { export function Header(props: any) {
const { classes } = useStyles(); const { classes } = useStyles();
const { classes: cardClasses } = useCardStyles(false); const { classes: cardClasses, cx } = useCardStyles(false);
const { attributes } = usePackageAttributesStore(); const { attributes } = usePackageAttributesStore();
const { isLoading, error, data } = useQuery({ const { isLoading, error, data } = useQuery({
@@ -27,12 +27,12 @@ export function Header(props: any) {
data?.tag_name > `v${attributes.packageVersion}` ? data?.tag_name : undefined; data?.tag_name > `v${attributes.packageVersion}` ? data?.tag_name : undefined;
return ( return (
<MantineHeader height="auto" className={cardClasses.card}> <MantineHeader height="auto" className={cx(cardClasses.card, 'dashboard-header')}>
<Group p="xs" noWrap grow> <Group p="xs" noWrap grow>
<Box className={classes.hide}> <Box className={cx(classes.hide, 'dashboard-header-logo-root')}>
<Logo /> <Logo />
</Box> </Box>
<Group position="right" style={{ maxWidth: 'none' }} noWrap> <Group className="dashboard-header-group-right" position="right" style={{ maxWidth: 'none' }} noWrap>
<Search /> <Search />
<ToggleEditModeAction /> <ToggleEditModeAction />
<DockerMenuButton /> <DockerMenuButton />

5
src/components/layout/header/Search.tsx
View File

@@ -57,7 +57,7 @@ export function Search() {
const { config } = useConfigContext(); const { config } = useConfigContext();
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [debounced] = useDebouncedValue(searchQuery, 250); const [debounced] = useDebouncedValue(searchQuery, 250);
const { classes: cardClasses } = useCardStyles(true); const { classes: cardClasses, cx } = useCardStyles(true);
const isOverseerrEnabled = config?.apps.some( const isOverseerrEnabled = config?.apps.some(
(x) => x.integration.type === 'overseerr' || x.integration.type === 'jellyseerr' (x) => x.integration.type === 'overseerr' || x.integration.type === 'jellyseerr'
@@ -216,7 +216,8 @@ export function Search() {
} }
}} }}
classNames={{ classNames={{
input: cardClasses.card, input: cx(cardClasses.card, 'dashboard-header-search-input'),
root: 'dashboard-header-search-root',
}} }}
radius="lg" radius="lg"
size="md" size="md"