* Code for task #91379 .

module/doc/css/view.css

@@ -98,3 +98,9 @@
 
 .user-time .icon-star {font-size: 12px; line-height: 1.8;}
 .user-time .icon-star:before {vertical-align: top;}
+.btn-limit {position: relative;}
+.btn-group {display: flex; align-items: center;}
+#exchangeDiffBtn {font-size: 24px;}
+.exchangeDiffGroup .right-dom {display: none;}
+.exchangeDiffGroup.show-diff .right-dom {display: unset;}
+.btn-limit {padding-left: 10px; padding-right: 20px;}

module/doc/js/view.js

@@ -217,6 +217,27 @@ $(function()
         }
         else if(data.id == 'confirm')
         {
+            if(arrVersionDiff.length == 2)
+            {
+                var $btnGroup = $('#diffBtnGroup');
+                $btnGroup.addClass('show-diff');
+                var oldV = arrVersionDiff[0].version;
+                var newV = arrVersionDiff[1].version;
+                if(newV < oldV)
+                {
+                    var tmpArr = [newV, oldV];
+                    newV       = tmpArr[1];
+                    oldV       = tmpArr[0];
+                }
+                if(isVersionDiff)
+                {
+                    var tmpArr = [newV, oldV];
+                    newV       = tmpArr[1];
+                    oldV       = tmpArr[0];
+                }
+                var leftDom  = $btnGroup.find('a.left-dom').html('V' + oldV + '<span class="caret"></span>');
+                var rightDom = $btnGroup.find('a.right-dom').html('V' + newV + '<span class="caret"></span>');
+            }
             $(this.closest('.open.btn-group')).removeClass('open');
         }
     }).on('click', '#docVersionMenu .checkbox-primary', function()
@@ -226,11 +247,24 @@ $(function()
         var data    = $input.data();
         if(isCheck)
         {
-            arrVersionDiff.push(data);
+            if(arrVersionDiff.length)
+            {
+                if(arrVersionDiff[0].version != data.version) arrVersionDiff.push(data);
+            }
+            else
+            {
+                arrVersionDiff[0] = data;
+            }
         }
         else
         {
-            if(arrVersionDiff[0].version === data.version)
+            if(arrVersionDiff.length == 0) return;
+            if(arrVersionDiff.length == 1)
+            {
+                arrVersionDiff = [];
+                return;
+            }
+            else if(arrVersionDiff[0].version === data.version)
             {
                 var pushItem = arrVersionDiff[1];
             }
@@ -238,12 +272,11 @@ $(function()
             {
                 var pushItem = arrVersionDiff[0];
             }
-            var newArr = [];
+            var newArr     = [];
             newArr.push(pushItem);
             arrVersionDiff = newArr;
         }
-
-        refreshCheckbox()
+        refreshCheckbox();
     }).on('click', '#hisTrigger', function()
     {
         var $history = $('#history');
@@ -262,6 +295,24 @@ $(function()
     {
         $('#history').addClass('hidden');
         $('#hisTrigger').removeClass('text-primary');
+    }).on('click', '#exchangeDiffBtn', function()
+    {
+        isVersionDiff = !isVersionDiff;
+        var $btn      = $(this);
+        var $btnGroup = $btn.closest('#diffBtnGroup');
+        var $leftBtn  = $btnGroup.find('.btn-link.left-dom');
+        var $rightBtn = $btnGroup.find('.btn-link.right-dom');
+        var tmpArr    = [$leftBtn.html(), $rightBtn.html()];
+        $rightBtn.html(tmpArr[0]);
+        $leftBtn.html(tmpArr[1]);
+        if(isVersionDiff)
+        {
+            $btn.addClass('text-primary');
+        }
+        else
+        {
+            $btn.removeClass('text-primary');
+        }
     });
 
     $('#outline li.has-list').addClass('open in');

module/doc/view/content.html.php

@@ -14,9 +14,13 @@
           <div class="info">
             <?php $version = $version ? $version : $doc->version;?>
             <div class="version" data-version='<?php echo $version;?>'>
-              <div class='btn-group'>
-                <a href='javascript:;' class='btn btn-link btn-limit text-ellipsis' data-toggle='dropdown' style="max-width: 120px;">
-                  #<?php echo $version;?>
+              <div id="diffBtnGroup" class='btn-group exchangeDiffGroup'>
+                <a href='javascript:;' class='btn btn-link btn-limit text-ellipsis left-dom' data-toggle='dropdown' style="max-width: 120px;">
+                  V<?php echo $version;?>
+                  <span class="caret"></span>
+                </a>
+                <i id="exchangeDiffBtn" class="icon icon-exchange right-dom"></i>
+                <a href='javascript:;' class='btn btn-link btn-limit text-ellipsis right-dom' data-toggle='dropdown' style="max-width: 120px;">
                   <span class="caret"></span>
                 </a>
                 <ul id="docVersionMenu" class='dropdown-menu doc-version-menu' style='width: 250px; overflow-y:auto'>