[DE] 'view' mode

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

@@ -1045,15 +1045,17 @@ define([
                     this.updatePlugins(this.plugins, true);
 
                 this.applyModeCommonElements();
-                this.applyModeEditorElements();
+                if ( this.appOptions.isEdit ) {
+                    this.applyModeEditorElements();
+                } else {
+                    Common.NotificationCenter.trigger('app:face', this.appOptions);
 
-                this.api.asc_setViewMode(!this.appOptions.isEdit);
-                this.api.asc_LoadDocument();
-
-                if (!this.appOptions.isEdit) {
                     this.hidePreloader();
                     this.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
                 }
+
+                this.api.asc_setViewMode(!this.appOptions.isEdit);
+                this.api.asc_LoadDocument();
             },
 
             applyModeCommonElements: function() {

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

@@ -83,24 +83,24 @@ define([
 
             var me = this;
             Common.NotificationCenter.on('app:face', function (cfg) {
-                me.statusbar.render();
+                me.statusbar.render(cfg);
                 me.statusbar.$el.css('z-index', 1);
 
                 $('.statusbar #label-zoom').css('min-width', 70);
 
-                var review = DE.getController('Common.Controllers.ReviewChanges').getView();
-                if ( cfg.canReview ) {
-                    me.btnTurnReview = review.getButton('turn', 'statusbar');
-                    me.btnTurnReview.render( me.statusbar.$layout.find('#btn-doc-review') );
-                } else {
-                    me.statusbar.$el.find('.el-review').hide();
-                }
-
                 if ( cfg.isEdit ) {
+                    var review = DE.getController('Common.Controllers.ReviewChanges').getView();
+                    if (cfg.canReview) {
+                        me.btnTurnReview = review.getButton('turn', 'statusbar');
+                        me.btnTurnReview.render(me.statusbar.$layout.find('#btn-doc-review'));
+                    } else {
+                        me.statusbar.$el.find('.el-review').hide();
+                    }
+
                     me.btnSpelling = review.getButton('spelling', 'statusbar');
                     me.btnSpelling.render( me.statusbar.$layout.find('#btn-doc-spell') );
                 } else {
-                    me.statusbar.$el.find('.el-edit')['hide']();
+                    me.statusbar.$el.find('.el-edit, .el-review').hide();
                 }
             });
 

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

@@ -107,6 +107,11 @@ define([
                 'Toolbar': {
                     'view:compact'      : this.onChangeCompactView,
                     'insert:break'      : this.onClickPageBreak
+                },
+                'FileMenu': {
+                    'filemenu:hide': function () {
+                        this.toolbar.setTab('');
+                    }.bind(this)
                 }
             });
 
@@ -2731,8 +2736,10 @@ define([
 
         onAppShowed: function (config) {
             var me = this;
-            // if ( config.canReview )
+
-            {
+            me.toolbar.render(config);
+
+            if ( config.isEdit ) {
                 var tab = {action: 'review', caption: 'Review'};
                 var $panel = DE.getController('Common.Controllers.ReviewChanges').createToolbarPanel();
 
@@ -2741,9 +2748,13 @@ define([
                 }
             }
 
-            if ( !Common.localStorage.itemExists("de-compact-toolbar") &&
+            if ( !config.isEdit ||
-                    config.customization && config.customization.compactToolbar ) {
+                    ( !Common.localStorage.itemExists("de-compact-toolbar") &&
-                me.onChangeCompactView(me.toolbar, true);
+                        config.customization && config.customization.compactToolbar )) {
+                this.toolbar.setFolded(true);
+
+                Common.NotificationCenter.trigger('layout:changed', 'toolbar');
+                Common.NotificationCenter.trigger('edit:complete', this.toolbar);
             }
         },
 

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

@@ -112,6 +112,18 @@ define([
 
             this.boxSdk = $('#editor_sdk');
             this.boxSdk.css('border-left', 'none');
+
+            Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
+        },
+
+        onAppShowed: function (config) {
+            var me = this;
+
+            if ( !config.isEdit ||
+                ( !Common.localStorage.itemExists("de-compact-toolbar") &&
+                config.customization && config.customization.compactToolbar )) {
+                me.viewport.vlayout.panels[0].height = 40;
+            }
         },
 
         onLayoutChanged: function(area) {

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

@@ -204,9 +204,9 @@ define([
 
         hide: function() {
             this.$el.hide();
-            if (this.mode.isEdit) DE.getController('Toolbar').DisableToolbar(false);
+            // if (this.mode.isEdit) DE.getController('Toolbar').DisableToolbar(false);
             this.fireEvent('filemenu:hide', [this]);
-            this.api.asc_enableKeyEvents(true);
+            // this.api.asc_enableKeyEvents(true);
         },
 
         applyMode: function() {

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

@@ -86,25 +86,27 @@ define([
             me.btnZoomDown.updateHint(me.tipZoomOut + Common.Utils.String.platformKey('Ctrl+-'));
             me.btnZoomUp.updateHint(me.tipZoomIn + Common.Utils.String.platformKey('Ctrl++'));
 
-            me.btnLanguage.updateHint(me.tipSetLang);
+            if ( config.isEdit ) {
-            me.btnLanguage.cmpEl.on({
+                me.btnLanguage.updateHint(me.tipSetLang);
-                'show.bs.dropdown': function () {
+                me.btnLanguage.cmpEl.on({
-                    _.defer(function(){
+                    'show.bs.dropdown': function () {
-                        me.btnLanguage.cmpEl.find('ul').focus();
+                        _.defer(function () {
-                    }, 100);
+                            me.btnLanguage.cmpEl.find('ul').focus();
-                },
+                        }, 100);
-                'hide.bs.dropdown': function () {
+                    },
-                    _.defer(function(){
+                    'hide.bs.dropdown': function () {
-                        me.api.asc_enableKeyEvents(true);
+                        _.defer(function () {
-                    }, 100);
+                            me.api.asc_enableKeyEvents(true);
-                },
+                        }, 100);
-                'click': function (e) {
+                    },
-                    if (me.btnLanguage.isDisabled()) {
+                    'click': function (e) {
-                        return false;
+                        if (me.btnLanguage.isDisabled()) {
+                            return false;
+                        }
                     }
-                }
+                });
-            });
+                me.langMenu.on('item:click', _.bind(_clickLanguage, this));
-            me.langMenu.on('item:click', _.bind(_clickLanguage,this));
+            }
 
             me.cntZoom.updateHint(me.tipZoomFactor);
             me.cntZoom.cmpEl.on({
@@ -285,7 +287,7 @@ define([
                 }.bind(this));
             },
 
-            render: function () {
+            render: function(config) {
                 var me = this;
 
                 function _btn_render(button, slot) {
@@ -302,20 +304,21 @@ define([
                 _btn_render(me.btnZoomUp, $('#btn-zoom-up', me.$layout));
                 _btn_render(me.txtGoToPage, $('#status-goto-page', me.$layout));
 
-                var panelLang = $('.cnt-lang', me.$layout);
+                if ( !config || config.isEdit ) {
-                _btn_render(me.btnLanguage, panelLang);
+                    var panelLang = $('.cnt-lang', me.$layout);
+                    _btn_render(me.btnLanguage, panelLang);
+
+                    me.langMenu.render(panelLang);
+                    me.langMenu.cmpEl.attr({tabindex: -1});
+                    me.langMenu.prevTip = 'en';
+                }
 
-                me.langMenu.render(panelLang);
                 me.zoomMenu.render($('.cnt-zoom',me.$layout));
-
-                me.langMenu.cmpEl.attr({tabindex: -1});
                 me.zoomMenu.cmpEl.attr({tabindex: -1});
 
                 this.$el.html(me.$layout);
                 this.fireEvent('render:after', [this]);
 
-                this.langMenu.prevTip = 'en';
-
                 return this;
             },
 

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

@@ -127,6 +127,14 @@ define([
             optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
         }
 
+        function onShowCoveredPanel(state) {
+            collapseToolbar();
+
+            if ( state )
+                optsFold.$bar.addClass('cover'); else
+                optsFold.$bar.removeClass('cover');
+        }
+
         function setFolded(value) {
             isFolded = value;
 
@@ -1316,19 +1324,14 @@ define([
 
                 this.fireEvent('render:before', [this]);
 
-                var top = Common.localStorage.getItem("de-pgmargins-top"),
+                if ( mode.isEdit )
-                    left = Common.localStorage.getItem("de-pgmargins-left"),
+                    me.$el.html( me.rendererComponents(config.$dom) );
-                    bottom = Common.localStorage.getItem("de-pgmargins-bottom"),
+                else {
-                    right = Common.localStorage.getItem("de-pgmargins-right");
+                    config.$dom.find('[data-tab=home],[data-tab=ins],[data-tab=layout]').hide();
-                // if (top!==null && left!==null && bottom!==null && right!==null) {
+                    config.$dom.addClass('folded');
-                //     var mnu = this.btnPageMargins.menu.items[0];
-                //     mnu.options.value = mnu.value = [parseFloat(top), parseFloat(left), parseFloat(bottom), parseFloat(right)];
-                //     mnu.setVisible(true);
-                //     $(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options}));
-                // } else
-                //     this.btnPageMargins.menu.items[0].setVisible(false);
 
-                me.$el.html( me.rendererComponents(config.$dom) );
+                    me.$el.html(config.$dom);
+                }
 
                 this.fireEvent('render:after', [this]);
 
@@ -1361,18 +1364,25 @@ define([
                 $scrollR.on('click', onScrollTabs.bind(this, 'right'));
 
                 Common.NotificationCenter.on({
-                    'window:resize': onResize,
+                    'window:resize': onResize
-                    'layout:changed': function (opts) {
-                        if ( opts == 'menufile' ) {
-                            me.setTab(lastPanel);
-                        }
-                    }
                 });
 
                 if ( me.isCompactView )
                     me.setFolded(true); else
                     me.setTab('home');
 
+                var top = Common.localStorage.getItem("de-pgmargins-top"),
+                    left = Common.localStorage.getItem("de-pgmargins-left"),
+                    bottom = Common.localStorage.getItem("de-pgmargins-bottom"),
+                    right = Common.localStorage.getItem("de-pgmargins-right");
+                if ( top!==null && left!==null && bottom!==null && right!==null ) {
+                    var mnu = this.btnPageMargins.menu.items[0];
+                    mnu.options.value = mnu.value = [parseFloat(top), parseFloat(left), parseFloat(bottom), parseFloat(right)];
+                    mnu.setVisible(true);
+                    $(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options}));
+                } else
+                    this.btnPageMargins.menu.items[0].setVisible(false);
+
                 return this;
             },
 
@@ -1478,6 +1488,8 @@ define([
                 (new Promise( function(resolve, reject) {
                     resolve();
                 })).then(function () {
+                    if ( !config.isEdit ) return;
+
                     me.btnsPageBreak.forEach( function(btn) {
                         btn.updateHint( me.tipPageBreak );
 
@@ -2432,27 +2444,38 @@ define([
             },
 
             setTab: function (tab) {
-                $tabs.removeClass('active');
+                if ( !tab || !tab.length ) {
-                $panels.removeClass('active');
+                    if ( isFolded ) onShowCoveredPanel(false);
-
+                    else tab = lastPanel;
-                var panel = $panels.filter('[data-tab=' + tab + ']');
-                if ( panel.length ) {
-                    lastPanel = tab;
-                    panel.addClass('active');
                 }
 
-                var $tp = $tabs.find('> a[data-tab=' + tab + ']').parent();
+                if ( tab ) {
-                if ( $tp.length ) {
+                    $tabs.removeClass('active');
-                    $tp.addClass('active');
+                    $panels.removeClass('active');
 
-                    $marker.width($tp.width());
+                    var panel = $panels.filter('[data-tab=' + tab + ']');
+                    if (panel.length) {
+                        lastPanel = tab;
+                        panel.addClass('active');
+                    }
 
-                    if ($scrollL.is(':visible'))
+                    var $tp = $tabs.find('> a[data-tab=' + tab + ']').parent();
-                        $marker.css({left: $tp.position().left + $boxTabs.scrollLeft() - $scrollL.width()});
+                    if ($tp.length) {
-                    else $marker.css({left: $tp.position().left});
+                        $tp.addClass('active');
+
+                        $marker.width($tp.width());
+
+                        if ($scrollL.is(':visible'))
+                            $marker.css({left: $tp.position().left + $boxTabs.scrollLeft() - $scrollL.width()});
+                        else $marker.css({left: $tp.position().left});
+                    }
+
+                    if ( isFolded ) {
+                        if ( panel.length )
+                            expandToolbar(); else
+                            onShowCoveredPanel(true);
+                    }
                 }
-
-                if ( isFolded ) expandToolbar();
             },
 
             addTab: function (tab, panel, after) {

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

@@ -132,11 +132,8 @@ define([
 
         applyEditorMode: function() {
             var me              = this,
-                toolbarView     = DE.getController('Toolbar').getView('Toolbar'),
+                rightMenuView   = DE.getController('RightMenu').getView('RightMenu');
-                rightMenuView   = DE.getController('RightMenu').getView('RightMenu'),
-                statusBarView   = DE.getController('Statusbar').getView('Statusbar');
 
-            me._toolbar     = toolbarView.render(this.mode);
             me._rightMenu   = rightMenuView.render(this.mode);
 
             var value = Common.localStorage.getItem('de-hidden-status');

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

@@ -24,7 +24,7 @@
             overflow: visible;
         }
 
-        &:not(.expanded) {
+        &:not(.expanded):not(.cover){
             .marker {
                 opacity: 0;
             }