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

[rtl] Make dropdown menu (margins, size, custom zoom)

Browse source
This commit is contained in:
JuliaSvinareva 2022-10-05 20:24:35 +03:00
parent 1fc88fb6c3
commit dc06aab506
4 changed files with 92 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/main/resources/less/toolbar.less
View file

@ -752,6 +752,10 @@
&.colors { &.colors {
display: inline-block; display: inline-block;
margin-right: 15px; margin-right: 15px;
.rtl & {
margin-right: 0;
margin-left: 15px;
}
} }
&.color { &.color {

19
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -1032,13 +1032,21 @@ define([
this.toolbarControls.push(this.btnPageOrient); this.toolbarControls.push(this.btnPageOrient);
var pageMarginsTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' + var pageMarginsTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<% if (options.value !== null) { %><div class="margin-vertical">' + '<% if (options.value !== null) { %><div class="margin-vertical">' +
'<label>' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' + '<label>' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
'<label>' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' + '<label>' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
'<div class="margin-horizontal">' + '<div class="margin-horizontal">' +
'<label>' + this.textBottom + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' + '<label>' + this.textBottom + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
'<label>' + this.textRight + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' + '<label>' + this.textRight + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
'<% } %></a>') :
_.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<% if (options.value !== null) { %><div class="margin-vertical">' +
'<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %>' + this.textTop + '</label>' +
'<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %>' + this.textLeft + '</label></div>' +
'<div class="margin-horizontal">' +
'<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %>' + this.textBottom + '</label>' +
'<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %>' + this.textRight + '</label></div>' +
'<% } %></a>'); '<% } %></a>');
this.btnPageMargins = new Common.UI.Button({ this.btnPageMargins = new Common.UI.Button({
@ -1101,9 +1109,12 @@ define([
}); });
this.toolbarControls.push(this.btnPageMargins); this.toolbarControls.push(this.btnPageMargins);
var pageSizeTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' + var pageSizeTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' + '<div dir="ltr"><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
'<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>'); '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>') :
_.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<div dir="ltr"><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> x ' +
'<%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %></div></a>');
this.btnPageSize = new Common.UI.Button({ this.btnPageSize = new Common.UI.Button({
id: 'tlbtn-pagesize', id: 'tlbtn-pagesize',

51
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -1674,12 +1674,21 @@ define([
dataHintOffset: 'small' dataHintOffset: 'small'
}); });
var pageMarginsTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' + var pageMarginsTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<% if (options.value !== null) { %><div style="display: inline-block;margin-right: 20px;min-width: 80px;">' + '<% if (options.value !== null) { %><div class="margin-vertical">' +
'<label style="display: block;">' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' + '<label>' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
'<label style="display: block;">' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div><div style="display: inline-block;">' + '<label>' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
'<label style="display: block;">' + this.textBottom + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' + '<div class="margin-horizontal">' +
'<label style="display: block;">' + this.textRight + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' + '<label>' + this.textBottom + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
'<label>' + this.textRight + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
'<% } %></a>') :
_.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<% if (options.value !== null) { %><div class="margin-vertical">' +
'<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %>' + this.textTop + '</label>' +
'<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %>' + this.textLeft + '</label></div>' +
'<div class="margin-horizontal">' +
'<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %>' + this.textBottom + '</label>' +
'<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %>' + this.textRight + '</label></div>' +
'<% } %></a>'); '<% } %></a>');
me.btnPageMargins = new Common.UI.Button({ me.btnPageMargins = new Common.UI.Button({
@ -1689,6 +1698,7 @@ define([
caption: me.capBtnMargins, caption: me.capBtnMargins,
lock : [_set.docPropsLock, _set.lostConnect, _set.coAuth, _set.editCell, _set.selRangeEdit], lock : [_set.docPropsLock, _set.lostConnect, _set.coAuth, _set.editCell, _set.selRangeEdit],
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
cls: 'menu-margins',
items: [ items: [
{ {
caption: me.textMarginsLast, caption: me.textMarginsLast,
@ -1726,9 +1736,12 @@ define([
dataHintOffset: 'small' dataHintOffset: 'small'
}); });
var pageSizeTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' + var pageSizeTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' + '<div dir="ltr"><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
'<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>'); '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>') :
_.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
'<div dir="ltr"><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> x ' +
'<%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %></div></a>');
me.btnPageSize = new Common.UI.Button({ me.btnPageSize = new Common.UI.Button({
id: 'tlbtn-pagesize', id: 'tlbtn-pagesize',
@ -1884,16 +1897,16 @@ define([
me.mnuCustomScale = new Common.UI.MenuItem({ me.mnuCustomScale = new Common.UI.MenuItem({
template: _.template([ template: _.template([
'<div class="checkable custom-scale" style="padding: 5px 5px 5px 20px;font-weight: normal;line-height: 1.42857143;font-size: 11px;height: 32px;"', '<div class="checkable custom-scale"',
'<% if(!_.isUndefined(options.stopPropagation)) { %>', '<% if(!_.isUndefined(options.stopPropagation)) { %>',
'data-stopPropagation="true"', 'data-stopPropagation="true"',
'<% } %>', '>', '<% } %>', '>',
'<label class="title" style="padding-top: 3px;padding-right: 5px;">' + me.textScale + '</label>', '<label class="title">' + me.textScale + '</label>',
'<button id="custom-scale-up" type="button" style="float:right;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>', '<button id="custom-scale-up" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>',
'<label id="value-custom-scale" style="float:right;padding: 3px 3px;min-width: 40px; text-align: center;"></label>', '<label id="value-custom-scale"></label>',
'<button id="custom-scale-down" type="button" style="float:right;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>', '<button id="custom-scale-down" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>',
'</div>' '</div>'
].join('')), ].join('')),
stopPropagation: true, stopPropagation: true,
value: 4 value: 4
}); });

41
apps/spreadsheeteditor/main/resources/less/toolbar.less
View file

@ -146,3 +146,44 @@
margin-right: 2px; margin-right: 2px;
} }
} }
.custom-scale {
padding: 5px 5px 5px 20px;
font-weight: normal;
line-height: 1.42857143;
font-size: 11px;
height: 32px;
.rtl & {
padding: 5px 20px 5px 5px;
}
.title {
padding-top: 3px;
padding-right: 5px;
.rtl & {
padding-right: 0;
padding-left: 5px;
float: right;
}
}
#custom-scale-up {
float:right;
.rtl & {
float: left;
}
}
#value-custom-scale {
float:right;
padding: 3px 3px;
min-width: 40px;
text-align: center;
.rtl & {
float: left;
}
}
#custom-scale-down {
float:right;
.rtl & {
float: left;
}
}
}