Added Button.

Stats

src/components/CMyEditElem/CMyEditElem.vue

@@ -8,7 +8,17 @@
     "
   >
     <div v-if="!!myel.type">
-      <q-bar v-if="enableEdit" dense class=" q-px-sm">
+      <div class="column">
+        <q-btn
+          v-if="enableAdd"
+          label="Aggiungi"
+          icon="fas fa-plus"
+          color="primary"
+          @click="visuadd = true"
+        >
+        </q-btn>
+      </div>
+      <q-bar v-if="enableEdit" dense class="q-px-sm">
         <q-toggle v-model="myel.active" color="positive" icon="fas fa-eye">
         </q-toggle>
         <!--<q-toggle v-if="tools.isManager()"
@@ -48,27 +58,6 @@
           @click="dupElem(myel.order + 10)"
         >
         </q-btn>
-        <q-select
-          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
-          v-if="enableAdd"
-          v-model="newtype"
-          dense
-          style="width: 150px"
-          :options="shared_consts.TypesElem"
-          emit-value
-          map-options
-        >
-        </q-select>
-        <q-btn
-          v-if="enableAdd"
-          size="sm"
-          dense
-          flat
-          icon="fas fa-plus"
-          color="positive"
-          @click="addNewElem(myel.order - 10)"
-        >
-        </q-btn>
       </q-bar>
       <div class="justify-center row q-ma-xs">
         <q-btn
@@ -95,26 +84,26 @@
         </q-btn>
       </div>
       <div class="row">
-          <q-input
-            label="Lunghezza:"
-            @update:model-value="modifElem"
-            style="width: 100px"
-            v-model="myel.widthimg"
-            filled
-            dense
-            v-on:keyup.enter="saveElem"
-          >
-          </q-input>
-          <q-input
-            label="Altezza:"
-            @update:model-value="modifElem"
-            style="width: 100px"
-            v-model="myel.heightimg"
-            filled
-            dense
-            v-on:keyup.enter="saveElem"
-          >
-          </q-input>
+        <q-input
+          label="Lunghezza:"
+          @update:model-value="modifElem"
+          style="width: 100px"
+          v-model="myel.widthimg"
+          filled
+          dense
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Altezza:"
+          @update:model-value="modifElem"
+          style="width: 100px"
+          v-model="myel.heightimg"
+          filled
+          dense
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
       </div>
 
       <div class="row">
@@ -735,7 +724,7 @@
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
         <div v-if="enableEdit" class="row">
           <q-select
-          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
+            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
             rounded
             outlined
             v-model="myel.container"
@@ -900,6 +889,76 @@
         </div>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME"></div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.BUTTON">
+        <q-input
+          dense
+          label="Colore:"
+          @update:model-value="modifElem"
+          debounce="1000"
+          v-model="myel.color"
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          dense
+          label="Colore Testo:"
+          @update:model-value="modifElem"
+          debounce="1000"
+          v-model="myel.containerHtml"
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          dense
+          label="Link:"
+          @update:model-value="modifElem"
+          debounce="1000"
+          v-model="myel.link"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          dense
+          label="Testo Bottone:"
+          @update:model-value="modifElem"
+          debounce="1000"
+          v-model="myel.container"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          dense
+          label="Icona:"
+          @update:model-value="modifElem"
+          debounce="1000"
+          v-model="myel.container2"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          dense
+          label="Dimensione"
+          @update:model-value="modifElem"
+          debounce="1000"
+          v-model="myel.size"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          dense
+          label="Target:"
+          @update:model-value="modifElem"
+          debounce="1000"
+          v-model="myel.container3"
+          filled
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+      </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
         <div v-if="enableEdit" class="row">
           <q-input
@@ -917,6 +976,90 @@
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL"></div>
     </div>
   </div>
+  <div>
+    <q-dialog
+      v-model="visuadd"
+      transition-show="slide-up"
+      transition-hide="slide-down"
+      :maximized="$q.screen.lt.sm"
+    >
+      <q-card class="dialog_card">
+        <q-bar dense class="bg-primary text-white">
+          Aggiungi Elemento:
+          <q-space />
+          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+        </q-bar>
+
+        <q-card-section class="inset-shadow row q-ma-sm q-pa-sm">
+          <q-tabs v-model="tabadd" inline-label class="bg-gray shadow-2">
+            <q-tab name="tools" label="Strumenti" />
+            <q-tab v-if="tools.isAdmin()" name="others" label="Altri" />
+            <q-tab v-if="tools.isAdmin()" name="others2" label="Altri 2" />
+          </q-tabs>
+
+          <q-tab-panels v-model="tabadd" animated class="row justify-center">
+            <q-tab-panel name="tools">
+              <div
+                v-for="(rec, index) in shared_consts.TypesElem"
+                :key="index"
+                class="q-pa-sm"
+              >
+                <q-btn
+                  v-if="enableAdd"
+                  :label="rec.label"
+                  icon="fas fa-plus"
+                  color="primary"
+                  @click="
+                    newtype = rec.value;
+                    addNewElem(myel.order - 10);
+                  "
+                >
+                </q-btn>
+              </div>
+            </q-tab-panel>
+            <q-tab-panel name="others">
+              <div
+                v-for="(rec, index) in shared_consts.TypesElemAdmin"
+                :key="index"
+                class="q-pa-sm"
+              >
+                <q-btn
+                  v-if="enableAdd"
+                  :label="rec.label"
+                  icon="fas fa-plus"
+                  color="primary"
+                  @click="
+                    newtype = rec.value;
+                    addNewElem(myel.order - 10);
+                  "
+                >
+                </q-btn>
+              </div>
+            </q-tab-panel>
+            <q-tab-panel name="others2">
+              <div
+                v-for="(rec, index) in shared_consts.TypesElemAdminTools"
+                :key="index"
+                class="q-pa-sm"
+              >
+                <q-btn
+                  v-if="enableAdd"
+                  :label="rec.label"
+                  icon="fas fa-plus"
+                  color="primary"
+                  @click="
+                    newtype = rec.value;
+                    addNewElem(myel.order - 10);
+                  "
+                >
+                </q-btn>
+              </div>
+            </q-tab-panel>
+          </q-tab-panels>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
 </template>
 
 <script lang="ts" src="./CMyEditElem.ts">