maglevcms 1.0.0.rc1

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

@@ -0,0 +1,109 @@
+<template>
+  <div :style="{ 'margin-left': marginLeft }">
+    <list-item
+      :sectionBlock="treeNode.sectionBlock"
+      :index="index"
+      v-on="$listeners"
+    >
+      <template v-slot:actions>
+        <div class="flex items-center">
+          <new-nested-block-button
+            :parentId="treeNode.sectionBlock.id"
+            :accept="acceptedNestedSectionBlocks"
+            v-if="canAdd"
+            v-on="$listeners"
+          />
+
+          <list-item-button
+            iconName="arrow-up-s-line"
+            @click.native="moveSectionBlockUp"
+            v-if="index > 0"
+          />
+
+          <list-item-button
+            iconName="arrow-down-s-line"
+            @click.native="moveSectionBlockDown"
+            v-if="!last"
+          />
+        </div>
+      </template>
+    </list-item>
+
+    <div class="mt-3" v-if="hasChildren">
+      <transition-group type="transition" name="flip-list">
+        <block-tree-node
+          v-for="(childNode, index) in children"
+          :key="childNode.sectionBlock.id"
+          :treeNode="childNode"
+          :siblings="children"
+          :depth="depth + 1"
+          :index="index"
+          :last="index === children.length - 1"
+          class="mb-3"
+          v-on="$listeners"
+        />
+      </transition-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import ListItem from '../block-list/list-item'
+import NewNestedBlockButton from './new-nested-block-button'
+
+export default {
+  name: 'BlockTreeNode',
+  components: { ListItem, NewNestedBlockButton },
+  props: {
+    treeNode: { type: Object, required: true },
+    siblings: { type: Array },
+    depth: { type: Number, required: true },
+    index: { type: Number, required: true },
+    last: { type: Boolean, required: false, default: false },
+  },
+  computed: {
+    children() {
+      return this.treeNode.children
+    },
+    hasChildren() {
+      return this.children?.length > 0
+    },
+    sectionBlockDefinition() {
+      return this.currentSectionDefinition.blocks.find(
+        (block) => block.type === this.treeNode.sectionBlock.type,
+      )
+    },
+    acceptedNestedSectionBlocks() {
+      return this.sectionBlockDefinition?.accept
+    },
+    canAdd() {
+      return this.acceptedNestedSectionBlocks?.length > 0
+    },
+    marginLeft() {
+      return `${this.depth * 1.25}rem`
+    },
+  },
+  methods: {
+    moveSectionBlockUp() {
+      this.swapSectionBlockWith(this.index - 1)
+    },
+    moveSectionBlockDown() {
+      this.swapSectionBlockWith(this.index + 1)
+    },
+    swapSectionBlockWith(newIndex) {
+      ;[this.siblings[this.index], this.siblings[newIndex]] = [
+        this.siblings[newIndex],
+        this.siblings[this.index],
+      ]
+      this.$emit('change')
+    },
+  },
+}
+</script>
+
+<style scoped>
+.flip-list-move {
+  @apply transition-transform;
+  @apply duration-300;
+}
+</style>

