From 7dd4feb38177e6a9597d00230a0abea9a140026a Mon Sep 17 00:00:00 2001 From: deanly Date: Mon, 2 May 2022 23:16:41 +0900 Subject: [PATCH 1/2] feat: add editor resizable bar --- client/components/editor/editor-markdown.vue | 57 ++++++++++++++++++-- 1 file changed, 54 insertions(+), 3 deletions(-) diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue index 6134524d..c38a6e0c 100644 --- a/client/components/editor/editor-markdown.vue +++ b/client/components/editor/editor-markdown.vue @@ -164,10 +164,11 @@ v-btn.mt-3.animated.fadeInLeft.wait-p9s(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' @@ -408,7 +409,8 @@ export default { previewHTML: '', helpShown: false, spellModeActive: false, - insertLinkDialog: false + insertLinkDialog: false, + flexBasisEditor: 0.5 } }, computed: { @@ -418,6 +420,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'), @@ -470,6 +478,43 @@ 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 = (pageX - sidebar.offsetWidth) / (editor.offsetWidth + preview.offsetWidth) + if (ratio >= 0.85) { + self.flexBasisEditor = 0.90 + } else if (ratio >= 0.75 && ratio < 0.85) { + self.flexBasisEditor = 0.80 + } else if (ratio >= 0.65 && ratio < 0.75) { + self.flexBasisEditor = 0.70 + } else if (ratio >= 0.55 && ratio < 0.65) { + self.flexBasisEditor = 0.60 + } else if (ratio > 0.35 && ratio <= 0.45) { + self.flexBasisEditor = 0.40 + } else if (ratio > 0.25 && ratio <= 0.35) { + self.flexBasisEditor = 0.30 + } else if (ratio > 0.15 && ratio <= 0.25) { + self.flexBasisEditor = 0.20 + } else if (ratio <= 0.15) { + self.flexBasisEditor = 0.10 + } else { + self.flexBasisEditor = 0.5 + } + } + const onMouseUp = function() { + removeEventListener('mousemove', onMouseMove) + removeEventListener('mouseup', onMouseUp) + } + addEventListener('mousemove', onMouseMove) + addEventListener('mouseup', onMouseUp) + } + }, processContent (newContent) { linesMap = [] // this.$store.set('editor/content', newContent) @@ -1047,6 +1092,12 @@ $editor-height-mobile: calc(100vh - 112px - 16px); } } + &-resizable { + width: 8px; + cursor: col-resize; + background: #f5f5f5; + } + // ========================================== // Fix FAB revealing under codemirror // ========================================== From 26ed51e360188ff22052d022fadccf5e39c5a18f Mon Sep 17 00:00:00 2001 From: deanly Date: Tue, 17 May 2022 00:17:54 +0900 Subject: [PATCH 2/2] fix: preview show/hide button and moving ratio. --- client/components/editor/editor-markdown.vue | 29 ++++---------------- 1 file changed, 6 insertions(+), 23 deletions(-) diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue index c38a6e0c..421f6553 100644 --- a/client/components/editor/editor-markdown.vue +++ b/client/components/editor/editor-markdown.vue @@ -486,25 +486,10 @@ export default { const preview = resizer.nextElementSibling const { addEventListener, removeEventListener } = window const onMouseMove = function({ pageX }) { - const ratio = (pageX - sidebar.offsetWidth) / (editor.offsetWidth + preview.offsetWidth) - if (ratio >= 0.85) { - self.flexBasisEditor = 0.90 - } else if (ratio >= 0.75 && ratio < 0.85) { - self.flexBasisEditor = 0.80 - } else if (ratio >= 0.65 && ratio < 0.75) { - self.flexBasisEditor = 0.70 - } else if (ratio >= 0.55 && ratio < 0.65) { - self.flexBasisEditor = 0.60 - } else if (ratio > 0.35 && ratio <= 0.45) { - self.flexBasisEditor = 0.40 - } else if (ratio > 0.25 && ratio <= 0.35) { - self.flexBasisEditor = 0.30 - } else if (ratio > 0.15 && ratio <= 0.25) { - self.flexBasisEditor = 0.20 - } else if (ratio <= 0.15) { - self.flexBasisEditor = 0.10 - } else { - self.flexBasisEditor = 0.5 + 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() { @@ -939,7 +924,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; @@ -950,7 +934,6 @@ $editor-height-mobile: calc(100vh - 112px - 16px); } &-preview { - flex: 1 1 50%; background-color: mc('grey', '100'); position: relative; height: $editor-height; @@ -967,10 +950,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; } }