🐛 App tile flex fix (#1255)

* 🎨 flex * 🎨 Improved flex organization on app tile * ✏️ disallowAppNameProgagation to Propagation * ✨ User customizable lineclamp and config migration
2025-11-09 15:05:48 +01:00 · 2023-08-11 20:47:14 +02:00
parent d5f74eb4bf
commit d6736d6539
9 changed files with 121 additions and 94 deletions
--- a/public/locales/en/layout/modals/add-app.json
+++ b/public/locales/en/layout/modals/add-app.json
@@ -72,6 +72,10 @@
 				"bottom":"Bottom",
 				"left":"Left"
 			}
+		},
+		"lineClampAppName":{
+			"label":"App Name Line Clamp",
+			"description":"Defines on how many lines your title should fit at it's maximum. Set 0 for unlimited."
 		}
 	},
 	"integration": {
--- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
@@ -205,7 +205,7 @@ export const EditAppModal = ({
            <NetworkTab form={form} />
            <AppearanceTab
              form={form}
-              disallowAppNameProgagation={() => setAllowAppNamePropagation(false)}
+              disallowAppNamePropagation={() => setAllowAppNamePropagation(false)}
              allowAppNamePropagation={allowAppNamePropagation}
            />
            <IntegrationTab form={form} />
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
@@ -1,4 +1,4 @@
-import { Flex, Select, Stack, Switch, Tabs } from '@mantine/core';
+import { Flex, NumberInput, Select, Stack, Switch, Tabs } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
@@ -9,13 +9,13 @@ import { IconSelector } from '../../../../../IconSelector/IconSelector';

 interface AppearanceTabProps {
  form: UseFormReturnType<AppType, (values: AppType) => AppType>;
-  disallowAppNameProgagation: () => void;
+  disallowAppNamePropagation: () => void;
  allowAppNamePropagation: boolean;
 }

 export const AppearanceTab = ({
  form,
-  disallowAppNameProgagation,
+  disallowAppNamePropagation,
  allowAppNamePropagation,
 }: AppearanceTabProps) => {
  const iconSelectorRef = useRef();
@@ -46,7 +46,7 @@ export const AppearanceTab = ({
            defaultValue={form.values.appearance.iconUrl}
            onChange={(value) => {
              form.setFieldValue('appearance.iconUrl', value);
-              disallowAppNameProgagation();
+              disallowAppNamePropagation();
            }}
            value={form.values.appearance.iconUrl}
            ref={iconSelectorRef}
@@ -66,26 +66,41 @@ export const AppearanceTab = ({
          }}
        />
        {form.values.appearance.appNameStatus === 'normal' && (
-          <Select
-            label={t('appearance.positionAppName.label')}
-            description={t('appearance.positionAppName.description')}
-            data={[
-              { value: 'column', label: t('appearance.positionAppName.dropdown.top') as string },
-              {
-                value: 'row-reverse',
-                label: t('appearance.positionAppName.dropdown.right') as string,
-              },
-              {
-                value: 'column-reverse',
-                label: t('appearance.positionAppName.dropdown.bottom') as string,
-              },
-              { value: 'row', label: t('appearance.positionAppName.dropdown.left') as string },
-            ]}
-            {...form.getInputProps('appearance.positionAppName')}
-            onChange={(value) => {
-              form.setFieldValue('appearance.positionAppName', value);
-            }}
-          />
+          <>
+            <Select
+              label={t('appearance.positionAppName.label')}
+              description={t('appearance.positionAppName.description')}
+              data={[
+                {
+                  value: 'column',
+                  label: t('appearance.positionAppName.dropdown.top') as string },
+                {
+                  value: 'row-reverse',
+                  label: t('appearance.positionAppName.dropdown.right') as string,
+                },
+                {
+                  value: 'column-reverse',
+                  label: t('appearance.positionAppName.dropdown.bottom') as string,
+                },
+                {
+                  value: 'row',
+                  label: t('appearance.positionAppName.dropdown.left') as string },
+              ]}
+              {...form.getInputProps('appearance.positionAppName')}
+              onChange={(value) => {
+                form.setFieldValue('appearance.positionAppName', value);
+              }}
+            />
+            <NumberInput
+              label={t('appearance.lineClampAppName.label')}
+              description={t('appearance.lineClampAppName.description')}
+              min={0}
+              {...form.getInputProps('appearance.lineClampAppName')}
+              onChange={(value) => {
+                form.setFieldValue('appearance.lineClampAppName', value);
+              }}
+            />
+          </>
        )}
      </Stack>
    </Tabs.Panel>
--- a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
@@ -95,6 +95,7 @@ export const AvailableElementTypes = ({
                    iconUrl: '/imgs/logo/logo.png',
                    appNameStatus: 'normal',
                    positionAppName: 'column',
+                    lineClampAppName: 1,
                  },
                  network: {
                    enabledStatusChecker: true,
--- a/src/components/Dashboard/Tiles/Apps/AppPing.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppPing.tsx
@@ -30,7 +30,7 @@ export const AppPing = ({ app }: AppPingProps) => {
    <motion.div
      style={{
        position: 'absolute',
-        bottom: replaceDotWithIcon ? 5 : 20,
+        bottom: replaceDotWithIcon ? 0 : 20,
        right: replaceDotWithIcon ? 8 : 20,
        zIndex: 2,
      }}
--- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
@@ -1,10 +1,9 @@
-import { Box, Flex, Text, Tooltip, UnstyledButton } from '@mantine/core';
+import { Affix, Box, Text, Tooltip, UnstyledButton } from '@mantine/core';
 import { createStyles, useMantineTheme } from '@mantine/styles';
 import { motion } from 'framer-motion';
 import Link from 'next/link';

 import { AppType } from '../../../../types/app';
-import { useCardStyles } from '../../../layout/useCardStyles';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { HomarrCardWrapper } from '../HomarrCardWrapper';
 import { BaseTileProps } from '../type';
@@ -17,89 +16,70 @@ interface AppTileProps extends BaseTileProps {

 export const AppTile = ({ className, app }: AppTileProps) => {
  const isEditMode = useEditModeStore((x) => x.enabled);
-
  const { cx, classes } = useStyles();
-
  const { colorScheme } = useMantineTheme();
-
  const tooltipContent = [
-    app.appearance.appNameStatus === "hover" ? app.name : undefined,
-    app.behaviour.tooltipDescription
-  ].filter( e => e ).join( ': ' );
+    app.appearance.appNameStatus === 'hover' ? app.name : undefined,
+    app.behaviour.tooltipDescription,
+  ]
+    .filter((e) => e)
+    .join(': ');

-  const {
-    classes: { card: cardClass },
-  } = useCardStyles(false);
+  const isRow = app.appearance.positionAppName.includes('row');

  function Inner() {
    return (
      <Tooltip.Floating
        label={tooltipContent}
        position="right-start"
-        c={ colorScheme === 'light' ? "black" : "dark.0" }
-        color={ colorScheme === 'light' ? "gray.2" : "dark.4" }
+        c={colorScheme === 'light' ? 'black' : 'dark.0'}
+        color={colorScheme === 'light' ? 'gray.2' : 'dark.4'}
        multiline
-        disabled={tooltipContent === ''}
-        styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+        disabled={!tooltipContent}
+        styles={{ tooltip: { maxWidth: 300 } }}
      >
-        <Flex
-          m={0}
-          p={0}
-          justify="space-around"
-          align="center"
+        <Box
+          className={`${classes.base} ${cx(classes.appContent, 'dashboard-tile-app')}`}
          h="100%"
-          w="100%"
-          className="dashboard-tile-app"
-          direction={app.appearance.positionAppName ?? 'column'}
+          sx={{
+            flexFlow: app.appearance.positionAppName ?? 'column',
+          }}
        >
-          <Box w="100%" hidden={["hover", "hidden"].includes(app.appearance.appNameStatus)}>
-            <Text
-              w="100%"
-              size="md"
-              ta="center"
-              weight={700}
-              className={cx(classes.appName, 'dashboard-tile-app-title')}
-              lineClamp={1}
-            >
-              {app.name}
-            </Text>
-          </Box>
-          <Box
-            w="100%"
-            h="100%"
-            display="flex"
+        {app.appearance.appNameStatus === 'normal' && (
+          <Text
+            className={cx(classes.appName, 'dashboard-tile-app-title')}
+            fw={700}
+            size="md"
+            ta="center"
            sx={{
-              alignContent: 'center',
-              justifyContent: 'center',
-              flex: '1 1 auto',
-              flexWrap: 'wrap',
+              flex: isRow ? '1' : undefined,
            }}
+            lineClamp={app.appearance.lineClampAppName}
          >
-            <motion.img
-              className={classes.image}
-              height="85%"
-              style={{
-                objectFit: 'contain',
-              }}
-              src={app.appearance.iconUrl}
-              alt={app.name}
-              whileHover={{
-                scale: 1.2,
-                transition: { duration: 0.2 },
-              }}
-            />
-          </Box>
-        </Flex>
+            {app.name}
+          </Text>
+        )}
+          <motion.img
+            className={cx(classes.appImage, 'dashboard-tile-app-image')}
+            src={app.appearance.iconUrl}
+            alt={app.name}
+            whileHover={{ scale: 1 }}
+            initial={{ scale: 0.9 }}
+            style={{
+              width: isRow ? 0 : undefined,
+            }}
+          />
+        </Box>
      </Tooltip.Floating>
    );
  }

  return (
-    <HomarrCardWrapper className={className}>
+    <HomarrCardWrapper className={className} p={10}>
      <AppMenu app={app} />
      {!app.url || isEditMode ? (
        <UnstyledButton
-          className={classes.button}
+          className={`${classes.button} ${classes.base}`}
          style={{ pointerEvents: isEditMode ? 'none' : 'auto' }}
        >
          <Inner />
@@ -110,7 +90,7 @@ export const AppTile = ({ className, app }: AppTileProps) => {
          component={Link}
          href={app.behaviour.externalUrl.length > 0 ? app.behaviour.externalUrl : app.url}
          target={app.behaviour.isOpeningNewTab ? '_blank' : '_self'}
-          className={cx(classes.button)}
+          className={`${classes.button} ${classes.base}`}
        >
          <Inner />
        </UnstyledButton>
@@ -121,19 +101,27 @@ export const AppTile = ({ className, app }: AppTileProps) => {
 };

 const useStyles = createStyles((theme, _params, getRef) => ({
-  image: {
-    maxHeight: '90%',
-    maxWidth: '90%',
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  appContent: {
+    gap: 0,
+    overflow: 'visible',
+    flexGrow: 5,
  },
  appName: {
    wordBreak: 'break-word',
  },
+  appImage: {
+    flex: '1',
+    objectFit: 'contain',
+    overflowY: 'auto',
+  },
  button: {
    height: '100%',
    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
    gap: 4,
  },
 }));
--- a/src/modules/Docker/ContainerActionBar.tsx
+++ b/src/modules/Docker/ContainerActionBar.tsx
@@ -130,7 +130,8 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
                appearance: {
                  iconUrl: '/imgs/logo/logo.png',
                  appNameStatus: 'normal',
-                  positionAppName: 'column'
+                  positionAppName: 'column',
+                  lineClampAppName: 1,
                },
                network: {
                  enabledStatusChecker: true,
--- a/src/tools/config/getFrontendConfig.ts
+++ b/src/tools/config/getFrontendConfig.ts
@@ -10,6 +10,8 @@ export const getFrontendConfig = async (name: string): Promise<ConfigType> => {
  let config = getConfig(name);
  let shouldMigrateConfig = false;

+  config = migrateAppConfigs(config);
+
  const anyWeatherWidgetWithStringLocation = config.widgets.some(
    (widget) => widget.type === 'weather' && typeof widget.properties.location === 'string'
  );
@@ -129,3 +131,18 @@ const migratePiholeIntegrationField = (config: BackendConfigType) => {
    }),
  };
 };
+
+const migrateAppConfigs = (config: BackendConfigType) => {
+  return {
+    ...config,
+    apps: config.apps.map((app) => ({
+      ...app,
+      appearance: {
+        ...app.appearance,
+        appNameStatus: app.appearance.appNameStatus?? 'normal',
+        positionAppName: app.appearance.positionAppName?? 'column',
+        lineClampAppName: app.appearance.lineClampAppName?? 1,
+      }
+    }))
+  }
+}
--- a/src/types/app.ts
+++ b/src/types/app.ts
@@ -36,6 +36,7 @@ interface AppAppearanceType {
  iconUrl: string;
  appNameStatus: "normal"|"hover"|"hidden";
  positionAppName: Property.FlexDirection;
+  lineClampAppName: number;
 }

 export type IntegrationType =