diff --git a/apps/common/main/lib/component/Layout.js b/apps/common/main/lib/component/Layout.js index 54cb6dd24..bb294def8 100644 --- a/apps/common/main/lib/component/Layout.js +++ b/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); } diff --git a/apps/common/main/lib/util/LocalStorage.js b/apps/common/main/lib/util/LocalStorage.js index 105984fa8..63dd7819f 100644 --- a/apps/common/main/lib/util/LocalStorage.js +++ b/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 }; diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 8d3e556ae..88f0d8e38 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/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,13 +2742,17 @@ 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) { + if ( config.canComments ) { var _btnsComment = []; var slots = me.toolbar.$el.find('.slot-comment'); slots.each(function(index, el) { diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js index 51a7dade5..5ea3581cd 100644 --- a/apps/documenteditor/main/app/controller/Viewport.js +++ b/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': { diff --git a/apps/documenteditor/main/app/view/LeftMenu.js b/apps/documenteditor/main/app/view/LeftMenu.js index 34ff99204..b98bb8e7a 100644 --- a/apps/documenteditor/main/app/view/LeftMenu.js +++ b/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); diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 023b969de..06b45d4a5 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -127,8 +127,8 @@ define([ optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout); } - function setFolded(f) { - isFolded = f; + function setFolded(value) { + 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,7 +1384,9 @@ define([ } }); - me.setTab('home'); + 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"); - var valueTitle = (value !== null && parseInt(value) == 1); - - 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); + // value = Common.localStorage.getItem("de-compact-toolbar"); + // var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && this.mode.customization && this.mode.customization.compactToolbar); + this.mnuitemCompactToolbar.setChecked(this.isCompactView, 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, - 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]); - } + this.fireEvent('view:compact', [this, compact]); }, onSendThemeColorSchemes: function (schemas) { diff --git a/apps/documenteditor/main/app/view/Viewport.js b/apps/documenteditor/main/app/view/Viewport.js index 0dde7ff71..96c4d15bb 100644 --- a/apps/documenteditor/main/app/view/Viewport.js +++ b/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 diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less index 8aa370f88..9bc3869c3 100644 --- a/apps/documenteditor/main/resources/less/filemenu.less +++ b/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%; diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index ff78e602d..900129a98 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/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) {