template dropdown

src/components/MagicoPagebuilder.vue

@@ -14,26 +14,40 @@
           <span class="material-icons-outlined">fullscreen</span>
         </button>
         <div>
-          <button
-            @click.prevent="
-              modalLoad = !modalLoad;
-              pageType = { name: null }
-            "
-            title="Wczytaj szablon do schowka"
-            class="btn btn-outline-primary btn-icon-sm"
-          >
-            <span class="material-icons-outlined">find_replace</span>
-          </button>
-          <button
-            @click.prevent="
-              modalSave = !modalSave;
-              pageType = { name: null }
-            "
-            title="Zapisz szablon do schowka"
-            class="btn btn-outline-success btn-icon-sm"
-          >
-            <span class="material-icons-outlined">save</span>
-          </button>
+          <div class="dropdown">
+            <button
+              class="btn btn-outline-secondary dropdown-toggle"
+              type="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              Szablony
+            </button>
+            <ul class="dropdown-menu">
+              <li>
+                <a
+                  @click.prevent="
+                    modalLoad = !modalLoad;
+                    pageType = { name: null }
+                  "
+                  class="dropdown-item"
+                  href="#"
+                  >Wczytaj szablon</a
+                >
+              </li>
+              <li>
+                <a
+                  @click.prevent="
+                    modalSave = !modalSave;
+                    pageType = { name: null }
+                  "
+                  class="dropdown-item"
+                  href="#"
+                  >Zapisz jako szablon</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
 
         <!-- <button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj
@@ -65,7 +79,6 @@
       </draggable>
 
       <b-modal
-        class_other="modal-xl"
         v-model.value="modalSave"
         title="Zapisz szablon do schowka"
         v-on:onClose="modalSave = false"
@@ -85,7 +98,6 @@
       </b-modal>
 
       <b-modal
-        class_other="modal-xl"
         v-model.value="modalLoad"
         title="Wczytaj szablon ze schowka"
         v-on:onClose="modalLoad = false"
@@ -99,7 +111,7 @@
         </div>
       </b-modal>
 
-      <b-modal class_other="modal-xl" v-model.value="modalCopy" v-on:onClose="modalCopy = false">
+      <b-modal v-model.value="modalCopy" v-on:onClose="modalCopy = false">
         <PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
         <div>
           <button class="btn btn-primary mr-1" :disabled="!pageType.id" @click.prevent="changeBody">

src/components/PagebuilderTemplateLoad.vue

@@ -1,10 +1,9 @@
 <template>
     <div class="form form-group">
         <div class="ms-3">
-            <div class="mb-3" v-for="item, ii in items" :key="ii" :value="item">{{ item.name }} <button
-                    class="btn btn-outline-primary" @click="itemselected = item; changeSelect()">Wczytaj</button>
+            <div class="mb-3 w-100" v-for="item, ii in items" :key="ii" :value="item"> <button
+                    class="btn btn-outline-secondary w-100" @click="itemselected = item; changeSelect()">Wczytaj {{ item.name }}</button>
             </div>
-
         </div>
         <div v-show="items.length == 0"><i>Brak zapisanych szablonów</i></div>
     </div>