maglevcms 1.0.0.rc1

data/app/javascript/editor/components/section-highlighter/top-left-actions.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="absolute top-0 left-0 mt-2 ml-2 flex">
+    <div
+      class="bg-editor-primary text-white py-1 px-3 rounded-l-2xl text-xs flex items-center"
+      :class="{ 'rounded-r-2xl': !displayMoveArrows }"
+    >
+      <span>{{ hoveredSection.name }}</span>
+    </div>
+    <button
+      type="button"
+      class="button"
+      @click="moveHoveredSection('up')"
+      v-if="displayMoveArrows"
+    >
+      <icon name="arrow-up-s-line" />
+    </button>
+    <button
+      type="button"
+      class="button button-last"
+      @click="moveHoveredSection('down')"
+      v-if="displayMoveArrows"
+    >
+      <icon name="arrow-down-s-line" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'SectionHighlighterTopLeftActions',
+  props: {
+    hoveredSection: { type: Object },
+  },
+  computed: {
+    displayMoveArrows() {
+      return !this.currentSection && !this.hoveredSection.definition.insertAt
+    },
+  },
+  methods: {
+    ...mapActions(['moveHoveredSection']),
+  },
+}
+</script>
+
+<style scoped>
+.button {
+  @apply bg-editor-primary
+    py-1
+    px-1
+    pointer-events-auto
+    border-solid 
+    border-white 
+    border-opacity-25 
+    border-0 
+    border-l
+    text-white text-opacity-75;
+}
+
+.button.button-last {
+  @apply pr-2 rounded-r-2xl;
+}
+
+.button:hover {
+  @apply hover:text-opacity-100;
+}
+</style>

