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

[rtl] Make shape settings for DE

Browse source
This commit is contained in:
JuliaSvinareva 2022-10-19 22:35:38 +03:00
parent feb696b8ec
commit bd3664eae8
10 changed files with 134 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
apps/common/main/lib/component/ComboBorderSize.js
View file

@ -182,7 +182,7 @@ define([
Common.UI.ComboBorderSizeEditable = Common.UI.ComboBox.extend(_.extend({
template: _.template([
'<span class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<span class="input-group combobox combo-border-size combo-border-size-ed input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control text" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret"></span>',
@ -190,10 +190,17 @@ define([
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
'<% if (!isRTL) { %>',
'<span><%= item.displayValue %></span>',
'<% if (item.offsety!==undefined) { %>',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">',
'<% } %>',
'<% } else { %>',
'<% if (item.offsety!==undefined) { %>',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="left" style="background-position: 0 -<%= item.offsety %>px;">',
'<% } %>',
'<span><%= item.displayValue %></span>',
'<% } %>',
'</a></li>',
'<% }); %>',
'</ul>',

3
apps/common/main/lib/component/ComboBox.js
View file

@ -153,7 +153,8 @@ define([
scope : me,
dataHint : this.options.dataHint,
dataHintDirection: this.options.dataHintDirection,
dataHintOffset: this.options.dataHintOffset
dataHintOffset: this.options.dataHintOffset,
isRTL : Common.UI.isRTL()
}));
if (this.itemsTemplate)
this.cmpEl.find('ul').html(

2
apps/common/main/lib/component/ComboDataView.js
View file

@ -112,7 +112,7 @@ define([
this.openButton = new Common.UI.Button({
cls: 'open-menu',
menu: new Common.UI.Menu({
menuAlign: 'tl-tl',
menuAlign: Common.UI.isRTL() ? 'tr-tr' : 'tl-tl',
offset: [0, 3],
items: [
{template: _.template('<div class="menu-picker-container"></div>')}

2
apps/common/main/lib/component/Menu.js
View file

@ -178,6 +178,8 @@ define([
this.menuAlign = 'tr-tl';
} else if (this.menuAlign === 'tl-bl') {
this.menuAlign = 'tr-br';
} else if (this.menuAlign === 'tr-br') {
this.menuAlign = 'tl-bl';
}
}

14
apps/common/main/lib/component/Slider.js
View file

@ -156,7 +156,7 @@ define([
$(document).off('mousemove', onMouseMove);
me._dragstart = undefined;
me.trigger('changecomplete', me, me.value, me.lastValue);
me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
};
var onMouseMove = function (e) {
@ -175,7 +175,7 @@ define([
me.value = pos/me.delta + me.minValue;
if (Math.abs(me.value-me.lastValue)>0.001)
me.trigger('change', me, me.value, me.lastValue);
me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
};
var onMouseDown = function (e) {
@ -201,8 +201,8 @@ define([
me.lastValue = me.value;
me.value = pos/me.delta + me.minValue;
me.trigger('change', me, me.value, me.lastValue);
me.trigger('changecomplete', me, me.value, me.lastValue);
me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
};
var updateslider;
@ -211,7 +211,7 @@ define([
me.lastValue = me.value;
me.value = Math.max(me.minValue, Math.min(me.maxValue, me.value + ((increase) ? me.step : -me.step)));
me.setThumbPosition(Math.round((me.value-me.minValue)*me.delta));
me.trigger('change', me, me.value, me.lastValue);
me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
};
var onKeyDown = function (e) {
@ -234,7 +234,7 @@ define([
clearInterval(updateslider);
moveThumb(e.keyCode==Common.UI.Keys.UP || e.keyCode==Common.UI.Keys.RIGHT);
el.on('keydown', 'input', onKeyDown);
me.trigger('changecomplete', me, me.value, me.lastValue);
me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
}
};
@ -264,7 +264,7 @@ define([
setValue: function(value) {
this.lastValue = this.value;
this.value = Math.max(this.minValue, Math.min(this.maxValue, value));
this.setThumbPosition(Math.round((value-this.minValue)*this.delta));
this.setThumbPosition(Math.round(((Common.UI.isRTL() ? this.maxValue - value : value)-this.minValue)*this.delta));
},
getValue: function() {

20
apps/common/main/resources/less/buttons.less
View file

@ -529,6 +529,10 @@
> .dropdown-toggle:first-child {
.inner-box-caret {
padding: 0 4px 0 3px;
.rtl & {
padding: 0 3px 0 4px;
}
}
}
@ -664,6 +668,11 @@
border:@scaled-one-px-value solid @border-regular-control;
.border-radius(@border-radius-small);
.rtl & {
padding: @scaled-one-px-value-ie @scaled-one-px-value-ie @scaled-one-px-value-ie 11px;
padding: @scaled-one-px-value @scaled-one-px-value @scaled-one-px-value 11px ;
}
span:nth-child(1) {
float: left;
width: 100%;
@ -677,6 +686,11 @@
position: absolute;
right: 0;
top: 2px;
.rtl & {
right: auto;
left: 0;
}
}
&,
@ -701,6 +715,12 @@
height: 34px;
transform: translate(16px, -9px) rotate(62deg);
left: 0;
.rtl & {
left: auto;
right: 0;
transform: translate(-16px, -9px) rotate(62deg);
}
}
}

16
apps/common/main/resources/less/combo-border-size.less
View file

@ -34,10 +34,6 @@
background-color: transparent;
image-rendering: pixelated;
float: left;
.rtl & {
float: right;
}
}
}
@ -71,6 +67,18 @@
background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@2x.png)";
}
}
&:not(.combo-border-size-ed) {
.rtl & li img {
float: right;
}
}
}
.combo-border-size-ed {
.dropdown-menu li a {
padding: 5px 20px;
}
}
.combo-color {

12
apps/common/main/resources/less/combo-dataview.less
View file

@ -287,6 +287,13 @@
.view {
margin-right: -@combo-dataview-button-width;
padding-right: @combo-dataview-button-width;
.rtl & {
margin-right: 0;
padding-right: 0;
margin-left: -@combo-dataview-button-width;
padding-left: @combo-dataview-button-width;
}
}
.button {
@ -343,6 +350,11 @@
margin-left: 4px;
.box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
.box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
.rtl & {
margin: 2px 0 2px 2px;
margin-right: 4px;
}
}
&.disabled {

22
apps/documenteditor/main/app/template/ShapeSettings.template
View file

@ -101,14 +101,14 @@
</tr>
<tr class="no-form">
<td>
<div class="padding-small" id="shape-panel-transparent-fill" style="width: 100%;">
<label class="header" style="display:block;"><%= scope.strTransparency %></label>
<div style="display: inline-block; margin-top: 3px;">
<div class="padding-small" id="shape-panel-transparent-fill">
<label class="header"><%= scope.strTransparency %></label>
<div class="shape-slider">
<label id="shape-lbl-transparency-start">0</label>
<div id="shape-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
<div id="shape-slider-transparency"></div>
<label id="shape-lbl-transparency-end">100</label>
</div>
<div id="shape-spin-transparency" style="display: inline-block;float: right;"></div>
<div id="shape-spin-transparency"></div>
</div>
</td>
</tr>
@ -159,15 +159,15 @@
<td class="padding-small" width="50%">
<label class="input-label"><%= scope.textRotate90 %></label>
<div>
<div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
<div id="shape-button-90" style="display: inline-block;"></div>
<div id="shape-button-270"></div>
<div id="shape-button-90"></div>
</div>
</td>
<td class="padding-small" width="50%">
<label class="input-label"><%= scope.textFlip %></label>
<div>
<div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
<div id="shape-button-flipv" style="display: inline-block;"></div>
<div id="shape-button-fliph"></div>
<div id="shape-button-flipv"></div>
</div>
</td>
</tr>
@ -199,8 +199,8 @@
</tr>
<tr class="change-type">
<td class="padding-small">
<label class="header" style="margin-top: 3px;"><%= scope.strChange %></label>
<div id="shape-btn-change" style="display: inline-block; float:right;"></div>
<label class="header"><%= scope.strChange %></label>
<div id="shape-btn-change"></div>
</td>
</tr>
<tr class="no-form">

59
apps/documenteditor/main/resources/less/rightmenu.less
View file

@ -12,6 +12,65 @@
label.input-label{
vertical-align: baseline;
}
&#id-shape-settings {
#shape-panel-transparent-fill {
width: 100%;
.header {
display: block;
}
.shape-slider {
display: inline-block;
margin-top: 3px;
}
#shape-spin-transparency {
display: inline-block;
float: right;
.rtl & {
float: left;
}
}
#shape-slider-transparency {
display: inline-block;
margin: 0 4px;
vertical-align: middle;
}
}
#shape-button-270, #shape-button-fliph {
display: inline-block;
margin-right: 4px;
.rtl & {
margin-right: 0;
margin-left: 4px;
}
}
#shape-button-90, #shape-button-flipv {
display: inline-block;
}
.change-type {
.header {
margin-top: 3px;
}
#shape-btn-change {
display: inline-block;
float: right;
.rtl & {
float: left;
}
}
}
}
}
.ie {