maglevcms 2.0.0 → 3.0.0.beta1

data/app/frontend/editor/components/style-pane/index.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="flex flex-col h-full overflow-hidden">
-    <div class="flex-1 overflow-y-scroll px-4">
-      <dynamic-form
-        parentKey="style"
-        :settings="styleSettings"
-        :content="style"
-        :i18nScope="i18nScope"
-        @change="onChange"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-import DynamicForm from '@/components/dynamic-form/index.vue'
-
-export default {
-  name: 'StylePane',
-  components: { DynamicForm },
-  data() {
-    return { style: [] }
-  },
-  mounted() {
-    this.style = this.currentStyle
-  },
-  computed: {
-    styleSettings() {
-      return this.currentTheme.styleSettings
-    },
-    i18nScope() {
-      return `${this.currentStyleI18nScope}.settings`
-    },
-  },
-  methods: {
-    ...mapActions(['previewStyle']),
-    onChange(change) {
-      this.style = this.style.map((value) => {
-        const newValue = { ...value }
-        if (value.id === change.settingId) newValue.value = change.value
-        return newValue
-      })
-      this.previewStyle(this.style)
-    },
-  },
-}
-</script>

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

@@ -1,47 +0,0 @@
-<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>

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

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <category
-      v-for="(category, index) in categories"
-      :index="index"
-      :category="category"
-      :insert-after="insertAfter"
-    />
-  </div>
-</template>
-
-<script>
-import Category from './category.vue'
-
-export default {
-  name: 'ThemeSectionList',
-  components: { Category },
-  props: {
-    insertAfter: { type: String },
-  },
-  computed: {
-    categories() {
-      return this.services.theme.buildCategories(this.currentTheme)
-    },
-  },
-}
-</script>

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

