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

[rtl] Make settings in right panel (shape, textart)

Browse source
This commit is contained in:
JuliaSvinareva 2022-10-24 02:22:31 +03:00
parent 03db98ce74
commit d29d0d61c7
4 changed files with 84 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,7 +26,7 @@
<div id="shape-combo-fill-type" style="width: 90px;"></div> <div id="shape-combo-fill-type" style="width: 90px;"></div>
</td> </td>
<td rowspan="2"> <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">
<div id="shape-texture-img" style="width: 50px;height: 50px;"></div> <div id="shape-texture-img" style="width: 50px;height: 50px;"></div>
</div> </div>
</td> </td>
@ -44,11 +44,11 @@
<div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div> <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;"> <div style="width: 100%; height: 25px; margin-bottom: 8px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label> <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>
<div style="width: 100%; height: 25px;"> <div style="width: 100%; height: 25px;">
<label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label> <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> </div>
<div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;"> <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@ -61,7 +61,7 @@
</div> </div>
</td> </td>
<td rowspan="2" style="width: 100%;"> <td rowspan="2" style="width: 100%;">
<div style="float: right;"> <div class="shape-direction">
<label class="input-label"><%= scope.textDirection %></label> <label class="input-label"><%= scope.textDirection %></label>
<div id="shape-button-direction"></div> <div id="shape-button-direction"></div>
</div> </div>
@ -69,7 +69,7 @@
</tr> </tr>
<tr valign="bottom"> <tr valign="bottom">
<td> <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>
<td> <td>
<div id="shape-spin-gradient-angle" style="display: inline-block; width: 60px;"></div> <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> <label class="input-label" style=""><%= scope.strColor %></label>
<div id="shape-gradient-color-btn"></div> <div id="shape-gradient-color-btn"></div>
</div> </div>
<div style="margin-left: 10px;"> <div class="gradient-position">
<label class="input-label" style=""><%= scope.textPosition %></label> <label class="input-label" style=""><%= scope.textPosition %></label>
<div id="shape-gradient-position"></div> <div id="shape-gradient-position"></div>
</div> </div>

15
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -532,7 +532,8 @@ define([
onGradientChange: function(slider, newValue, oldValue){ onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues(); 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; this._sliderChanged = true;
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
if (this._sendUndoPoint) { if (this._sendUndoPoint) {
@ -1012,7 +1013,8 @@ define([
me.GradColor.currentIdx = 0; me.GradColor.currentIdx = 0;
} }
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); 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.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]}; this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
this.BGColor = {Value: 1, Color: 'ffffff'}; this.BGColor = {Value: 1, Color: 'ffffff'};
@ -1452,7 +1454,7 @@ define([
me.btnGradColor.setColor(color); me.btnGradColor.setColor(color);
me.colorsGrad.select(color,false); me.colorsGrad.select(color,false);
var pos = me.GradColor.values[me.GradColor.currentIdx]; 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){ this.sldrGradient.on('thumbdblclick', function(cmp){
me.btnGradColor.cmpEl.find('button').dropdown('toggle'); me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@ -2017,8 +2019,11 @@ define([
}, },
onPositionChange: function(btn) { onPositionChange: function(btn) {
var pos = btn.getNumberValue(), var pos = btn.getNumberValue();
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1], 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, maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue; needSort = pos < minValue || pos > maxValue;
if (this.api) { if (this.api) {

15
apps/documenteditor/main/app/view/TextArtSettings.js
View file

@ -398,7 +398,8 @@ define([
onGradientChange: function(slider, newValue, oldValue){ onGradientChange: function(slider, newValue, oldValue){
this.GradColor.values = slider.getValues(); 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; this._sliderChanged = true;
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
if (this._sendUndoPoint) { if (this._sendUndoPoint) {
@ -678,7 +679,8 @@ define([
me.GradColor.currentIdx = 0; me.GradColor.currentIdx = 0;
} }
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); 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() ? me.sldrGradient.maxValue - curValue : curValue);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]}; this.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]};
} }
@ -996,7 +998,7 @@ define([
me.btnGradColor.setColor(color); me.btnGradColor.setColor(color);
me.colorsGrad.select(color,false); me.colorsGrad.select(color,false);
var pos = me.GradColor.values[me.GradColor.currentIdx]; 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){ this.sldrGradient.on('thumbdblclick', function(cmp){
me.btnGradColor.cmpEl.find('button').dropdown('toggle'); me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@ -1308,8 +1310,11 @@ define([
}, },
onPositionChange: function(btn) { onPositionChange: function(btn) {
var pos = btn.getNumberValue(), var pos = btn.getNumberValue();
minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1], 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, maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
needSort = pos < minValue || pos > maxValue; needSort = pos < minValue || pos > maxValue;
if (this.api) { if (this.api) {

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

@ -168,6 +168,64 @@
} }
} }
} }
.shape-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-shape-menu-direction {
.dataview .item {
.rtl & {
float: left;
}
}
}
.texture-img {
width: 90px;
height: 80px;
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 { &#id-image-settings {