Added Button.

Stats

src/components/CMyEditElem/CMyEditElem.ts

@@ -80,11 +80,13 @@ export default defineComponent({
     const enableEdit = ref(true)
     const elemChanged = ref(false)
     const enableAdd = ref(true)
+    const tabadd = ref('tools')
 
     const neworder = ref(<number | undefined>0)
 
     const myel = toRef(props, 'myelem')
     const newtype = ref(<any>'')
+    const visuadd = ref(false)
 
     watch(() => myel.value.order, (value, oldval) => {
       mounted()
@@ -111,6 +113,8 @@ export default defineComponent({
 
     function addNewElem(order?: number) {
 
+      visuadd.value = false
+
       const newrec: IMyElem = {
         _id: undefined,
         type: newtype.value,
@@ -324,6 +328,8 @@ export default defineComponent({
       showAnimation,
       tabCard,
       tabElemsText,
+      visuadd,
+      tabadd,
     }
   },
 

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">

src/components/CMyElem/CMyElem.vue

@@ -443,6 +443,28 @@
         <div v-if="editOn" class="elemEdit">Registrazione</div>
         <CRegistration />
       </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.BUTTON">
+        <div v-if="editOn" class="elemEdit"></div>
+        <div
+          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+          @click="clickOnElem"
+        >
+          <q-btn
+            class="text-center"
+            v-if="myel.container"
+            type="a"
+            rounded
+            :label="myel.container"
+            size=""
+            :color="myel.color"
+            :text-color="myel.containerHtml"
+            :icon="myel.container2"
+            :href="myel.link"
+            :target="myel.container3"
+          >
+          </q-btn>
+        </div>
+      </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.DASHBOARD">
         <div v-if="editOn" class="elemEdit">CDashboard</div>
         <CDashboard></CDashboard>
@@ -484,7 +506,10 @@
           Msg di Controllo Verifica Email
         </div>
         <div class="q-pa-md q-gutter-md">
-          <div v-if="tools.isLogged() && !tools.isVerified()" class="text-verified">
+          <div
+            v-if="tools.isLogged() && !tools.isVerified()"
+            class="text-verified"
+          >
             {{ $t('components.authentication.email_verification.link_sent') }}
           </div>
         </div>
@@ -535,7 +560,8 @@
             />
           </template>
           <span class="mybanner"
-            >Aggiornamento APP in corso ... Se dopo 1 minuto non dovesse scomparire questo messaggio, chiudere e riaprire la pagina.</span
+            >Aggiornamento APP in corso ... Se dopo 1 minuto non dovesse
+            scomparire questo messaggio, chiudere e riaprire la pagina.</span
           >
         </q-banner>
       </div>

src/components/CMySelect/CMySelect.vue

@@ -47,7 +47,7 @@
               dense
               @remove="scope.removeAtIndex(scope.index)"
               v-if="checkIfShowRec(scope.opt)"
-              color="white"
+              :color="$q.dark.isActive ? `black` : `white`"
               text-color="mycol"
               class="q-my-none q-ml-xs q-mr-none"
             >
@@ -149,7 +149,7 @@
               dense
               @remove="scope.removeAtIndex(scope.index)"
               v-if="checkIfShowRec(scope.opt)"
-              color="white"
+              :color="$q.dark.isActive ? `black` : `white`"
               class="q-my-none q-ml-xs q-mr-none"
             >
               <q-avatar color="primary" text-color="white" :icon="scope.opt.icon ? scope.opt.icon : ''" size="12px"/>

src/components/CRegistration/CRegistration.vue

@@ -26,12 +26,12 @@
       padding
       arrows
       height="400px"
-      class="bg-primary text-white shadow-1 rounded-borders"
+      :class="($q.dark.isActive ? `text-white`: `text-black`)  + ` bg-primary shadow-1 rounded-borders`"
     >
       <q-carousel-slide name="start" class="column no-wrap flex-center">
         <q-icon name="fas fa-user" size="56px" />
         <div class="q-mt-md text-center">
-          <span class="text-h6"> {{ $t('reg.invitante') }}</span>
+          <span class="text-h6 text-white"> {{ $t('reg.invitante') }}</span>
           <q-card class="dialog_card q-mb-lg">
             <q-card-section class="column q-ma-sm q-pa-sm q-col-gutter-sm">
               <q-btn
@@ -94,7 +94,7 @@
         <div v-else-if="chooseReg">
           <div class="text-center">
             <q-icon name="fas fa-user" size="23px" />
-            <span class="text-h6"> {{ $t('reg.page_title') }}</span>
+            <span class="text-h6 text-white"> {{ $t('reg.page_title') }}</span>
             <q-card class="q-mt-sm dialog_card q-mb-sm">
               <q-card-section>
                 <div
@@ -102,15 +102,15 @@
                   style=""
                   class="row q-ma-sm centermydiv2 q-pa-sm justify-center"
                 >
-                  <span class="text-black text-h7"
+                  <span :class="($q.dark.isActive ? `text-white`: `text-black`) + `text-h7`"
                     >Chiedi alla persona che ti ha invitato su RISO il suo
                     Username e poi :</span
                   ><br />
                   <div class="row items-center">
-                    <div>
+                    <div class="col-12">
                       <p class="text-bold text-center">
                         <span style="font-size: 1.5rem">👇🏻 </span> ⭐️
-                        <span class="text-black">Consigliato ⭐️</span>
+                        <span :class="$q.dark.isActive ? `text-white`: `text-black`">Consigliato ⭐️</span>
                         <span style="font-size: 1.5rem"> 👇🏻 </span>
                       </p>
 
@@ -126,9 +126,9 @@
                       </q-btn>
                     </div>
                   </div>
-                  <span class="text-black"
-                    >oppure se non riesci ad installare Telegram: </span
-                  ><br />
+                  <div :class="$q.dark.isActive ? `text-white`: `text-black` + ` col-12`"
+                    >oppure se non riesci ad installare Telegram:
+                    </div>
                   <q-btn
                     rounded
                     class="flex-item-btn"

src/components/CStatusReg/CStatusReg.vue

@@ -157,8 +157,8 @@
               </q-tab-panel>
               <q-tab-panel name="diffusori">
                 <div class="q-pa-md" style="max-width: 300px">
-                <div class="text-center text-bold text-h6">I Migliori Invitanti su RISO:</div>
-                <div class="text-center"> Indica il numero di persone registrate tramite il link d'invito personale.
+                <div class="text-center text-bold text-h6">Aiuta RISO a crescere</div>
+                <div class="text-center"> Condividi il tuo link d'invito, alimentando nuovi ingressi alla RETE Solidale di RISO.
                 </div>
                   <q-list bordered>
                     <transition-group