data/app/javascript/editor/components/section-highlighter/top-right-actions.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="absolute top-0 right-0 mt-2 mr-2 flex">
+    <router-link
+      :to="{
+        name: 'editSection',
+        params: { sectionId: hoveredSection.sectionId },
+      }"
+      custom
+      v-slot="{ navigate }"
+      v-if="hasSettings"
+    >
+      <button
+        type="button"
+        @click="navigate"
+        @keypress.enter="navigate"
+        class="ml-2 button"
+      >
+        <icon name="ri-pencil-line" />
+      </button>
+    </router-link>
+
+    <router-link
+      :to="{
+        name: 'editSection',
+        params: { sectionId: hoveredSection.sectionId },
+        hash: '#blocks',
+      }"
+      custom
+      v-slot="{ navigate }"
+      v-if="hasBlocks"
+    >
+      <button
+        type="button"
+        @click="navigate"
+        @keypress.enter="navigate"
+        class="ml-2 button"
+      >
+        <icon name="ri-play-list-add-line" />
+      </button>
+    </router-link>
+
+    <router-link
+      :to="{
+        name: 'editSection',
+        params: { sectionId: hoveredSection.sectionId },
+        hash: '#advanced',
+      }"
+      custom
+      v-slot="{ navigate }"
+      v-if="hasAdvancedSettings"
+    >
+      <button
+        type="button"
+        @click="navigate"
+        @keypress.enter="navigate"
+        class="ml-2 button"
+      >
+        <icon name="ri-settings-5-line" />
+      </button>
+    </router-link>
+
+    <confirmation-button class="ml-2 pointer-events-auto" @confirm="remove">
+      <div class="button">
+        <icon name="delete-bin-line" />
+      </div>
+    </confirmation-button>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'SectionHighlighterTopRightActions',
+  props: {
+    hoveredSection: { type: Object },
+  },
+  computed: {
+    hasSettings() {
+      const { definition } = this.hoveredSection
+      return !this.isBlank(this.services.section.getSettings(definition, false))
+    },
+    hasAdvancedSettings() {
+      const { definition } = this.hoveredSection
+      return !this.isBlank(this.services.section.getSettings(definition, true))
+    },
+    hasBlocks() {
+      const {
+        definition: { blocks },
+      } = this.hoveredSection
+      return !this.isBlank(blocks)
+    },
+  },
+  methods: {
+    ...mapActions(['removeSection', 'leaveSection']),
+    remove() {
+      const sectionId = this.hoveredSection.sectionId
+      this.leaveSection()
+      if (
+        this.currentSection &&
+        this.currentSection.id === this.hoveredSection.sectionId
+      )
+        this.$router.push({ name: 'editPage' })
+      // waiting for the animation to finish
+      setTimeout(() => this.removeSection(sectionId), 200)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.button {
+  @apply bg-white
+    rounded-full
+    shadow-xl
+    h-8
+    w-8
+    flex
+    items-center
+    justify-center
+    text-gray-700
+    pointer-events-auto;
+}
+.button:hover {
+  @apply hover:text-black;
+}
+</style>

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

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <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>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import draggable from 'vuedraggable'
+import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
+import ListItem from './list-item'
+
+export default {
+  name: 'SectionList',
+  mixins: [GroupedDropdownsMixin],
+  components: { draggable, ListItem },
+  computed: {
+    list() {
+      return this.currentSectionList
+    },
+    isListEmpty() {
+      return this.currentSectionList.length === 0
+    },
+    dragOptions() {
+      return {
+        animation: 0,
+        group: 'description',
+        disabled: false,
+        ghostClass: 'ghost',
+      }
+    },
+  },
+  methods: {
+    ...mapActions(['moveSection']),
+    onSortEnd(event) {
+      this.moveSection({
+        from: event.oldIndex,
+        to: event.newIndex,
+      })
+    },
+  },
+}
+</script>
+
+<style scope>
+.flip-list-move {
+  @apply transition-transform;
+  @apply duration-300;
+}
+</style>

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

@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="bg-gray-100 rounded-md px-4 py-3 flex items-center justify-between text-gray-800 cursor-move"
+  >
+    <router-link
+      :to="{ name: 'editSection', params: { sectionId: section.id } }"
+      class="flex items-center"
+    >
+      <span>{{ section.name | truncate(40) }}</span>
+    </router-link>
+    <confirmation-button @confirm="removeSection(section.id)" v-on="$listeners">
+      <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"
+      >
+        <icon name="ri-close-line" size="1.25rem" />
+      </button>
+    </confirmation-button>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'SectionListItem',
+  props: {
+    section: { type: Object, required: true },
+  },
+  methods: {
+    ...mapActions(['removeSection']),
+  },
+}
+</script>

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="flex flex-col h-full">
+    <div class="relative flex-auto h-0 overflow-y-auto pt-2">
+      <draggable v-model="list" v-bind="dragOptions">
+        <transition-group type="transition" name="flip-list">
+          <list-item
+            v-for="(sectionBlock, index) in currentSectionBlocks"
+            :key="sectionBlock.id"
+            :sectionBlock="sectionBlock"
+            :index="index"
+            @on-dropdown-toggle="onDropdownToggle"
+            class="mb-4"
+          />
+        </transition-group>
+      </draggable>
+    </div>
+
+    <div class="mt-auto relative">
+      <new-block-button @on-dropdown-toggle="onDropdownToggle" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import draggable from 'vuedraggable'
+import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
+import ListItem from './list-item'
+import NewBlockButton from './new-block-button'
+
+export default {
+  name: 'SectionBlockList',
+  mixins: [GroupedDropdownsMixin],
+  components: { draggable, ListItem, NewBlockButton },
+  computed: {
+    list: {
+      get() {
+        return this.currentSectionBlocks
+      },
+      set(value) {
+        this.sortSectionBlocks(value)
+      },
+    },
+    dragOptions() {
+      return {
+        animation: 0,
+        group: 'description',
+        disabled: false,
+        ghostClass: 'ghost',
+      }
+    },
+  },
+  methods: {
+    ...mapActions(['sortSectionBlocks']),
+  },
+}
+</script>
+
+<style scoped>
+.flip-list-move {
+  @apply transition-transform;
+  @apply duration-300;
+}
+.ghost {
+  @apply opacity-50;
+}
+</style>

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

@@ -0,0 +1,71 @@
+<template>
+  <div
+    class="bg-gray-100 rounded-md px-4 py-3 flex items-center justify-between text-gray-800"
+    :class="{ 'cursor-move': isList }"
+  >
+    <router-link
+      :to="{
+        name: 'editSectionBlock',
+        params: { sectionBlockId: sectionBlock.id },
+      }"
+      class="flex items-center"
+    >
+      <div class="h-8 w-8 bg-gray-400 mr-3" v-if="image">
+        <img
+          :src="image"
+          class="object-cover w-full h-full"
+          :class="{ hidden: !imageLoaded }"
+          @load="() => (imageLoaded = true)"
+        />
+      </div>
+      <span>{{ label | truncate(40) }}</span>
+    </router-link>
+    <div class="flex items-center">
+      <slot name="actions"></slot>
+      <confirmation-button
+        @confirm="removeSectionBlock(sectionBlock.id)"
+        v-on="$listeners"
+      >
+        <list-item-button iconName="ri-close-line" />
+      </confirmation-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'SectionBlockListItem',
+  props: {
+    sectionBlock: { type: Object, required: true },
+    index: { type: Number, required: true },
+  },
+  data() {
+    return {
+      imageLoaded: false,
+    }
+  },
+  computed: {
+    isList() {
+      return this.currentSectionDefinition.blocksPresentation !== 'tree'
+    },
+    presentation() {
+      const label = this.$store.getters.sectionBlockLabel(
+        this.sectionBlock,
+        this.index + 1,
+      )
+      return { label: label[0], image: label[1] }
+    },
+    label() {
+      return this.presentation.label
+    },
+    image() {
+      return this.presentation.image
+    },
+  },
+  methods: {
+    ...mapActions(['removeSectionBlock']),
+  },
+}
+</script>

data/app/javascript/editor/components/section-pane/block-list/new-block-button.vue

