From 8211e22d8643aab59840dd8e4ad372981a974b68 Mon Sep 17 00:00:00 2001
From: Tagaishi <Tagaishi@hotmail.ch>
Date: Fri, 1 Sep 2023 21:53:51 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20custom=20font=20sizing=20f?=
 =?UTF-8?q?or=20app=20name=20(#1341)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 Add custom font sizing for app name

* 🚸 Added maximum font size
---
 public/locales/en/layout/modals/add-app.json   |  4 ++++
 .../Tabs/AppereanceTab/AppereanceTab.tsx       | 10 ++++++++++
 .../Overview/AvailableElementsOverview.tsx     |  1 +
 .../Dashboard/Tiles/Apps/AppTile.tsx           | 18 +++++++++---------
 src/modules/Docker/ContainerActionBar.tsx      |  1 +
 src/tools/config/getFrontendConfig.ts          |  1 +
 src/types/app.ts                               |  1 +
 7 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/public/locales/en/layout/modals/add-app.json b/public/locales/en/layout/modals/add-app.json
index 683ba8724..afa4b7540 100644
--- a/public/locales/en/layout/modals/add-app.json
+++ b/public/locales/en/layout/modals/add-app.json
@@ -54,6 +54,10 @@
 				"text": "This may take a few seconds"
 			}
 		},
+		"appNameFontSize":{
+			"label":"App Name Font Size",
+			"description":"Set the font size for when the app name is shown on the tile."
+		},
 		"appNameStatus":{
 			"label":"App Name Status",
 			"description":"Choose where you want the title to show up, if at all.",
diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
index 43a371a0a..29921c776 100644
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
@@ -67,6 +67,16 @@ export const AppearanceTab = ({
         />
         {form.values.appearance.appNameStatus === 'normal' && (
           <>
+            <NumberInput
+              label={t('appearance.appNameFontSize.label')}
+              description={t('appearance.appNameFontSize.description')}
+              min={5}
+              max={64}
+              {...form.getInputProps('appearance.appNameFontSize')}
+              onChange={(value) => {
+                form.setFieldValue('appearance.appNameFontSize', value);
+              }}
+            />
             <Select
               label={t('appearance.positionAppName.label')}
               description={t('appearance.positionAppName.description')}
diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
index 3f386ff14..688a31acb 100644
--- a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
@@ -94,6 +94,7 @@ export const AvailableElementTypes = ({
                   appearance: {
                     iconUrl: '/imgs/logo/logo.png',
                     appNameStatus: 'normal',
+                    appNameFontSize: 16,
                     positionAppName: 'column',
                     lineClampAppName: 1,
                   },
diff --git a/src/components/Dashboard/Tiles/Apps/AppTile.tsx b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
index 2b592d9b9..571a07688 100644
--- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
@@ -49,7 +49,7 @@ export const AppTile = ({ className, app }: AppTileProps) => {
             <Text
               className={cx(classes.appName, 'dashboard-tile-app-title')}
               fw={700}
-              size="md"
+              size={app.appearance.appNameFontSize}
               ta="center"
               sx={{
                 flex: isRow ? '1' : undefined,
@@ -60,19 +60,12 @@ export const AppTile = ({ className, app }: AppTileProps) => {
             </Text>
           )}
           <motion.img
-            className={cx('dashboard-tile-app-image')}
+            className={cx(classes.appImage, 'dashboard-tile-app-image')}
             src={app.appearance.iconUrl}
-            height="85%"
-            width="85%"
             alt={app.name}
             whileHover={{ scale: 0.9 }}
             initial={{ scale: 0.8 }}
             style={{
-              maxHeight: '90%',
-              maxWidth: '90%',
-              flex: 1,
-              overflow: 'auto',
-              objectFit: 'contain',
               width: isRow ? 0 : undefined,
             }}
           />
@@ -118,6 +111,13 @@ const useStyles = createStyles((theme, _params, getRef) => ({
     overflow: 'visible',
     flexGrow: 5,
   },
+  appImage:{
+    maxHeight: '100%',
+    maxWidth: '100%',
+    overflow: 'auto',
+    flex: 1,
+    objectFit: 'contain',
+  },
   appName: {
     wordBreak: 'break-word',
   },
diff --git a/src/modules/Docker/ContainerActionBar.tsx b/src/modules/Docker/ContainerActionBar.tsx
index 07a1cde96..e5046cbf8 100644
--- a/src/modules/Docker/ContainerActionBar.tsx
+++ b/src/modules/Docker/ContainerActionBar.tsx
@@ -130,6 +130,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
                 appearance: {
                   iconUrl: '/imgs/logo/logo.png',
                   appNameStatus: 'normal',
+                  appNameFontSize: 16,
                   positionAppName: 'column',
                   lineClampAppName: 1,
                 },
diff --git a/src/tools/config/getFrontendConfig.ts b/src/tools/config/getFrontendConfig.ts
index 1266da585..ee70c8ac3 100644
--- a/src/tools/config/getFrontendConfig.ts
+++ b/src/tools/config/getFrontendConfig.ts
@@ -141,6 +141,7 @@ const migrateAppConfigs = (config: BackendConfigType) => {
         ...app.appearance,
         appNameStatus: app.appearance.appNameStatus?? 'normal',
         positionAppName: app.appearance.positionAppName?? 'column',
+        appNameFontSize: app.appearance.appNameFontSize?? 16,
         lineClampAppName: app.appearance.lineClampAppName?? 1,
       }
     }))
diff --git a/src/types/app.ts b/src/types/app.ts
index adfb8c50a..b0f614639 100644
--- 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;
+  appNameFontSize: number;
   lineClampAppName: number;
 }