[rtl] Make dropdown menu (footnote, fix position)

This commit is contained in:
JuliaSvinareva 2022-10-09 22:46:00 +03:00
parent dc06aab506
commit aa629fb043
5 changed files with 66 additions and 6 deletions

View file

@ -173,6 +173,14 @@ define([
this.search = this.options.search; this.search = this.options.search;
this.outerMenu = this.options.outerMenu; this.outerMenu = this.options.outerMenu;
if (Common.UI.isRTL()) {
if (this.menuAlign === 'tl-tr') {
this.menuAlign = 'tr-tl';
} else if (this.menuAlign === 'tl-bl') {
this.menuAlign = 'tr-br';
}
}
if (this.options.restoreHeight) { if (this.options.restoreHeight) {
this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000); this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
!this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight); !this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight);

View file

@ -106,6 +106,11 @@
border-top-color: transparent; border-top-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
.rtl & {
border-left-color: @border-regular-control-ie;
border-left-color: @border-regular-control;
}
&:hover, &:focus { &:hover, &:focus {
background-color: transparent; background-color: transparent;
border-right-color: @border-regular-control-ie; border-right-color: @border-regular-control-ie;

View file

@ -8,6 +8,10 @@
margin-left: -1px; margin-left: -1px;
border-radius:@border-radius-base; border-radius:@border-radius-base;
.rtl & {
margin-left: 1px;
}
&.pull-right { &.pull-right {
right: 100%; right: 100%;
left: auto; left: auto;

View file

@ -334,27 +334,47 @@ define([
{caption: me.mniInsEndnote, value: 'ins_endnote'}, {caption: me.mniInsEndnote, value: 'ins_endnote'},
{caption: '--'}, {caption: '--'},
new Common.UI.MenuItem({ new Common.UI.MenuItem({
template: _.template([ template: !Common.UI.isRTL() ? _.template([
'<div class="menu-zoom" style="height: 26px;" ', '<div class="menu-zoom" style="height: 26px;" ',
'<% if(!_.isUndefined(options.stopPropagation)) { %>', '<% if(!_.isUndefined(options.stopPropagation)) { %>',
'data-stopPropagation="true"', 'data-stopPropagation="true"',
'<% } %>', '>', '<% } %>', '>',
'<label class="title">' + me.textGotoFootnote + '</label>', '<label class="title">' + me.textGotoFootnote + '</label>',
'<button id="id-menu-goto-footnote-next-' + index + '" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>', '<button id="id-menu-goto-footnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
'<button id="id-menu-goto-footnote-prev-' + index + '" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>', '<button id="id-menu-goto-footnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
'</div>'
].join('')) :
_.template([
'<div class="menu-zoom" style="height: 26px;" ',
'<% if(!_.isUndefined(options.stopPropagation)) { %>',
'data-stopPropagation="true"',
'<% } %>', '>',
'<label class="title">' + me.textGotoFootnote + '</label>',
'<button id="id-menu-goto-footnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
'<button id="id-menu-goto-footnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
'</div>' '</div>'
].join('')), ].join('')),
stopPropagation: true stopPropagation: true
}), }),
new Common.UI.MenuItem({ new Common.UI.MenuItem({
template: _.template([ template: !Common.UI.isRTL() ? _.template([
'<div class="menu-zoom" style="height: 26px;" ', '<div class="menu-zoom" style="height: 26px;" ',
'<% if(!_.isUndefined(options.stopPropagation)) { %>', '<% if(!_.isUndefined(options.stopPropagation)) { %>',
'data-stopPropagation="true"', 'data-stopPropagation="true"',
'<% } %>', '>', '<% } %>', '>',
'<label class="title">' + me.textGotoEndnote + '</label>', '<label class="title">' + me.textGotoEndnote + '</label>',
'<button id="id-menu-goto-endnote-next-' + index + '" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>', '<button id="id-menu-goto-endnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
'<button id="id-menu-goto-endnote-prev-' + index + '" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>', '<button id="id-menu-goto-endnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
'</div>'
].join('')) :
_.template([
'<div class="menu-zoom" style="height: 26px;" ',
'<% if(!_.isUndefined(options.stopPropagation)) { %>',
'data-stopPropagation="true"',
'<% } %>', '>',
'<label class="title">' + me.textGotoEndnote + '</label>',
'<button id="id-menu-goto-endnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
'<button id="id-menu-goto-endnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
'</div>' '</div>'
].join('')), ].join('')),
stopPropagation: true stopPropagation: true

View file

@ -112,6 +112,11 @@
//max-width: 95px; //max-width: 95px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.rtl & {
float: right;
padding: 5px 20px 5px 5px;
}
} }
.zoom { .zoom {
@ -120,6 +125,24 @@
min-width: 40px; min-width: 40px;
text-align: center; text-align: center;
} }
.next {
float: right;
margin: 2px 5px 0 0;
.rtl & {
float: left;
margin: 2px 0 0 0 !important;
}
}
.prev {
float: right;
margin-top: 2px;
.rtl & {
float: left;
margin: 2px 0 0 5px;
}
}
} }