From 5d6a0dcc1bd4867ead56928d68a49d6757a4d6e1 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 12 Jun 2017 12:27:24 +0200
Subject: [PATCH] Fix width transition when dragging preview

---
 www/code/code.css  |  4 +++-
 www/code/code.less |  4 +++-
 www/code/main.js   | 10 ++++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/www/code/code.css b/www/code/code.css
index 589544493..8c6cb3240 100644
--- a/www/code/code.css
+++ b/www/code/code.css
@@ -18,11 +18,13 @@ body {
   display: inline-block;
   height: 100%;
   width: 50%;
-  transition: width 500ms, min-width 500ms, max-width 500ms;
   min-width: 20%;
   max-width: 80%;
   resize: horizontal;
 }
+.CodeMirror.transition {
+  transition: width 500ms, min-width 500ms, max-width 500ms;
+}
 .CodeMirror.fullPage {
   min-width: 100%;
   max-width: 100%;
diff --git a/www/code/code.less b/www/code/code.less
index 04e3ab615..5f1aa2365 100644
--- a/www/code/code.less
+++ b/www/code/code.less
@@ -22,7 +22,9 @@ body {
     display: inline-block;
     height: 100%;
     width: 50%;
-    transition: width @slideTime, min-width @slideTime, max-width @slideTime;
+    &.transition {
+        transition: width @slideTime, min-width @slideTime, max-width @slideTime;
+    }
     min-width: 20%;
     max-width: 80%;
     resize: horizontal;
diff --git a/www/code/main.js b/www/code/main.js
index 5e9983fe6..5da41d054 100644
--- a/www/code/main.js
+++ b/www/code/main.js
@@ -144,6 +144,11 @@ define([
 
             var onModeChanged = function (mode) {
                 var $codeMirror = $iframe.find('.CodeMirror');
+                window.clearTimeout(APP.previewTo);
+                $codeMirror.addClass('transition');
+                APP.previewTo = window.setTimeout(function () {
+                    $codeMirror.removeClass('transition');
+                }, 500);
                 if (mode === "markdown") {
                     APP.$previewButton.show();
                     Cryptpad.getPadAttribute('previewMode', function (e, data) {
@@ -244,6 +249,11 @@ define([
                 $previewButton.attr('title', Messages.previewButtonTitle);
                 $previewButton.click(function () {
                     var $codeMirror = $iframe.find('.CodeMirror');
+                    window.clearTimeout(APP.previewTo);
+                    $codeMirror.addClass('transition');
+                    APP.previewTo = window.setTimeout(function () {
+                        $codeMirror.removeClass('transition');
+                    }, 500);
                     if (CodeMirror.highlightMode !== 'markdown') {
                         $previewContainer.show();
                     }