mermaid: improve zoom UX #659

i18n/ar.toml

@@ -22,6 +22,9 @@ other = "مسح السجل"
 [Reset-view]
 other = "إعادة تعيين طريقة العرض"
 
+[View-reset]
+other = "عرض إعادة تعيين!"
+
 [Attachments-label]
 other = "مرفقات"
 

i18n/cs.toml

@@ -22,6 +22,9 @@ other = "Vymazat historii"
 [Reset-view]
 other = "Obnovit zobrazení"
 
+[View-reset]
+other = "Resetovat zobrazení!"
+
 [Attachments-label]
 other = "Přílohy"
 

i18n/de.toml

@@ -22,6 +22,9 @@ other = "Verlauf löschen"
 [Reset-view]
 other = "Ansicht zurücksetzen"
 
+[View-reset]
+other = "Ansicht zurückgesetzt!"
+
 [Attachments-label]
 other = "Anhänge"
 

i18n/en.toml

@@ -22,6 +22,9 @@ other = "Clear History"
 [Reset-view]
 other = "Reset view"
 
+[View-reset]
+other = "View reset!"
+
 [Attachments-label]
 other = "Attachments"
 

i18n/es.toml

@@ -22,6 +22,9 @@ other = "Borrar Historial"
 [Reset-view]
 other = "Restablecer vista"
 
+[View-reset]
+other = "¡Ver reajuste!"
+
 [Attachments-label]
 other = "Adjuntos"
 

i18n/fi.toml

@@ -22,6 +22,9 @@ other = "Tyhjennä historia"
 [Reset-view]
 other = "Palauta näkymä"
 
+[View-reset]
+other = "Näkymä nollattu!"
+
 [Attachments-label]
 other = "Liitteet"
 

i18n/fr.toml

@@ -22,6 +22,9 @@ other = "Supprimer l'historique"
 [Reset-view]
 other = "Réinitialiser la vue"
 
+[View-reset]
+other = "Vue réinitialisée!"
+
 [Attachments-label]
 other = "Pièces jointes"
 

i18n/hi.toml

@@ -22,6 +22,9 @@ other = "इतिहास मिटाएँ"
 [Reset-view]
 other = "दृश्य रीसेट करें"
 
+[View-reset]
+other = "देखें रीसेट!"
+
 [Attachments-label]
 other = "संलग्नंक (अटैचमेंट)"
 

i18n/hu.toml

@@ -19,6 +19,9 @@ other = "Előzmények törlése"
 [Reset-view]
 other = "Nézet visszaállítása"
 
+[View-reset]
+other = "Visszaállítás megtekintése!"
+
 [Clear-search]
 other = "Keresések törlése"
 

i18n/id.toml

@@ -22,6 +22,9 @@ other = "Bersihkan Riwayat"
 [Reset-view]
 other = "Setel ulang tampilan"
 
+[View-reset]
+other = "Lihat ulang!"
+
 [Attachments-label]
 other = "Lampiran"
 

i18n/it.toml

@@ -20,7 +20,10 @@ other = "{1} risultati trovati per \"{0}\""
 other = "Reimposta storico"
 
 [Reset-view]
-other = "Ripristina visualizzazione"
+other = "Azzeramento vista"
+
+[View-reset]
+other = "Vista azzerata!"
 
 [Attachments-label]
 other = "Allegati"

i18n/ja.toml

@@ -22,6 +22,9 @@ other = "履歴削除"
 [Reset-view]
 other = "ビューのリセット"
 
+[View-reset]
+other = "リセットを見る"
+
 [Attachments-label]
 other = "添付"
 

i18n/ko.toml

@@ -22,6 +22,9 @@ other = "방문 기록 삭제"
 [Reset-view]
 other = "보기 재설정"
 
+[View-reset]
+other = "보기 초기화!"
+
 [Attachments-label]
 other = "첨부파일"
 

i18n/nl.toml

@@ -22,6 +22,9 @@ other = "Wis geschiedenis"
 [Reset-view]
 other = "Weergave opnieuw instellen"
 
+[View-reset]
+other = "Opnieuw instellen weergeven!"
+
 [Attachments-label]
 other = "Bijlagen"
 

i18n/pir.toml

@@ -22,6 +22,9 @@ other = "Clearrr Historrry"
 [Reset-view]
 other = "Rrreset view"
 
+[View-reset]
+other = "View rrreset!"
+
 [Attachments-label]
 other = "Attachments"
 

i18n/pl.toml

