[DE] implemeted toolbar folding

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

@@ -169,6 +169,10 @@ define([
             this.toolbar = this.createView('Toolbar');
 
             // this.toolbar.on('render:after', _.bind(this.onToolbarAfterRender, this));
+            var me = this;
+            Common.NotificationCenter.on('app:ready', function () {
+                // me.setToolbarFolding(true);
+            });
         },
 
         onToolbarAfterRender: function(toolbar) {
@@ -2746,6 +2750,16 @@ define([
             this.onToolbarAfterRender(this.toolbar);
         },
 
+        setToolbarFolding: function (f) {
+            this.toolbar.setFolded(f);
+
+            var viewport  = this.getApplication().getController('Viewport').getView('Viewport');
+            viewport.vlayout.items[1].rely = !f;
+            viewport.vlayout.items[1].height = 42;
+
+            Common.NotificationCenter.trigger('layout:changed', 'toolbar');
+        },
+
         textEmptyImgUrl                            : 'You need to specify image URL.',
         textWarning                                : 'Warning',
         textFontSizeErr                            : 'The entered value is incorrect.<br>Please enter a numeric value between 1 and 100',

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

@@ -64,6 +64,8 @@ define([
         var $tabs, $boxTabs;
         var $panels, $marker, $scrollL;
         var lastPanel;
+        var isFolded = false;
+        var optsFold = {timeout: 2000};
 
         var config = {
             tabs: [
@@ -115,6 +117,69 @@ define([
             }
         }
 
+        function collapseToolbar() {
+            optsFold.$bar.removeClass('expanded');
+        }
+
+        function expandToolbar() {
+            clearTimeout(optsFold.timer);
+
+            optsFold.$bar.addClass('expanded');
+            optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
+        }
+
+        function setFolded(f) {
+            isFolded = f;
+
+            if ( isFolded ) {
+                if ( !optsFold.$bar ) optsFold.$bar = this.$el.find('.toolbar');
+                if ( !optsFold.$box ) optsFold.$box = this.$el.find('.box-controls');
+
+                optsFold.$bar.addClass('folded');
+                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');
+                    }
+                });
+
+                // $(document.body).on('focus', 'input, textarea', function(e) {
+                // });
+                //
+                // $(document.body).on('blur', 'input, textarea', function(e) {
+                // });
+                //
+                // Common.NotificationCenter.on({
+                //     'modal:show': function(){
+                //     },
+                //     'modal:close': function(dlg) {
+                //     },
+                //     'modal:hide': function(dlg) {
+                //     },
+                //     'dataview:focus': function(e){
+                //     },
+                //     'dataview:blur': function(e){
+                //     },
+                //     'menu:show': function(e){
+                //     },
+                //     'menu:hide': function(e){
+                //     },
+                //     'edit:complete': _.bind(me.onEditComplete, me)
+                // });
+
+            } else {
+                clearTimeout(optsFold.timer);
+                optsFold.$bar.removeClass('folded');
+                optsFold.$box.off();
+            }
+        }
+
         return {
             el: '#toolbar',
 
@@ -2265,7 +2330,7 @@ define([
                 }
 
                 var $tp = $tabs.find('> a[data-tab=' + tab + ']').parent();
-                if ($tp.length) {
+                if ( $tp.length ) {
                     $tp.addClass('active');
 
                     $marker.width($tp.width());
@@ -2274,6 +2339,8 @@ define([
                         $marker.css({left: $tp.position().left + $boxTabs.scrollLeft() - $scrollL.width()});
                     else $marker.css({left: $tp.position().left});
                 }
+
+                if ( isFolded ) expandToolbar();
             },
 
             addTab: function (tab, panel, after) {
@@ -2300,6 +2367,10 @@ define([
                 }
             },
 
+            setFolded: function (f) {
+                setFolded.call(this, f);
+            },
+
             textBold: 'Bold',
             textItalic: 'Italic',
             textUnderline: 'Underline',

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

@@ -1,8 +1,25 @@
 @height-tabs: 42px;
 @height-controls: 67px;
 
+#toolbar {
+    z-index: 101;
+}
+
 .toolbar {
-    height: @height-tabs + @height-controls;
+    overflow: hidden;
+
+    &:not(.folded) {
+        height: @height-tabs + @height-controls;
+    }
+
+    &.folded {
+        height: @height-tabs;
+        transition: height .2s;
+
+        &.expanded {
+            height: @height-tabs + @height-controls;
+        }
+    }
 
     .box-tabs {
         height: @height-tabs;