CSS Animations

src/components/CMyPageElem/CMyPageElem.ts

@@ -63,6 +63,7 @@ export default defineComponent({
     const globalStore = useGlobalStore()
 
     const editOn = ref(false)
+    const visuEditor = ref(false)
     const addOn = ref(false)
     const myelemVoid = ref({ _id: objectId(), active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value } as IMyElem)
 
@@ -107,6 +108,7 @@ export default defineComponent({
     function selElemClick(myelem: IMyElem) {
       console.log('mypageelem selElemClick', myelem)
       selElem.value = myelem
+      visuEditor.value = !!myelem
     }
 
     function mounted() {
@@ -127,6 +129,7 @@ export default defineComponent({
       rec, myelems,
       mypathin,
       editOn,
+      visuEditor,
       addOn,
       tools,
       shared_consts,

src/components/CMyPageElem/CMyPageElem.vue

@@ -9,10 +9,20 @@
         icon="fas fa-pencil-alt"
       >
       </q-toggle>
+
+      <q-toggle
+        v-if="tools.isManager()"
+        v-model="visuEditor"
+        color="green"
+        @update:model-value="changeVisuDrawer(mypathin, editOn)"
+        icon="fas fa-pencil-alt"
+      >
+      </q-toggle>
+
       <q-drawer
-        v-model="editOn"
+        v-model="visuEditor"
         side="right"
-        :width="400"
+        :width="350"
         :breakpoint="700"
         elevated
       >
@@ -25,7 +35,7 @@
               color="white"
               icon="close"
               @click="
-                editOn = false;
+                visuEditor = false;
               "
             ></q-btn>
           </q-bar>
@@ -38,7 +48,7 @@
         </q-scroll-area>
       </q-drawer>
 
-      <div class="q-ma-sm q-gutter-sm q-pa-xs">
+      <div class="q-ma-xs q-gutter-xs q-pa-xs">
         <div v-if="!!rec.img1" class="text-center">
           <q-img :src="`` + rec.img1" class="img"></q-img>
         </div>