feat: Change Section Buttons Position in Layout Editor - MEED-8110 - M…

…eeds-io/MIPs#172 (#280) This change will move Section Buttons to top-right of the container instead of center-right.
Meeds-io · Jan 9, 2025 · bf67cf0 · bf67cf0
1 parent 0bfceb2
commit bf67cf0
Showing 1 changed file with 62 additions and 61 deletions.
diff --git a/...ut-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/SectionMenu.vue b/...ut-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/SectionMenu.vue
@@ -84,67 +84,67 @@
               </v-tooltip>
             </div>
           </v-hover>
-          <v-hover v-model="hoverButton3">
-            <div
-              :style="rightButtonStyle"
-              class="position-absolute">
-              <v-tooltip bottom>
-                <template #activator="{on, attrs}">
-                  <div
-                    v-on="on"
-                    v-bind="attrs">
-                    <v-btn
-                      class="white text-color border-color"
-                      height="32"
-                      width="32"
-                      icon
-                      @click="$root.$emit('layout-edit-section-drawer', index, length)">
-                      <v-icon class="icon-default-color" size="20">fa-edit</v-icon>
-                    </v-btn>
-                  </div>
-                </template>
-                {{ $t('layout.editSection') }}
-              </v-tooltip>
-              <v-tooltip v-if="$root.isAdministrator" bottom>
-                <template #activator="{on, attrs}">
-                  <div
-                    v-on="on"
-                    v-bind="attrs">
-                    <v-btn
-                      :aria-label="$t('layout.cloneSection')"
-                      :loading="savingAsTemplate"
-                      class="white text-color border-color mt-2"
-                      height="32"
-                      width="32"
-                      icon
-                      @click="$root.$emit('layout-section-clone', container, index)">
-                      <v-icon class="icon-default-color" size="20">fa-copy</v-icon>
-                    </v-btn>
-                  </div>
-                </template>
-                {{ $t('layout.cloneSection') }}
-              </v-tooltip>
-              <v-tooltip v-if="$root.isAdministrator" bottom>
-                <template #activator="{on, attrs}">
-                  <div
-                    v-on="on"
-                    v-bind="attrs">
-                    <v-btn
-                      :loading="savingAsTemplate"
-                      class="white text-color border-color mt-2"
-                      height="32"
-                      width="32"
-                      icon
-                      @click="saveAsTemplate">
-                      <v-icon class="icon-default-color" size="20">fa-columns</v-icon>
-                    </v-btn>
-                  </div>
-                </template>
-                {{ $t('layout.saveAsSectionTemplate') }}
-              </v-tooltip>
-            </div>
-          </v-hover>
         </div>
+        <v-hover v-model="hoverButton3">
+          <div
+            :style="rightButtonStyle"
+            class="position-absolute">
+            <v-tooltip bottom>
+              <template #activator="{on, attrs}">
+                <div
+                  v-on="on"
+                  v-bind="attrs">
+                  <v-btn
+                    class="white text-color border-color elevation-2"
+                    height="32"
+                    width="32"
+                    icon
+                    @click="$root.$emit('layout-edit-section-drawer', index, length)">
+                    <v-icon class="icon-default-color" size="20">fa-edit</v-icon>
+                  </v-btn>
+                </div>
+              </template>
+              {{ $t('layout.editSection') }}
+            </v-tooltip>
+            <v-tooltip v-if="$root.isAdministrator" bottom>
+              <template #activator="{on, attrs}">
+                <div
+                  v-on="on"
+                  v-bind="attrs">
+                  <v-btn
+                    :aria-label="$t('layout.cloneSection')"
+                    :loading="savingAsTemplate"
+                    class="white text-color border-color elevation-2 mt-2"
+                    height="32"
+                    width="32"
+                    icon
+                    @click="$root.$emit('layout-section-clone', container, index)">
+                    <v-icon class="icon-default-color" size="20">fa-copy</v-icon>
+                  </v-btn>
+                </div>
+              </template>
+              {{ $t('layout.cloneSection') }}
+            </v-tooltip>
+            <v-tooltip v-if="$root.isAdministrator" bottom>
+              <template #activator="{on, attrs}">
+                <div
+                  v-on="on"
+                  v-bind="attrs">
+                  <v-btn
+                    :loading="savingAsTemplate"
+                    class="white text-color border-color elevation-2 mt-2"
+                    height="32"
+                    width="32"
+                    icon
+                    @click="saveAsTemplate">
+                    <v-icon class="icon-default-color" size="20">fa-columns</v-icon>
+                  </v-btn>
+                </div>
+              </template>
+              {{ $t('layout.saveAsSectionTemplate') }}
+            </v-tooltip>
+          </div>
+        </v-hover>
         <v-hover v-model="hoverButton4">
           <div class="position-sticky z-index-two d-flex justify-center mb-n4 mt-auto">
             <v-tooltip top>
@@ -227,7 +227,8 @@ export default {
     },
     rightButtonStyle() {
       return {
-        right: this.$root.pageFullWindow && '20px' || 0,
+        right: this.$root.pageFullWindow && '0' || '-20px',
+        top: '20px',
       };
     },
   },