✨App tile UI change (#1231)

* 💄 Rework the App tile UI * 🤡 Forgot one * Make it so the app title gets hidden properly Now if the value is missing it won't by "hover" or "hidden" so it won't hide * Turn the `Tooltip` into `HoverCard` * Make save and cancel button not wrap anymore * 💄 Used InfoCard in options + translations * ♻️ Remove fallback value for label translations --------- Co-authored-by: Thomas Camlong <49837342+ajnart@users.noreply.github.com> Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
2025-11-10 07:25:48 +01:00 · 2023-08-06 19:36:36 +02:00
parent 121d6eafab
commit 7d18a51d02
10 changed files with 216 additions and 99 deletions
--- a/public/locales/en/layout/modals/add-app.json
+++ b/public/locales/en/layout/modals/add-app.json
@@ -25,6 +25,10 @@
 			"label": "Open in new tab",
 			"description": "Open the app in a new tab instead of the current one."
 		},
+		"tooltipDescription":{
+			"label": "Application Description",
+			"description": "The text you enter will appear when hovering over your app.\r\nUse this to give users more details about your app or leave empty to have nothing."
+		},
 		"customProtocolWarning": "Using a non-standard protocol. This may require pre-installed applications and can introduce security risks. Ensure that your address is secure and trusted."
 	},
 	"network": {
@@ -49,6 +53,25 @@
 				"title": "Loading external icons",
 				"text": "This may take a few seconds"
 			}