@@ -0,0 +1,74 @@
+<template>
+  <div v-if="hasTypes" class="w-full button-wrapper">
+    <dropdown
+      ref="dropdown"
+      placement="top"
+      v-on="$listeners"
+      v-if="hasMultipleTypes"
+    >
+      <template v-slot:button>
+        <button class="big-submit-button bg-editor-primary">
+          <icon name="ri-add-line" size="1.5rem" />
+          <span class="ml-3">{{ $t('sectionPane.blockList.add') }}</span>
+        </button>
+      </template>
+      <template v-slot:content>
+        <div class="w-full flex flex-col">
+          <button
+            v-for="blockType in blockTypes"
+            :key="blockType.type"
+            class="mb-2 text-base text-gray-900 py-2 px-14 hover:bg-gray-100 transition-colors"
+            @click="addSectionBlockAndClose(blockType.type)"
+          >
+            {{ blockType.name }}
+          </button>
+        </div>
+      </template>
+    </dropdown>
+    <button
+      class="big-submit-button bg-editor-primary"
+      @click="addSectionBlock"
+      v-else
+    >
+      <icon name="ri-add-line" size="1.5rem" />
+      <span class="ml-3">{{ $t('sectionPane.blockList.add') }}</span>
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'NewSectionBlockButton',
+  computed: {
+    hasTypes() {
+      return this.blockTypes.length > 0
+    },
+    hasMultipleTypes() {
+      return this.blockTypes.length > 1
+    },
+    blockTypes() {
+      if (this.currentSectionDefinition.blocksPresentation === 'tree')
+        return this.services.block.filterRoot(
+          this.currentSectionDefinition.blocks,
+          this.currentSectionBlocks,
+        )
+      else return this.currentSectionDefinition.blocks
+    },
+  },
+  methods: {
+    ...mapActions(['addSectionBlock']),
+    addSectionBlockAndClose(blockType) {
+      this.addSectionBlock({ blockType })
+      this.$refs.dropdown.close()
+    },
+  },
+}
+</script>
+
+<style scoped>
+.button-wrapper >>> .trigger {
+  @apply w-full;
+}
+</style>

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="flex flex-col h-full">
+    <div class="relative flex-auto h-0 overflow-y-auto">
+      <transition-group type="transition" name="flip-list">
+        <tree-node
+          v-for="(treeNode, index) in treeData"
+          :key="treeNode.sectionBlock.id"
+          :treeNode="treeNode"
+          :siblings="treeData"
+          :depth="0"
+          :index="index"
+          :last="index === treeData.length - 1"
+          @on-dropdown-toggle="onDropdownToggle"
+          @change="change"
+          class="mb-3"
+        />
+      </transition-group>
+    </div>
+    <div class="mt-auto relative">
+      <new-block-button @on-dropdown-toggle="onDropdownToggle" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
+import TreeNode from './tree-node'
+import NewBlockButton from '../block-list/new-block-button'
+
+export default {
+  name: 'SectionBlockTree',
+  mixins: [GroupedDropdownsMixin],
+  components: { TreeNode, NewBlockButton },
+  data() {
+    return { treeData: null }
+  },
+  methods: {
+    ...mapActions(['sortSectionBlocks']),
+    change() {
+      const list = this.services.block.decodeTree(this.treeData)
+      this.sortSectionBlocks(list)
+    },
+  },
+  watch: {
+    currentSectionBlocks: {
+      immediate: true,
+      handler() {
+        this.treeData = this.services.block.encodeToTree(
+          this.currentSectionBlocks,
+        )
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+.flip-list-move {
+  @apply transition-transform;
+  @apply duration-300;
+}
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="w-full">
+    <dropdown
+      placement="left"
+      ref="dropdown"
+      :fullWidth="true"
+      v-on="$listeners"
+      v-if="hasMultipleTypes"
+    >
+      <template v-slot:button>
+        <list-item-button iconName="ri-add-line" />
+      </template>
+      <template v-slot:content>
+        <div class="w-full flex flex-col">
+          <button
+            v-for="blockType in blockTypes"
+            :key="blockType.type"
+            class="mb-2 text-base text-gray-900 py-2 px-4 hover:bg-gray-100 transition-colors"
+            @click="addNestedSectionBlockAndClose(blockType.type)"
+          >
+            {{ blockType.name }}
+          </button>
+        </div>
+      </template>
+    </dropdown>
+    <list-item-button
+      iconName="ri-add-line"
+      @click.native="addNestedSectionBlock"
+      v-else
+    />
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'NewNestedSectionBlockButton',
+  props: {
+    parentId: { type: String, required: true },
+    accept: { type: Array, required: true },
+  },
+  computed: {
+    hasMultipleTypes() {
+      return this.blockTypes.length > 1
+    },
+    blockTypes() {
+      return this.currentSectionDefinition.blocks.filter(
+        (block) => this.accept.indexOf(block.type) !== -1,
+      )
+    },
+  },
+  methods: {
+    ...mapActions(['addSectionBlock']),
+    addNestedSectionBlock() {
+      this.addSectionBlock({
+        blockType: this.blockTypes[0].type,
+        parentId: this.parentId,
+      })
+    },
+    addNestedSectionBlockAndClose(blockType) {
+      this.addSectionBlock({ blockType, parentId: this.parentId })
+      this.$refs.dropdown.close()
+    },
+  },
+}
+</script>