maglevcms 1.8.0 → 2.0.0.beta1

data/app/frontend/editor/components/section-highlighter/index.vue

@@ -1,40 +1,37 @@
 <template>
   <div
     class="h-48 absolute pointer-events-none transition duration-200 ease-in-out"
-    :style="style"
+    :style="{...style}"
     v-if="previewReady"
   >
     <div
       class="w-full h-full relative mx-auto border-solid border-0 border-t-4 border-b-4"
       :class="{
-        tablet: hasEnoughWidthForTablet,
-        mobile: hasEnoughWidthForMobile,
-        'border-transparent': !hoveredSection,
-        'border-editor-primary': hoveredSection,
+        'border-transparent': !mustBeDisplayed,
+        'border-editor-primary': mustBeDisplayed,
       }"
     >
       <transition
         name="slide-fade"
         mode="out-in"
-        v-on:after-leave="afterAnimationDone"
       >
         <top-left-actions
           :hovered-section="hoveredSection"
-          v-if="hoveredSection"
+          v-if="mustBeDisplayed"
         />
       </transition>
 
       <transition name="reverse-slide-fade" mode="out-in">
         <top-right-actions
           :hoveredSection="hoveredSection"
-          v-if="hoveredSection"
+          v-if="mustBeDisplayed"
         />
       </transition>
 
       <transition name="slide-up-fade" mode="out-in">
         <bottom-actions
           :hovered-section="hoveredSection"
-          v-if="hoveredSection"
+          v-if="mustBeDisplayed"
         />
       </transition>
     </div>
@@ -42,11 +39,11 @@
 </template>
 
 <script>
-// import { mapState } from 'vuex'
 import TransformationMixin from '@/mixins/preview-transformation'
 import TopLeftActions from './top-left-actions.vue'
 import TopRightActions from './top-right-actions.vue'
 import BottomActions from './bottom-actions.vue'
