Animations, Policy, Toolbar Colors

src/components/CMyPageElem/CMyPageElem.ts

@@ -63,13 +63,22 @@ export default defineComponent({
     const { t } = useI18n()
     const globalStore = useGlobalStore()
 
-    const editOn = ref(false)
+    const editOn = computed({
+      get (): boolean {
+        return !!globalStore.editOn ? globalStore.editOn : false
+      },
+
+      set (value: boolean) {
+        return globalStore.editOn = value
+      }
+    })
     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)
 
 
     const selElem = ref(globalStore.selElem)
+    const site = ref(globalStore.site)
 
     const myelems = computed(() => {
       if (mypathin.value)
@@ -79,7 +88,7 @@ export default defineComponent({
     })
 
     function load() {
-      // console.log('load', mypathin.value)
+      console.log('load', mypathin.value)
 
       if (mypathin.value !== '') {
         globalStore.loadPage('/' + mypathin.value, 'cmypageelem').then(ris => {
@@ -88,7 +97,6 @@ export default defineComponent({
       }
 
       if (tools.isManager()) {
-        editOn.value = tools.getCookie('EDITPAGES', '0') === '-1' ? true : false
         console.log('getcookie: ', editOn.value, mypathin.value)
       }
     }

src/components/CMyPageElem/CMyPageElem.vue

@@ -10,36 +10,28 @@
       >
       </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="visuEditor"
+        v-if="selElem && editOn"
+        show-if-above
+        :breakpoint="800"
         side="right"
-        :width="350"
-        :breakpoint="700"
+        :width="tools.isMobile() ? 350 : 400"
         elevated
       >
-        <q-scroll-area class="fit">
-          <q-bar dense class="bg-primary text-white">
-            <q-toolbar-title> Editor </q-toolbar-title>
-            <q-btn
-              flat
-              round
-              color="white"
-              icon="close"
-              @click="visuEditor = false"
-            ></q-btn>
-          </q-bar>
-          <CMyEditElem :myelem="selElem" :editOn="true" :path="rec.path">
-          </CMyEditElem>
-        </q-scroll-area>
+        <q-bar dense class="q-ma-xs bg-primary text-white">
+          <q-toolbar-title> Editor </q-toolbar-title>
+          <q-btn
+            flat
+            round
+            size="md"
+            color="white"
+            icon="close"
+            @click="visuEditor = false"
+          ></q-btn>
+        </q-bar>
+        <CMyEditElem :myelem="selElem" :editOn="true" :path="rec.path">
+        </CMyEditElem>
       </q-drawer>
 
       <div class="q-ma-xs q-gutter-xs q-pa-xs">
@@ -77,11 +69,11 @@
         <div v-for="(myelem, ind) in myelems" :key="ind">
           <div>
             <CMyElem
-              v-if="myelem.active || editOn"
+              v-if="(myelem.active || editOn) && !!rec.path"
               :myelem="myelem"
               :editOn="editOn"
               :addOn="addOn"
-              :path="rec.path"
+              :path="!!rec.path ? rec.path : ''"
               :selElem="selElem"
               @selElemClick="selElemClick"
             >
@@ -93,7 +85,7 @@
         </div>
         <div v-if="myelems.length === 0">
           <CMyElem
-            v-if="editOn"
+            v-if="editOn && !!rec.path"
             :myelem="myelemVoid"
             :editOn="editOn"
             :addOn="addOn"