[DE] compact view for toolbar

apps/common/main/lib/component/Layout.js

@@ -454,7 +454,7 @@ define([
                     style = {top: height};
                     panel.rely!==true && (style.height = panel.height);
                     panel.el.css(style);
-                    height += this.getElementHeight(panel.el);
+                    height += style.height || this.getElementHeight(panel.el);
                 }
             }, this);
         }

apps/common/main/lib/util/LocalStorage.js

@@ -90,6 +90,11 @@ define(['gateway'], function () {
             return (value !== null && parseInt(value) != 0);
         }
 
+        var _getItemExists = function (name) {
+            var value = _getItem(name);
+            return value !== null;
+        }
+
         try {
             var _lsAllowed = !!window.localStorage;
         } catch (e) {
@@ -109,6 +114,7 @@ define(['gateway'], function () {
             setKeysFilter: function(value) {
                 _filter = value;
             },
+            itemExists: _getItemExists,
             sync: _refresh,
             save: _save
         };

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

@@ -105,7 +105,7 @@ define([
 
             this.addListeners({
                 'Toolbar': {
-                    'changecompact'     : this.onChangeCompactView,
+                    'view:compact'      : this.onChangeCompactView,
                     'insert:break'      : this.onClickPageBreak
                 }
             });
@@ -326,8 +326,9 @@ define([
         },
 
         onChangeCompactView: function(view, compact) {
-            Common.localStorage.setItem('de-compact-toolbar', compact ? 1 : 0);
+            this.toolbar.setFolded(compact);
 
+            Common.localStorage.setItem('de-compact-toolbar', compact ? 1 : 0);
             Common.NotificationCenter.trigger('layout:changed', 'toolbar');
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
@@ -2730,16 +2731,6 @@ define([
             this.onToolbarAfterRender(this.toolbar);
         },
 
-        setToolbarFolding: function (f) {
-            this.toolbar.setFolded(f);
-
-            var viewport  = this.getApplication().getController('Viewport').getView('Viewport');
-            viewport.vlayout.items[0].rely = !f;
-            viewport.vlayout.items[0].height = 42;
-
-            Common.NotificationCenter.trigger('layout:changed', 'toolbar');
-        },
-
         onAppShowed: function (config) {
             var me = this;
             // if ( config.canReview )
@@ -2751,11 +2742,15 @@ define([
                     me.toolbar.addTab(tab, $panel, 3);
                 }
             }
+
+            if ( !Common.localStorage.itemExists("de-compact-toolbar") &&
+                    config.customization && config.customization.compactToolbar ) {
+                me.onChangeCompactView(me.toolbar, true);
+            }
         },
 
         onAppReady: function (config) {
             var me = this;
-            // me.setToolbarFolding(true);
 
             if ( config.canComments ) {
                 var _btnsComment = [];

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

@@ -72,6 +72,9 @@ define([
                     'render:before' : function (toolbar) {
                         toolbar.setExtra('right', me.header.getPanel('right'));
                         toolbar.setExtra('left', me.header.getPanel('left'));
+                    },
+                    'view:compact'  : function (toolbar, state) {
+                        me.viewport.vlayout.panels[0].height = state ? 40 : 40+67;
                     }
                 },
                 'Common.Views.Header': {

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

@@ -259,7 +259,6 @@ define([
         close: function(menu) {
             if ( this.menuFile.isVisible() ) {
                 this.menuFile.hide();
-                Common.NotificationCenter.trigger('layout:changed', 'menufile');
             } else {
 
                 this.btnAbout.toggle(false);

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

@@ -127,8 +127,8 @@ define([
             optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
         }
 
-        function setFolded(f) {
+        function setFolded(value) {
-            isFolded = f;
+            isFolded = value;
 
             if ( isFolded ) {
                 if ( !optsFold.$bar ) optsFold.$bar = this.$el.find('.toolbar');
@@ -138,13 +138,9 @@ define([
                 optsFold.$box.on({
                     mouseleave: function (e) {
                         optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
-
-                        console.log('mouse out');
                     },
                     mouseenter: function (e) {
                         clearTimeout(optsFold.timer);
-
-                        console.log('mouse in');
                     }
                 });
 
@@ -1346,15 +1342,12 @@ define([
                 // } else
                 //     this.btnPageMargins.menu.items[0].setVisible(false);
 
-                var value = Common.localStorage.getItem("de-compact-toolbar");
-                var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar);
-
                 me.$el.html( me.rendererComponents(config.$dom) );
 
-                me.isCompactView = valueCompact;
-
                 this.fireEvent('render:after', [this]);
 
+                me.isCompactView = Common.localStorage.getBool("de-compact-toolbar");
+
                 /** coauthoring begin **/
                 value = Common.localStorage.getItem("de-hide-synch");
                 this.showSynchTip = !(value && parseInt(value) == 1);
@@ -1391,6 +1384,8 @@ define([
                     }
                 });
 
+                if ( me.isCompactView )
+                    me.setFolded(true); else
                     me.setTab('home');
 
                 return this;
@@ -2157,19 +2152,10 @@ define([
 
                 /**/
                 var mode = this.mode;
-                var value = Common.localStorage.getItem("de-compact-toolbar");
-                var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && this.mode.customization && this.mode.customization.compactToolbar);
 
-                value = Common.localStorage.getItem("de-hidden-title");
+                // value = Common.localStorage.getItem("de-compact-toolbar");
-                var valueTitle = (value !== null && parseInt(value) == 1);
+                // var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && this.mode.customization && this.mode.customization.compactToolbar);
-
+                this.mnuitemCompactToolbar.setChecked(this.isCompactView, true);
-                value = Common.localStorage.getItem("de-hidden-status");
-                var valueStatus = (value !== null && parseInt(value) == 1);
-
-                value = Common.localStorage.getItem("de-hidden-rulers");
-                var valueRulers = (value !== null && parseInt(value) == 1);
-
-                this.mnuitemCompactToolbar.setChecked(valueCompact, true);
                 this.mnuitemCompactToolbar.on('toggle', _.bind(this.changeViewMode, this));
 
                 this.mnuitemHideTitleBar.setChecked(valueTitle, true);
@@ -2294,53 +2280,7 @@ define([
             },
 
             changeViewMode: function (item, compact) {
-                var me = this,
+                this.fireEvent('view:compact', [this, compact]);
-                    toolbarFull = $('#id-toolbar-full'),
-                    toolbarShort = $('#id-toolbar-short');
-
-                me.isCompactView = compact;
-
-                if (toolbarFull && toolbarShort) {
-                    if (compact) {
-                        toolbarShort.css({
-                            display: 'table'
-                        });
-                        toolbarFull.css({
-                            display: 'none'
-                        });
-                        toolbarShort.parent().css({
-                            height: '41px'
-                        });
-                        this.rendererComponents('short');
-                    } else {
-                        toolbarShort.css({
-                            display: 'none'
-                        });
-                        toolbarFull.css({
-                            display: 'table'
-                        });
-                        toolbarShort.parent().css({
-                            height: '67px'
-                        });
-                        this.rendererComponents('full');
-
-                        // layout styles
-                        _.defer(function () {
-                            var listStylesVisible = (me.listStyles.rendered);
-
-                            if (me.listStyles.menuPicker.store.length > 0 && listStylesVisible) {
-                                me.listStyles.fillComboView(me.listStyles.menuPicker.getSelectedRec(), true);
-                            }
-
-                            if (me.btnInsertText.rendered)
-                                DE.getController('Toolbar').fillTextArt();
-                            if (me.btnInsertEquation.rendered)
-                                DE.getController('Toolbar').fillEquations();
-                        }, 100);
-                    }
-
-                    this.fireEvent('changecompact', [this, compact]);
-                }
             },
 
             onSendThemeColorSchemes: function (schemas) {

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

@@ -84,7 +84,8 @@ define([
                 box: $container,
                 items: [{
                         el: $container.find(' > .layout-item#toolbar'),
-                        rely: true
+                        // rely: true
+                        height: Common.localStorage.getBool('de-compact-toolbar') ? 40 : 40+67
                     }, {
                         el: $container.find(' > .layout-item.middle'),
                         stretch: true

apps/documenteditor/main/resources/less/filemenu.less

@@ -5,7 +5,6 @@
   bottom: 0;
   left: 0;
   padding: 0;
-  border-top: 1px solid @gray-dark;
 
   > div {
     height: 100%;

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

@@ -7,7 +7,8 @@
 }
 
 .toolbar {
-    //overflow: hidden;
+    position: relative;
+    z-index: 101;
 
     &:not(.folded) {
         height: @height-tabs + @height-controls;
@@ -16,15 +17,28 @@
     &.folded {
         height: @height-tabs;
         transition: height .2s;
+        overflow: hidden;
 
         &.expanded {
             height: @height-tabs + @height-controls;
+            overflow: visible;
+        }
+
+        &:not(.expanded) {
+            .marker {
+                opacity: 0;
+            }
+
+            .rib-tab.active {
+                > a {
+                    font-weight: normal;
+                }
+            }
         }
     }
 
     .box-tabs {
         height: @height-tabs;
-        .box-shadow(0 1px 0 @gray-dark);
 
         display: flex;
         align-items: stretch;
@@ -32,6 +46,14 @@
         .extra {
             background-color: @tabs-bg-color;
         }
+
+        &::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            border-top: 1px solid @gray-dark;
+            top: @height-tabs - 1;
+        }
     }
 
     .tabs {
@@ -87,9 +109,10 @@
         .marker {
             position: relative;
             border-top: 3px solid @gray-darker;
-            top: -4px;
+            top: -5px;
             -webkit-transition: width .2s, left .2s ease-out;
-            transition: width .2s, left .2s ease-out;
+            opacity: 1;
+            transition: width .2s, left .2s ease-out, opacity .2s;
         }
 
         &:not(.short) {