+import { debounce } from '@/misc/utils'
 
 export default {
   name: 'SectionHighlighter',
@@ -56,69 +53,73 @@ export default {
     hoveredSection: { type: Object },
   },
   data() {
-    return { shadow: null }
+    return { style: {}, isScrolling: false, boundingRect: null }
   },
   mounted() {
-    // NOTE: optimized version to update the highlighter when scrolling the iframe
     window.addEventListener('maglev:preview:scroll', this.onPreviewScroll)
+    this.waitUntilScrollingDone = debounce(this.onEndPreviewScrolling.bind(this), 800)
   },
   beforeDestroy() {
     window.removeEventListener('maglev:preview:scroll', this.onPreviewScroll)
   },
   computed: {
-    style() {
-      if (!this.hoveredSection && !this.shadow) return {}
-      const { sectionRect } = this.hoveredSection || this.shadow
-      return this.performStyle(sectionRect)
-    },
     minTop() {
       return this.hoveredSection?.sectionOffsetTop || 0
     },
+    mustBeDisplayed() {
+      return !!this.hoveredSection && !this.isScrolling
+    }
   },
   methods: {
-    afterAnimationDone() {
-      this.shadow = null
+    onPreviewScroll(event) {      
+      this.isScrolling = true
+      this.boundingRect = event.detail.boundingRect      
+      this.waitUntilScrollingDone()
+    },
+    onEndPreviewScrolling() {
+      this.isScrolling = false 
+      this.applyStyle(this.boundingRect)
     },
-    onPreviewScroll(event) {
-      let self = this
-      window.requestAnimationFrame(() => {
-        const newStyle = this.performStyle(event.detail.boundingRect)
-        Object.entries(newStyle).forEach(
-          ([key, value]) => (self.$el.style[key] = value),
-        )
-      })
+    applyStyle(boundingRect) {
+      if (!boundingRect || !this.$el?.style) return // when we switch pages, the element is not mounted yet
+      const self = this
+      const newStyle = this.calculateStyle(boundingRect)
+      Object.entries(newStyle).forEach(
+        ([key, value]) => (self.$el.style[key] = value),
+      )
     },
-    performStyle(boundingRect) {
+    calculateStyle(boundingRect) {
       const isSticky = boundingRect.top < this.minTop
       const top = isSticky ? this.minTop : boundingRect.top
       const height = isSticky
         ? boundingRect.height - (this.minTop - boundingRect.top)
         : boundingRect.height
-
+      
       return {
         top: `${top * this.previewScaleRatio}px`,
-        left: `calc(50% - ${this.previewLeftPadding}px / 2 - (${boundingRect.width}px * ${this.previewScaleRatio}) / 2 + ${this.previewLeftPadding}px)`,
+        left: `calc(${this.calculateLeftOffset()}px + (${boundingRect.left}px * ${this.previewScaleRatio}))`,
         height: `${height * this.previewScaleRatio}px`,
         width: `calc(${boundingRect.width}px * ${this.previewScaleRatio})`,
       }
     },
+    calculateLeftOffset() {
+      const sidebarWidth =
+        document.querySelector('.content-area > aside')?.offsetWidth || 0
+      const iframePadding = document.getElementById('iframe-wrapper').getBoundingClientRect().left
+      return iframePadding - sidebarWidth
+    }, 
   },
   watch: {
-    hoveredSection(value, oldValue) {
-      if (!value) {
-        this.shadow = { ...oldValue }
-      }
-    },
-  },
-}
-</script>
+    hoveredSection: {
+      handler(value) {
+        if (!value) return
 
-<style scoped>
-.mobile {
-  width: 375px;
-}
-
-.tablet {
-  width: 1024px;
+        this.isScrolling = false
+        this.boundingRect = value.sectionRect
+        this.applyStyle(value.sectionRect)
+      }, 
+      immediate: true
+    }
+  },
 }
-</style>
+</script>

data/app/frontend/editor/components/section-list/add-button.vue

@@ -0,0 +1,39 @@
+<template>
+  <div 
+    class="absolute left-0 w-full h-7 group bg-red-500/0 z-10"
+    :class="{ 
+      '-top-5': isTop,
+      '-bottom-5': !isTop
+    }"
+  >
+    <!-- <div class="relative hidden group-hover:block h-0.5 w-full bg-gray-600 top-[calc(theme('spacing[7]')/2+theme('spacing[0.5]')/-2)]"></div> -->
+
+    <div class="absolute top-0 left-0 w-full justify-center flex opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+      <uikit-icon-button 
+        iconName="ri-add-line" 
+        dark 
+        class="border-4 border-white w-10 h-10" 
+        @click="addSection"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SectionListAddButton',
+  props: {   
+    insertAt: { type: String, required: false },
+  },
+  computed: {
+    isTop() {
+      return this.insertAt === 'top'
+    },
+  },
+  methods: {
+    addSection() {
+      this.$router.push({ name: 'addSectionAfter', params: { sectionId: this.insertAt } })      
+    },
+  },
+}
+</script>

data/app/frontend/editor/components/section-list/index.vue

@@ -1,20 +1,31 @@
 <template>
-  <div>
-    <div v-if="isListEmpty" class="text-center mt-8">
-      <span class="text-gray-800">{{ $t('sections.listPane.empty') }}</span>
+  <div class="flex flex-col h-full">
+    <div class="relative flex-auto h-0 overflow-y-auto py-6">
+      <div v-if="isListEmpty" class="text-center mt-8">
+        <span class="text-gray-800">{{ $t('sections.listPane.empty') }}</span>
+      </div>
+      <draggable :list="list" @end="onSortEnd" v-bind="dragOptions" v-else>
+        <transition-group type="transition" name="flip-list">
+          <list-item
+            v-for="(section, index) in list"
+            :key="section.id"
+            :section="section"
+            :index="index"
+            @on-dropdown-toggle="onDropdownToggle"
+            class="mb-3"
+          />
+        </transition-group>
+      </draggable>
+    </div>
+    <div class="mt-auto relative">
+      <button
+        class="big-submit-button bg-editor-primary"
+        @click="addSection"
+      >
+        <uikit-icon name="ri-add-line" size="1.5rem" />
+        <span class="ml-3">{{ $t('sections.listPane.addButton') }}</span>
+      </button>
     </div>
