[rtl] Make settings in right panel for PE

This commit is contained in:
JuliaSvinareva 2022-10-27 21:36:28 +03:00
parent 1df3d1285a
commit e105d8930e
11 changed files with 376 additions and 81 deletions

View file

@ -41,15 +41,15 @@
<td class="padding-small" width="50%">
<label class="input-label"><%= scope.textRotate90 %></label>
<div>
<div id="image-button-270" style="display: inline-block;margin-right: 4px;"></div>
<div id="image-button-90" style="display: inline-block;"></div>
<div id="image-button-270"></div>
<div id="image-button-90"></div>
</div>
</td>
<td class="padding-small" width="50%">
<label class="input-label"><%= scope.textFlip %></label>
<div>
<div id="image-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
<div id="image-button-flipv" style="display: inline-block;"></div>
<div id="image-button-fliph"></div>
<div id="image-button-flipv"></div>
</div>
</td>
</tr>

View file

@ -26,7 +26,7 @@
<div id="shape-combo-fill-type" style="width: 90px;"></div>
</td>
<td rowspan="2">
<div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
<div class="texture-img" style="width: 90px; height: 80px;">
<div id="shape-texture-img" style="width: 50px;height: 50px;"></div>
</div>
</td>
@ -44,11 +44,11 @@
<div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
<div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
<div id="shape-foreground-color-btn"></div>
</div>
<div style="width: 100%; height: 25px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
<div id="shape-background-color-btn" style="display: inline-block; float:right;"></div>
<div id="shape-background-color-btn"></div>
</div>
</div>
<div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@ -61,7 +61,7 @@
</div>
</td>
<td rowspan="2" style="width: 100%;">
<div style="float: right;">
<div class="grad-direction">
<label class="input-label"><%= scope.textDirection %></label>
<div id="shape-button-direction"></div>
</div>
@ -69,7 +69,7 @@
</tr>
<tr valign="bottom">
<td>
<label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
<label class="input-label angle-label"><%= scope.textAngle %></label>
</td>
<td>
<div id="shape-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@ -86,7 +86,7 @@
<label class="input-label" style=""><%= scope.strColor %></label>
<div id="shape-gradient-color-btn"></div>
</div>
<div style="margin-left: 10px;">
<div class="gradient-position">
<label class="input-label" style=""><%= scope.textPosition %></label>
<div id="shape-gradient-position"></div>
</div>
@ -108,7 +108,7 @@
<div id="shape-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></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>
@ -182,7 +182,7 @@
<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>
<div id="shape-btn-change"></div>
</td>
</tr>
<tr>

View file

@ -44,11 +44,11 @@
<div id="slide-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
<div id="slide-foreground-color-btn" style="display: inline-block; float:right;"></div>
<div id="slide-foreground-color-btn"></div>
</div>
<div style="width: 100%; height: 25px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
<div id="slide-background-color-btn" style="display: inline-block; float:right;"></div>
<div id="slide-background-color-btn"></div>
</div>
</div>
<div id="slide-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@ -61,7 +61,7 @@
</div>
</td>
<td rowspan="2" style="width: 100%;">
<div style="float: right;">
<div class="slide-direction">
<label class="input-label"><%= scope.textDirection %></label>
<div id="slide-button-direction"></div>
</div>
@ -69,7 +69,7 @@
</tr>
<tr valign="bottom">
<td>
<label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
<label class="input-label angle-label"><%= scope.textAngle %></label>
</td>
<td>
<div id="slide-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@ -86,7 +86,7 @@
<label class="input-label" style=""><%= scope.strColor %></label>
<div id="slide-gradient-color-btn"></div>
</div>
<div style="margin-left: 10px;">
<div class="gradient-position">
<label class="input-label" style=""><%= scope.textPosition %></label>
<div id="slide-gradient-position"></div>
</div>
@ -108,7 +108,7 @@
<div id="slide-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
<label id="slide-lbl-transparency-end">100</label>
</div>
<div id="slide-spin-transparency" style="display: inline-block;float: right;"></div>
<div id="slide-spin-transparency"></div>
</div>
</td>
</tr>

