Merge pull request #2 from ONLYOFFICE/feature/view-mode-in-review

Feature/view mode in review

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

@@ -75,6 +75,7 @@ define([
                     'reviewchange:reject':      _.bind(this.onRejectClick, this),
                     'reviewchange:delete':      _.bind(this.onDeleteClick, this),
                     'reviewchange:preview':     _.bind(this.onBtnPreviewClick, this),
+                    'reviewchanges:view':       _.bind(this.onReviewViewClick, this),
                     'lang:document':            _.bind(this.onDocLanguage, this)
                 },
                 'Common.Views.ReviewChangesDialog': {
@@ -127,10 +128,10 @@ define([
             return this;
         },
 
-        SetDisabled: function() {
+        SetDisabled: function(state) {
             if (this.dlgChanges)
                 this.dlgChanges.close();
-            this.view && this.view.SetDisabled(true);
+            this.view && this.view.SetDisabled(state);
         },
 
         onApiShowChange: function (sdkchange) {
@@ -500,6 +501,41 @@ define([
             this.api.asc_setSpellCheck(state);
         },
 
+        onReviewViewClick: function(menu, item, e) {
+            if (this.api) {
+                if (item.value === 'final')
+                    this.api.asc_BeginViewModeInReview(true);
+                else if (item.value === 'original')
+                    this.api.asc_BeginViewModeInReview(false);
+                else
+                    this.api.asc_EndViewModeInReview();
+            }
+            this.disableEditing(item.value !== 'markup');
+            Common.NotificationCenter.trigger('edit:complete', this.view);
+        },
+
+        disableEditing: function(disable) {
+            var app = this.getApplication();
+            app.getController('RightMenu').getView('RightMenu').clearSelection();
+            app.getController('Toolbar').DisableToolbar(disable, false, true);
+            app.getController('RightMenu').SetDisabled(disable, false);
+            app.getController('Statusbar').getView('Statusbar').SetDisabled(disable);
+            app.getController('DocumentHolder').getView().SetDisabled(disable);
+
+            var leftMenu = app.getController('LeftMenu').leftMenu;
+            leftMenu.btnComments.setDisabled(disable);
+            if (disable) leftMenu.close();
+
+            if (this.view) {
+                var group = this.view.$el.find('.move-changes');
+                group.css('position', disable ? 'relative' : 'initial');
+                disable && group.find('.toolbar-group-mask').css({
+                    left: 0, right: 0, top: 0, bottom: 0
+                });
+                this.view.$el.find('.no-group-mask').css('opacity', 1);
+            }
+        },
+
         createToolbarPanel: function() {
             return this.view.getPanel();
         },

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

@@ -423,6 +423,12 @@ define([
                 '<div class="separator long review"/>' +
                 '<div class="group">' +
                     '<span id="btn-review-on" class="btn-slot text x-huge"></span>' +
+                '</div>' +
+                '<div class="group no-group-mask" style="padding-left: 0;">' +
+                    '<span id="btn-review-view" class="btn-slot text x-huge"></span>' +
+                '</div>' +
+                '<div class="separator long review"/>' +
+                '<div class="group move-changes">' +
                     '<span id="btn-change-prev" class="btn-slot text x-huge"></span>' +
                     '<span id="btn-change-next" class="btn-slot text x-huge"></span>' +
                     '<span id="btn-change-accept" class="btn-slot text x-huge"></span>' +
@@ -468,6 +474,10 @@ define([
                     button.on('click', _click_turnpreview.bind(me));
                     Common.NotificationCenter.trigger('edit:complete', me);
                 });
+
+                this.btnReviewView.menu.on('item:click', function (menu, item, e) {
+                    me.fireEvent('reviewchanges:view', [menu, item]);
+                });
             }
 
             this.btnsSpelling.forEach(function(button) {
@@ -528,6 +538,13 @@ define([
                         enableToggle: true
                     });
                     this.btnsTurnReview = [this.btnTurnOn];
+
+                    this.btnReviewView = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'btn-ic-reviewview',
+                        caption: this.txtView,
+                        menu: true
+                    });
                 }
 
                 this.btnSetSpelling = new Common.UI.Button({
@@ -597,6 +614,35 @@ define([
                         );
                         me.btnReject.updateHint([me.txtRejectCurrent, me.txtRejectChanges]);
 
+                        me.btnReviewView.setMenu(
+                            new Common.UI.Menu({
+                                cls: 'ppm-toolbar',
+                                items: [
+                                    {
+                                        caption: me.txtMarkup,
+                                        checkable: true,
+                                        toggleGroup: 'menuReviewView',
+                                        checked: true,
+                                        value: 'markup'
+                                    },
+                                    {
+                                        caption: me.txtFinal,
+                                        checkable: true,
+                                        toggleGroup: 'menuReviewView',
+                                        checked: false,
+                                        value: 'final'
+                                    },
+                                    {
+                                        caption: me.txtOriginal,
+                                        checkable: true,
+                                        toggleGroup: 'menuReviewView',
+                                        checked: false,
+                                        value: 'original'
+                                    }
+                                ]
+                            }));
+                        me.btnReviewView.updateHint(me.tipReviewView);
+
                         me.btnAccept.setDisabled(config.isReviewOnly);
                         me.btnReject.setDisabled(config.isReviewOnly);
                     } else {
@@ -627,6 +673,7 @@ define([
                     this.btnAccept.render(this.$el.find('#btn-change-accept'));
                     this.btnReject.render(this.$el.find('#btn-change-reject'));
                     this.btnTurnOn.render(this.$el.find('#btn-review-on'));
+                    this.btnReviewView.render(this.$el.find('#btn-review-view'));
                 }
 
                 this.btnSetSpelling.render(this.$el.find('#slot-btn-spelling'));
@@ -739,7 +786,12 @@ define([
             tipSetSpelling: 'Spell checking',
             tipReview: 'Review',
             txtAcceptChanges: 'Accept Changes',
-            txtRejectChanges: 'Reject Changes'
+            txtRejectChanges: 'Reject Changes',
+            txtView: 'Display Mode',
+            txtMarkup: 'All changes (Editing)',
+            txtFinal: 'All changes accepted (Preview)',
+            txtOriginal: 'All changes rejected (Preview)',
+            tipReviewView: 'Select the way you want the changes to be displayed'
         }
     }()), Common.Views.ReviewChanges || {}));
 

apps/common/main/resources/less/toolbar.less

@@ -273,6 +273,7 @@
 .button-normal-icon(btn-addslide,         11, @toolbar-big-icon-size);
 .button-normal-icon(~'x-huge .btn-ic-docspell', 12, @toolbar-big-icon-size);
 .button-normal-icon(~'x-huge .btn-ic-review', 13, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-ic-reviewview', 30, @toolbar-big-icon-size);
 .button-normal-icon(review-save,          14, @toolbar-big-icon-size);
 .button-normal-icon(review-deny,          15, @toolbar-big-icon-size);
 .button-normal-icon(review-next,          16, @toolbar-big-icon-size);

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

@@ -2752,23 +2752,30 @@ define([
             this.editMode = false;
         },
 
-        DisableToolbar: function(disable, viewMode) {
+        DisableToolbar: function(disable, viewMode, reviewmode) {
             if (viewMode!==undefined) this.editMode = !viewMode;
             disable = disable || !this.editMode;
 
-            var mask = $('.toolbar-mask');
+            var toolbar_mask = $('.toolbar-mask'),
+                group_mask = $('.toolbar-group-mask'),
+                mask = reviewmode ? group_mask : toolbar_mask;
             if (disable && mask.length>0 || !disable && mask.length==0) return;
 
             var toolbar = this.toolbar;
-            toolbar.$el.find('.toolbar').toggleClass('masked', disable);
-            toolbar.btnHide.setDisabled(disable);
             if(disable) {
-                mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el.find('.toolbar'));
+                if (reviewmode) {
-                Common.util.Shortcuts.suspendEvents('alt+h');
+                    mask = $("<div class='toolbar-group-mask'>").appendTo(toolbar.$el.find('.toolbar section.panel .group:not(.no-mask):not(.no-group-mask)'));
+                } else
+                    mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el.find('.toolbar'));
             } else {
                 mask.remove();
-                Common.util.Shortcuts.resumeEvents('alt+h');
             }
+            $('.no-group-mask').css('opacity', (reviewmode || !disable) ? 1 : 0.4);
+
+            disable = disable || (reviewmode ? toolbar_mask.length>0 : group_mask.length>0);
+            toolbar.$el.find('.toolbar').toggleClass('masked', disable);
+            toolbar.btnHide.setDisabled(disable);
+            disable ? Common.util.Shortcuts.suspendEvents('alt+h') : Common.util.Shortcuts.resumeEvents('alt+h');
 
             if ( toolbar.synchTooltip )
                 toolbar.synchTooltip.hide();

apps/documenteditor/main/app/view/DocumentHolder.js

@@ -79,6 +79,7 @@ define([
             me.fastcoauthtips = [];
             me._currentMathObj = undefined;
             me._currentParaObjDisabled = false;
+            me._isDisabled = false;
 
             var showPopupMenu = function(menu, value, event, docElement, eOpts){
                 if (!_.isUndefined(menu)  && menu !== null){
@@ -188,6 +189,9 @@ define([
 
             var fillViewMenuProps = function(selectedElements) {
                 if (!selectedElements || !_.isArray(selectedElements)) return;
+
+                if (!me.viewModeMenu)
+                    me.createDelayedElementsViewer();
                 var menu_props = {},
                     menu_to_show = me.viewModeMenu,
                     noobject = true;
@@ -212,7 +216,7 @@ define([
 
             var showObjectMenu = function(event, docElement, eOpts){
                 if (me.api){
-                    var obj = (me.mode.isEdit) ? fillMenuProps(me.api.getSelectedElements()) : fillViewMenuProps(me.api.getSelectedElements());
+                    var obj = (me.mode.isEdit && !me._isDisabled) ? fillMenuProps(me.api.getSelectedElements()) : fillViewMenuProps(me.api.getSelectedElements());
                     if (obj) showPopupMenu(obj.menu_to_show, obj.menu_props, event, docElement, eOpts);
                 }
             };
@@ -229,7 +233,7 @@ define([
 
             var onFocusObject = function(selectedElements) {
                 if (me.currentMenu && me.currentMenu.isVisible() && me.currentMenu !== me.hdrMenu){
-                    var obj = (me.mode.isEdit) ? fillMenuProps(selectedElements) : fillViewMenuProps(selectedElements);
+                    var obj = (me.mode.isEdit && !me._isDisabled) ? fillMenuProps(selectedElements) : fillViewMenuProps(selectedElements);
                     if (obj) {
                         if (obj.menu_to_show===me.currentMenu) {
                             me.currentMenu.options.initMenu(obj.menu_props);
@@ -659,7 +663,7 @@ define([
 
             var onDialogAddHyperlink = function() {
                 var win, props, text;
-                if (me.api && me.mode.isEdit){
+                if (me.api && me.mode.isEdit && !me._isDisabled){
                     var handlerDlg = function(dlg, result) {
                         if (result == 'ok') {
                             props = dlg.getSettings();
@@ -706,7 +710,7 @@ define([
             };
 
             var onDoubleClickOnChart = function(chart) {
-                if (me.mode.isEdit) {
+                if (me.mode.isEdit && !me._isDisabled) {
                     var diagramEditor = DE.getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor');
                     if (diagramEditor && chart) {
                         diagramEditor.setEditMode(true);
@@ -1814,10 +1818,10 @@ define([
                 initMenu: function (value) {
                     var isInChart = (value.imgProps && value.imgProps.value && !_.isNull(value.imgProps.value.get_ChartProperties()));
 
-                    menuViewUndo.setVisible(me.mode.canCoAuthoring && me.mode.canComments);
+                    menuViewUndo.setVisible(me.mode.canCoAuthoring && me.mode.canComments && !me._isDisabled);
-                    menuViewUndo.setDisabled(!me.api.asc_getCanUndo());
+                    menuViewUndo.setDisabled(!me.api.asc_getCanUndo() && !me._isDisabled);
-                    menuViewCopySeparator.setVisible(!isInChart && me.api.can_AddQuotedComment() !== false && me.mode.canCoAuthoring && me.mode.canComments);
+                    menuViewCopySeparator.setVisible(!isInChart && me.api.can_AddQuotedComment() !== false && me.mode.canCoAuthoring && me.mode.canComments && !me._isDisabled);
-                    menuViewAddComment.setVisible(!isInChart && me.api.can_AddQuotedComment() !== false && me.mode.canCoAuthoring && me.mode.canComments);
+                    menuViewAddComment.setVisible(!isInChart && me.api.can_AddQuotedComment() !== false && me.mode.canCoAuthoring && me.mode.canComments && !me._isDisabled);
                     menuViewAddComment.setDisabled(value.paraProps && value.paraProps.locked === true);
 
                     var cancopy = me.api && me.api.can_CopyCut();
@@ -3299,6 +3303,10 @@ define([
             _.defer(function(){  me.cmpEl.focus(); }, 50);
         },
 
+        SetDisabled: function(state) {
+            this._isDisabled = state;
+        },
+
         alignmentText           : 'Alignment',
         leftText                : 'Left',
         rightText               : 'Right',

apps/documenteditor/main/locale/en.json

@@ -211,6 +211,11 @@
   "Common.Views.ReviewChanges.txtRejectCurrent": "Reject Current Change",
   "Common.Views.ReviewChanges.txtSpelling": "Spell checking",
   "Common.Views.ReviewChanges.txtTurnon": "Track Changes",
+  "Common.Views.ReviewChanges.txtView": "Display Mode",
+  "Common.Views.ReviewChanges.txtMarkup": "All changes (Editing)",
+  "Common.Views.ReviewChanges.txtFinal": "All changes accepted (Preview)",
+  "Common.Views.ReviewChanges.txtOriginal": "All changes rejected (Preview)",
+  "Common.Views.ReviewChanges.tipReviewView": "Select the way you want the changes to be displayed",
   "Common.Views.ReviewChangesDialog.textTitle": "Review Changes",
   "Common.Views.ReviewChangesDialog.txtAccept": "Accept",
   "Common.Views.ReviewChangesDialog.txtAcceptAll": "Accept All Changes",

apps/documenteditor/main/resources/less/toolbar.less

@@ -41,6 +41,17 @@
     z-index: @zindex-tooltip + 1;
 }
 
+.toolbar-group-mask {
+    position: absolute;
+    top: 32px;
+    left: 48px;
+    right: 45px;
+    bottom: 0;
+    opacity: 0;
+    background-color: @gray-light;
+    z-index: @zindex-tooltip + 1;
+}
+
 .item-markerlist {
     .background-ximage('@{app-image-path}/toolbar/bullets-and-numbering.png', '@{app-image-path}/toolbar/bullets-and-numbering@2x.png', 38px);
     width: 38px;