-    <draggable :list="list" @end="onSortEnd" v-bind="dragOptions" v-else>
-      <transition-group type="transition" name="flip-list">
-        <list-item
-          v-for="(section, index) in list"
-          :key="section.id"
-          :section="section"
-          :index="index"
-          @on-dropdown-toggle="onDropdownToggle"
-          class="mb-3"
-        />
-      </transition-group>
-    </draggable>
   </div>
 </template>
 
@@ -41,11 +52,15 @@ export default {
         group: 'description',
         disabled: false,
         ghostClass: 'ghost',
+        handle: '.cursor-move',
       }
     },
   },
   methods: {
     ...mapActions(['moveSection']),
+    addSection() {
+      this.$router.push({ name: 'addSection' })
+    },
     onSortEnd(event) {
       this.moveSection({
         from: event.oldIndex,

data/app/frontend/editor/components/section-list/list-item.vue

@@ -1,33 +1,42 @@
 <template>
   <div
-    class="bg-gray-100 rounded-md px-4 py-3 flex items-center justify-between text-gray-800 cursor-move"
+    class="bg-gray-100 rounded-md pr-2 flex items-center text-gray-800 relative"
   >
+    <add-button insertAt="top" v-if="isFirst" />
+    <add-button :insertAt="section.id" />
+
+    <div class="flex flex-col cursor-move px-2 py-3">
+      <uikit-icon name="ri-draggable" />
+    </div>
+
     <router-link
       :to="{ name: 'editSection', params: { sectionId: section.id } }"
-      class="flex items-center"
+      class="flex flex-col overflow-hidden py-3 pr-2 leading-0.5 flex-1"
     >
-      <span>{{ name | truncate(40) }}</span>
+      <span :class="{ 'text-gray-500 text-xs': label }">{{ name | truncate(40) }}</span>
+      <span class="text-gray-800 truncate" v-if="label">{{ label | truncate(100) }}</span>
     </router-link>
+
     <uikit-confirmation-button
       @confirm="removeSection(section.id)"
       v-on="$listeners"
+      class="ml-auto"
     >
-      <button
-        class="px-1 py-1 rounded-full bg-gray-600 bg-opacity-0 hover:text-gray-900 text-gray-600 focus:outline-none hover:bg-opacity-10 transition-colors duration-200"
-      >
-        <uikit-icon name="ri-close-line" size="1.25rem" />
-      </button>
+      <uikit-icon-button iconName="delete-bin-line" />
     </uikit-confirmation-button>
   </div>
 </template>
 
 <script>
 import { mapActions } from 'vuex'
+import AddButton from './add-button.vue'
 
 export default {
   name: 'SectionListItem',
+  components: { AddButton },
   props: {
     section: { type: Object, required: true },
+    index: { type: Number, required: true },
   },
   computed: {
     name() {
@@ -37,6 +46,12 @@ export default {
         ) || this.section.name
       )
     },
+    label() {
+      return this.section.label
+    },
+    isFirst() {
+      return this.index === 0
+    },
   },
   methods: {
     ...mapActions(['removeSection']),

data/app/frontend/editor/components/section-pane/block-list/index.vue

@@ -47,6 +47,7 @@ export default {
         group: 'description',
         disabled: false,
         ghostClass: 'ghost',
+        handle: '.cursor-move',
       }
     },
   },

data/app/frontend/editor/components/section-pane/block-list/list-item.vue

@@ -1,14 +1,17 @@
 <template>
   <div
-    class="bg-gray-100 rounded-md px-4 py-3 flex items-center justify-between text-gray-800"
-    :class="{ 'cursor-move': isList }"
+    class="bg-gray-100 rounded-md pr-2 flex items-center text-gray-800"
+    :class="{ 'pl-4': !isList }"
   >
+    <div class="flex flex-col cursor-move px-2 py-3" v-if="isList">
+      <uikit-icon name="ri-draggable" />
+    </div>
     <router-link
       :to="{
         name: 'editSectionBlock',
         params: { sectionBlockId: sectionBlock.id },
       }"
-      class="flex items-center"
+      class="flex items-center py-3 overflow-hidden"
     >
       <div class="h-8 w-8 bg-gray-400 mr-3" v-if="image">
         <img
@@ -18,15 +21,15 @@
           @load="() => (imageLoaded = true)"
         />
       </div>
-      <span>{{ label | truncate(40) }}</span>
+      <span class="truncate">{{ label | truncate(40) }}</span>
     </router-link>
-    <div class="flex items-center">
+    <div class="flex items-center ml-auto pl-2">
       <slot name="actions"></slot>
       <uikit-confirmation-button
         @confirm="removeSectionBlock(sectionBlock.id)"
         v-on="$listeners"
       >
-        <uikit-list-item-button iconName="ri-close-line" />
+        <uikit-icon-button iconName="delete-bin-line" />
       </uikit-confirmation-button>
     </div>
   </div>

data/app/frontend/editor/components/section-pane/block-tree/new-nested-block-button.vue

@@ -8,7 +8,7 @@
       v-if="hasMultipleTypes"
     >
       <template v-slot:button>
-        <uikit-list-item-button iconName="ri-add-line" />
+        <uikit-icon-button iconName="ri-add-line" />
       </template>
       <template v-slot:content>
         <div class="w-full flex flex-col">
@@ -23,7 +23,7 @@
         </div>
       </template>
     </uikit-dropdown>
-    <uikit-list-item-button
+    <uikit-icon-button
       iconName="ri-add-line"
       @click.native="addNestedSectionBlock"
       v-else

data/app/frontend/editor/components/section-pane/block-tree/tree-node.vue

@@ -14,13 +14,13 @@
             v-on="$listeners"
           />
 
-          <uikit-list-item-button
+          <uikit-icon-button
             iconName="arrow-up-s-line"
             @click.native="moveSectionBlockUp"
             v-if="index > 0"
           />
 
-          <uikit-list-item-button
+          <uikit-icon-button
             iconName="arrow-down-s-line"
             @click.native="moveSectionBlockDown"
             v-if="!last"

data/app/frontend/editor/components/sidebar-nav/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <nav class="w-16 flex flex-col justify-between">
+    <div
+      class="flex justify-center h-full w-full animate-pulse"
+      v-if="!currentPage"
+    >
+      <div class="w-6 bg-gray-200 rounded h-48 my-6"></div>
+    </div>
+    <ol class="divide-y divide-gray-300 px-4" v-else>
+      <li>
+        <sidebar-nav-link
+          routerLinkName="listPages"
+          :active="isListPagesActive"
+          iconName="ri-file-copy-line"
+          :tooltipMessage="$t('sidebarNav.listPagesTooltip')"
+        />
+      </li>
+      <li>
+        <sidebar-nav-link
+          :routerLinkName="'listSections'"
+          :active="isSectionListPaneActive"
+          iconName="ri-stack-line"
+          :tooltipMessage="$t('sidebarNav.managePageSectionsTooltip')"        
+        />
+      </li>
+      <li v-if="hasStyle">
+        <sidebar-nav-link
+          :routerLinkName="'editStyle'"
+          :active="isEditStylePaneActive"
+          iconName="ri-drop-line"
+          iconSize="1.25rem"
+          :tooltipMessage="$t('sidebarNav.editStyleTooltip')"        
+        />        
+      </li>
+      <li>
+        <sidebar-nav-link
+          :isRouterLink="false"
+          iconName="image-line"
+          :tooltipMessage="$t('sidebarNav.openImageLibraryTooltip')"
+          @click.prevent="openImageLibraryModal"
+        />        
+      </li>      
+      <li></li>
+    </ol>
+
+    <ol class="divide-y divide-gray-300 px-4">
+      <li></li>
+      <li>
+        <sidebar-nav-link
+          :isRouterLink="false"
+          :linkUrl="leaveEditorUrl"
+          iconName="logout-box-r-line"
+          :tooltipMessage="$t('sidebarNav.leaveEditorTooltip')"
+        />
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+import ImageLibrary from '@/components/image-library/index.vue'
+import SidebarNavLink from './link.vue'
+
+export default {
+  name: 'SidebarNav',
+  components: { 
+    SidebarNavLink 
+  },
+  computed: {
+    hasStyle() {
+      return !this.isBlank(this.currentStyle)
+    },
+    isListPagesActive() {
+      return this.$route.name === 'listPages'
+    },
+    isAddSectionPaneActive() {
+      return this.$route.name === 'addSection'
+    },
+    isSectionListPaneActive() {
+      return this.$route.name === 'listSections'
+    },
+    isEditStylePaneActive() {
+      return this.$route.name === 'editStyle'
+    },
+    isEditPageActive() {
+      return this.$route.name === 'editPageSettings'
+    },
+    leaveEditorUrl() {
+      return window.leaveUrl
+    },
+  },
+  methods: {
+    openImageLibraryModal() {
+      this.openModal({
+        title: this.$t('imageLibrary.title'),
+        component: ImageLibrary,
+        props: { modalClass: 'w-216' },
+      })
+    },
+  },
+}
+</script>

data/app/frontend/editor/components/sidebar-nav/link.vue

@@ -0,0 +1,60 @@
+<template>
+  <component 
+    :is="isRouterLink ? 'router-link' : 'a'"
+    v-bind="linkProps"
+    v-on="$listeners"
+    class="flex justify-center py-5 -ml-4 -mr-4 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
+    :class="{
+      'bg-white': !active,
+      'bg-editor-primary bg-opacity-5': active,
+    }"
+    v-tooltip.right="tooltipMessage"
+  >
+    <uikit-icon :name="iconName" :size="iconSize" />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'SidebarNavLink',
+  props: {
+    isRouterLink: {
+      type: Boolean,
+      default: true,
+    },
+    routerLinkName: {
+      type: String,
+      required: false,
+    },
+    linkUrl: {
+      type: String,
+      default: '#',
+      required: false,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    iconName: {
+      type: String,
+      required: true,
+    },
+    iconSize: {
+      type: String,
+      default: '1.5rem',
+    },
+    tooltipMessage: {
+      type: String,
+      default: null,
+      required: false,
+    },
+  },
+  computed: {
+    linkProps() {
+      return this.isRouterLink ? {
+        to: { name: this.routerLinkName },
+      } : { href: this.linkUrl }
+    },
+  },
+}
+</script>

data/app/frontend/editor/components/theme-section-list/category.vue

@@ -0,0 +1,47 @@
+<template>
+  <uikit-accordion
+    :key="index"
+    headerClass="px-3 py-3 mb-3 bg-editor-primary text-white rounded-sm"
+  >
+    <div slot="header" class="flex items-center">
+      <div class="capitalize-first">{{ name }}</div>
+      <div class="ml-2 px-3 bg-white bg-opacity-25 text-xs rounded-full">
+        {{ category.children.length }}
+      </div>
+    </div>
+    <div class="pt-1">
+      <list-item
+        v-for="section in category.children"
+        :key="section.id"
+        :section="section"
+        :insertAfter="insertAfter"
+      />
+
+      <div
+        class="text-center pt-2 pb-6"
+        v-if="category.children.length === 0"
+      >
+        {{ $t('themeSectionList.emptyCategory') }}
+      </div>
+    </div>
+  </uikit-accordion>
+</template>
+
+<script>
+import ListItem from './list-item.vue'
+
+export default {
+  name: 'ThemeSectionListCategory',
+  components: { ListItem },
+  props: {
+    index: { type: Number, required: true },
+    category: { type: Object, required: true },
+    insertAfter: { type: String },
+  },
+  computed: {
+    name() {
+      return this.$st(`${this.currentI18nScope}.categories.${this.category.id}.name`) ?? this.category.name
+    },
+  },
+}
+</script>