[rtl] Fix statusbar in DE, PE, SSE

This commit is contained in:
JuliaSvinareva 2022-12-30 00:23:13 +03:00
parent 727b344c89
commit f56ab702c8
10 changed files with 428 additions and 38 deletions

View file

@ -93,7 +93,7 @@ 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" style="padding-left: 28px !important;" langval="<%= item.value %>">',
'<a tabindex="-1" type="menuitem" langval="<%= item.value %>">',
'<i class="icon <% if (item.spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
'<%= scope.getDisplayValue(item) %>',
'</a>',
@ -137,7 +137,7 @@ define([
onLangSelect: function(cmb, rec, e) {
cmb.$el.find('.input-icon').toggleClass('spellcheck-lang', rec && rec.spellcheck);
cmb._input.css('padding-left', rec && rec.spellcheck ? 25 : 3);
cmb._input.css(Common.UI.isRTL() ? 'padding-right' : 'padding-left', rec && rec.spellcheck ? 25 : 3);
},
onPrimary: function() {

View file

@ -8,6 +8,9 @@
li {
.icon.spellcheck-lang {
margin: -3px 4px 0 -24px;
.rtl & {
margin: -3px -24px 0 4px;
}
}
&.selected, a.checked {
@ -39,6 +42,13 @@ li {
li .icon.lang-flag {
margin-top: 1px;
}
li a {
padding-left: 28px !important;
.rtl & {
padding-left: 0 !important;
padding-right: 28px !important;
}
}
}
.input-icon {
@ -46,10 +56,18 @@ li {
&.spellcheck-lang { // spell check indicator
left: 2px;
top: 1px;
.rtl & {
left: auto;
right: 2px;
}
}
&.lang-flag { // language flags
left: 5px;
top: 5px;
.rtl & {
left: auto;
right: 5px;
}
}
}
}

View file

@ -15,6 +15,12 @@
padding: 0;
width: 0;
.rtl & {
border-left: none;
border-right: @scaled-one-px-value-ie solid @border-divider-ie;
border-right: @scaled-one-px-value solid @border-divider;
}
&.horizontal {
height: 0;
display: block;

View file

@ -1,9 +1,9 @@
<div class="statusbar" style="display:table;">
<div class="status-group dropup">
<label id="label-pages" class="status-label dropdown-toggle margin-top-large" style="margin-left: 40px;" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label>
<label id="label-pages" class="status-label dropdown-toggle margin-top-large" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label>
<div id="status-goto-box" class="dropdown-menu">
<label style="float:left;line-height:22px;"><%= textGotoPage %></label>
<label><%= textGotoPage %></label>
<div id="status-goto-page" style="display:inline-block;"></div>
</div>
</div>
@ -31,6 +31,6 @@
<label id="label-zoom" class="status-label">Zoom 100%</label>
</div>
</div>
<button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small" style="margin-right:40px;"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
<button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
</div>
</div>

View file

@ -6,6 +6,22 @@
position: relative;
}
#label-pages {
margin-left: 40px;
.rtl & {
margin-left: 0;
margin-right: 40px;
}
}
#btn-zoom-up {
margin-right: 40px;
.rtl & {
margin-right: 0;
margin-left: 40px;
}
}
#label-pages, #label-zoom {
cursor: pointer;
}
@ -26,12 +42,12 @@
text-align: center;
}
#btn-zoom-topage {
margin-right: 8px;
}
#btn-zoom-towidth {
#btn-zoom-topage, #btn-zoom-towidth {
margin-right: 8px;
.rtl & {
margin-right: 0;
margin-left: 8px;
}
}
.status-group {
@ -80,6 +96,11 @@
min-width: 80px;
margin-left: -4px;
.rtl & {
margin-left: 0;
margin-right: -4px;
}
li {
text-align: center;
@ -96,6 +117,9 @@
li {
text-align: left;
.rtl & {
text-align: right;
}
}
}
@ -105,9 +129,21 @@
margin-bottom: 2px;
min-width: 130px;
.rtl & {
margin-left: 0;
margin-right: 40px;
}
> label {
display: inline-block;
margin-right: 10px;
float:left;
line-height:22px;
.rtl & {
margin-right: 0;
margin-left: 10px;
float: right;
}
}
> input[type=text] {
@ -124,6 +160,12 @@
width: 285px;
font-size: 12px;
.rtl & {
padding: 14px 14px 14px 0;
margin-left: 0;
margin-right: 137px;
}
> label {
white-space: normal;
}
@ -144,6 +186,11 @@
margin-right: 15px;
overflow: hidden;
.rtl & {
margin-right: 0;
margin-left: 15px;
}
&.offline, &.viewmode {
display: none;
}
@ -166,6 +213,10 @@
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
.rtl & {
padding-left: 0;
padding-right: 16px;
}
}
}
}
@ -176,5 +227,9 @@
#btn-select-tool {
margin-right: 8px;
.rtl & {
margin-right: 0;
margin-left: 8px;
}
}
}