@@ -1,95 +0,0 @@
-<template>
-  <div
-    class="relative mb-6 w-full transition duration-150 ease-in-out transform hover:-translate-y-1 border border-gray-200"
-    :class="{
-      'cursor-pointer': canBeAdded,
-      'cursor-not-allowed': !canBeAdded,
-    }"
-    @click="select"
-  >
-    <img
-      class="w-full"
-      :class="{ hidden: !isImageLoaded || isImageNotFound }"
-      :src="section.screenshotPath"
-      @load="imageLoaded"
-      @error="imageNotFound"
-      v-if="hasScreenshot"
-    />
-    <div
-      class="bg-gray-200 w-full h-16 animate-pulse"
-      v-if="!isImageLoaded && !isImageNotFound"
-    >
-      &nbsp;
-    </div>
-    <div
-      class="bg-white w-full h-16 flex items-center justify-center"
-      v-if="isImageNotFound"
-    >
-      <uikit-icon name="ri-bug-line" />
-    </div>
-    <div
-      class="flex items-center px-2 bg-editor-primary bg-opacity-5 py-4 w-full font-bold text-sm"
-    >
-      <p class="capitalize-first">{{ name }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-
-export default {
-  name: 'ThemeSectionListItem',
-  props: {
-    section: { type: Object, required: true, default: null },
-    insertAfter: { type: String },
-  },
-  data() {
-    return { hovered: false, isImageLoaded: false, isImageNotFound: false }
-  },
-  computed: {
-    name() {
-      return (
-        this.$st(
-          `${this.currentI18nScope}.sections.${this.section.id}.name`,
-        ) || this.section.name
-      )
-    },
-    hasScreenshot() {
-      return this.section.screenshotPath
-    },
-    canBeAdded() {
-      return this.services.section.canBeAddedToPage(
-        this.section,
-        this.currentSectionList,
-      )
-    },
-  },
-  methods: {
-    ...mapActions(['addSection']),
-    select() {
-      if (!this.canBeAdded) return
-      this.addSection({
-        sectionDefinition: this.section,
-        insertAt: this.insertAfter,
-      }).then(section => {
-        this.$router.push({ name: 'editSection', params: { sectionId: section.id } })
-      })
-    },
-    imageLoaded() {
-      // console.log('imageLoaded', this.section.name, event)
-      this.isImageLoaded = true
-    },
-    imageNotFound(event) {
-      console.log('imageNotFound', this.section.name, event)
-      this.isImageNotFound = true
-    },
-  },
-}
-</script>
-
-<style scoped>
-.min-height {
-  min-height: theme('spacing.16');
-}
-</style>

data/app/frontend/editor/design/application.scss

@@ -1,17 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap');
-
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
-@import './helpers';
-@import './transitions';
-@import './components/rich-text-editor';
-@import './components/modal';
-@import './components/tree';
-@import './components/buttons';
-@import './components/tooltip';
-
-:root {
-  --bg-opacity: 1;
-}

data/app/frontend/editor/design/components/buttons.scss

@@ -1,25 +0,0 @@
-.big-submit-button {
-  @apply flex
-    items-center
-    justify-center
-    rounded-sm
-    w-full
-    px-6
-    py-4
-    bg-opacity-95
-    hover:bg-opacity-100
-    transition-colors
-    duration-200
-    text-white text-center
-    disabled:opacity-75;
-}
-
-.cancel-button {
-  @apply block
-    w-full
-    text-gray-800
-    py-3
-    hover:bg-gray-100
-    transition-colors
-    duration-200;
-}

data/app/frontend/editor/design/components/modal.scss

@@ -1,49 +0,0 @@
-.modal-mask {
-  @apply fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-100 ease-in-out;
-  z-index: 9998;
-}
-
-.modal-wrapper {
-  @apply flex flex-col items-center justify-center h-full w-full;
-}
-
-.modal-container {
-  @apply flex flex-col py-6 px-6 bg-white rounded-lg shadow-lg transition-all duration-100 ease-in-out;
-}
-
-.modal-header {
-  @apply flex;
-}
-
-.modal-close-button {
-  margin-left: auto;
-}
-
-.modal-body {
-  @apply flex flex-col flex-1 overflow-y-auto pt-4;
-}
-
-/*
- * The following styles are auto-applied to elements with
- * transition="modal" when their visibility is toggled
- * by Vue.js.
- *
- * You can easily play with the modal transition by editing
- * these styles.
- */
-
-.modal-enter {
-  @apply opacity-0 translate-y-0;
-}
-
-.modal-leave-active {
-  @apply opacity-0 translate-y-0;
-}
-
-.modal-enter .modal-container,
-.modal-leave-active .modal-container {
-  @apply transition-transform duration-100 ease-in-out transform -translate-y-6;
-  // scale-110;
-  // -webkit-transform: scale(1.1);
-  // transform: scale(1.1);
-}

data/app/frontend/editor/design/components/tooltip.scss

@@ -1,123 +0,0 @@
-.v-popover {
-  & > .trigger {
-    @apply w-full;
-    display: flex !important;
-  }
-}
-
-.tooltip {
-  &:not(.popover) {
-    @apply hidden px-3 py-2 text-xs font-semibold rounded shadow-xl z-40 bg-gray-800 text-white;
-
-    &[aria-hidden='true'] {
-      @apply invisible opacity-0;
-      transition: opacity 0.15s, visibility 0.15s;    
-    }
-    &[aria-hidden='false'] {
-      @apply visible opacity-100 block;
-      transition: opacity 0.15s;
-    }
-  }
-
-  &.popover {
-    display: block !important;
-    z-index: 10000;
-    .tooltip-inner {
-      @apply shadow-lg rounded py-2 px-3 text-sm bg-white;
-    }
-
-    &.tooltip-menu .tooltip-inner {
-      @apply p-1;
-    }
-
-    .tooltip-arrow {
-      display: none;
-      width: 0;
-      height: 0;
-      border-style: solid;
-      position: absolute;
-      margin: 5px;
-      border-color: black;
-      z-index: 1;
-    }
-    &[x-placement^='top'] {
-      margin-bottom: 5px;
-      .tooltip-arrow {
-        display: none;
-        border-width: 5px 5px 0 5px;
-        border-left-color: transparent !important;
-        border-right-color: transparent !important;
-        border-bottom-color: transparent !important;
-        bottom: -5px;
-        left: calc(50% - 5px);
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-    }
-    &[x-placement^='bottom'] {
-      margin-top: 5px;
-      .tooltip-arrow {
-        display: none;
-        border-width: 0 5px 5px 5px;
-        border-left-color: transparent !important;
-        border-right-color: transparent !important;
-        border-top-color: transparent !important;
-        top: -5px;
-        left: calc(50% - 5px);
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-    }
-    &[x-placement^='right'] {
-      margin-left: 5px;
-      .tooltip-arrow {
-        display: none;
-        border-width: 5px 5px 5px 0;
-        border-left-color: transparent !important;
-        border-top-color: transparent !important;
-        border-bottom-color: transparent !important;
-        left: -5px;
-        top: calc(50% - 5px);
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-    &[x-placement^='left'] {
-      margin-right: 5px;
-      .tooltip-arrow {
-        display: none;
-        border-width: 5px 0 5px 5px;
-        border-top-color: transparent !important;
-        border-right-color: transparent !important;
-        border-bottom-color: transparent !important;
-        right: -5px;
-        top: calc(50% - 5px);
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-    &[aria-hidden='true'] {
-      visibility: hidden;
-      opacity: 0;
-      transition: opacity 0.15s, visibility 0.15s;
-    }
-    &[aria-hidden='false'] {
-      visibility: visible;
-      opacity: 1;
-      transition: opacity 0.15s;
-    }
-    &.info {
-      $color: rgba(#004499, 0.9);
-      .tooltip-inner {
-        background: $color;
-        color: white;
-        padding: 24px;
-        border-radius: 5px;
-        box-shadow: 0 5px 30px rgba(black, 0.1);
-      }
-      .tooltip-arrow {
-        border-color: $color;
-      }
-    }
-  }  
-}

data/app/frontend/editor/design/components/tree.scss

@@ -1,6 +0,0 @@
-.he-tree .tree-placeholder-node {
-  @apply h-12 bg-gray-100 bg-opacity-50 mb-3;
-}
-.he-tree .dragging .tree-node-back:hover {
-  background-color: inherit;
-}

data/app/frontend/editor/design/helpers.scss

@@ -1,9 +0,0 @@
-.capitalize-first::first-letter {
-  text-transform: uppercase;
-}
-
-.bg-checkerboard {
-  background-image: linear-gradient(45deg, #F2F2F2 25%, transparent 25%), linear-gradient(-45deg, #F2F2F2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #F2F2F2 75%), linear-gradient(-45deg, transparent 75%, #F2F2F2 75%);
-  background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-}

data/app/frontend/editor/design/transitions.scss

@@ -1,121 +0,0 @@
-.fade-enter-active,
-.fade-leave-active {
-  transition-duration: 0.2s;
-  transition-property: opacity;
-  transition-timing-function: ease;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-// slide
-.slide-leave-active,
-.slide-enter-active {
-  transition-duration: 0.2s;
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
-  overflow: hidden;
-}
-.slide-enter {
-  transform: translateX(-100%);
-}
-.slide-fade-enter-to {
-  transform: translateX(0%);
-}
-.slide-leave-to {
-  transform: translateX(-100%);
-}
-
-// slide + fade
-.slide-fade-leave-active,
-.slide-fade-enter-active {
-  transition-duration: 0.4s;
-  transition-property: opacity, transform;
-  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
-}
-.slide-fade-enter {
-  transform: translateX(-50%);
-  opacity: 0;
-}
-.slide-fade-enter-to {
-  transform: translateX(0%);
-  opacity: 1;
-}
-.slide-fade-leave-to {
-  transform: translateX(-50%);
-  opacity: 0;
-}
-
-// reverse slide + fade
-.reverse-slide-fade-leave-active,
-.reverse-slide-fade-enter-active {
-  transition-duration: 0.4s;
-  transition-property: opacity, transform;
-  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
-}
-.reverse-slide-fade-enter {
-  transform: translateX(50%);
-  opacity: 0;
-}
-.reverse-slide-fade-enter-to {
-  transform: translateX(0%);
-  opacity: 1;
-}
-.reverse-slide-fade-leave-to {
-  transform: translateX(50%);
-  opacity: 0;
-}
-
-// down to up slide + fade
-.slide-up-fade-leave-active,
-.slide-up-fade-enter-active {
-  transition-duration: 0.4s;
-  transition-property: opacity, transform;
-  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
-}
-.slide-up-fade-enter {
-  transform: translateY(50%);
-  opacity: 0;
-}
-.slide-up-fade-enter-to {
-  transform: translateY(0%);
-  opacity: 1;
-}
-.slide-up-fade-leave-to {
-  transform: translateY(50%);
-  opacity: 0;
-}
-
-// slide-{up|left|right}
-
-.slide-up-enter-active,
-.slide-up-leave-active,
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition-duration: 0.25s;
-  transition-property: height, opacity, transform;
-  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
-  overflow: hidden;
-}
-
-.slide-left-enter,
-.slide-right-leave-active {
-  opacity: 0;
-  transform: translate(2em, 0);
-}
-
-.slide-left-leave-active,
-.slide-right-enter {
-  opacity: 0;
-  transform: translate(-2em, 0);
-}
-
-.slide-up-enter,
-.slide-up-leave-to {
-  transform: translateY(4rem);
-  opacity: 0;
-}

data/app/frontend/editor/layouts/app.vue

@@ -1,42 +0,0 @@
-<template>
-  <layout id="maglev-app" class="font-nunito overflow-hidden">
-    <template v-slot:header>
-      <header-nav />
-    </template>
-
-    <template v-slot:sidebar>
-      <sidebar-nav />
-    </template>
-
-    <template v-slot:slide-pane>
-      <transition
-        name="slide"
-        mode="out-in"
-        v-on:before-enter="beforeEnter"
-        v-on:after-enter="afterEnter">
-        <router-view name="slide-pane" />
-      </transition>
-    </template>
-
-    <router-view />
-  </layout>
-</template>
-
-<script>
-import Layout from '@/layouts/default.vue'
-import HeaderNav from '@/components/header-nav/index.vue'
-import SidebarNav from '@/components/sidebar-nav/index.vue'
-
-export default {
-  name: 'AppLayout',
-  components: { Layout, HeaderNav, SidebarNav },
-  methods: {
-    beforeEnter() {
-      this.services.livePreview.simulateFakeScroll()
-    },
-    afterEnter() {
-      this.services.livePreview.pingSection(this.currentSection?.id)
-    },
-  },
-}
-</script>

data/app/frontend/editor/layouts/default.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="h-full">
-    <header class="flex h-16 border-b border-gray-200">
-      <router-link
-        v-if="currentSite && currentPage && currentLocale"
-        :to="{
-          name: 'editPage',
-          params: { locale: currentLocale, pageId: pageId },
-        }"
-        class="w-16 h-full flex justify-center items-center border-r border-gray-200 shrink-0"
-      >
-        <img v-bind:src="logoUrl" class="w-2/4" />
-      </router-link>
-      <div
-        class="w-16 h-full flex justify-center items-center border-r border-gray-200 shrink-0"
-        v-else
-      >
-        <img v-bind:src="logoUrl" class="w-2/4" />
-      </div>
-
-      <div class="flex flex-grow items-center h-full">
-        <slot name="header"> [Layout] Default header </slot>
-      </div>
-    </header>
-    <div class="flex content-area">
-      <aside
-        class="w-16 flex-shrink-0 flex content-center h-full border-r border-gray-200 relative z-20 bg-white"
-      >
-        <slot name="sidebar"> [Layout] Default sidebar </slot>
-      </aside>
-      <main class="bg-gray-100 w-full h-full">
-        <slot> [Layout] Default content </slot>
-      </main>
-    </div>
-    <slot name="slide-pane"> </slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MaglevDefaultLayout',
-  computed: {
-    logoUrl() {
-      return this.$store.state.editorSettings.logoUrl
-    },
-    pageId() {
-      return this.currentPage.pathHash[this.currentLocale]
-    },
-  },
-}
-</script>
-
-<style scoped>
-.content-area {
-  height: calc(100vh - theme('spacing.16'));
-}
-</style>