maglevcms 1.0.0.rc1

data/app/javascript/editor/design/components/rich-text-editor.scss

@@ -0,0 +1,180 @@
+.rich-text-editor {
+  position: relative;
+
+  @for $i from 1 through 20 {
+    &[data-rows='#{$i}'] {
+      .ProseMirror {
+        height: calc(#{$i} * 1.75rem);
+        overflow: auto;
+      }
+    }
+  }
+
+  .ProseMirror {
+    @apply py-2 px-3 rounded bg-gray-100 text-gray-900;
+
+    &:focus {
+      @apply outline-none focus:ring;
+    }
+
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+
+    * {
+      caret-color: currentColor;
+    }
+
+    p {
+      margin-bottom: 0.5rem;
+    }
+
+    a {
+      @apply underline;
+    }
+
+    h2,
+    h3 {
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+
+    h2 {
+      font-size: 1.25rem;
+    }
+
+    h3 {
+      font-size: 1.2rem;
+    }
+
+    ol {
+      list-style: decimal;
+    }
+
+    ul {
+      list-style: disc;
+    }
+
+    strong {
+      @apply text-black;
+      font-weight: bold;
+    }
+
+    pre {
+      padding: 0.7rem 1rem;
+      border-radius: 5px;
+      @apply bg-gray-800;
+      @apply text-white;
+      font-size: 0.8rem;
+      overflow-x: auto;
+
+      code {
+        display: block;
+      }
+    }
+
+    p code {
+      padding: 0.2rem 0.4rem;
+      border-radius: 5px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      @apply bg-gray-300;
+      @apply text-gray-700;
+    }
+
+    ul,
+    ol {
+      padding-left: 1rem;
+    }
+
+    li > p,
+    li > ol,
+    li > ul {
+      margin: 0;
+    }
+
+    a {
+      color: inherit;
+    }
+
+    blockquote {
+      @apply border-2;
+      @apply border-solid;
+      @apply border-gray-200;
+      @apply text-gray-700;
+
+      padding-left: 0.8rem;
+      font-style: italic;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    img {
+      max-width: 100%;
+      border-radius: 3px;
+    }
+
+    table {
+      border-collapse: collapse;
+      table-layout: fixed;
+      width: 100%;
+      margin: 0;
+      overflow: hidden;
+
+      td,
+      th {
+        min-width: 1em;
+        // border: 2px solid $color-grey;
+        @apply border-2;
+        @apply border-solid;
+        padding: 3px 5px;
+        vertical-align: top;
+        box-sizing: border-box;
+        position: relative;
+        > * {
+          margin-bottom: 0;
+        }
+      }
+
+      th {
+        font-weight: bold;
+        text-align: left;
+      }
+
+      .selectedCell:after {
+        z-index: 2;
+        position: absolute;
+        content: '';
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: rgba(200, 200, 255, 0.4);
+        pointer-events: none;
+      }
+
+      .column-resize-handle {
+        position: absolute;
+        right: -2px;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        z-index: 20;
+        background-color: #adf;
+        pointer-events: none;
+      }
+    }
+
+    .tableWrapper {
+      margin: 1em 0;
+      overflow-x: auto;
+    }
+
+    .resize-cursor {
+      cursor: ew-resize;
+      cursor: col-resize;
+    }
+  }
+}

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

@@ -0,0 +1,117 @@
+.v-popover {
+  & > .trigger {
+    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-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/javascript/editor/design/components/tree.scss

@@ -0,0 +1,6 @@
+.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/javascript/editor/design/helpers.scss

@@ -0,0 +1,30 @@
+.bg-editor-primary,
+.hover\:bg-editor-primary:hover {
+  background-color: rgba(
+    var(--editor-color-primary-non-hex),
+    var(--tw-bg-opacity)
+  );
+}
+
+.text-editor-primary,
+.hover\:text-editor-primary:hover {
+  color: rgba(var(--editor-color-primary-non-hex), var(--tw-text-opacity));
+}
+
+.border-editor-primary,
+.hover\:border-editor-primary:hover {
+  border-color: rgba(
+    var(--editor-color-primary-non-hex),
+    var(--tw-border-opacity)
+  );
+}
+
+.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/javascript/editor/design/transitions.scss

@@ -0,0 +1,121 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition-duration: 0.3s;
+  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/javascript/editor/layouts/app.vue

@@ -0,0 +1,30 @@
+<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">
+        <router-view name="slide-pane" />
+      </transition>
+    </template>
+
+    <router-view />
+  </layout>
+</template>
+
+<script>
+import Layout from '@/layouts/default'
+import HeaderNav from '@/components/header-nav'
+import SidebarNav from '@/components/sidebar-nav'
+
+export default {
+  name: 'AppLayout',
+  components: { Layout, HeaderNav, SidebarNav },
+}
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+  <div class="h-full">
+    <header class="flex h-16 border-b border-gray-200">
+      <div
+        class="w-16 h-full flex justify-center items-center border-r border-gray-200"
+      >
+        <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
+    },
+  },
+}
+</script>
+
+<style scoped>
+.content-area {
+  height: calc(100vh - theme('spacing.16'));
+}
+</style>

data/app/javascript/editor/layouts/slide-pane.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="slide-pane absolute inset-y-0 h-full bg-white border-r border-gray-200 origin-top-left flex flex-col"
+    :class="{
+      'left-0 z-40': $route.meta.hidingSidebar,
+      'left-16 z-10': !$route.meta.hidingSidebar,
+      'w-1/2': maxWidthPane,
+      'w-104': !maxWidthPane,
+    }"
+  >
+    <slot name="header">
+      <div class="py-6 mx-4">
+        <div class="h-6 flex items-center">
+          <slot name="pre-title" v-if="withPreTitle">
+            <h2 class="text-lg rounded w-3/4 bg-gray-200 animate-pulse">
+              &nbsp;
+            </h2>
+          </slot>
+
+          <div class="w-full" v-else>
+            <h2
+              class="text-gray-800 font-semibold antialiased text-lg capitalize-first"
+              v-if="title"
+            >
+              {{ title }}
+            </h2>
+            <h2 class="text-lg rounded w-3/4 bg-gray-200 animate-pulse" v-else>
+              &nbsp;
+            </h2>
+          </div>
+
+          <div class="ml-auto">
+            <router-link :to="{ name: 'editPage' }">
+              <icon name="ri-close-circle-line" />
+            </router-link>
+          </div>
+        </div>
+
+        <div v-if="withPreTitle">
+          <h2
+            class="text-gray-800 font-semibold antialiased text-lg capitalize-first"
+            v-if="title"
+          >
+            {{ title }}
+          </h2>
+          <h2 class="text-lg rounded w-3/4 bg-gray-200 animate-pulse" v-else>
+            &nbsp;
+          </h2>
+        </div>
+
+        <p class="text-gray-400 text-sm" v-if="subTitle">{{ subTitle }}</p>
+      </div>
+    </slot>
+
+    <div
+      class="flex-1 flex flex-col"
+      :class="{ 'overflow-y-auto': overflowY, 'overflow-y-hidden': !overflowY }"
+    >
+      <div
+        class="flex-1 flex flex-col"
+        :class="{ 'pb-4 mx-4': overflowY, 'overflow-y-hidden': !overflowY }"
+      >
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SlidePaneLayout',
+  props: {
+    title: { type: String, default: undefined },
+    subTitle: { type: String, default: undefined },
+    overflowY: { type: Boolean, default: true },
+    maxWidthPane: { type: Boolean, default: false },
+    withPreTitle: { type: Boolean, default: false },
+  },
+}
+</script>
+
+<style scoped>
+.slide-pane {
+  top: theme('spacing.16');
+  height: calc(100% - theme('spacing.16'));
+}
+</style>