View file

@ -1,27 +1,27 @@
<div class="statusbar" style="display:table;">
<div class="status-group">
<div id="slot-status-btn-preview" style="display: inline-block;margin-left: 9px;" class="margin-top-small"></div>
<div id="slot-status-btn-preview" style="display: inline-block;" class="margin-top-small"></div>
</div>
<div class="status-group dropup">
<label id="status-label-pages" class="status-label dropdown-toggle margin-top-large" style="margin-left: 7px; display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
<label id="status-label-pages" class="status-label dropdown-toggle margin-top-large" style="display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
<div id="status-goto-box" class="dropdown-menu">
<label style="float:left;line-height:22px;"><%= scope.goToPageText %></label>
<label><%= scope.goToPageText %></label>
<div id="status-goto-page" style="display:inline-block;"></div>
</div>
</div>
<div id="status-users-ct" class="status-group dropup" style="display:none;">
<div class="separator short" style="margin-right: 12px; margin-left: 40px;"></div>
<div class="separator short"></div>
<div id="status-users-block" style="display:inline-block; cursor:pointer;">
<span id="status-users-icon" class="img-commonctrl" style="margin-bottom: 2px;"></span>
<label id="status-users-count" class="status-label" style="font-size: 14px; font-weight: normal; margin-top: -1px;">+</label>
</div>
<div id="status-users-menu" class="dropdown-menu">
<label style="display: block;margin-right: 14px;"><%= scope.tipUsers %></label>
<label class="tip-users" style="display: block;"><%= scope.tipUsers %></label>
<div id="status-users-list"></div>
<label id="status-change-rights" class="link" style="margin-top: 15px;"><%= scope.txAccessRights %></label>
</div>
<div class="separator short" style="margin-left: 10px;"></div>
<div class="separator short"></div>
</div>
<div class="status-group" style="width:100%; text-align:center;">
<label id="status-label-action" class="status-label margin-top-large" data-layout-name="statusBar-actionStatus"></label>
@ -40,6 +40,6 @@
<label id="status-label-zoom" class="status-label">Zoom 100%</label>
</div>
</div>
<button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small" style="margin-right:40px;"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
<button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
</div>
</div>

View file

@ -27,12 +27,12 @@
text-align: center;
}
#btn-zoom-topage {
margin-right: 8px;
}
#btn-zoom-towidth {
#btn-zoom-topage, #btn-zoom-towidth {
margin-right: 8px;
.rtl & {
margin-right: 0;
margin-left: 8px;
}
}
.status-group {
@ -52,6 +52,30 @@
.margin-top-small > .btn-group {
margin-top: 3px;
}
#slot-status-btn-preview {
margin-left: 9px;
.rtl & {
margin-left: 0;
margin-right: 9px;
}
}
#status-label-pages {
margin-left: 7px;
.rtl & {
margin-left: 0;
margin-right: 7px;
}
}
#btn-zoom-up {
margin-right: 40px;
.rtl & {
margin-right: 0;
margin-left: 40px;
}
}
}
.separator {
@ -81,6 +105,11 @@
min-width: 80px;
margin-left: -4px;
.rtl & {
margin-left: 0;
margin-right: -4px;
}
li {
text-align: center;
@ -98,9 +127,21 @@
margin-bottom: 2px;
min-width: 130px;
.rtl & {
margin-left: 0;
margin-right: 40px;
}
> label {
display: inline-block;
margin-right: 10px;
float: left;
line-height: 22px;
.rtl & {
margin-right: 0;
margin-left: 10px;
float: right;
}
}
> input[type=text] {
@ -116,6 +157,12 @@
width: 285px;
font-size: 12px;
.rtl & {
padding: 14px 14px 14px 0;
margin-left: 0;
margin-right: 142px;
}
> label {
white-space: normal;
}
@ -136,6 +183,11 @@
margin-right: 15px;
overflow: hidden;
.rtl & {
margin-right: 0;
margin-left: 15px;
}
&.offline, &.viewmode {
display: none;
}
@ -158,7 +210,42 @@
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
.rtl & {
padding-left: 0;
padding-right: 16px;
}
}
}
.tip-users {
margin-right: 14px;
.rtl & {
margin-right: 0;
margin-left: 14px;
}
}
}
#status-users-ct {
.separator {
&:first-of-type {
margin-right: 12px;
margin-left: 40px;
.rtl & {
margin-right: 40px;
margin-left: 12px;
}
}
&:last-of-type {
margin-left: 10px;
.rtl & {
margin-left: 0;
margin-right: 10px;
}
}
}
}
}

