From e0766d488a54366903b1b6128ada069ff416b1f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Fri, 24 Mar 2023 15:53:46 +0100
Subject: [PATCH] Turn builder toolbox buttons into button-group

---
 .../compose/src/views/Admin/Pages/Builder.vue | 64 ++++++++---------
 .../web/reporter/src/views/Report/Builder.vue | 68 +++++++++++--------
 2 files changed, 74 insertions(+), 58 deletions(-)

diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue
index e29285e31..3b6bde0c6 100644
--- a/client/web/compose/src/views/Admin/Pages/Builder.vue
+++ b/client/web/compose/src/views/Admin/Pages/Builder.vue
@@ -75,39 +75,41 @@
               />
             </div>
 
-            <b-button
-              data-test-id="button-edit"
-              :title="$t('tooltip.edit.block')"
-              variant="outline-light"
-              class="border-0"
-              @click="editBlock(index)"
-            >
-              <font-awesome-icon
-                :icon="['far', 'edit']"
-              />
-            </b-button>
+            <b-button-group>
+              <b-button
+                data-test-id="button-edit"
+                :title="$t('tooltip.edit.block')"
+                variant="outline-light"
+                class="border-0"
+                @click="editBlock(index)"
+              >
+                <font-awesome-icon
+                  :icon="['far', 'edit']"
+                />
+              </b-button>
 
-            <b-button
-              :title="$t('tooltip.clone.block')"
-              variant="outline-light"
-              class="border-0"
-              @click="cloneBlock(index)"
-            >
-              <font-awesome-icon
-                :icon="['far', 'clone']"
-              />
-            </b-button>
+              <b-button
+                :title="$t('tooltip.clone.block')"
+                variant="outline-light"
+                class="border-0"
+                @click="cloneBlock(index)"
+              >
+                <font-awesome-icon
+                  :icon="['far', 'clone']"
+                />
+              </b-button>
 
-            <b-button
-              :title="$t('tooltip.copy.block')"
-              variant="outline-light"
-              class="border-0"
-              @click="copyBlock(index)"
-            >
-              <font-awesome-icon
-                :icon="['far', 'copy']"
-              />
-            </b-button>
+              <b-button
+                :title="$t('tooltip.copy.block')"
+                variant="outline-light"
+                class="border-0"
+                @click="copyBlock(index)"
+              >
+                <font-awesome-icon
+                  :icon="['far', 'copy']"
+                />
+              </b-button>
+            </b-button-group>
 
             <c-input-confirm
               class="ml-1"
diff --git a/client/web/reporter/src/views/Report/Builder.vue b/client/web/reporter/src/views/Report/Builder.vue
index 52ce4f8f9..24aefe1c1 100644
--- a/client/web/reporter/src/views/Report/Builder.vue
+++ b/client/web/reporter/src/views/Report/Builder.vue
@@ -91,34 +91,36 @@
           class="h-100 editable-block"
         >
           <div
-            class="add-element d-flex align-items-center justify-items-between mr-3 mt-3 pr-1"
+            class="toolbox border-0 p-2 m-0 text-light text-center"
           >
-            <b-button
-              variant="link"
-              class="text-light"
-              @click="openDisplayElementSelector(index)"
-            >
-              <font-awesome-icon
-                :icon="['fas', 'plus']"
-                class="h4 mb-0"
-              />
-            </b-button>
+            <b-button-group>
+              <b-button
+                :title="$t('tooltip.edit.block')"
+                variant="outline-light"
+                class="border-0"
+                @click="openDisplayElementSelector(index)"
+              >
+                <font-awesome-icon
+                  :icon="['fas', 'plus']"
+                />
+              </b-button>
 
-            <b-button
-              variant="link"
-              class="text-light"
-              :title="$t('builder:tooltip.edit.block')"
-              @click="editBlock(index)"
-            >
-              <font-awesome-icon
-                :icon="['far', 'edit']"
-                class="h5 mb-0"
-              />
-            </b-button>
+              <b-button
+                :title="$t('builder:tooltip.edit.block')"
+                variant="outline-light"
+                class="border-0"
+                @click="editBlock(index)"
+              >
+                <font-awesome-icon
+                  :icon="['far', 'edit']"
+                />
+              </b-button>
+            </b-button-group>
 
             <c-input-confirm
+              link
               size="md"
-              variant="link text-danger"
+              class="ml-1"
               @confirmed="deleteBlock(index)"
             />
           </div>
@@ -916,17 +918,29 @@ export default {
 </script>
 
 <style lang="scss">
-.add-element {
+div.toolbox {
   position: absolute;
-  background-color: #1e2224;
+  background-color: $dark;
   bottom: 0;
   left: 0;
-  z-index: 1021;
-  opacity: 0.5;
+  z-index: 1001;
   border-top-right-radius: 10px;
+  opacity: 0.5;
+  pointer-events: none;
 
   &:hover {
     opacity: 1;
   }
+
+  & * {
+    pointer-events: auto;
+  }
+}
+
+[dir="rtl"] {
+  div.toolbox {
+    left: 0;
+    right: auto;
+  }
 }
 </style>