[DE PE SSE] Change layouts of Download as, Document info, Protect document, Advanced settings, Create new panels

This commit is contained in:
JuliaSvinareva 2022-11-22 21:14:19 +03:00
parent ad3de112b8
commit 575adb8540
6 changed files with 250 additions and 122 deletions

View file

@ -216,6 +216,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() {
@ -246,6 +256,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;
},
@ -271,7 +296,8 @@ define([
template: _.template([
'<div class="flex-settings">',
'<table style="margin: 10px 14px 0;"><tbody>',
'<div class="header"><%= scope.txtAdvancedSettings %></div>',
'<table style="margin: 0 14px 0 20px;"><tbody>',
'<tr class="editsave">',
'<td colspan="2" class="group-name top"><label><%= scope.txtEditingSaving %></label></td>',
'</tr>',
@ -1026,7 +1052,8 @@ define([
txtStrictTip: 'Use the \'Save\' button to sync the changes you and others make',
strIgnoreWordsInUPPERCASE: 'Ignore words in UPPERCASE',
strIgnoreWordsWithNumbers: 'Ignore words with numbers',
strShowOthersChanges: 'Show changes from other users'
strShowOthersChanges: 'Show changes from other users',
txtAdvancedSettings: 'Advanced Settings'
}, DE.Views.FileMenuPanels.Settings || {}));
DE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
@ -1099,7 +1126,7 @@ define([
},
template: _.template([
'<h3 style="margin-top: 20px;"><%= scope.txtCreateNew %></h3>',
'<div class="header"><%= scope.txtCreateNew %></div>',
'<div class="thumb-list">',
'<% if (blank) { %> ',
'<div class="blank-document">',
@ -1187,7 +1214,8 @@ define([
this.template = _.template([
'<div class="flex-settings">',
'<table class="main" style="margin: 30px 0 0;">',
'<div class="header">' + this.txtDocumentInfo + '</div>',
'<table class="main">',
'<tr>',
'<td class="left"><label>' + this.txtPlacement + '</label></td>',
'<td class="right"><label id="id-info-placement">-</label></td>',
@ -1313,7 +1341,7 @@ define([
'</table>',
'</div>',
'<div id="fms-flex-apply">',
'<table class="main" style="margin: 10px 0;">',
'<table class="main">',
'<tr>',
'<td class="left"></td>',
'<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.okButtonText %></button></td>',
@ -1895,7 +1923,8 @@ define([
txtFastWV: 'Fast Web View',
txtYes: 'Yes',
txtNo: 'No',
txtPdfProducer: 'PDF Producer'
txtPdfProducer: 'PDF Producer',
txtDocumentInfo: 'Document Info'
}, DE.Views.FileMenuPanels.DocumentInfo || {}));
@ -2229,7 +2258,7 @@ define([
menu: undefined,
template: _.template([
'<label id="id-fms-lbl-protect-header" style="font-size: 18px;"><%= scope.strProtect %></label>',
'<label id="id-fms-lbl-protect-header"><%= scope.strProtect %></label>',
'<div id="id-fms-password">',
'<label class="header"><%= scope.strEncrypt %></label>',
'<div id="fms-btn-add-pwd" style="width:190px;"></div>',

View file

@ -92,8 +92,8 @@
margin: 30px 0 0 10px;
.header {
font-size: 18px;
margin-bottom: 17px;
font-size: 16px;
margin-bottom: 20px;
}
.format-items {
@ -220,6 +220,11 @@
}
#panel-settings {
.header {
margin: 30px 0 16px 30px;
font-size: 16px;
}
table {
width: auto !important;
tr {
@ -267,31 +272,14 @@
}
#panel-createnew {
h3 {
margin: 0;
font-size: 10pt;
color: @text-normal-ie;
color: @text-normal;
.font-weight-bold();
padding: 0 0 10px 10px;
.header {
font-size: 16px;
padding: 0 0 0 10px;
white-space: nowrap;
margin-top: 30px;
margin-bottom: 20px;
}
.blank-document-info {
vertical-align: top;
width: 445px;
display: inline-block;
h3 {
padding-left: 0;
padding-top: 40px;
white-space: nowrap;
}
}
hr {
margin: 0;
border-bottom: none;
@ -453,6 +441,10 @@
#panel-info,
#panel-rights {
.header {
margin: 30px 0 20px 30px;
font-size: 16px;
}
table {
tr {
td {
@ -461,7 +453,7 @@
&.left {
padding: 5px 10px;
text-align: right;
width: 30%;
width: 200px;
label {
.font-weight-bold();
@ -470,7 +462,7 @@
&.right {
padding: 5px 10px;
width: 70%;
width: calc(100% - 200px);
}
}
@ -549,7 +541,7 @@ label {
.header {
.font-weight-bold();
margin: 30px 0 10px;
margin: 20px 0 10px;
}
table {
@ -557,4 +549,8 @@ table {
padding: 5px 0;
}
}
#id-fms-lbl-protect-header {
font-size: 16px;
}
}

View file

@ -92,6 +92,16 @@ define([
this.menu = options.menu;
this.fileType = options.fileType;
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() {
@ -106,6 +116,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;
},
@ -166,6 +191,16 @@ define([
this.menu = options.menu;
this.fileType = options.fileType;
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() {
@ -180,6 +215,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;
},
@ -205,7 +255,8 @@ define([
template: _.template([
'<div class="flex-settings">',
'<table style="margin: 10px 14px auto;"><tbody>',
'<div class="header"><%= scope.txtAdvancedSettings %></div>',
'<table style="margin: 0 14px 0 20px;"><tbody>',
'<tr class="editsave">',
'<td colspan="2" class="group-name top"><label><%= scope.txtEditingSaving %></label></td>',
'</tr>',
@ -785,7 +836,8 @@ define([
txtStrictTip: 'Use the \'Save\' button to sync the changes you and others make',
strIgnoreWordsInUPPERCASE: 'Ignore words in UPPERCASE',
strIgnoreWordsWithNumbers: 'Ignore words with numbers',
strShowOthersChanges: 'Show changes from other users'
strShowOthersChanges: 'Show changes from other users',
txtAdvancedSettings: 'Advanced Settings'
}, PE.Views.FileMenuPanels.Settings || {}));
PE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
@ -858,7 +910,7 @@ define([
},
template: _.template([
'<h3 style="margin-top: 20px;"><%= scope.txtCreateNew %></h3>',
'<div class="header"><%= scope.txtCreateNew %></div>',
'<div class="thumb-list">',
'<% if (blank) { %> ',
'<div class="blank-document">',
@ -946,7 +998,8 @@ define([
this.template = _.template([
'<div class="flex-settings">',
'<table class="main" style="margin: 30px 0 0;">',
'<div class="header">' + this.txtPresentationInfo + '</div>',
'<table class="main">',
'<tr>',
'<td class="left"><label>' + this.txtPlacement + '</label></td>',
'<td class="right"><label id="id-info-placement">-</label></td>',
@ -1374,7 +1427,8 @@ define([
txtAddAuthor: 'Add Author',
txtAddText: 'Add Text',
txtMinutes: 'min',
okButtonText: 'Apply'
okButtonText: 'Apply',
txtPresentationInfo: 'Presentation Info'
}, PE.Views.FileMenuPanels.DocumentInfo || {}));
PE.Views.FileMenuPanels.DocumentRights = Common.UI.BaseView.extend(_.extend({
@ -1687,7 +1741,7 @@ define([
menu: undefined,
template: _.template([
'<label id="id-fms-lbl-protect-header" style="font-size: 18px;"><%= scope.strProtect %></label>',
'<label id="id-fms-lbl-protect-header"><%= scope.strProtect %></label>',
'<div id="id-fms-password">',
'<label class="header"><%= scope.strEncrypt %></label>',
'<div id="fms-btn-add-pwd" style="width:190px;"></div>',

View file

@ -192,12 +192,16 @@
}
#panel-saveas, #panel-savecopy {
&.content-box {
padding: 0 0 0 20px;
}
.content-container {
margin: 30px 0 0 10px;
.header {
font-size: 18px;
margin-bottom: 17px;
font-size: 16px;
margin-bottom: 20px;
}
.format-items {
@ -217,12 +221,6 @@
height: 0;
}
@media(min-width: 800px) {
.divider {
width: 100%;
}
}
}
}
}
@ -235,6 +233,11 @@
}
#panel-settings {
.header {
margin: 30px 0 16px 30px;
font-size: 16px;
}
table {
width: auto !important;
@ -281,26 +284,12 @@
}
#panel-createnew {
h3 {
margin: 0;
font-size: 10pt;
color: @text-normal-ie;
color: @text-normal;
.font-weight-bold();
padding: 0 0 10px 10px;
.header {
font-size: 16px;
padding: 0 0 0 10px;
white-space: nowrap;
}
.blank-document-info {
vertical-align: top;
width: 445px;
display: inline-block;
h3 {
padding-left: 0;
padding-top: 45px;
white-space: nowrap;
}
margin-top: 30px;
margin-bottom: 20px;
}
hr {
@ -462,6 +451,11 @@
#panel-info,
#panel-rights {
.header {
margin: 30px 0 20px 30px;
font-size: 16px;
}
table {
tr {
td {
@ -470,7 +464,7 @@
&.left {
padding: 5px 10px;
text-align: right;
width: 30%;
width: 200px;
label {
.font-weight-bold();
@ -479,7 +473,7 @@
&.right {
padding: 5px 10px;
width: 70%;
width: calc(100% - 200px);
}
}
@ -535,7 +529,7 @@
.header {
.font-weight-bold();
margin: 30px 0 10px;
margin: 20px 0 10px;
}
table {
@ -543,6 +537,10 @@
padding: 5px 0;
}
}
#id-fms-lbl-protect-header {
font-size: 16px;
}
}
}
}

View file

@ -78,6 +78,16 @@ define([
this.menu = options.menu;
this.fileType = options.fileType;
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() {
@ -92,6 +102,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;
},
@ -149,6 +174,16 @@ define([
this.menu = options.menu;
this.fileType = options.fileType;
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() {
@ -163,6 +198,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;
},
@ -188,7 +238,8 @@ define([
template: _.template([
'<div class="flex-settings">',
'<table class="main" style="margin: 10px 14px auto;"><tbody>',
'<div class="header"><%= scope.txtAdvancedSettings %></div>',
'<table class="main" style="margin: 0 14px 0 20px;"><tbody>',
'<tr class="editsave">',
'<td class="group-name top" colspan="2"><label><%= scope.txtEditingSaving %></label></td>',
'</tr>',
@ -1173,7 +1224,8 @@ define([
txtStrictTip: 'Use the \'Save\' button to sync the changes you and others make',
strShowOthersChanges: 'Show changes from other users',
txtCalculating: 'Calculating',
strDateFormat1904: 'Use 1904 date system'
strDateFormat1904: 'Use 1904 date system',
txtAdvancedSettings: 'Advanced Settings'
}, SSE.Views.FileMenuPanels.MainSettingsGeneral || {}));
@ -1247,7 +1299,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
},
template: _.template([
'<h3 style="margin-top: 20px;"><%= scope.txtCreateNew %></h3>',
'<div class="header"><%= scope.txtCreateNew %></div>',
'<div class="thumb-list">',
'<% if (blank) { %> ',
'<div class="blank-document">',
@ -1335,7 +1387,8 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
this.template = _.template([
'<div class="flex-settings">',
'<table class="main" style="margin: 30px 0 0;">',
'<div class="header">' + this.txtSpreadsheetInfo + '</div>',
'<table class="main">',
'<tr>',
'<td class="left"><label>' + this.txtPlacement + '</label></td>',
'<td class="right"><label id="id-info-placement">-</label></td>',
@ -1758,7 +1811,8 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
txtAddAuthor: 'Add Author',
txtAddText: 'Add Text',
txtMinutes: 'min',
okButtonText: 'Apply'
okButtonText: 'Apply',
txtSpreadsheetInfo: 'Spreadsheet Info'
}, SSE.Views.FileMenuPanels.DocumentInfo || {}));
SSE.Views.FileMenuPanels.DocumentRights = Common.UI.BaseView.extend(_.extend({
@ -2071,7 +2125,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
menu: undefined,
template: _.template([
'<label id="id-fms-lbl-protect-header" style="font-size: 18px;"><%= scope.strProtect %></label>',
'<label id="id-fms-lbl-protect-header"><%= scope.strProtect %></label>',
'<div id="id-fms-password">',
'<label class="header"><%= scope.strEncrypt %></label>',
'<div id="fms-btn-add-pwd" style="width:190px;"></div>',

View file

@ -177,12 +177,16 @@
}
#panel-saveas, #panel-savecopy {
&.content-box {
padding: 0 0 0 20px;
}
.content-container {
margin: 30px 0 0 10px;
.header {
font-size: 18px;
margin-bottom: 17px;
font-size: 16px;
margin-bottom: 20px;
}
.format-items {
@ -202,12 +206,6 @@
height: 0;
}
@media(min-width: 800px) {
.divider {
width: 100%;
}
}
}
}
}
@ -223,6 +221,11 @@
display: flex;
flex-direction: column;
.header {
margin: 30px 0 16px 30px;
font-size: 16px;
}
#id-settings-menu {
.dataview {
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
@ -336,26 +339,12 @@
}
#panel-createnew {
h3 {
margin: 0;
font-size: 10pt;
color: @text-normal-ie;
color: @text-normal;
.font-weight-bold();
padding: 0 0 10px 10px;
.header {
font-size: 16px;
padding: 0 0 0 10px;
white-space: nowrap;
}
.blank-document-info {
vertical-align: top;
width: 445px;
display: inline-block;
h3 {
padding-left: 0;
padding-top: 45px;
white-space: nowrap;
}
margin-top: 30px;
margin-bottom: 20px;
}
hr {
@ -517,6 +506,10 @@
#panel-info,
#panel-rights {
.header {
margin: 30px 0 20px 30px;
font-size: 16px;
}
table {
tr {
td {
@ -525,7 +518,7 @@
&.left {
padding: 5px 10px;
text-align: right;
width: 30%;
width: 200px;
label {
.font-weight-bold();
@ -534,7 +527,7 @@
&.right {
padding: 5px 10px;
width: 70%;
width: calc(100% - 200px);
}
}
@ -590,7 +583,7 @@
.header {
.font-weight-bold();
margin: 30px 0 10px;
margin: 20px 0 10px;
}
table {
@ -598,6 +591,10 @@
padding: 5px 0;
}
}
#id-fms-lbl-protect-header {
font-size: 16px;
}
}
#panel-print {