diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js index eae82c882..def9c4070 100644 --- a/apps/documenteditor/main/app/view/FileMenuPanels.js +++ b/apps/documenteditor/main/app/view/FileMenuPanels.js @@ -95,6 +95,16 @@ define([ this.menu = options.menu; this.fileType = options.fileType; this.mode = options.mode; + + Common.NotificationCenter.on({ + 'window:resize': _.bind(function() { + var divided = Common.Utils.innerWidth() >= this.maxWidth; + if (this.isDivided !== divided) { + this.$el.find('.divider').css('width', divided ? '100%' : '0'); + this.isDivided = divided; + } + }, this) + }); }, render: function() { @@ -125,6 +135,21 @@ define([ }); } + var itemWidth = 70 + 24, // width + margin + maxCount = 0; + this.formats.forEach(_.bind(function (item, index) { + var count = item.length; + if (count > maxCount) { + maxCount = count; + } + }, this)); + this.maxWidth = $('#file-menu-panel .panel-menu').outerWidth() + 20 + 10 + itemWidth * maxCount; // menu + left padding + margin + + if (Common.Utils.innerWidth() >= this.maxWidth) { + this.$el.find('.divider').css('width', '100%'); + this.isDivided = true; + } + return this; }, diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less index 1ded18d4d..94b5a981d 100644 --- a/apps/documenteditor/main/resources/less/filemenu.less +++ b/apps/documenteditor/main/resources/less/filemenu.less @@ -82,38 +82,38 @@ } } -#panel-saveas, #panel-savecopy { - .content-container { - margin: 30px 0 0 10px; - - .header { - font-size: 18px; - margin-bottom: 17px; +#file-menu-panel .panel-context { + #panel-saveas, #panel-savecopy { + &.content-box { + padding: 0 0 0 20px; } - .format-items { - .format-item { - float: left; - margin: 0 24px 34px 0; + .content-container { + margin: 30px 0 0 10px; - .btn-doc-format { - width: 70px; - height: 90px; + .header { + font-size: 18px; + margin-bottom: 17px; + } + + .format-items { + .format-item { + float: left; + margin: 0 24px 34px 0; + + .btn-doc-format { + width: 70px; + height: 90px; + } } - } - .divider { - float: left; - width: 0; - height: 0; - } - - @media(min-width: 800px) { .divider { - width: 100%; + float: left; + width: 0; + height: 0; } - } + } } } }