rtl: fix alignment of buttons #1039

This commit is contained in:
Sören Weber 2025-02-23 15:38:13 +01:00
parent fd4478e535
commit bd6eb3f5de
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
4 changed files with 27 additions and 17 deletions

View file

@ -959,12 +959,6 @@ pre:not(.mermaid) {
position: relative;
}
div.highlight {
/* even in RTL languages code is supposed to be LTR */
direction: ltr;
text-align: left;
}
pre:not(.mermaid) code {
background-color: inherit;
border: 0;
@ -1463,7 +1457,7 @@ code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after {
display: none;
padding: 5px 3px;
position: absolute;
right: 4px;
inset-inline-end: 4px;
top: 4px;
}
@media (any-hover: none) {
@ -1608,7 +1602,7 @@ html[dir='rtl'] .expand[open] > .box-label > i.expander-icon {
line-height: 1.15;
padding: 5px 3px;
position: absolute;
right: 4px;
inset-inline-end: 4px;
top: 4px;
}
.svg-reset-button:hover {

View file

@ -0,0 +1,16 @@
+++
disableToc = false
hidden = true
title = "Version 7.5"
type = "releasenotes"
weight = -5
+++
## 7.5.0 (XXXX-XX-XX) {#7-5-0}
### Change
- {{% badge style="note" title=" " %}}Change{{% /badge %}} Buttons for languages written right to left are now rendered correctly. This applies to
- the Mermaid zoom button depending on the page's language
- inline and block copy-to-clipboard buttons depending of the contained text content

View file

@ -1 +1 @@
7.4.1+e985d6fcb4b74082c65c5f98e82051053233f3d7
7.4.1+fd4478e535854d245f3536be9d306e77eda5ea96

View file

@ -172,7 +172,7 @@ function restoreTabSelections() {
function initMermaid(update, attrs) {
var doBeside = true;
var isImageRtl = false;
var isImageRtl = isRtl;
// we are either in update or initialization mode;
// during initialization, we want to edit the DOM;
@ -357,7 +357,7 @@ function initMermaid(update, attrs) {
button.addEventListener('click', function (event) {
svg.transition().duration(350).call(zoom.transform, d3.zoomIdentity);
this.setAttribute('aria-label', window.T_View_reset);
this.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isImageRtl ? 'e' : 'w')));
this.classList.add('tooltipped', 'tooltipped-' + (doBeside ? '' : 's') + (isImageRtl ? 'e' : 'w'));
});
button.addEventListener('mouseleave', function () {
if (this.classList.contains('tooltipped')) {
@ -646,7 +646,7 @@ function initCodeClipboard() {
}
});
var preOnlyElements = document.querySelectorAll('pre > :not(code), pre:not(:has(>*))');
var preOnlyElements = document.querySelectorAll('pre:not(.mermaid) > :not(code), pre:not(.mermaid):not(:has(>*))');
for (var i = 0; i < preOnlyElements.length; i++) {
// move everything down one level so that it fits to the next selector
// and we also get copy-to-clipboard for pre-only elements
@ -758,21 +758,21 @@ function initCodeClipboard() {
clip.on('success', function (e) {
e.clearSelection();
var inPre = e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'pre';
var isCodeRtl = !inPre ? isRtl : false;
var isCodeRtl = window.getComputedStyle(e.trigger).direction == 'rtl';
var doBeside = inPre || (e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'table');
e.trigger.setAttribute('aria-label', window.T_Copied_to_clipboard);
e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isCodeRtl ? 'e' : 'w')));
e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? '' : 's') + (isCodeRtl ? 'e' : 'w'));
});
clip.on('error', function (e) {
var inPre = e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'pre';
var isCodeRtl = !inPre ? isRtl : false;
var isCodeRtl = window.getComputedStyle(e.trigger).direction == 'rtl';
var doBeside = inPre || (e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'table');
e.trigger.setAttribute('aria-label', fallbackMessage(e.action));
e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isCodeRtl ? 'e' : 'w')));
e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? '' : 's') + (isCodeRtl ? 'e' : 'w'));
var f = function () {
e.trigger.setAttribute('aria-label', window.T_Copied_to_clipboard);
e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isCodeRtl ? 'e' : 'w')));
e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? '' : 's') + (isCodeRtl ? 'e' : 'w'));
document.removeEventListener('copy', f);
};
document.addEventListener('copy', f);