Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE] Fix max width for divide of document formats in Download As panel

Browse source
This commit is contained in:
JuliaSvinareva 2022-11-16 01:05:58 +03:00
parent 088a3c8e11
commit ad3de112b8
2 changed files with 49 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
apps/documenteditor/main/app/view/FileMenuPanels.js
View file

@ -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;
},

48
apps/documenteditor/main/resources/less/filemenu.less
View file

@ -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;
}
}
}
}
}
}