View file

@ -54,8 +54,8 @@
<tr>
<td class="padding-small" colspan=2>
<div id="table-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
<div style="display: inline-block; float:right;vertical-align: middle;">
<label class="input-label" style="margin-right: 5px;"><%= scope.textBorderColor %></label>
<div class="border-color">
<label class="input-label color-label"><%= scope.textBorderColor %></label>
<div id="table-border-color-btn" style="display: inline-block;"></div>
</div>
</td>
@ -85,7 +85,7 @@
</tr>
<tr>
<td class="padding-small" colspan=2 align="right">
<label class="input-label" style="margin-right: 5px;"><%= scope.textBackColor %></label>
<label class="input-label color-label"><%= scope.textBackColor %></label>
<div id="table-back-color-btn" style="display: inline-block;text-align:left;"></div>
</td>
</tr>
@ -112,13 +112,13 @@
<tr>
<td class="padding-small" colspan=2>
<label style="margin-top: 3px;"><%= scope.textHeight %></label>
<div id="table-spin-cell-height" style="display: inline-block; float:right;"></div>
<div id="table-spin-cell-height"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<label style="margin-top: 3px;"><%= scope.textWidth %></label>
<div id="table-spin-cell-width" style="display: inline-block; float:right;"></div>
<div id="table-spin-cell-width"></div>
</td>
</tr>
<tr>

View file

@ -36,7 +36,7 @@
<button type="button" class="btn btn-text-default" id="textart-button-from-file" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromFile %></button>
</td>
<td class="padding-small" width="50%">
<button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;float:right;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
<button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
</td>
</tr>
<tr>
@ -44,7 +44,7 @@
<div id="textart-combo-fill-type" style="width: 90px;"></div>
</td>
<td rowspan="2">
<div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
<div class="texture-img" style="width: 90px; height: 80px;">
<div id="textart-texture-img" style="width: 50px;height: 50px;"></div>
</div>
</td>
@ -62,11 +62,11 @@
<div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
<div id="textart-foreground-color-btn" style="display: inline-block; float:right;"></div>
<div id="textart-foreground-color-btn"></div>
</div>
<div style="width: 100%; height: 25px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
<div id="textart-background-color-btn" style="display: inline-block; float:right;"></div>
<div id="textart-background-color-btn"></div>
</div>
</div>
<div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@ -79,7 +79,7 @@
</div>
</td>
<td rowspan="2" style="width: 100%;">
<div style="float: right;">
<div class="grad-direction">
<label class="input-label"><%= scope.textDirection %></label>
<div id="textart-button-direction"></div>
</div>
@ -87,7 +87,7 @@
</tr>
<tr valign="bottom">
<td>
<label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
<label class="input-label angle-label"><%= scope.textAngle %></label>
</td>
<td>
<div id="textart-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@ -104,7 +104,7 @@
<label class="input-label" style=""><%= scope.strColor %></label>
<div id="textart-gradient-color-btn"></div>
</div>
<div style="margin-left: 10px;">
<div class="gradient-position" style="margin-left: 10px;">
<label class="input-label" style=""><%= scope.textPosition %></label>
<div id="textart-gradient-position"></div>
</div>
@ -126,7 +126,7 @@
<div id="textart-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
<label id="textart-lbl-transparency-end">100</label>
</div>
<div id="textart-spin-transparency" style="display: inline-block;float: right;"></div>
<div id="textart-spin-transparency"></div>
</div>
</td>
</tr>

View file

