fix: preview show/hide button and moving ratio.

pull/5297/head
deanly 2 years ago
parent 7dd4feb381
commit 26ed51e360

@ -486,25 +486,10 @@ export default {
const preview = resizer.nextElementSibling const preview = resizer.nextElementSibling
const { addEventListener, removeEventListener } = window const { addEventListener, removeEventListener } = window
const onMouseMove = function({ pageX }) { const onMouseMove = function({ pageX }) {
const ratio = (pageX - sidebar.offsetWidth) / (editor.offsetWidth + preview.offsetWidth) const ratio = Number(((pageX - sidebar.offsetWidth) / (editor.offsetWidth + preview.offsetWidth)).toFixed(1))
if (ratio >= 0.85) { // const ratio = Number(((pageX - sidebar.offsetWidth) / (editor.offsetWidth + preview.offsetWidth) * 5).toFixed(1)) / 5
self.flexBasisEditor = 0.90 if (ratio >= 0.10 && ratio <= 0.90) {
} else if (ratio >= 0.75 && ratio < 0.85) { self.flexBasisEditor = ratio
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() { const onMouseUp = function() {
@ -939,7 +924,6 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
&-editor { &-editor {
background-color: darken(mc('grey', '900'), 4.5%); background-color: darken(mc('grey', '900'), 4.5%);
flex: 1 1 50%;
display: block; display: block;
height: $editor-height; height: $editor-height;
position: relative; position: relative;
@ -950,7 +934,6 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
} }
&-preview { &-preview {
flex: 1 1 50%;
background-color: mc('grey', '100'); background-color: mc('grey', '100');
position: relative; position: relative;
height: $editor-height; height: $editor-height;
@ -967,10 +950,10 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
&-enter-active, &-leave-active { &-enter-active, &-leave-active {
transition: max-width .5s ease; transition: max-width .5s ease;
max-width: 50vw; max-width: 100vw;
.editor-code-preview-content { .editor-code-preview-content {
width: 50vw; width: 100vw;
overflow:hidden; overflow:hidden;
} }
} }

Loading…
Cancel
Save