From ac06c00805286a407df7af0869e60b7d9a7b6f2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Mon, 25 Nov 2024 11:39:03 +0100
Subject: [PATCH] Fix inline actions for record blocks on hover interaction

---
 .../components/Admin/Module/UniqueValues.vue  | 15 ++++++++---
 .../PageBlocks/Navigation/Configurator.vue    | 25 +++++++++++++++----
 .../Navigation/NavTypes/Dropdown.vue          | 15 ++++++++---
 .../src/components/PageBlocks/RecordBase.vue  |  4 +--
 .../components/PageBlocks/RecordEditor.vue    |  2 +-
 .../PageBlocks/TabsConfigurator.vue           |  5 +++-
 .../compose/src/views/Admin/Modules/Edit.vue  | 15 ++++++++---
 .../compose/src/views/Admin/Pages/Edit.vue    | 10 ++++++--
 8 files changed, 71 insertions(+), 20 deletions(-)

diff --git a/client/web/compose/src/components/Admin/Module/UniqueValues.vue b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
index e4e7a6a31..f13b7d27e 100644
--- a/client/web/compose/src/components/Admin/Module/UniqueValues.vue
+++ b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
@@ -77,13 +77,22 @@
               <th scope="col">
                 {{ $t("type") }}
               </th>
-              <th scope="col" style="width: 250px;">
+              <th
+                scope="col"
+                style="width: 250px;"
+              >
                 {{ $t("valueModifiers") }}
               </th>
-              <th scope="col" style="width: 250px;">
+              <th
+                scope="col"
+                style="width: 250px;"
+              >
                 {{ $t("multiValues") }}
               </th>
-              <th scope="col" style="width: 150px;" />
+              <th
+                scope="col"
+                style="width: 150px;"
+              />
             </tr>
           </thead>
 
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
index 85eba86b1..ce5c8a229 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
@@ -97,17 +97,29 @@
               >
                 <thead class="text-primary">
                   <tr>
-                    <th scope="col" style="width: auto;" />
+                    <th
+                      scope="col"
+                      style="width: auto;"
+                    />
 
-                    <th scope="col" style="min-width: 200px;">
+                    <th
+                      scope="col"
+                      style="min-width: 200px;"
+                    >
                       {{ $t("navigation.type") }}
                     </th>
 
-                    <th scope="col" style="min-width: 200px;">
+                    <th
+                      scope="col"
+                      style="min-width: 200px;"
+                    >
                       {{ $t("navigation.color") }}
                     </th>
 
-                    <th scope="col" style="min-width: 200px;">
+                    <th
+                      scope="col"
+                      style="min-width: 200px;"
+                    >
                       {{ $t("navigation.background") }}
                     </th>
 
@@ -119,7 +131,10 @@
                       {{ $t("navigation.enabled") }}
                     </th>
 
-                    <th scope="col" style="width: auto; min-width: 100px;" />
+                    <th
+                      scope="col"
+                      style="width: auto; min-width: 100px;"
+                    />
                   </tr>
                 </thead>
 
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
index 0689480bc..0183d3663 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
@@ -43,13 +43,22 @@
       >
         <thead>
           <tr class="text-primary">
-            <th scope="col" style="min-width: 200px;">
+            <th
+              scope="col"
+              style="min-width: 200px;"
+            >
               {{ $t("navigation.text") }}
             </th>
-            <th scope="col" style="min-width: 200px;">
+            <th
+              scope="col"
+              style="min-width: 200px;"
+            >
               {{ $t("navigation.url") }}
             </th>
-            <th scope="col" style="min-width: 200px;">
+            <th
+              scope="col"
+              style="min-width: 200px;"
+            >
               {{ $t('navigation.openIn') }}
             </th>
             <th
diff --git a/client/web/compose/src/components/PageBlocks/RecordBase.vue b/client/web/compose/src/components/PageBlocks/RecordBase.vue
index 9cf102236..68269ee30 100644
--- a/client/web/compose/src/components/PageBlocks/RecordBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordBase.vue
@@ -25,7 +25,7 @@
           :label-cols-xl="options.horizontalFieldLayoutEnabled && '5'"
           :content-cols-md="options.horizontalFieldLayoutEnabled && '6'"
           :content-cols-xl="options.horizontalFieldLayoutEnabled && '7'"
-          :class="columnWrapClass"
+          :class="`field-container ${columnWrapClass}`"
           :style="fieldWidth"
         >
           <template #label>
@@ -167,7 +167,7 @@ export default {
 
     fieldLayoutClass () {
       const classes = {
-        default: 'd-flex flex-column',
+        default: 'd-flex flex-column gap-2',
         noWrap: 'd-flex gap-2',
         wrap: 'row no-gutters',
       }
diff --git a/client/web/compose/src/components/PageBlocks/RecordEditor.vue b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
index b89d0f533..6e8907aab 100644
--- a/client/web/compose/src/components/PageBlocks/RecordEditor.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
@@ -21,7 +21,7 @@
         <div
           v-if="canDisplay(field)"
           :key="field.id"
-          :class="columnWrapClass"
+          :class="`field-container ${columnWrapClass}`"
           :style="fieldWidth"
         >
           <field-editor
diff --git a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
index d4ecabd45..27e052d4f 100644
--- a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
@@ -124,7 +124,10 @@
           <tr>
             <th scope="col" />
 
-            <th class="d-flex align-items-center text-primary" scope="col">
+            <th
+              class="d-flex align-items-center text-primary"
+              scope="col"
+            >
               {{ $t('tabs.table.columns.title.label') }}
               <c-hint
                 :tooltip="$t('interpolationFootnote', ['${record.values.fieldName}', '${recordID}', '${ownerID}', '${userID}'])"
diff --git a/client/web/compose/src/views/Admin/Modules/Edit.vue b/client/web/compose/src/views/Admin/Modules/Edit.vue
index a3d707340..f5e707afb 100644
--- a/client/web/compose/src/views/Admin/Modules/Edit.vue
+++ b/client/web/compose/src/views/Admin/Modules/Edit.vue
@@ -257,18 +257,27 @@
                             </div>
                           </th>
 
-                          <th class="text-primary" scope="col">
+                          <th
+                            class="text-primary"
+                            scope="col"
+                          >
                             {{ $t('general:label.type') }}
                           </th>
 
                           <th scope="col" />
                           <th scope="col" />
 
-                          <th class="text-primary text-center pr-3" scope="col">
+                          <th
+                            class="text-primary text-center pr-3"
+                            scope="col"
+                          >
                             {{ $t('general:label.required') }}
                           </th>
 
-                          <th class="text-primary text-center pl-2" scope="col">
+                          <th
+                            class="text-primary text-center pl-2"
+                            scope="col"
+                          >
                             {{ $t('general:label.multi') }}
                           </th>
 
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index 9843ce9a3..202870880 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -258,7 +258,10 @@
                 >
                   <b-thead>
                     <tr>
-                      <th scope="col" style="width: 40px;" />
+                      <th
+                        scope="col"
+                        style="width: 40px;"
+                      />
                       <th
                         class="text-primary"
                         scope="col"
@@ -273,7 +276,10 @@
                       >
                         {{ $t('page-layout.handle') }}
                       </th>
-                      <th scope="col" style="min-width: 100px;" />
+                      <th
+                        scope="col"
+                        style="min-width: 100px;"
+                      />
                     </tr>
                   </b-thead>