@ -510,7 +510,8 @@ define([
onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues();
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
var curValue = this.GradColor.values[this.GradColor.currentIdx];
this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
@ -943,7 +944,8 @@ define([
me.GradColor.currentIdx = 0;
}
this.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
var curValue = me.GradColor.values[me.GradColor.currentIdx];
this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
this.BGColor = {Value: 1, Color: 'ffffff'};
@ -1360,7 +1362,7 @@ define([
me.btnGradColor.setColor(color);
me.colorsGrad.select(color,false);
var pos = me.GradColor.values[me.GradColor.currentIdx];
me.spnGradPosition.setValue(pos, true);
me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
});
this.sldrGradient.on('thumbdblclick', function(cmp){
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@ -1876,8 +1878,11 @@ define([
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue(),
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
var pos = btn.getNumberValue();
if (Common.UI.isRTL()) {
pos = this.sldrGradient.maxValue - pos;
}
var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue;
if (this.api) {

View file

@ -581,7 +581,8 @@ define([
onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues();
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
var curValue = this.GradColor.values[this.GradColor.currentIdx];
this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
@ -856,7 +857,7 @@ define([
me.btnGradColor.setColor(color);
me.colorsGrad.select(color,false);
var pos = me.GradColor.values[me.GradColor.currentIdx];
me.spnGradPosition.setValue(pos, true);
me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
});
this.sldrGradient.on('thumbdblclick', function(cmp){
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@ -1295,7 +1296,8 @@ define([
me.GradColor.currentIdx = 0;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
var curValue = this.GradColor.values[this.GradColor.currentIdx];
this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
this.BGColor = {Value: 1, Color: 'ffffff'};
@ -1450,8 +1452,11 @@ define([
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue(),
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
var pos = btn.getNumberValue();
if (Common.UI.isRTL()) {
pos = this.sldrGradient.maxValue - pos;
}
var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue;
if (this.api) {

View file

@ -799,7 +799,7 @@ define([
menu : new Common.UI.Menu({
style: 'width: 588px;',
items: [
{ template: _.template('<div id="id-table-menu-template" class="menu-table-template" style="margin: 5px 5px 5px 10px;"></div>') }
{ template: _.template('<div id="id-table-menu-template" class="menu-table-template"></div>') }
]
}),
dataHint: '1',

View file

@ -515,7 +515,8 @@ define([
onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues();
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
var curValue = this.GradColor.values[this.GradColor.currentIdx];
this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
this._sliderChanged = true;
if (this.api && !this._noApply) {
if (this._sendUndoPoint) {
@ -877,7 +878,8 @@ define([
me.GradColor.currentIdx = 0;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
var curValue = me.GradColor.values[me.GradColor.currentIdx];
this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
this.BGColor = {Value: 1, Color: 'ffffff'};
@ -1316,7 +1318,7 @@ define([
me.btnGradColor.setColor(color);
me.colorsGrad.select(color,false);
var pos = me.GradColor.values[me.GradColor.currentIdx];
me.spnGradPosition.setValue(pos, true);
me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
});
this.sldrGradient.on('thumbdblclick', function(cmp){
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@ -1760,8 +1762,11 @@ define([
},
onPositionChange: function(btn) {
var pos = btn.getNumberValue(),
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
var pos = btn.getNumberValue();
if (Common.UI.isRTL()) {
pos = this.sldrGradient.maxValue - pos;
}
var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue;
if (this.api) {

View file

@ -190,14 +190,6 @@
}
}
#slide-texture-img-box {
background: @background-normal;
border: @scaled-one-px-value solid @border-regular-control;
border-radius: 2px;
float: right;
padding: 14px 20px;
}
// Skeleton of document
.doc-placeholder {

View file

@ -6,6 +6,316 @@
label.input-label{
vertical-align: baseline;
}
&#id-slide-settings {
#slide-spin-transparency {
display: inline-block;
float: right;
.rtl & {
float: left;
}
}
.slide-direction {
float: right;
.rtl & {
float: left;
}
}
.angle-label {
margin-right: 5px;
margin-bottom: 3px;
.rtl & {
margin-right: 0;
margin-left: 5px;
}
}
.gradient-position {
margin-left: 10px;
.rtl & {
margin-left: 0;
margin-right: 10px;
}
}
#id-slide-menu-direction {
.dataview .item {
.rtl & {
float: left;
}
}
}
#slide-texture-img-box {
background: @background-normal;
border: @scaled-one-px-value solid @border-regular-control;
border-radius: 2px;
float: right;
padding: 14px 20px;
.rtl & {
float: left;
}
}
#slide-foreground-color-btn, #slide-background-color-btn {
display: inline-block;
float:right;
.rtl & {
float: left;
}
}
}
&#id-shape-settings {
#shape-spin-transparency {
display: inline-block;
float: right;
.rtl & {
float: left;
}
}
#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;
}
#shape-btn-change {
display: inline-block;
float:right;
.rtl & {
float: left;
}
}
.grad-direction {
float: right;
.rtl & {
float: left;
}
#id-shape-menu-direction {
.dataview .item {
.rtl & {
float: left;
}
}
}
}
.angle-label {
margin-right: 5px;
margin-bottom: 3px;
.rtl & {
margin-right: 0;
margin-left: 5px;
}
}
.gradient-position {
margin-left: 10px;
.rtl & {
margin-left: 0;
margin-right: 10px;
}
}
.texture-img {
padding: 14px 20px;
border: 1px solid #AFAFAF;
border-radius: 2px;
background: #ffffff;
float:right;
.rtl & {
float: left;
}
}
#shape-foreground-color-btn, #shape-background-color-btn {
display: inline-block;
float: right;
.rtl & {
float: left;
}
}
}
&#id-image-settings {
#image-button-270, #image-button-fliph {
display: inline-block;
margin-right: 4px;
.rtl & {
margin-right: 0;
margin-left: 4px;
}
}
#image-button-90, #image-button-flipv {
display: inline-block;
}
}
&#id-table-settings {
#id-table-menu-template {
margin: 5px 5px 5px 10px;
.rtl & {
margin: 5px 10px 5px 5px;
}
.group-description {
padding: 3px 0 3px 10px;
.font-weight-bold();
.rtl & {
padding: 3px 10px 3px 0;
text-align: right;
}
}
.group-items-container {
.item {
&:hover {
.box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
.box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
}
&.selected {
.box-shadow(0 0 0 2px @border-preview-select-ie) !important;
.box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
}
}
}
}
.border-color {
display: inline-block;
float: right;
vertical-align: middle;
.rtl & {
float: left;
}
}
.color-label {
margin-right: 5px;
.rtl & {
margin-right: 0;
margin-left: 5px;
}
}
#table-spin-cell-height, #table-spin-cell-width {
display: inline-block;
float:right;
.rtl & {
float: left;
}
}
}
&#id-textart-settings {
#textart-spin-transparency {
display: inline-block;
float: right;
.rtl & {
float: left;
}
}
.grad-direction {
float: right;
.rtl & {
float: left;
}
#id-textart-menu-direction {
.dataview .item {
.rtl & {
float: left;
}
}
}
}
.angle-label {
margin-right: 5px;
margin-bottom: 3px;
.rtl & {
margin-right: 0;
margin-left: 5px;
}
}
.gradient-position {
margin-left: 10px;
.rtl & {
margin-left: 0;
margin-right: 10px;
}
}
#textart-button-from-url {
float: right;
.rtl & {
float: left;
}
}
.texture-img {
padding: 14px 20px;
border: 1px solid #AFAFAF;
border-radius: 2px;
background: #ffffff;
float: right;
.rtl & {
float: left;
}
}
#textart-foreground-color-btn, #textart-background-color-btn {
display: inline-block;
float:right;
.rtl & {
float: left;
}
}
}
}
.item-wrap {
@ -101,26 +411,4 @@
}
}
}
}
#id-table-menu-template {
.group-description {
padding: 3px 0 3px 10px;
.font-weight-bold();
}
.group-items-container {
.item {
&:hover {
.box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
.box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
}
&.selected {
.box-shadow(0 0 0 2px @border-preview-select-ie) !important;
.box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
}
}
}
}