From 73364f7f8b47c9f2573f152d49b287af0e021cfb Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Tue, 28 Feb 2017 13:09:05 +0300 Subject: [PATCH] [DE] implemeted toolbar folding --- .../main/app/controller/Toolbar.js | 14 ++++ apps/documenteditor/main/app/view/Toolbar.js | 73 ++++++++++++++++++- .../main/resources/less/toolbar.less | 19 ++++- 3 files changed, 104 insertions(+), 2 deletions(-) diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 8fad77bdf..3aa513da6 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/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.
Please enter a numeric value between 1 and 100', diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index e8ba66e9f..114152e49 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/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', diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index 1c6c4b061..f2c6774e9 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/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;