data/app/javascript/editor/components/section-pane/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <tabs
+    :tabs="tabs"
+    :firstIndex="tabIndexFromRoute"
+    :otherProps="{ sectionId: currentSection.id, settingId }"
+    class="overflow-y-hidden"
+    sharedClass="px-4"
+    ref="tabs"
+  />
+</template>
+
+<script>
+import SettingList from './setting-list'
+import BlockList from './block-list'
+import BlockTree from './block-tree'
+
+export default {
+  name: 'SectionPane',
+  props: {
+    settingId: { type: String, default: undefined },
+  },
+  computed: {
+    unfilteredTabs() {
+      return [
+        {
+          name: this.$t('sectionPane.tabs.settings'),
+          tab: SettingList,
+          type: 'content',
+          condition: () => this.hasSettings,
+        },
+        {
+          name: this.blocksLabel,
+          tab: this.blocksComponent,
+          type: 'blocks',
+          condition: () => this.hasBlocks,
+        },
+        {
+          name: this.$t('sectionPane.tabs.advanced'),
+          tab: SettingList,
+          type: 'advanced',
+          condition: () => this.hasAdvancedSettings,
+          props: () => ({ advanced: true }),
+        },
+      ]
+    },
+    tabs() {
+      return this.unfilteredTabs.filter(
+        (tab) => !tab.condition || tab.condition(),
+      )
+    },
+    tabIndexFromRoute() {
+      return this.findTabIndexFromRoute()
+    },
+    hasSettings() {
+      return !this.isBlank(this.currentSectionSettings)
+    },
+    hasAdvancedSettings() {
+      return !this.isBlank(this.currentSectionAdvancedSettings)
+    },
+    hasBlocks() {
+      return !this.isBlank(this.currentSectionDefinition.blocks)
+    },
+    blocksLabel() {
+      return (
+        this.currentSectionDefinition.blocksLabel ||
+        this.$t('sectionPane.tabs.blocks')
+      )
+    },
+    blocksComponent() {
+      return this.currentSectionDefinition.blocksPresentation === 'tree'
+        ? BlockTree
+        : BlockList
+    },
+  },
+  methods: {
+    findTabIndexFromRoute() {
+      const type = this.$route.hash.replace('#', '')
+      const index = this.tabs.findIndex((tab) => tab.type === type)
+      return index === -1 ? 0 : index
+    },
+  },
+  watch: {
+    '$route.hash': {
+      immediate: true,
+      handler() {
+        if (!this.$refs.tabs) return
+        this.$refs.tabs.selectTab(this.findTabIndexFromRoute())
+      },
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/section-pane/setting-list.vue

@@ -0,0 +1,46 @@
+<template>
+  <dynamic-form
+    class="mt-2"
+    :parentKey="currentSection.id"
+    :settings="sectionSettings"
+    :content="currentSectionContent"
+    :focusedSetting="settingId"
+    @blur="onBlur"
+    @change="updateSectionContent"
+  />
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import DynamicForm from '@/components/dynamic-form'
+
+export default {
+  name: 'SectionSettingList',
+  components: { DynamicForm },
+  props: {
+    sectionId: { type: String, default: undefined },
+    settingId: { type: String, default: undefined },
+    advanced: { type: Boolean, default: false },
+  },
+  computed: {
+    sectionSettings() {
+      return this.advanced
+        ? this.currentSectionAdvancedSettings
+        : this.services.section.filterSettings(
+            this.currentSectionSettings,
+            this.currentSectionContent,
+          )
+    },
+  },
+  methods: {
+    ...mapActions(['updateSectionContent']),
+    onBlur() {
+      this.$router
+        .push({ name: 'editSection', params: { sectionId: this.sectionId } })
+        .catch((err) => {
+          if (err.name !== 'NavigationDuplicated') throw err
+        })
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/sidebar-nav.vue

@@ -0,0 +1,125 @@
+<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>
+        <router-link
+          :to="{ name: 'addSection' }"
+          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': !isAddSectionPaneActive,
+            'bg-editor-primary bg-opacity-5': isAddSectionPaneActive,
+          }"
+          v-tooltip.right="$t('sidebarNav.addNewSectionTooltip')"
+        >
+          <icon name="add-box-line" size="1.5rem" />
+        </router-link>
+      </li>
+      <li>
+        <router-link
+          :to="{ name: 'listSections' }"
+          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': !isSectionListPaneActive,
+            'bg-editor-primary bg-opacity-5': isSectionListPaneActive,
+          }"
+          v-tooltip.right="$t('sidebarNav.managePageSectionsTooltip')"
+        >
+          <icon name="ri-stack-line" size="1.5rem" />
+        </router-link>
+      </li>
+      <li v-if="hasStyle">
+        <router-link
+          :to="{ name: 'editStyle' }"
+          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': !isEditStylePaneActive,
+            'bg-editor-primary bg-opacity-5': isEditStylePaneActive,
+          }"
+          v-tooltip.right="$t('sidebarNav.editStyleTooltip')"
+        >
+          <icon name="ri-drop-line" size="1.25rem" />
+        </router-link>
+      </li>
+      <li>
+        <a
+          href="#"
+          class="flex justify-center py-5 -ml-4 -mr-4 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
+          @click.prevent="openImageLibraryModal"
+          v-tooltip.right="$t('sidebarNav.openImageLibraryTooltip')"
+        >
+          <icon name="image-line" size="1.5rem" />
+        </a>
+      </li>
+      <li v-if="false">
+        <router-link
+          :to="{ name: 'test', params: { pageId: currentPage.path } }"
+          class="flex justify-center py-5 -ml-4 -mr-4 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
+        >
+          T
+        </router-link>
+      </li>
+      <li v-if="false">
+        <router-link
+          :to="{ name: 'test2', params: { pageId: currentPage.path } }"
+          class="flex justify-center py-5 -ml-4 -mr-4 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
+        >
+          T2
+        </router-link>
+      </li>
+      <li></li>
+    </ol>
+
+    <ol class="divide-y divide-gray-300 px-4">
+      <li></li>
+      <li>
+        <a
+          :href="leaveEditorUrl"
+          class="flex justify-center py-5 -ml-4 -mr-4 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
+          v-tooltip.right="$t('sidebarNav.leaveEditorTooltip')"
+        >
+          <icon name="logout-box-r-line" size="1.5rem" />
+        </a>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+import ImageLibrary from '@/components/image-library'
+
+export default {
+  name: 'SidebarNav',
+  computed: {
+    hasStyle() {
+      return !this.isBlank(this.currentStyle)
+    },
+    isAddSectionPaneActive() {
+      return this.$route.name === 'addSection'
+    },
+    isSectionListPaneActive() {
+      return this.$route.name === 'listSections'
+    },
+    isEditStylePaneActive() {
+      return this.$route.name === 'editStyle'
+    },
+    leaveEditorUrl() {
+      return window.leaveUrl
+    },
+  },
+  methods: {
+    openImageLibraryModal() {
+      this.openModal({
+        title: this.$t('imageLibrary.title'),
+        component: ImageLibrary,
+        props: { modalClass: 'w-216' },
+      })
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,44 @@
+<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"
+        @change="onChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import DynamicForm from '@/components/dynamic-form'
+
+export default {
+  name: 'StylePane',
+  components: { DynamicForm },
+  data() {
+    return { style: [] }
+  },
+  mounted() {
+    this.style = this.currentStyle
+  },
+  computed: {
+    styleSettings() {
+      return this.currentTheme.styleSettings
+    },
+  },
+  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/javascript/editor/components/theme-section-list/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <accordion
+      v-for="(category, index) in categories"
+      :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">{{ category.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>
+    </accordion>
+  </div>
+</template>
+
+<script>
+import ListItem from './list-item'
+
+export default {
+  name: 'ThemeSectionList',
+  components: { ListItem },
+  props: {
+    insertAfter: { type: String },
+  },
+  data() {
+    return { activeCategory: null }
+  },
+  computed: {
+    categories() {
+      return this.services.theme.buildCategories(this.currentTheme)
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,88 @@
+<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"
+    >
+      <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">{{ section.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: {
+    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(() => {
+        this.$router.push({ name: 'editPage' })
+      })
+    },
+    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/javascript/editor/design/application.scss

@@ -0,0 +1,17 @@
+@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/javascript/editor/design/components/buttons.scss

@@ -0,0 +1,25 @@
+.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/javascript/editor/design/components/modal.scss

@@ -0,0 +1,49 @@
+.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-hidden 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);
+}