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

[rtl] Fix settings in header/footer dialog, chart type dialog, chart data range dialog, dialogs and menu from toolbar for SSE

Browse source
This commit is contained in:
JuliaSvinareva 2022-11-15 17:54:32 +03:00
parent f8d9a6d5e4
commit 8ee178e56c
8 changed files with 269 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -884,8 +884,22 @@
.menu-iconsets {
margin: 5px 5px 0 10px;
.rtl & {
margin: 5px 10px 0 5px;
}
.group-description {
text-align: right;
}
.group-items-container > div {
margin-right: 8px !important;
.rtl & {
margin-right: 4px !important;
margin-left: 8px !important;
}
&:not(:hover),
&:not(.selected) {
.box-shadow(none);
@ -894,6 +908,10 @@
.item-iconset {
img {
margin: 2px;
.rtl & {
float: right;
}
}
width: 100px;

15
apps/spreadsheeteditor/main/app/view/ChartDataDialog.js
View file

@ -50,7 +50,8 @@ define([
SSE.Views.ChartDataDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
options: {
contentWidth: 370,
height: 490
height: 490,
id: 'window-chart-data'
},
initialize : function(options) {
@ -81,12 +82,12 @@ define([
'</tr>',
'<tr>',
'<td class="padding-large">',
'<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-add" style="min-width: 70px;margin-right:5px;">', me.textAdd, '</button>',
'<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-edit" style="min-width: 70px;margin-right:5px;">', me.textEdit, '</button>',
'<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-delete" style="min-width: 70px;margin-right:5px;">', me.textDelete, '</button>',
'<div style="display: inline-block; float: right;">',
'<div id="chart-dlg-btn-up" style="display: inline-block;margin-right: 2px;"></div>',
'<div id="chart-dlg-btn-down" style="display: inline-block;"></div>',
'<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-add">', me.textAdd, '</button>',
'<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-edit">', me.textEdit, '</button>',
'<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-delete">', me.textDelete, '</button>',
'<div class="up-down-btns">',
'<div id="chart-dlg-btn-up"></div>',
'<div id="chart-dlg-btn-down"></div>',
'</div>',
'</td>',
'</tr>',

6
apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js
View file

@ -76,7 +76,7 @@ define([
'<div id="id-dlg-chart-range-range1"></div>',
'</td>',
'<td style="padding-bottom: 8px;">',
'<label id="id-dlg-chart-range-lbl1" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;">' + this.txtChoose + '</label>',
'<label id="id-dlg-chart-range-lbl1" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;">' + this.txtChoose + '</label>',
'</td>',
'</tr>',
'<% if (type==1) { %>',
@ -90,7 +90,7 @@ define([
'<div id="id-dlg-chart-range-range2"></div>',
'</td>',
'<td style="padding-bottom: 8px;">',
'<label id="id-dlg-chart-range-lbl2" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;"></label>',
'<label id="id-dlg-chart-range-lbl2" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;"></label>',
'</td>',
'</tr>',
'<% if (isScatter) { %>',
@ -104,7 +104,7 @@ define([
'<div id="id-dlg-chart-range-range3"></div>',
'</td>',
'<td style="padding-bottom: 8px;">',
'<label id="id-dlg-chart-range-lbl3" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;"></label>',
'<label id="id-dlg-chart-range-lbl3" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;"></label>',
'</td>',
'</tr>',
'<% } %>',

8
apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
View file

@ -197,10 +197,10 @@ define([
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([
'<div class="list-item" style="width: 100%;" id="chart-type-dlg-item-<%= seriesIndex %>">',
'<div style="width:8px;height:12px;display: inline-block;vertical-align: middle;" id="chart-type-dlg-series-preview-<%= seriesIndex %>"></div>',
'<div style="width:95px;padding-left: 5px;display: inline-block;vertical-align: middle;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;"><%= value %></div>',
'<div style="width: 110px;padding-left: 5px;display: inline-block;vertical-align: middle;"><div id="chart-type-dlg-cmb-series-<%= seriesIndex %>" class="input-group-nr" style=""></div></div>',
'<div style="padding-left: 55px;display: inline-block;vertical-align: middle;"><div id="chart-type-dlg-chk-series-<%= seriesIndex %>" style=""></div></div>',
'<div class="series-color" id="chart-type-dlg-series-preview-<%= seriesIndex %>"></div>',
'<div class="series-value"><%= value %></div>',
'<div class="series-cmb"><div id="chart-type-dlg-cmb-series-<%= seriesIndex %>" class="input-group-nr" style=""></div></div>',
'<div class="series-chk"><div id="chart-type-dlg-chk-series-<%= seriesIndex %>" style=""></div></div>',
'</div>'
].join(''))
});

43
apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
View file

@ -52,7 +52,8 @@ define([
style: 'min-width: 350px;',
cls: 'modal-dlg enable-key-events',
animate: {mask: false},
buttons: ['ok', 'cancel']
buttons: ['ok', 'cancel'],
id: 'window-header-footer'
},
initialize : function(options) {
@ -103,24 +104,24 @@ define([
'<div class="input-row input-row--tabs" style="margin-bottom: 15px;">',
'<button type="button" class="btn btn-text-default auto" id="id-dlg-hf-btn-all" style="border-radius: 0;">', this.textAll,'</button>',
'<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-odd" style="border-radius: 0;">', this.textOdd,'</button>',
'<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-even" style="border-radius: 0; margin-left:-1px;">', this.textEven,'</button>',
'<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-first" style="border-radius: 0; margin-left:-1px;">', this.textFirst,'</button>',
'<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-even" style="border-radius: 0;">', this.textEven,'</button>',
'<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-first" style="border-radius: 0;">', this.textFirst,'</button>',
'</div>',
'<label style="display: block; margin-bottom: 3px;">' + this.textHeader + '</label>',
'<div id="id-dlg-h-presets" class="input-row" style="display: inline-block; vertical-align: middle;"></div>',
'<div id="id-dlg-h-insert" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
'<div id="id-dlg-h-fonts" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
'<div id="id-dlg-h-font-size" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
'<div id="id-dlg-h-textcolor" style="display: inline-block;margin-left: 6px;"></div>',
'<div id="id-dlg-h-bold" style="display: inline-block;margin-left: 2px;"></div>','<div id="id-dlg-h-italic" style="display: inline-block;margin-left: 6px;"></div>',
'<div id="id-dlg-h-underline" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-h-strikeout" style="display: inline-block;margin-left: 6px;"></div>',
'<div id="id-dlg-h-subscript" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-h-superscript" style="display: inline-block;margin-left: 6px;"></div>',
'<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
'<div id="id-dlg-h-insert" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
'<div id="id-dlg-h-fonts" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
'<div id="id-dlg-h-font-size" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
'<div id="id-dlg-h-textcolor" class="margin-left-big" style="display: inline-block;"></div>',
'<div id="id-dlg-h-bold" class="margin-left-small" style="display: inline-block;"></div>','<div id="id-dlg-h-italic" class="margin-left-big" style="display: inline-block;"></div>',
'<div id="id-dlg-h-underline" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-h-strikeout" class="margin-left-big" style="display: inline-block;"></div>',
'<div id="id-dlg-h-subscript" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-h-superscript" class="margin-left-big" style="display: inline-block;"></div>',
'<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
'<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
'<div id="header-left-img" style="width: 190px; height: 100%;"></div>',
'</div>',
'</div>',
'<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
'<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
'<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
'<div id="header-center-img" style="width: 190px; height: 100%;"></div>',
'</div>',
@ -132,19 +133,19 @@ define([
'</div>',
'<label style="display: block; margin-top: 10px;margin-bottom: 3px;">' + this.textFooter + '</label>',
'<div id="id-dlg-f-presets" class="input-row" style="display: inline-block; vertical-align: middle;"></div>',
'<div id="id-dlg-f-insert" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
'<div id="id-dlg-f-fonts" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
'<div id="id-dlg-f-font-size" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
'<div id="id-dlg-f-textcolor" style="display: inline-block;margin-left: 6px;"></div>',
'<div id="id-dlg-f-bold" style="display: inline-block;margin-left: 2px;"></div>','<div id="id-dlg-f-italic" style="display: inline-block;margin-left: 6px;"></div>',
'<div id="id-dlg-f-underline" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-f-strikeout" style="display: inline-block;margin-left: 6px;"></div>',
'<div id="id-dlg-f-subscript" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-f-superscript" style="display: inline-block;margin-left: 6px;"></div>',
'<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
'<div id="id-dlg-f-insert" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
'<div id="id-dlg-f-fonts" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
'<div id="id-dlg-f-font-size" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
'<div id="id-dlg-f-textcolor" class="margin-left-big" style="display: inline-block;"></div>',
'<div id="id-dlg-f-bold" class="margin-left-small" style="display: inline-block;"></div>','<div id="id-dlg-f-italic" class="margin-left-big" style="display: inline-block;"></div>',
'<div id="id-dlg-f-underline" class="margin-left-big" style="display: inline-block;"></div>','<div class="margin-left-big" id="id-dlg-f-strikeout" style="display: inline-block;"></div>',
'<div id="id-dlg-f-subscript" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-f-superscript" class="margin-left-big" style="display: inline-block;"></div>',
'<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
'<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
'<div id="footer-left-img" style="width: 190px; height: 100%;"></div>',
'</div>',
'</div>',
'<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
'<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
'<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
'<div id="footer-center-img" style="width: 190px; height: 100%;"></div>',
'</div>',

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

@ -269,8 +269,8 @@ define([
_.template([
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
'<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
'<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
'<div style="position: relative;"><div class="display-value"><%= scope.getDisplayValue(item) %></div>',
'<div class="example-val"><%= item.exampleval ? item.exampleval : "" %></div>',
'</div></a></li>',
'<% }); %>',
'<li class="divider">',
@ -1381,8 +1381,8 @@ define([
_.template([
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
'<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
'<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
'<div style="position: relative;"><div class="display-value"><%= scope.getDisplayValue(item) %></div>',
'<div class="example-val"><%= item.exampleval ? item.exampleval : "" %></div>',
'</div></a></li>',
'<% }); %>',
'<li class="divider">',
@ -2527,7 +2527,7 @@ define([
id : 'id-toolbar-mnu-item-border-color',
caption : this.textBordersColor,
iconCls : 'mnu-icon-item mnu-border-color',
template : _.template('<a id="<%= id %>"tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 2px 9px 0 -11px; border-style: solid; border-width: 3px; border-color: #000;"></span><%= caption %></a>'),
template : _.template('<a id="<%= id %>"tabindex="-1" type="menuitem"><span class="menu-item-icon"></span><%= caption %></a>'),
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
cls: 'shifted-left',
@ -2535,7 +2535,7 @@ define([
{
id: 'id-toolbar-menu-auto-bordercolor',
caption: this.textAutoColor,
template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>'),
template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto"></span><%= caption %></a>'),
stopPropagation: true
},
{caption: '--'},
@ -2543,7 +2543,7 @@ define([
{caption: '--'},
{
id: "id-toolbar-menu-new-bordercolor",
template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>'),
template: _.template('<a tabindex="-1" type="menuitem">' + this.textNewColor + '</a>'),
stopPropagation: true
}
]

134
apps/spreadsheeteditor/main/resources/less/advanced-settings.less
View file

@ -312,4 +312,138 @@
margin-left: 5px;
}
}
}
#window-chart-data {
.up-down-btns {
display: inline-block;
float: right;
.rtl & {
float: left;
}
#chart-dlg-btn-up {
display: inline-block;
margin-right: 2px;
.rtl & {
margin-right: 0;
margin-left: 2px;
}
}
#chart-dlg-btn-down {
display: inline-block;
}
}
#chart-dlg-btn-add,
#chart-dlg-btn-edit,
#chart-dlg-btn-delete {
min-width: 70px;
margin-right: 5px;
.rtl & {
margin-right: 0;
margin-left: 5px;
}
}
}
#id-dlg-chart-range-lbl1,
#id-dlg-chart-range-lbl2,
#id-dlg-chart-range-lbl3 {
margin-left: 5px;
.rtl & {
margin-left: 0;
margin-right: 5px;
}
}
#chart-type-dlg-series-list {
.series-color {
width: 8px;
height: 12px;
display: inline-block;
vertical-align: middle;
}
.series-value {
width: 95px;
padding-left: 5px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.rtl & {
padding-left: 0;
padding-right: 5px;
}
}
.series-cmb {
width: 110px;
padding-left: 5px;
display: inline-block;
vertical-align: middle;
.rtl & {
padding-left: 0;
padding-right: 5px;
}
}
.series-chk {
padding-left: 55px;
display: inline-block;
vertical-align: middle;
.rtl & {
padding-left: 0;
padding-right: 55px;
}
}
}
#window-header-footer {
#id-dlg-hf-btn-even,
#id-dlg-hf-btn-first {
margin-left: -1px;
.rtl & {
margin-left: 0;
margin-right: -1px;
}
}
.margin-left-small {
margin-left: 2px;
.rtl & {
margin-left: 0;
margin-right: 2px;
}
}
.margin-left-big {
margin-left: 6px;
.rtl & {
margin-left: 0;
margin-right: 6px;
}
}
.preview-container {
margin-right: -1px;
.rtl & {
margin-right: 0;
margin-left: -1px;
}
}
}

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

@ -249,3 +249,76 @@
}
}
}
#id-toolbar-mnu-item-border-color {
> span {
background-image: none;
width: 12px;
height: 12px;
margin: 2px 9px 0 -11px;
border-style: solid;
border-width: 3px;
border-color: #000;
.rtl & {
margin: 2px -11px 0 9px;
}
}
}
#id-toolbar-menu-new-bordercolor {
> a {
padding-left: 12px;
.rtl & {
padding-left: 0;
padding-right: 12px;
}
}
}
#id-toolbar-menu-auto-bordercolor {
.color-auto {
background-image: none;
width: 12px;
height: 12px;
margin: 1px 7px 0 1px;
background-color: #000;
.rtl & {
margin: 1px 1px 0 7px;
}
}
}
#slot-btn-format {
.display-value {
position: absolute;
left: 0;
width: 100px;
.rtl & {
left: auto;
right: 0;
}
}
.example-val {
display: inline-block;
width: 100%;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
vertical-align: bottom;
padding-left: 100px;
color: silver;
white-space: nowrap;
.rtl & {
text-align: left;
padding-left: 0;
padding-right: 100px;
}
}
}