[DE] Update layout for history versions + hide changes for revision.

apps/common/main/lib/controller/History.js

@@ -98,11 +98,6 @@ define([
             if (e) {
                 var btn = $(e.target);
                 if (btn && btn.hasClass('revision-restore')) {
-                    var tip = item.btnTip;
-                    if (tip) {
-                        tip.dontShow = true;
-                        tip.tip().remove();
-                    }
                     if (record.get('isRevision'))
                         Common.Gateway.requestRestore(record.get('revision'));
                     else {

apps/common/main/lib/model/HistoryVersion.js

@@ -67,7 +67,12 @@ define([
                 arrColors: [], // array of user colors for all changes of current version
                 markedAsVersion: false,
                 canRestore: false,
-                isRevision: true
+                isRevision: true,
+                hasChanges: false,
+                isExpanded: true,
+                isVisible: true,
+                allowSelected: true,
+                selected: false
             }
         }
     });

apps/common/main/lib/view/History.js

@@ -76,48 +76,69 @@ define([
                 store: this.storeHistory,
                 enableKeyEvents: false,
                 itemTemplate: _.template([
-                    '<div id="<%= id %>" class="history-item-wrap" style="display: block; ' + '<% if (!isRevision) { %>' + 'padding-left: 40px;' + '<% } %>' +'">',
+                    '<div id="<%= id %>" class="history-item-wrap ' + '<% if (!isVisible) { %>' + 'hidden' + '<% } %>' + '" ',
+                    'style="display: block; ' + '<% if (!isRevision) { %>' + 'padding-left: 40px;' + '<% } %>' + '<% if (canRestore && selected) { %>' + 'padding-bottom: 6px;' + '<% } %>' +'">',
                         '<div class="user-date"><%= created %></div>',
                         '<% if (markedAsVersion) { %>',
                         '<div class="user-version">ver.<%=version%></div>',
                         '<% } %>',
-                        '<% if (canRestore && selected) { %>',
-                            '<div class="revision-restore img-commonctrl"></div>',
+                        '<% if (isRevision && hasChanges) { %>',
+                            '<div class="revision-expand img-commonctrl ' + '<% if (isExpanded) { %>' + 'up' + '<% } %>' + '"></div>',
                         '<% } %>',
                         '<div class="user-name">',
                             '<div class="color" style="display: inline-block; background-color:' + '<%=usercolor%>;' + '" >',
                             '</div><%= Common.Utils.String.htmlEncode(username) %>',
                         '</div>',
+                        '<% if (canRestore && selected) { %>',
+                            '<label class="revision-restore" role="presentation" tabindex="-1">' + this.textRestore + '</label>',
+                        '<% } %>',
                     '</div>'
                 ].join(''))
             });
 
-            this.btnBackToDocument = new Common.UI.Button({
-                el: $('#history-btn-back'),
-                enableToggle: false
-            });
-
             var me = this;
+            this.viewHistoryList.onClickItem = function(view, record, e) {
+                var btn = $(e.target);
+                if (btn && btn.hasClass('revision-expand')) {
+                    var isExpanded = !record.get('isExpanded');
+                    record.set('isExpanded', isExpanded);
+                    var rev, revisions = me.storeHistory.findRevisions(record.get('revision'));
+                    if (revisions && revisions.length>1) {
+                        for(var i=1; i<revisions.length; i++)
+                            revisions[i].set('isVisible', isExpanded);
+                    }
+                } else
+                    Common.UI.DataView.prototype.onClickItem.call(this, view, record, e);
+            };
+
             var changetooltip = function (dataview, view, record) {
-                if (record.get('selected')) {
-                    var btns = $(view.el).find('.revision-restore').tooltip({title: me.textRestore, placement: 'cursor'});
-                    if (btns)
+                if (record.get('isRevision')) {
+                    if (view.btnTip) {
+                        view.btnTip.dontShow = true;
+                        view.btnTip.tip().remove();
+                        view.btnTip = null;
+                    }
+                    var btns = $(view.el).find('.revision-expand').tooltip({title: (record.get('isExpanded')) ? me.textHide : me.textShow, placement: 'cursor'});
+                    if (btns.length>0)
                         view.btnTip = btns.data('bs.tooltip');
-                } else if (view.btnTip) {
-                    view.btnTip.dontShow = true;
-                    view.btnTip.tip().remove();
-                    view.btnTip = null;
                 }
             };
             this.viewHistoryList.on('item:add', changetooltip);
             this.viewHistoryList.on('item:change', changetooltip);
 
+            this.btnBackToDocument = new Common.UI.Button({
+                el: $('#history-btn-back'),
+                enableToggle: false
+            });
+
             this.trigger('render:after', this);
             return this;
         },
 
         textHistoryHeader: 'Back to Document',
-        textRestore: 'Restore'
-        
+        textRestore: 'Restore',
+        textShow: 'Show Changes',
+        textHide: 'Hide Changes'
+
     }, Common.Views.History || {}))
 });
\ No newline at end of file

apps/common/main/resources/less/history.less

@@ -56,6 +56,10 @@
             .user-date {
                 color: #fff;
             }
+
+            .revision-expand {
+                background-position: -74px -149px;
+            }
         }
     }
 
@@ -75,7 +79,7 @@
 
         .user-version {
             display: inline-block;
-            width: 36px;
+            max-width: 60px;
             height: 18px;
             color: @primary;
             font-size: 10px;
@@ -83,7 +87,7 @@
             overflow: hidden;
             background-color: #e6e6e6;
             text-align: center;
-            padding: 1px 0;
+            padding: 1px 5px;
             border-radius: 2px;
         }
 
@@ -94,6 +98,8 @@
             font-size: 12px;
             cursor: pointer;
             color: @gray-darker;
+            max-width: 210px;
+            text-overflow: ellipsis;
         }
 
         .color {
@@ -104,14 +110,28 @@
             vertical-align: middle;
         }
 
-        .revision-restore {
+        .revision-expand {
             width: 16px;
             height: 16px;
-            background-position: -22px -272px;
-            margin: 0 12px;
+            background-position: -47px -149px;
+            margin: 14px 12px;
             display: inline-block;
             position: absolute;
             right: 0;
+
+            &.up {
+                transform: rotate(180deg);
+            }
+        }
+
+        .revision-restore {
+            color: #fff;
+            border-bottom: 1px dotted #fff;
+            height: 16px;
+            margin-top: 5px;
+            white-space: pre-wrap;
+            width: auto;
+            cursor: pointer;
         }
     }
 }

apps/documenteditor/main/app/controller/Main.js

@@ -420,6 +420,7 @@ define([
                                 if (changes && changes.length>0) {
                                     arrVersions[arrVersions.length-1].set('changeid', changes.length-1);
                                     arrVersions[arrVersions.length-1].set('docIdPrev', docIdPrev);
+                                    arrVersions[arrVersions.length-1].set('hasChanges', changes.length>1);
                                     for (i=changes.length-2; i>=0; i--) {
                                         change = changes[i];