From bc0f1352911bc4cf99fdb72d96774f2c3fc1c7a4 Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Fri, 13 Dec 2024 21:04:57 +0200
Subject: [PATCH] dashboard more fine height layout

---
 .../Espo/Resources/metadata/themes/Espo.json  |  2 +-
 client/src/theme-manager.js                   |  4 ++--
 client/src/views/dashboard.js                 | 22 +++++++++++++------
 .../views/settings/fields/dashboard-layout.js | 13 ++++++-----
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/application/Espo/Resources/metadata/themes/Espo.json b/application/Espo/Resources/metadata/themes/Espo.json
index 9f6abe77a6..3e60131dde 100644
--- a/application/Espo/Resources/metadata/themes/Espo.json
+++ b/application/Espo/Resources/metadata/themes/Espo.json
@@ -21,7 +21,7 @@
             }
         }
     },
-    "dashboardCellHeight": 155,
+    "dashboardCellHeight": 40,
     "dashboardCellMargin": 16,
     "navbarHeight": 43,
     "modalFooterAtTheTop": true,
diff --git a/client/src/theme-manager.js b/client/src/theme-manager.js
index 6ee2352800..45c72aab3b 100644
--- a/client/src/theme-manager.js
+++ b/client/src/theme-manager.js
@@ -70,8 +70,8 @@ class ThemeManager {
      */
     defaultParams = {
         screenWidthXs: 768,
-        dashboardCellHeight: 155,
-        dashboardCellMargin: 19,
+        dashboardCellHeight: 40,
+        dashboardCellMargin: 16,
     }
 
     /**
diff --git a/client/src/views/dashboard.js b/client/src/views/dashboard.js
index 9118226f13..36f8ef3196 100644
--- a/client/src/views/dashboard.js
+++ b/client/src/views/dashboard.js
@@ -38,7 +38,14 @@ class DashboardView extends View {
     dashboardLayout = null
     currentTab = null
 
+    /**
+     * @private
+     * @type {number}
+     */
+    cellHeight
+
     WIDTH_MULTIPLIER = 3
+    HEIGHT_MULTIPLIER = 4
 
     events = {
         /** @this DashboardView */
@@ -144,6 +151,8 @@ class DashboardView extends View {
         this.currentTab = this.getStorage().get('state', 'dashboardTab') || 0;
         this.setupCurrentTabLayout();
 
+        this.cellHeight = this.getThemeManager().getParam('dashboardCellHeight');
+
         this.dashletIdList = [];
 
         this.screenWidthXs = this.getThemeManager().getParam('screenWidthXs');
@@ -343,7 +352,7 @@ class DashboardView extends View {
             disableResize = true;
         }
 
-        const paramCellHeight = this.getThemeManager().getParam('dashboardCellHeight');
+        const paramCellHeight = this.cellHeight;
         const paramCellMargin = this.getThemeManager().getParam('dashboardCellMargin');
 
         const factor = this.getThemeManager().getFontSizeFactor();
@@ -386,9 +395,9 @@ class DashboardView extends View {
                 $item.get(0),
                 {
                     x: o.x * this.WIDTH_MULTIPLIER,
-                    y: o.y,
+                    y: o.y * this.HEIGHT_MULTIPLIER,
                     w: o.width * this.WIDTH_MULTIPLIER,
-                    h: o.height,
+                    h: o.height * this.HEIGHT_MULTIPLIER,
                 }
             );
         });
@@ -448,9 +457,9 @@ class DashboardView extends View {
                     id: $el.data('id'),
                     name: $el.data('name'),
                     x: x / this.WIDTH_MULTIPLIER,
-                    y: y,
+                    y: y / this.HEIGHT_MULTIPLIER,
                     width: w / this.WIDTH_MULTIPLIER,
-                    height: h,
+                    height: h / this.HEIGHT_MULTIPLIER,
                 };
             });
     }
@@ -480,8 +489,7 @@ class DashboardView extends View {
         $container.attr('data-y', o.y);
         $container.attr('data-height', o.height);
         $container.attr('data-width', o.width);
-        $container.css('height', (o.height *
-            this.getThemeManager().getParam('dashboardCellHeight')) + 'px');
+        $container.css('height', (o.height * this.cellHeight) + 'px');
 
         $item.attr('data-id', o.id);
         $item.attr('data-name', o.name);
diff --git a/client/src/views/settings/fields/dashboard-layout.js b/client/src/views/settings/fields/dashboard-layout.js
index 3414e7c813..bdda511bac 100644
--- a/client/src/views/settings/fields/dashboard-layout.js
+++ b/client/src/views/settings/fields/dashboard-layout.js
@@ -37,6 +37,7 @@ export default class SettingsDashboardLayoutFieldView extends BaseFieldView {
     validationElementSelector = 'button[data-action="addDashlet"]'
 
     WIDTH_MULTIPLIER = 3
+    HEIGHT_MULTIPLIER = 4
 
     data() {
         return {
@@ -170,7 +171,7 @@ export default class SettingsDashboardLayoutFieldView extends BaseFieldView {
                 x: 0,
                 y: 0,
                 w: 2 * this.WIDTH_MULTIPLIER,
-                h: 2,
+                h: 2 * this.HEIGHT_MULTIPLIER,
             }
         );
     }
@@ -383,9 +384,9 @@ export default class SettingsDashboardLayoutFieldView extends BaseFieldView {
                 id: $el.data('id'),
                 name: $el.data('name'),
                 x: x / this.WIDTH_MULTIPLIER,
-                y: y,
+                y: y / this.HEIGHT_MULTIPLIER,
                 width: w / this.WIDTH_MULTIPLIER,
-                height: h,
+                height: h / this.HEIGHT_MULTIPLIER,
             };
         });
 
@@ -398,7 +399,7 @@ export default class SettingsDashboardLayoutFieldView extends BaseFieldView {
 
             const grid = this.grid = GridStack.init({
                 minWidth: 4,
-                cellHeight: 60,
+                cellHeight: 20,
                 margin: 10,
                 column: 12,
                 resizable: {
@@ -421,9 +422,9 @@ export default class SettingsDashboardLayoutFieldView extends BaseFieldView {
                     $item.get(0),
                     {
                         x: o.x * this.WIDTH_MULTIPLIER,
-                        y: o.y,
+                        y: o.y * this.HEIGHT_MULTIPLIER,
                         w: o.width * this.WIDTH_MULTIPLIER,
-                        h: o.height,
+                        h: o.height * this.HEIGHT_MULTIPLIER,
                     }
                 );
             });