@@ -22,6 +22,9 @@ other = "Wyczyść historię"
 [Reset-view]
 other = "Resetowanie widoku"
 
+[View-reset]
+other = "Widok zresetowany!"
+
 [Attachments-label]
 other = "Załączniki"
 

i18n/pt.toml

@@ -20,7 +20,10 @@ other = "{1} resultados encontrados para \"{0}\""
 other = "Limpar Histórico"
 
 [Reset-view]
-other = "Redefinir modo de exibição"
+other = "Repor vista"
+
+[View-reset]
+other = "Ver reposição!"
 
 [Attachments-label]
 other = "Anexos"

i18n/ru.toml

@@ -22,6 +22,9 @@ other = "Очистить историю"
 [Reset-view]
 other = "Вид на сброс"
 
+[View-reset]
+other = "Посмотреть сброс!"
+
 [Attachments-label]
 other = "Присоединенные файлы"
 

i18n/tr.toml

@@ -22,6 +22,9 @@ other = "Geçmişi Temizle"
 [Reset-view]
 other = "Görünümü sıfırla"
 
+[View-reset]
+other = "Görünüm sıfırlandı!"
+
 [Attachments-label]
 other = "Ekler"
 

i18n/vi.toml

@@ -22,6 +22,9 @@ other = "Xóa lịch sử.."
 [Reset-view]
 other = "Đặt lại dạng xem"
 
+[View-reset]
+other = "Xem đặt lại!"
+
 [Attachments-label]
 other = "Tập tin đính kèm"
 

i18n/zh-cn.toml

@@ -22,6 +22,9 @@ other = "清理历史记录"
 [Reset-view]
 other = "重置视图"
 
+[View-reset]
+other = "查看重置！"
+
 [Attachments-label]
 other = "附件"
 

i18n/zh-tw.toml

@@ -22,6 +22,9 @@ other = "清除歷史紀錄"
 [Reset-view]
 other = "重置檢視"
 
+[View-reset]
+other = "查看重置！"
+
 [Attachments-label]
 other = "附件"
 

i18n/zh.toml

@@ -22,6 +22,9 @@ other = "清理历史记录"
 [Reset-view]
 other = "重置视图"
 
+[View-reset]
+other = "查看重置！"
+
 [Attachments-label]
 other = "附件"
 

layouts/partials/stylesheet.html

@@ -48,6 +48,7 @@
       window.T_Copy_link_to_clipboard = '{{ T "Copy-link-to-clipboard" | safeJS }}';
       window.T_Link_copied_to_clipboard = '{{ T "Link-copied-to-clipboard" | safeJS }}';
       window.T_Reset_view = '{{ T "Reset-view" | safeJS }}';
+      window.T_View_reset = '{{ T "View-reset" | safeJS }}';
       window.T_No_results_found = '{{ T "No-results-found" | safeJS }}';
       window.T_N_results_found = '{{ T "N-results-found" | safeJS }}';
       {{ "// some further base stuff" | safeJS }}

static/js/theme.js

@@ -155,6 +155,9 @@ function restoreTabSelections() {
 }
 
 function initMermaid( update, attrs ) {
+    var doBeside = false;
+    var isImageRtl = false;
+
     // we are either in update or initialization mode;
     // during initialization, we want to edit the DOM;
     // during update we only want to execute if something changed
@@ -324,12 +327,19 @@ function initMermaid( update, attrs ) {
                     // we need to copy the maxWidth, otherwise our reset button will not align in the upper right
                     parent.style.maxWidth = this.style.maxWidth || this.getAttribute( 'width' );
                     // if no unit is given for the width
-                    parent.style.maxWidth = parent.style.maxWidth || this.getAttribute( 'width' ) + 'px';
+                    parent.style.maxWidth = parent.style.maxWidth || 'calc( ' + this.getAttribute( 'width' ) + 'px + 1rem )';
                     parent.insertAdjacentHTML( 'beforeend', '<span class="svg-reset-button" title="' + window.T_Reset_view + '"><i class="fas fa-undo-alt"></i></span>' );
-                    parent.querySelector( '.svg-reset-button' ).addEventListener( 'click', function( event ){
+                    var button = parent.querySelector( '.svg-reset-button' );
+                    button.addEventListener( 'click', function( event ){
                         inner.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')) );
+                    });
+                    button.addEventListener( 'mouseleave', function() {
+                        this.removeAttribute( 'aria-label' );
+                        this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' );
                     });
                 });
             },