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

Main app tile styling and animations

Browse Source
This commit is contained in:
ajnart
2023-01-03 22:32:00 +09:00
parent 90b6f23d3e
commit c963760717
1 changed files with 32 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,39 +23,40 @@ export const AppTile = ({ className, app }: AppTileProps) => {
classes: { card: cardClass }, classes: { card: cardClass },
} = useCardStyles(false); } = useCardStyles(false);
const inner = ( function Inner() {
<> return (
<Text align="center" weight={500} size="md" className={classes.appName}> <>
{app.name} <Text align="center" weight={500} size="md" className={classes.appName}>
</Text> {app.name}
<Center style={{ height: '75%', flex: 1 }}> </Text>
{/* eslint-disable-next-line @next/next/no-img-element */} <Center style={{ height: '85%', flex: 1 }}>
<motion.img {/* eslint-disable-next-line @next/next/no-img-element */}
className={classes.image} <motion.img
src={app.appearance.iconUrl} className={classes.image}
alt="" src={app.appearance.iconUrl}
animate={{ alt={app.name}
scale: [0.8, 1.15, 1], whileHover={{
rotate: [0, 15, -15, 0], scale: 1.2,
}} transition: { duration: 0.2 },
transition={{ }}
duration: 0.5, initial={{ opacity: 0, scale: 0.5 }}
}} animate={{ scale: 1, opacity: 1 }}
/> transition={{ duration: 0.3 }}
</Center> />
</> </Center>
); </>
);
}
return ( return (
<HomarrCardWrapper className={className}> <HomarrCardWrapper className={className}>
<AppMenu app={app} /> <AppMenu app={app} />
{!app.url || isEditMode ? ( {!app.url || isEditMode ? (
<UnstyledButton <UnstyledButton
className={classes.button} className={classes.button}
style={{ pointerEvents: isEditMode ? 'none' : 'auto' }} style={{ pointerEvents: isEditMode ? 'none' : 'auto' }}
> >
{inner} <Inner />
</UnstyledButton> </UnstyledButton>
) : ( ) : (
<UnstyledButton <UnstyledButton
@@ -63,9 +64,9 @@ export const AppTile = ({ className, app }: AppTileProps) => {
component={NextLink} component={NextLink}
href={app.behaviour.externalUrl.length > 0 ? app.behaviour.externalUrl : app.url} href={app.behaviour.externalUrl.length > 0 ? app.behaviour.externalUrl : app.url}
target={app.behaviour.isOpeningNewTab ? '_blank' : '_self'} target={app.behaviour.isOpeningNewTab ? '_blank' : '_self'}
className={cx(classes.button, classes.link)} className={cx(classes.button)}
> >
{inner} <Inner />
</UnstyledButton> </UnstyledButton>
)} )}
<AppPing app={app} /> <AppPing app={app} />
@@ -76,14 +77,14 @@ export const AppTile = ({ className, app }: AppTileProps) => {
const useStyles = createStyles((theme, _params, getRef) => ({ const useStyles = createStyles((theme, _params, getRef) => ({
image: { image: {
ref: getRef('image'), ref: getRef('image'),
maxHeight: '80%', maxHeight: '90%',
maxWidth: '80%', maxWidth: '90%',
transition: 'transform 100ms ease-in-out',
}, },
appName: { appName: {
ref: getRef('appName'), ref: getRef('appName'),
}, },
button: { button: {
paddingBottom: 10,
height: '100%', height: '100%',
width: '100%', width: '100%',
display: 'flex', display: 'flex',
@@ -91,20 +92,12 @@ const useStyles = createStyles((theme, _params, getRef) => ({
alignItems: 'center', alignItems: 'center',
gap: 4, gap: 4,
}, },
link: {
[`&:hover .${getRef('image')}`]: {
// TODO: add styles for image when hovering card
},
[`&:hover .${getRef('appName')}`]: {
// TODO: add styles for app name when hovering card
},
},
})); }));
export const appTileDefinition = { export const appTileDefinition = {
component: AppTile, component: AppTile,
minWidth: 2, minWidth: 1,
minHeight: 1,
maxWidth: 12, maxWidth: 12,
minHeight: 2,
maxHeight: 12, maxHeight: 12,
}; };