[DE] 'Review' controls moved to the toolbar

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

@@ -69,7 +69,8 @@ define([
                     // comments handlers
                     'reviewchange:accept':      _.bind(this.onAcceptClick, this),
                     'reviewchange:reject':      _.bind(this.onRejectClick, this),
-                    'reviewchange:delete':      _.bind(this.onDeleteClick, this)
+                    'reviewchange:delete':      _.bind(this.onDeleteClick, this),
+                    'reviewchange:preview':     _.bind(this.onBtnPreviewClick, this)
                 }
             });
         },
@@ -78,21 +79,6 @@ define([
             this.popoverChanges =   new Common.Collections.ReviewChanges();
             this.userCollection =   this.getApplication().getCollection('Common.Collections.Users');
 
-            this.view           =   this.createView('Common.Views.ReviewChanges', {
-                store           :   this.collection,
-                popoverChanges  :   this.popoverChanges
-            });
-            this.view.render();
-            this.bindViewEvents(this.view, this.events);
-
-            var me = this;
-            this.view.btnPrev.on('click', _.bind(this.onBtnPreviewClick, this));
-            this.view.btnNext.on('click', _.bind(this.onBtnPreviewClick, this));
-            this.view.btnAccept.on('click',           _.bind(this.onAcceptClick, this));
-            this.view.btnAccept.menu.on('item:click', _.bind(this.onAcceptClick, this));
-            this.view.btnReject.on('click',           _.bind(this.onRejectClick, this));
-            this.view.btnReject.menu.on('item:click', _.bind(this.onRejectClick, this));
-
             this._state = {posx: -1000, posy: -1000, popoverVisible: false};
         },
         setConfig: function (data, api) {
@@ -112,9 +98,23 @@ define([
         },
 
         setMode: function(mode) {
-            this.view.isReviewOnly = mode.isReviewOnly;
+            if ( mode.canReview || mode.isReviewOnly ) {
-            this.view.btnAccept.setDisabled(mode.isReviewOnly);
+                this.view           =   this.createView('Common.Views.ReviewChanges', {
-            this.view.btnReject.setDisabled(mode.isReviewOnly);
+                    store           :   this.collection,
+                    popoverChanges  :   this.popoverChanges
+                });
+
+                var tab = {action: 'review', caption: 'Review'};
+                var $panel = this.view.getPanel();
+
+                var toolbar = this.getApplication().getController('Toolbar').getView('Toolbar');
+                toolbar.addTab(tab, $panel, 'layout');
+
+                this.view.isReviewOnly = mode.isReviewOnly;
+                this.view.btnAccept.setDisabled(mode.isReviewOnly);
+                this.view.btnReject.setDisabled(mode.isReviewOnly);
+            }
+
             return this;
         },
 
@@ -413,13 +413,10 @@ define([
 
         onBtnPreviewClick: function(btn, eOpts){
             switch (btn.options.value) {
-                case 1:
+                case 1: this.api.asc_GetPrevRevisionsChange(); break;
-                    this.api.asc_GetPrevRevisionsChange();
+                case 2: this.api.asc_GetNextRevisionsChange(); break;
-                    break;
-                case 2:
-                    this.api.asc_GetNextRevisionsChange();
-                    break;
             }
+
             Common.NotificationCenter.trigger('edit:complete', this.view);
         },
 

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

@@ -410,6 +410,50 @@ define([
     });
 
     Common.Views.ReviewChanges = Common.UI.BaseView.extend(_.extend((function(){
+        var template =
+            '<section id="review-changes-panel" class="panel" data-tab="review">' +
+                '<div class="group">' +
+                    '<span id="btn-review-on"></span>' +
+                '</div>' +
+                '<div class="separator long"/>' +
+                '<div class="group">' +
+                    '<span id="btn-change-prev"></span>' +
+                    '<span id="btn-change-next"></span>' +
+                '</div>' +
+                '<div class="separator long"/>' +
+                '<div class="group">' +
+                    '<span id="btn-change-accept"></span>' +
+                    '<span id="btn-change-reject"></span>' +
+                '</div>' +
+            '</section>';
+
+        function setEvents() {
+            var me = this;
+            this.btnPrev.on('click', function (e) {
+                me.fireEvent('reviewchange:preview', [me.btnPrev]);
+            });
+
+            this.btnNext.on('click', function (e) {
+                me.fireEvent('reviewchange:preview', [me.btnNext]);
+            });
+
+            this.btnAccept.on('click', function (e) {
+                me.fireEvent('reviewchange:accept', [me.btnAccept, 'current']);
+            });
+
+            this.btnAccept.menu.on('item:click', function (menu, item, e) {
+                me.fireEvent('reviewchange:accept', [menu, item]);
+            });
+
+            this.btnReject.on('click', function (e) {
+                me.fireEvent('reviewchange:reject', [me.btnReject, 'current']);
+            });
+
+            this.btnReject.menu.on('item:click', function (menu, item, e) {
+                me.fireEvent('reviewchange:reject', [menu, item]);
+            });
+        }
+
         return {
             el: '#review-changes-panel',
 
@@ -418,59 +462,26 @@ define([
             initialize: function (options) {
                 Common.UI.BaseView.prototype.initialize.call(this, options);
 
-                this.template = [
-                    '<div class="review-group" style="">',
-                        '<div id="id-review-button-prev" style=""></div>',
-                        '<div id="id-review-button-next" style=""></div>',
-                        '<div class="separator"/>',
-                    '</div>',
-                    '<div class="review-group" style="">',
-                        '<div id="id-review-button-accept" style=""></div>',
-                        '<div id="id-review-button-reject" style=""></div>',
-                        '<div class="separator"/>',
-                    '</div>',
-                    '<div class="review-group">',
-                        '<div id="id-review-button-close" style=""></div>',
-                    '</div>'
-                ].join('');
-
                 this.store = this.options.store;
                 this.popoverChanges = this.options.popoverChanges;
-            },
-
-            render: function () {
-                var el = $(this.el),
-                    me = this;
-                el.addClass('review-changes');
-                el.html(_.template(this.template, {
-                    scope: this
-                }));
 
                 this.btnPrev = new Common.UI.Button({
                     cls: 'btn-toolbar',
                     iconCls: 'img-commonctrl review-prev',
-                    value: 1,
+                    value: 1
-                    hint: this.txtPrev,
-                    hintAnchor: 'top'
                 });
-                this.btnPrev.render($('#id-review-button-prev'));
 
                 this.btnNext = new Common.UI.Button({
                     cls: 'btn-toolbar',
                     iconCls: 'img-commonctrl review-next',
-                    value: 2,
+                    value: 2
-                    hint: this.txtNext,
-                    hintAnchor: 'top'
                 });
-                this.btnNext.render($('#id-review-button-next'));
 
                 this.btnAccept = new Common.UI.Button({
                     cls: 'btn-toolbar',
                     caption: this.txtAccept,
                     split: true,
                     menu: new Common.UI.Menu({
-                        menuAlign: 'bl-tl',
-                        style: 'margin-top:-5px;',
                         items: [
                             this.mnuAcceptCurrent = new Common.UI.MenuItem({
                                 caption: this.txtAcceptCurrent,
@@ -483,15 +494,12 @@ define([
                         ]
                     })
                 });
-                this.btnAccept.render($('#id-review-button-accept'));
 
                 this.btnReject = new Common.UI.Button({
                     cls: 'btn-toolbar',
                     caption: this.txtReject,
                     split: true,
                     menu: new Common.UI.Menu({
-                        menuAlign: 'bl-tl',
-                        style: 'margin-top:-5px;',
                         items: [
                             this.mnuRejectCurrent = new Common.UI.MenuItem({
                                 caption: this.txtRejectCurrent,
@@ -504,25 +512,42 @@ define([
                         ]
                     })
                 });
-                this.btnReject.render($('#id-review-button-reject'));
 
-                this.btnClose = new Common.UI.Button({
+                this.btnTurnOn = new Common.UI.Button({
                     cls: 'btn-toolbar',
-                    iconCls: 'img-commonctrl review-close',
+                    iconCls: 'img-commonctrl review-close'
-                    hint: this.txtClose,
+                    // hint: this.txtClose,
-                    hintAnchor: 'top'
                 });
-                this.btnClose.render($('#id-review-button-close'));
-                this.btnClose.on('click', _.bind(this.onClose, this));
 
-                this.boxSdk = $('#editor_sdk');
+                var me = this;
-
+                (new Promise(function (resolve) {
-                Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));
+                    Common.NotificationCenter.on('app:ready', function () { resolve(); });
+                })).then(function(){
+                        me.btnPrev.updateHint(me.txtPrev);
+                        me.btnNext.updateHint(me.txtNext);
+                        me.btnTurnOn.updateHint(me.textChangesOn);
+                        setEvents.call(me);
+                    }
+                );
             },
 
-            onClose: function (event) {
+            render: function (el) {
-                this.hide();
+                this.boxSdk = $('#editor_sdk');
-                this.fireEvent('hide', this);
+                if ( el ) el.html( this.getPanel() );
+
+                return this;
+            },
+
+            getPanel: function () {
+                var _html = $(_.template( template, {} ));
+
+                this.btnPrev.render(_html.find('#btn-change-prev'));
+                this.btnNext.render(_html.find('#btn-change-next'));
+                this.btnAccept.render(_html.find('#btn-change-accept'));
+                this.btnReject.render(_html.find('#btn-change-reject'));
+                this.btnTurnOn.render(_html.find('#btn-review-on'));
+
+                return _html;
             },
 
             show: function () {
@@ -530,12 +555,6 @@ define([
                 this.fireEvent('show', this);
             },
 
-            onLayoutChanged: function (area) {
-                if (area == 'rightmenu' && this.boxSdk) {
-                    this.$el.css('right', ($('body').width() - this.boxSdk.offset().left - this.boxSdk.width() + 15) + 'px');
-                }
-            },
-
             getPopover: function (sdkViewName) {
                 if (_.isUndefined(this.popover)) {
                     this.popover = new Common.Views.ReviewChangesPopover({
@@ -554,13 +573,13 @@ define([
 
             txtPrev: 'To previous change',
             txtNext: 'To next change',
+            textChangesOn: 'Preview changes',
             txtAccept: 'Accept',
             txtAcceptCurrent: 'Accept current Changes',
             txtAcceptAll: 'Accept all Changes',
             txtReject: 'Reject',
             txtRejectCurrent: 'Reject current Changes',
-            txtRejectAll: 'Reject all Changes',
+            txtRejectAll: 'Reject all Changes'
-            txtClose: 'Close'
         }
     }()), Common.Views.ReviewChanges || {}))
 });

apps/common/main/resources/less/review-changes.less

@@ -1,55 +1,55 @@
 .review-changes {
-    position: absolute;
+    //position: absolute;
-    bottom: -1px;
+    //bottom: -1px;
-    right: 55px;
+    //right: 55px;
-    background: @gray-light;
+    //background: @gray-light;
-    border: 1px solid @gray-dark;
+    //border: 1px solid @gray-dark;
-    height: 35px;
+    //height: 35px;
-    z-index: @zindex-dropdown - 1;
+    //z-index: @zindex-dropdown - 1;
+    //
+    //.review-group {
+    //    display: inline-block;
+    //    vertical-align: middle;
+    //    padding: 6px 0px 6px 10px;
+    //
+    //    & > div, & > label {
+    //        margin-right: 10px;
+    //        display: inline-block;
+    //    }
+    //}
+    //
+    //#id-review-label-total {
+    //    font: bold 10px Helvetica, Arial, Verdana, sans-serif;
+    //    color: @gray-darker;
+    //    text-shadow: none;
+    //    white-space: nowrap;
+    //    cursor: pointer;
+    //    vertical-align: middle;
+    //}
+    //
+    //#id-review-button-accept,
+    //#id-review-button-reject {
+    //    span.caption {
+    //        vertical-align: middle;
+    //        font-size: 12px;
+    //        margin: 0 6px;
+    //    }
+    //}
 
-    .review-group {
+    //.separator {
-        display: inline-block;
+    //    margin: 0 !important;
-        vertical-align: middle;
+    //    height: 19px;
-        padding: 6px 0px 6px 10px;
+    //}
+}
 
-        & > div, & > label {
+.review-prev {background-position: -40px -250px;}
-            margin-right: 10px;
+button.active   > .review-prev,
-            display: inline-block;
+button:active   > .review-prev {background-position: -60px -250px !important;}
-        }
-    }
 
-    #id-review-label-total {
+.review-next {background-position: -40px -270px;}
-        font: bold 10px Helvetica, Arial, Verdana, sans-serif;
+button.active   > .review-next,
-        color: @gray-darker;
+button:active   > .review-next {background-position: -60px -270px !important;}
-        text-shadow: none;
-        white-space: nowrap;
-        cursor: pointer;
-        vertical-align: middle;
-    }
 
-    #id-review-button-accept,
+.review-close {background-position: -40px -290px;}
-    #id-review-button-reject {
+button.active   > .review-close,
-        span.caption {
+button:active   > .review-close {background-position: -60px -290px !important;}
-            vertical-align: middle;
-            font-size: 12px;
-            margin: 0 6px;
-        }
-    }
-
-    .separator {
-        margin: 0 !important;
-        height: 19px;
-    }
-
-    .review-prev {background-position: -40px -250px;}
-    button.active   > .review-prev,
-    button:active   > .review-prev {background-position: -60px -250px !important;}
-
-    .review-next {background-position: -40px -270px;}
-    button.active   > .review-next,
-    button:active   > .review-next {background-position: -60px -270px !important;}
-
-    .review-close {background-position: -40px -290px;}
-    button.active   > .review-close,
-    button:active   > .review-close {background-position: -60px -290px !important;}
-}

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

@@ -763,6 +763,8 @@ define([
                 if (this._isDocReady)
                     return;
 
+                Common.NotificationCenter.trigger('app:ready');
+
                 var me = this,
                     value;
 

apps/documenteditor/main/app/template/Toolbar.template

@@ -148,7 +148,6 @@
                     </div>
                 </div>
             </section>
-            <section class="panel" data-tab="review">review panel</section>
             <section class="panel" data-tab="plugins">plugins panel</section>
         </section>
     </section>

apps/documenteditor/main/app/template/Viewport.template

@@ -10,7 +10,6 @@
                 <div id="editor_sdk" class="layout-item"></div>
                 <div id="right-menu" class="layout-item"></div>
                 <div id="left-panel-history" class="layout-item" />
-                <div id="review-changes-panel" style="display: none;"></div>
             </div>
         </div>
         <div id="statusbar" class="layout-item"></div>