Merge 26ed51e360 into 42a72183d0

client/components/editor/editor-markdown.vue

@@ -139,10 +139,11 @@
               v-btn.mt-3.animated.fadeInLeft.wait-p4s(icon, tile, v-on='on', dark, @click='toggleHelp').mx-0
                 v-icon(:color='helpShown ? `teal` : ``') mdi-help-circle
             span {{$t('editor:markup.markdownFormattingHelp')}}
-      .editor-markdown-editor
+      .editor-markdown-editor(v-bind:style="{ flex: editorFlexStyle }")
         textarea(ref='cm')
+      .editor-markdown-resizable(@mousedown.prevent="onMouseDown")
       transition(name='editor-markdown-preview')
-        .editor-markdown-preview(v-if='previewShown')
+        .editor-markdown-preview(v-if='previewShown', v-bind:style="{ flex: previewFlexStyle }")
           .editor-markdown-preview-content.contents(ref='editorPreviewContainer')
             div(
               ref='editorPreview'
@@ -387,7 +388,8 @@ export default {
       previewHTML: '',
       helpShown: false,
       spellModeActive: false,
-      insertLinkDialog: false
+      insertLinkDialog: false,
+      flexBasisEditor: 0.5
     }
   },
   computed: {
@@ -397,6 +399,12 @@ export default {
     isModalShown() {
       return this.helpShown || this.activeModal !== ''
     },
+    editorFlexStyle() {
+      return `1 1 ${this.flexBasisEditor * 100}%`
+    },
+    previewFlexStyle() {
+      return `1 1 ${(1 - this.flexBasisEditor) * 100}%`
+    },
     locale: get('page/locale'),
     path: get('page/path'),
     mode: get('editor/mode'),
@@ -449,6 +457,28 @@ export default {
       //   }
       // }
     },
+    onMouseDown ({ target: resizer, pageX: initialPageX, pageY: initialPageY }) {
+      if (resizer.className && resizer.className.match('editor-markdown-resizable')) {
+        const self = this
+        const editor = resizer.previousElementSibling
+        const sidebar = editor.previousElementSibling
+        const preview = resizer.nextElementSibling
+        const { addEventListener, removeEventListener } = window
+        const onMouseMove = function({ pageX }) {
+          const ratio = Number(((pageX - sidebar.offsetWidth) / (editor.offsetWidth + preview.offsetWidth)).toFixed(1))
+          // const ratio = Number(((pageX - sidebar.offsetWidth) / (editor.offsetWidth + preview.offsetWidth) * 5).toFixed(1)) / 5
+          if (ratio >= 0.10 && ratio <= 0.90) {
+            self.flexBasisEditor = ratio
+          }
+        }
+        const onMouseUp = function() {
+          removeEventListener('mousemove', onMouseMove)
+          removeEventListener('mouseup', onMouseUp)
+        }
+        addEventListener('mousemove', onMouseMove)
+        addEventListener('mouseup', onMouseUp)
+      }
+    },
     processContent (newContent) {
       linesMap = []
       // this.$store.set('editor/content', newContent)
@@ -874,7 +904,6 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
 
   &-editor {
     background-color: darken(mc('grey', '900'), 4.5%);
-    flex: 1 1 50%;
     display: block;
     height: $editor-height;
     position: relative;
@@ -885,7 +914,6 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
   }
 
   &-preview {
-    flex: 1 1 50%;
     background-color: mc('grey', '100');
     position: relative;
     height: $editor-height;
@@ -902,10 +930,10 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
 
     &-enter-active, &-leave-active {
       transition: max-width .5s ease;
-      max-width: 50vw;
+      max-width: 100vw;
 
       .editor-code-preview-content {
-        width: 50vw;
+        width: 100vw;
         overflow:hidden;
       }
     }
@@ -1027,6 +1055,12 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
     }
   }
 
+  &-resizable {
+    width: 8px;
+    cursor: col-resize;
+    background: #f5f5f5;
+  }
+
   // ==========================================
   // Fix FAB revealing under codemirror
   // ==========================================