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

[rtl] Make settings in right panel

Browse source
This commit is contained in:
JuliaSvinareva 2022-10-23 19:07:40 +03:00
parent e16eaa1f15
commit 03db98ce74
11 changed files with 275 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
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 combo-border-size-ed input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<span class="input-group combobox combo-border-size 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>',
@ -241,7 +241,7 @@ define([
Common.UI.ComboBorderType = Common.UI.ComboBorderSize.extend(_.extend({
template: _.template([
'<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="input-group combobox combo-border-size combo-border-type input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<i class="image"></i>',
'</div>',

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

@ -477,6 +477,10 @@
&.align-left {
text-align: left;
.rtl & {
text-align: right;
}
}
}
@ -531,6 +535,22 @@
> .btn {
+ .dropdown-toggle {
padding: 0 4px 0 3px;
.rtl & {
padding: 0 3px 0 4px;
}
}
.rtl & {
float: right;
}
&:first-child:not(:last-child):not(.dropdown-toggle) {
.rtl & {
.border-radius(@border-radius-small);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
@ -544,6 +564,14 @@
}
}
> .dropdown-toggle:not(first-child) {
.rtl & {
.border-radius(@border-radius-small);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.caption {
&:empty {
display: none;
@ -893,6 +921,11 @@
position: absolute;
right: 5px;
margin-top: 5px;
.rtl & {
right: auto;
left: 5px;
}
}
&:hover:not(.disabled),
@ -935,6 +968,12 @@
&:not(.dropdown-toggle) {
border-right: none;
.rtl & {
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
border-left: none;
}
}
&:hover:not(.disabled),

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

@ -68,15 +68,13 @@
}
}
&:not(.combo-border-size-ed) {
&.combo-border-type {
.rtl & li img {
float: right;
}
}
}
.combo-border-size-ed {
.dropdown-menu li a {
&:not(.combo-border-type) .dropdown-menu li a {
padding: 5px 20px;
}
}

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

@ -320,6 +320,10 @@
.item {
margin: @combo-dataview-item-margins 0 @combo-dataview-item-margins @combo-dataview-item-margins;
.box-shadow(none);
.rtl & {
margin: @combo-dataview-item-margins @combo-dataview-item-margins @combo-dataview-item-margins 0;
}
}
&.disabled {

18
apps/documenteditor/main/app/template/HeaderFooterSettings.template
View file

@ -52,9 +52,9 @@
</tr>
<tr>
<td class="padding-small">
<div id="headerfooter-button-top-left" style="display: inline-block; margin-right:5px;"></div>
<div id="headerfooter-button-top-center" style="display: inline-block; margin-right:5px;"></div>
<div id="headerfooter-button-top-right" style="display: inline-block; margin-right:5px;"></div>
<div id="headerfooter-button-top-left"></div>
<div id="headerfooter-button-top-center"></div>
<div id="headerfooter-button-top-right"></div>
</td>
</tr>
<tr>
@ -64,9 +64,9 @@
</tr>
<tr>
<td class="padding-small">
<div id="headerfooter-button-bottom-left" style="display: inline-block; margin-right:5px;"></div>
<div id="headerfooter-button-bottom-center" style="display: inline-block; margin-right:5px;"></div>
<div id="headerfooter-button-bottom-right" style="display: inline-block; margin-right:5px;"></div>
<div id="headerfooter-button-bottom-left"></div>
<div id="headerfooter-button-bottom-center"></div>
<div id="headerfooter-button-bottom-right"></div>
</td>
</tr>
<tr>
@ -86,9 +86,9 @@
</tr>
<tr>
<td class="padding-small">
<div id="headerfooter-radio-prev" style="margin-bottom: 5px;"></div>
<div id="headerfooter-radio-from" style="display: inline-block;vertical-align: middle; margin-right: 2px;"></div>
<div id="headerfooter-spin-from" style="display: inline-block;vertical-align: middle;"></div>
<div id="headerfooter-radio-prev"></div>
<div id="headerfooter-radio-from"></div>
<div id="headerfooter-spin-from"></div>
</td>
</tr>
<tr class="finish-cell"></tr>

8
apps/documenteditor/main/app/template/ImageSettings.template
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>

2
apps/documenteditor/main/app/template/ParagraphSettings.template
View file

@ -73,7 +73,7 @@
<tr class="text-only">
<td class="padding-small" colspan=2>
<div id="paragraph-color-btn" style="display: inline-block;"></div>
<label class="input-label" style="margin-left: 5px;"><%= scope.textBackColor %></label>
<label class="input-label margin"><%= scope.textBackColor %></label>
</td>
</tr>
<tr>

18
apps/documenteditor/main/app/template/TableSettings.template
View file

@ -53,10 +53,10 @@
</tr>
<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 id="table-border-color-btn" style="display: inline-block;"></div>
<div id="table-combo-border-size"></div>
<div class="table-color">
<label class="input-label"><%= scope.textBorderColor %></label>
<div id="table-border-color-btn"></div>
</div>
</td>
</tr>
@ -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 margin"><%= scope.textBackColor %></label>
<div id="table-back-color-btn" style="display: inline-block;text-align:left;"></div>
</td>
</tr>
@ -112,15 +112,15 @@
<tr>
<td class="padding-small" colspan=2>
<label style="margin-top: 3px;"><%= scope.textHeight %></label>
<div id="table-btn-distrub-rows" style="display: inline-block; float:right; margin-left: 4px;"></div>
<div id="table-spin-cell-height" style="display: inline-block; float:right;"></div>
<div id="table-btn-distrub-rows"></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-btn-distrub-cols" style="display: inline-block; float:right; margin-left: 4px;"></div>
<div id="table-spin-cell-width" style="display: inline-block; float:right;"></div>
<div id="table-btn-distrub-cols"></div>
<div id="table-spin-cell-width"></div>
</td>
</tr>
<tr>

8
apps/documenteditor/main/app/template/TextArtSettings.template
View file

@ -39,7 +39,7 @@
</div>
</td>
<td rowspan="2" style="width: 100%;">
<div style="float: right;">
<div class="textart-direction">
<label class="input-label"><%= scope.textDirection %></label>
<div id="textart-button-direction"></div>
</div>
@ -47,7 +47,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>
@ -64,7 +64,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">
<label class="input-label" style=""><%= scope.textPosition %></label>
<div id="textart-gradient-position"></div>
</div>
@ -86,7 +86,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>

3
apps/documenteditor/main/app/view/TableSettings.js
View file

@ -484,7 +484,6 @@ define([
cls : 'btn-toolbar',
iconCls : 'toolbar__icon table-to-text',
caption : this.textConvert,
style : 'width: 100%;text-align: left;',
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'medium'
@ -871,7 +870,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',

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

@ -9,10 +9,108 @@
}
}
.right-panel .settings-panel {
label.input-label{
label.input-label {
vertical-align: baseline;
}
&#id-paragraph-settings {
.input-label.margin {
margin-left: 5px;
.rtl & {
margin-left: 0;
margin-right: 5px;
}
}
}
&#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;
.rtl & {
padding: 3px 10px 3px 0;
text-align: right;
}
}
}
#table-combo-border-size {
display: inline-block;
vertical-align: middle;
width: 93px;
}
.table-color {
display: inline-block;
float: right;
vertical-align: middle;
.rtl & {
float: left;
}
.input-label {
margin-right: 5px;
.rtl & {
margin-right: 0;
margin-left: 5px;
}
}
#table-border-color-btn {
display: inline-block;
}
}
.input-label.margin {
margin-right: 5px;
.rtl & {
margin-right: 0;
margin-left: 5px;
}
}
#table-btn-distrub-rows, #table-btn-distrub-cols,
#table-spin-cell-height, #table-spin-cell-width {
display: inline-block;
float: right;
.rtl & {
float: left;
}
}
#table-btn-distrub-rows, #table-btn-distrub-cols {
margin-left: 4px;
.rtl & {
margin-left: 0;
margin-right: 4px;
}
}
#table-btn-convert-to-text {
.btn {
width: 100%;
text-align: left;
.rtl & {
text-align: right;
}
}
}
}
&#id-shape-settings {
#shape-panel-transparent-fill {
width: 100%;
@ -71,6 +169,107 @@
}
}
}
&#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-header-settings {
#headerfooter-radio-from {
display: inline-block;
vertical-align: middle;
margin-right: 2px;
.rtl & {
margin-right: 0;
margin-left: 2px;
}
}
#headerfooter-radio-prev {
margin-bottom: 5px;
}
#headerfooter-spin-from {
display: inline-block;
vertical-align: middle;
}
#headerfooter-button-top-left,
#headerfooter-button-top-center,
#headerfooter-button-top-right,
#headerfooter-button-bottom-left,
#headerfooter-button-bottom-center,
#headerfooter-button-bottom-right {
display: inline-block;
margin-right: 5px;
.rtl & {
margin-right: 0;
margin-left: 5px;
}
}
}
&#id-textart-settings {
#textart-spin-transparency {
display: inline-block;
float: right;
.rtl & {
float: left;
}
}
#textart-panel-gradient-fill {
.textart-direction {
float: right;
.rtl & {
float: left;
}
}
}
.angle-label {
margin-bottom: 3px;
margin-right: 5px;
.rtl & {
margin-right: 0;
margin-left: 5px;
}
}
#id-textart-menu-direction {
.dataview .item {
.rtl & {
float: left;
}
}
}
.gradient-position {
margin-left: 10px;
.rtl & {
margin-left: 0;
margin-right: 10px;
}
}
}
}
.ie {