+		},
+		"appNameStatus":{
+			"label":"App Name Status",
+			"description":"Choose where you want the title to show up, if at all.",
+			"dropdown": {
+				"normal":"Show title on tile only",
+				"hover":"Show title on tooltip hover only",
+				"hidden":"Don't show at all"
+			}
+		},
+		"positionAppName":{
+			"label":"App Name Position",
+			"description":"Position of the app's name relative to the icon.",
+			"dropdown": {
+				"top":"Top",
+				"right":"Right",
+				"bottom":"Bottom",
+				"left":"Left"
+			}
 		}
 	},
 	"integration": {
--- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
@@ -211,7 +211,7 @@ export const EditAppModal = ({
            <IntegrationTab form={form} />
          </Tabs>

-          <Group position="right" mt="md">
+          <Group noWrap position="right" mt="md">
            <Button onClick={closeModal} px={50} variant="light" color="gray">
              {t('common:cancel')}
            </Button>
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
@@ -1,6 +1,7 @@
-import { Flex, Tabs } from '@mantine/core';
+import { Flex, Select, Stack, Switch, Tabs } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
+import { useTranslation } from 'next-i18next';
 import { useEffect, useRef } from 'react';

 import { AppType } from '../../../../../../types/app';
@@ -19,6 +20,7 @@ export const AppearanceTab = ({
 }: AppearanceTabProps) => {
  const iconSelectorRef = useRef();
  const [debouncedValue] = useDebouncedValue(form.values.name, 500);
+  const { t } = useTranslation('layout/modals/add-app');

  useEffect(() => {
    if (allowAppNamePropagation !== true) {
@@ -38,17 +40,54 @@ export const AppearanceTab = ({

  return (
    <Tabs.Panel value="appearance" pt="lg">
-      <Flex gap={5}>
-        <IconSelector
-          defaultValue={form.values.appearance.iconUrl}
+      <Stack spacing="xs">
+        <Flex gap={5} mb="xs">
+          <IconSelector
+            defaultValue={form.values.appearance.iconUrl}
+            onChange={(value) => {
+              form.setFieldValue('appearance.iconUrl', value);
+              disallowAppNameProgagation();
+            }}
+            value={form.values.appearance.iconUrl}
+            ref={iconSelectorRef}
+          />
+        </Flex>
+        <Select
+          label={t('appearance.appNameStatus.label')}
+          description={t('appearance.appNameStatus.description')}
+          data={[
+            { value: 'normal', label: t('appearance.appNameStatus.dropdown.normal') as string },
+            { value: 'hover', label: t('appearance.appNameStatus.dropdown.hover') as string },
+            { value: 'hidden', label: t('appearance.appNameStatus.dropdown.hidden') as string },
+          ]}
+          {...form.getInputProps('appearance.appNameStatus')}
          onChange={(value) => {
-            form.setFieldValue('appearance.iconUrl', value);
-            disallowAppNameProgagation();
+            form.setFieldValue('appearance.appNameStatus', value);
          }}
-          value={form.values.appearance.iconUrl}
-          ref={iconSelectorRef}
        />
-      </Flex>
+        {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);
+            }}
+          />
+        )}
+      </Stack>
    </Tabs.Panel>
  );
 };
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx
@@ -1,8 +1,9 @@
-import { Switch, Tabs } from '@mantine/core';
+import { Text, TextInput, Tooltip, Stack, Switch, Tabs, Group, useMantineTheme, HoverCard } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';

 import { AppType } from '../../../../../../types/app';
+import { InfoCard } from '~/components/InfoCard/InfoCard'

 interface BehaviourTabProps {
  form: UseFormReturnType<AppType, (values: AppType) => AppType>;
@@ -10,14 +11,29 @@ interface BehaviourTabProps {

 export const BehaviourTab = ({ form }: BehaviourTabProps) => {
  const { t } = useTranslation('layout/modals/add-app');
+  const { primaryColor } = useMantineTheme();

  return (
    <Tabs.Panel value="behaviour" pt="xs">
-      <Switch
-        label={t('behaviour.isOpeningNewTab.label')}
-        description={t('behaviour.isOpeningNewTab.description')}
-        {...form.getInputProps('behaviour.isOpeningNewTab', { type: 'checkbox' })}
-      />
+      <Stack spacing="xs">
+        <Switch
+          label={t('behaviour.isOpeningNewTab.label')}
+          description={t('behaviour.isOpeningNewTab.description')}
+          styles={{ label: { fontWeight: 500, }, description: { marginTop: 0, }, }}
+          {...form.getInputProps('behaviour.isOpeningNewTab', { type: 'checkbox' })}
+        />
+        <Stack spacing="0.25rem">
+          <Group>
+            <Text size="0.875rem" weight={500}>
+              {t('behaviour.tooltipDescription.label')}
+            </Text>
+            <InfoCard message={t('behaviour.tooltipDescription.description')}/>
+          </Group>
+          <TextInput
+            {...form.getInputProps('behaviour.tooltipDescription')}
+          />
+        </Stack>
+      </Stack>
    </Tabs.Panel>
  );
-};
+};
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
@@ -1,4 +1,4 @@
-import { Tabs, Text, TextInput } from '@mantine/core';
+import { Stack, Tabs, Text, TextInput } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconClick, IconCursorText, IconLink } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
@@ -15,41 +15,44 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
  const { t } = useTranslation('layout/modals/add-app');
  return (
    <Tabs.Panel value="general" pt="sm">
-      <TextInput
-        icon={<IconCursorText size={16} />}
-        label={t('general.appname.label')}
-        description={t('general.appname.description')}
-        placeholder="My example app"
-        variant="default"
-        withAsterisk
-        mb="md"
-        {...form.getInputProps('name')}
-      />
-      <TextInput
-        icon={<IconLink size={16} />}
-        label={t('general.internalAddress.label')}
-        description={t('general.internalAddress.description')}
-        placeholder="https://google.com"
-        variant="default"
-        withAsterisk
-        mb="md"
-        {...form.getInputProps('url')}
-      />
-      <TextInput
-        icon={<IconClick size={16} />}
-        label={t('general.externalAddress.label')}
-        description={t('general.externalAddress.description')}
-        placeholder="https://homarr.mywebsite.com/"
-        variant="default"
-        {...form.getInputProps('behaviour.externalUrl')}
-      />
+      <Stack spacing="xs">
+        <TextInput
+          icon={<IconCursorText size={16} />}
+          label={t('general.appname.label')}
+          description={t('general.appname.description')}
+          placeholder="My example app"
+          variant="default"
+          withAsterisk
+          {...form.getInputProps('name')}
+        />
+        <TextInput
+          icon={<IconLink size={16} />}
+          label={t('general.internalAddress.label')}
+          description={t('general.internalAddress.description')}
+          placeholder="https://google.com"
+          variant="default"
+          withAsterisk
+          {...form.getInputProps('url')}
+          onChange={(e) => {
+            form.setFieldValue('url', e.target.value);
+          }}
+        />
+        <TextInput
+          icon={<IconClick size={16} />}
+          label={t('general.externalAddress.label')}
+          description={t('general.externalAddress.description')}
+          placeholder="https://homarr.mywebsite.com/"
+          variant="default"
+          {...form.getInputProps('behaviour.externalUrl')}
+        />

-      {!form.values.behaviour.externalUrl.startsWith('https://') &&
-        !form.values.behaviour.externalUrl.startsWith('http://') && (
-          <Text color="red" mt="sm" size="sm">
-            {t('behaviour.customProtocolWarning')}
-          </Text>
+        {!form.values.behaviour.externalUrl.startsWith('https://') &&
+          !form.values.behaviour.externalUrl.startsWith('http://') && (
+            <Text color="red" mt="sm" size="sm">
+              {t('behaviour.customProtocolWarning')}
+            </Text>
        )}
+      </Stack>
    </Tabs.Panel>
  );
 };
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
@@ -1,4 +1,4 @@
-import { MultiSelect, Switch, Tabs } from '@mantine/core';
+import { MultiSelect, Stack, Switch, Tabs } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';

@@ -16,26 +16,28 @@ export const NetworkTab = ({ form }: NetworkTabProps) => {
  );
  return (
    <Tabs.Panel value="network" pt="lg">
-      <Switch
-        label={t('network.statusChecker.label')}
-        description={t('network.statusChecker.description')}
-        mb="md"
-        defaultChecked={form.values.network.enabledStatusChecker}
-        {...form.getInputProps('network.enabledStatusChecker')}
-      />
-      {form.values.network.enabledStatusChecker && (
-        <MultiSelect
-          required
-          label={t('network.statusCodes.label')}
-          description={t('network.statusCodes.description')}
-          data={StatusCodes}
-          clearable
-          searchable
-          defaultValue={acceptableStatusCodes}
-          variant="default"
-          {...form.getInputProps('network.statusCodes')}
+      <Stack spacing="xs">
+        <Switch
+          label={t('network.statusChecker.label')}
+          description={t('network.statusChecker.description')}
+          styles={{ label: { fontWeight: 500, }, description: { marginTop: 0, }, }}
+          defaultChecked={form.values.network.enabledStatusChecker}
+          {...form.getInputProps('network.enabledStatusChecker')}
        />
-      )}
+        {form.values.network.enabledStatusChecker && (
+          <MultiSelect
+            required
+            label={t('network.statusCodes.label')}
+            description={t('network.statusCodes.description')}
+            data={StatusCodes}
+            clearable
+            searchable
+            defaultValue={acceptableStatusCodes}
+            variant="default"
+            {...form.getInputProps('network.statusCodes')}
+          />
+        )}
+      </Stack>
    </Tabs.Panel>
  );
 };
--- a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
@@ -93,6 +93,8 @@ export const AvailableElementTypes = ({
                  url: 'https://homarr.dev',
                  appearance: {
                    iconUrl: '/imgs/logo/logo.png',
+                    appNameStatus: 'normal',
+                    positionAppName: 'column',
                  },
                  network: {
                    enabledStatusChecker: true,
@@ -164,4 +166,4 @@ const ElementItem = ({ name, icon, onClick }: ElementItemProps) => {
      </Stack>
    </UnstyledButton>
  );
-};
+};
--- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
@@ -1,5 +1,5 @@
-import { Box, Stack, Title, UnstyledButton } from '@mantine/core';
-import { createStyles } from '@mantine/styles';
+import { Box, Flex, Text, Tooltip, UnstyledButton } from '@mantine/core';
+import { createStyles, useMantineTheme } from '@mantine/styles';
 import { motion } from 'framer-motion';
 import Link from 'next/link';

@@ -20,49 +20,76 @@ export const AppTile = ({ className, app }: AppTileProps) => {

  const { cx, classes } = useStyles();

+  const { colorScheme } = useMantineTheme();
+
+  const tooltipContent = [
+    app.appearance.appNameStatus === "hover" ? app.name : undefined,
+    app.behaviour.tooltipDescription
+  ].filter( e => e ).join( ': ' );
+
  const {
    classes: { card: cardClass },
  } = useCardStyles(false);

  function Inner() {
    return (
-      <>
-        <Stack
+      <Tooltip.Floating
+        label={tooltipContent}
+        position="right-start"
+        c={ colorScheme === 'light' ? "black" : "dark.0" }
+        color={ colorScheme === 'light' ? "gray.2" : "dark.4" }
+        multiline
+        disabled={tooltipContent === ''}
+        styles={{ tooltip: { '&': { maxWidth: 300, }, }, }}
+      >
+        <Flex
          m={0}
          p={0}
-          spacing="xs"
          justify="space-around"
          align="center"
-          style={{ height: '100%', width: '100%' }}
+          h="100%"
+          w="100%"
          className="dashboard-tile-app"
+          direction={app.appearance.positionAppName ?? 'column'}
        >
-          <Box hidden={false}>
-            <Title
-              order={5}
+          <Box px={10} hidden={["hover", "hidden"].includes(app.appearance.appNameStatus)}>
+            <Text
+              w="max-content"
              size="md"
              ta="center"
-              lineClamp={1}
+              weight={700}
              className={cx(classes.appName, 'dashboard-tile-app-title')}
            >
              {app.name}
-            </Title>
+            </Text>
          </Box>
-          <motion.img
-            className={classes.image}
-            height="85%"
-            width="85%"
-            style={{
-              objectFit: 'contain',
+          <Box
+            w="100%"
+            h="100%"
+            display="flex"
+            sx={{
+              alignContent: 'center',
+              justifyContent: 'center',
+              flex: '1 1 auto',
+              flexWrap: 'wrap',
            }}
-            src={app.appearance.iconUrl}
-            alt={app.name}
-            whileHover={{
-              scale: 1.2,
-              transition: { duration: 0.2 },
-            }}
-          />
-        </Stack>
-      </>
+          >
+            <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>
+      </Tooltip.Floating>
    );
  }

@@ -101,7 +128,6 @@ const useStyles = createStyles((theme, _params, getRef) => ({
    wordBreak: 'break-word',
  },
  button: {
-    paddingBottom: 10,
    height: '100%',
    width: '100%',
    display: 'flex',
--- a/src/modules/Docker/ContainerActionBar.tsx
+++ b/src/modules/Docker/ContainerActionBar.tsx
@@ -129,6 +129,8 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
                url: address,
                appearance: {
                  iconUrl: '/imgs/logo/logo.png',
+                  appNameStatus: 'normal',
+                  positionAppName: 'column'
                },
                network: {
                  enabledStatusChecker: true,
--- a/src/types/app.ts
+++ b/src/types/app.ts
@@ -1,4 +1,5 @@
 import { Icon, IconKey, IconPassword, IconUser } from '@tabler/icons-react';
+import { Property } from 'csstype'

 import { TileBaseType } from './tile';

@@ -19,6 +20,7 @@ export type ConfigAppType = Omit<AppType, 'integration'> & {
 interface AppBehaviourType {
  externalUrl: string;
  isOpeningNewTab: boolean;
+  tooltipDescription?: string;
 }

 interface AppNetworkType {
@@ -32,6 +34,8 @@ interface AppNetworkType {

 interface AppAppearanceType {
  iconUrl: string;
+  appNameStatus: "normal"|"hover"|"hidden";
+  positionAppName: Property.FlexDirection;
 }

 export type IntegrationType =