View file

@ -1,6 +1,6 @@
<div class="statusbar">
<div id="status-tabs-scroll" class="status-group">
<div id="status-tabs-scroll" class="status-group" dir="ltr">
<button id="status-btn-tabback" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="G"><i class="icon toolbar__icon btn-previtem">&nbsp;</i></button>
<button id="status-btn-tabnext" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="J"><i class="icon toolbar__icon btn-nextitem">&nbsp;</i></button>
</div>
@ -18,7 +18,7 @@
<label id="status-label-zoom" class="status-label">Zoom 100%</label>
</div>
</div>
<button id="status-btn-zoomup" type="button" class="btn small btn-toolbar" style="margin-right:40px;"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
<button id="status-btn-zoomup" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
</div>
<div id="status-math-box" class="status-group">
<div class="separator short"></div>

View file

@ -824,12 +824,20 @@ define([
var visible = false;
var right = parseInt(this.boxZoom.css('width'));
if (this.boxMath.is(':visible')) {
this.boxMath.css({'right': right + 'px'});
if (Common.UI.isRTL()) {
this.boxMath.css({'left': right + 'px'});
} else {
this.boxMath.css({'right': right + 'px'});
}
right += parseInt(this.boxMath.css('width'));
visible = true;
}
if (this.boxFiltered.is(':visible')) {
this.boxFiltered.css({'right': right + 'px'});
if (Common.UI.isRTL()) {
this.boxFiltered.css({'left': right + 'px'});
} else {
this.boxFiltered.css({'right': right + 'px'});
}
right += parseInt(this.boxFiltered.css('width'));
visible = true;
}
@ -840,11 +848,21 @@ define([
var actionWidth = this.actionWidth || 140;
if (Common.Utils.innerWidth() - right - 129 - actionWidth - tabsWidth > 0) { // docWidth - right - left - this.boxAction.width
var left = tabsWidth + 129;
this.boxAction.css({'right': right + 'px', 'left': left + 'px', 'width': 'auto'});
this.boxAction.find('.separator').css('border-left-color', 'transparent');
if (Common.UI.isRTL()) {
this.boxAction.css({'left': right + 'px', 'right': left + 'px', 'width': 'auto'});
this.boxAction.find('.separator').css('border-right-color', 'transparent');
} else {
this.boxAction.css({'right': right + 'px', 'left': left + 'px', 'width': 'auto'});
this.boxAction.find('.separator').css('border-left-color', 'transparent');
}
} else {
this.boxAction.css({'right': right + 'px', 'left': 'auto', 'width': actionWidth + 'px'});
this.boxAction.find('.separator').css('border-left-color', '');
if (Common.UI.isRTL()) {
this.boxAction.css({'left': right + 'px', 'right': 'auto', 'width': actionWidth + 'px'});
this.boxAction.find('.separator').css('border-right-color', '');
} else {
this.boxAction.css({'right': right + 'px', 'left': 'auto', 'width': actionWidth + 'px'});
this.boxAction.find('.separator').css('border-left-color', '');
}
visible = true;
}
right += parseInt(this.boxAction.css('width'));
@ -853,18 +871,32 @@ define([
this.boxMath.is(':visible') && this.boxMath.css({'top': '0px', 'bottom': 'auto'});
this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': '0px', 'bottom': 'auto'});
this.boxZoom.css({'top': '0px', 'bottom': 'auto'});
this.tabBarBox.css('right', right + 'px');
if (Common.UI.isRTL()) {
this.tabBarBox.css('left', right + 'px');
} else {
this.tabBarBox.css('right', right + 'px');
}
} else {
if (this.boxAction.is(':visible')) {
this.boxAction.css({'right': right + 'px', 'left': '135px', 'width': 'auto'});
this.boxAction.find('.separator').css('border-left-color', 'transparent');
if (Common.UI.isRTL()) {
this.boxAction.css({'left': right + 'px', 'right': '135px', 'width': 'auto'});
this.boxAction.find('.separator').css('border-right-color', 'transparent');
} else {
this.boxAction.css({'right': right + 'px', 'left': '135px', 'width': 'auto'});
this.boxAction.find('.separator').css('border-left-color', 'transparent');
}
}
this.boxMath.is(':visible') && this.boxMath.css({'top': 'auto', 'bottom': '0px'});
this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': 'auto', 'bottom': '0px'});
this.boxZoom.css({'top': 'auto', 'bottom': '0px'});
this.tabBarBox.css('right', '0px');
if (Common.UI.isRTL()) {
this.tabBarBox.css('left', '0px');
this.boxZoom.find('.separator').css('border-right-color', visible ? '' : 'transparent');
} else {
this.tabBarBox.css('right', '0px');
this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent');
}
}
this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent');
if (this.statusMessage) {
var status = this.getStatusMessage(this.statusMessage);
@ -890,11 +922,12 @@ define([
},
changeViewMode: function (mode) {
var edit = mode.isEdit;
var edit = mode.isEdit,
styleLeft = Common.UI.isRTL() ? 'right' : 'left';
if (edit) {
this.tabBarBox.css('left', '129px');
this.tabBarBox.css(styleLeft, '129px');
} else {
this.tabBarBox.css('left', '');
this.tabBarBox.css(styleLeft, '');
}
this.tabbar.options.draggable = edit;

View file

@ -7,6 +7,11 @@
float: left;
padding: 3px 12px 0 10px;
height: 25px;
.rtl & {
float: right;
padding: 3px 10px 0 12px;
}
}
#status-zoom-box {
@ -16,12 +21,30 @@
right: 0;
height: 25px;
.rtl & {
right: auto;
left: 0;
}
.separator {
margin-top: -3px;
}
#status-btn-zoomup {
margin-right: 40px;
.rtl & {
margin-right: 0;
margin-left: 40px;
}
}
#status-btn-zoomdown {
margin-left: 10px;
.rtl & {
margin-left: 0;
margin-right: 10px;
}
}
#status-label-zoom {
@ -39,6 +62,10 @@
float: right;
height: 100%;
.rtl & {
float: left;
}
#status-users-icon,#status-users-count {
display: inline-block;
cursor: pointer;
@ -67,6 +94,14 @@
left: auto;
right: 0;
.rtl & {
padding: 14px 14px 14px 0;
margin-right: 0;
margin-left: 160px;
right: auto;
left: 0;
}
> label {
white-space: normal;
}
@ -87,6 +122,11 @@
margin-right: 15px;
overflow: hidden;
.rtl & {
margin-right: 0;
margin-left: 15px;
}
&.offline, &.viewmode {
display: none;
}
@ -109,6 +149,11 @@
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
.rtl & {
padding-left: 0;
padding-right: 16px;
}
}
}
}
@ -122,6 +167,10 @@
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar;
height: 25px;
.rtl & {
float: right;
}
}
#status-math-box,
@ -136,21 +185,42 @@
position: relative;
padding-right: 11px;
margin-top: -6px;
.rtl & {
padding-right: 0;
padding-left: 11px;
}
}
}
#status-math-box {
padding-right: 4px;
.rtl & {
padding-right: 0;
padding-left: 4px;
}
label {
padding-right: 10px;
.rtl & {
padding-right: 0;
padding-left: 10px;
}
}
}
#status-filtered-box {
padding-right: 14px;
.rtl & {
padding-right: 0;
padding-left: 14px;
}
label {
&:not(:last-child) {
padding-right: 10px;
.rtl & {
padding-right: 0;
padding-left: 10px;
}
}
}
}
@ -162,6 +232,11 @@
left: 66px;
right: 160px;
//margin-right: 3px;
.rtl & {
left: 160px;
right: 66px;
}
}
#status-sheets-bar {
@ -183,12 +258,21 @@
&:first-of-type {
span {
border-left: none;
.rtl & {
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-left: @scaled-one-px-value solid @border-toolbar;
border-right: none;
}
}
}
&:last-of-type {
span {
margin-right: 0;
.rtl & {
margin-left: 0;
}
}
}
@ -215,6 +299,11 @@
border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-top: @scaled-one-px-value solid @border-toolbar;
.rtl & {
margin-right: 0;
margin-left: -1px;
}
&:hover {
border-top-color: @border-toolbar-ie;
border-top-color: @border-toolbar;
@ -272,12 +361,25 @@
bottom: 0;
margin-left: -7px;
left: 100%;
.rtl & {
border-left: none;
border-right: 7px solid transparent;
margin-left: 0;
margin-right: -7px;
left: auto;
right: 100%;
}
}
}
&.icon-visible {
> span {
padding-left: 25px;
.rtl & {
padding-left: 0;
padding-right: 25px;
}
> .toolbar__icon {
width: 20px;
height: 20px;
@ -285,6 +387,10 @@
top: 0;
left: 0;
margin: 3px;
.rtl & {
left: auto;
right: 0;
}
}
}
}
@ -305,6 +411,10 @@
&:first-child {
> span {
padding-left: 8px;
.rtl & {
padding-left: 0;
padding-right: 8px;
}
}
}
@ -312,6 +422,13 @@
border-left: 2px solid @text-normal-ie;
border-left: 2px solid @text-normal;
padding-left: 9px;
.rtl & {
border-left: none;
padding-left: 0;
border-right: 2px solid @text-normal-ie;
border-right: 2px solid @text-normal;
padding-right: 9px;
}
}
&.right {
@ -322,15 +439,33 @@
border-right: 2px solid @text-normal;
padding-right: 9px;
padding-left: 10px;
.rtl & {
border-left: none;
border-right: none;
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar;
border-left: 2px solid @text-normal-ie;
border-left: 2px solid @text-normal;
padding-right: 10px;
padding-left: 9px;
}
}
}
&.icon-visible {
> span {
padding-left: 24px;
.rtl & {
padding-left: 0;
padding-right: 24px;
}
}
&.right {
> span {
padding-left: 25px;
.rtl & {
padding-left: 0;
padding-right: 25px;
}
}
}
}
@ -340,6 +475,10 @@
margin-left: 20px;
width: @scaled-one-px-value-ie;
width: @scaled-one-px-value;
.rtl & {
margin-left: 0;
margin-right: 20px;
}
> span {
display: none;
padding: 0;
@ -421,23 +560,43 @@
min-width: 112px;
margin-left: -4px;
.rtl & {
margin-left: 0;
margin-right: -4px;
}
li {
text-align: left;
.rtl & {
text-align: right;
}
a {
position: relative;
padding-left: 26px;
.rtl & {
padding-left: 0;
padding-right: 26px;
}
.color {
height: 21px;
width: 4px;
position: absolute;
top: 2px;
left: 0;
.rtl & {
left: auto;
right: 0;
}
}
}
.hidden-mark {
margin-left: 12px;
font-style: italic;
color: @text-secondary;
.rtl & {
margin-left: 0;
margin-right: 12px;
}
}
}
}
@ -452,6 +611,11 @@
min-width: 80px;
margin-left: -4px;
.rtl & {
margin-left: 0;
margin-right: -4px;
}
li {
text-align: center;
@ -468,6 +632,9 @@
li {
text-align: left;
.rtl & {
text-align: right;
}
}
}
@ -482,11 +649,22 @@
.dropdown-menu {
margin-top: 0;
margin-left: -7px;
.rtl & {
margin-left: 0;
margin-right: -7px;
}
li {
> a {
padding: 5px 12px 5px 26px;
.rtl & {
padding: 5px 56px 5px 12px;
}
&::before {
margin-left: -22px;
.rtl & {
margin-left: 0;
margin-right: -22px;
}
}
.item-caption {
min-width: 98px;
@ -500,6 +678,11 @@
padding-left: 5px;
color: silver;
cursor: pointer;
.rtl & {
text-align: left;
padding-left: 0;
padding-right: 5px;
}
}
}
}
@ -516,8 +699,16 @@
background-color: @background-toolbar-ie;
background-color: @background-toolbar;
z-index: @zindex-modal - 1;
.rtl & {
left: auto;
right: 115px;
}
}
.over-box {
display: none;
}
.rtl .nav {
padding-right: 0;
}