Feature/ux improvements (#2288)

* Multi-tool advert on pages that share functionality

* Update translation files

Signed-off-by: GitHub Action <action@github.com>

* Rtl CSS

* Upgraded tooltips on multitool. Order selected pages list. Repositionicons. Minor additional tweaks

* restore gb translations

* Update translation files

Signed-off-by: GitHub Action <action@github.com>

* remove blankspace

---------

Signed-off-by: GitHub Action <action@github.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

src/main/resources/messages_ar_AR.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=حذف المحدد
 multiTool.downloadAll=تصدير
 multiTool.downloadSelected=تصدير المحدد
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=هذه الميزة متوفرة في <a href="{0}">صفحة الأدوات المتعددة</a> لدينا. اطلع عليها للحصول على واجهة مستخدم محسّنة لكل صفحة وميزات إضافية!
 

src/main/resources/messages_bg_BG.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_ca_CA.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_cs_CZ.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_da_DK.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_de_DE.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Auswahl löschen
 multiTool.downloadAll=Downloaden
 multiTool.downloadSelected=Auswahl downloaden
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=Diese Funktion ist auch auf unserer <a href="{0}">PDF-Multitool-Seite</a> verfügbar. Probieren Sie sie aus, denn sie bietet eine verbesserte Benutzeroberfläche und zusätzliche Funktionen!
 

src/main/resources/messages_el_GR.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_en_GB.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_en_US.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_es_ES.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_eu_ES.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_fr_FR.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_ga_IE.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_hi_IN.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_hr_HR.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_hu_HU.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_id_ID.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_it_IT.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Elimina selezionata
 multiTool.downloadAll=Esporta
 multiTool.downloadSelected=Esporta selezionata
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=Questa funzione è disponibile anche nella nostra <a href="{0}">pagina multi-strumento</a>. Scoprila per un'interfaccia utente pagina per pagina migliorata e funzionalità aggiuntive!
 

src/main/resources/messages_ja_JP.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_ko_KR.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_nl_NL.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_no_NB.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_pl_PL.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_pt_BR.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_pt_PT.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_ro_RO.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_ru_RU.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_sk_SK.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_sr_LATN_RS.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_sv_SE.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_th_TH.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_tr_TR.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_uk_UA.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_vi_VN.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_zh_CN.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/messages_zh_TW.properties

@@ -944,6 +944,12 @@ multiTool.deleteSelected=Delete Selected
 multiTool.downloadAll=Export
 multiTool.downloadSelected=Export Selected
 
+multiTool.insertPageBreak=Insert Page Break
+multiTool.addFile=Add File
+multiTool.rotateLeft=Rotate Left
+multiTool.rotateRight=Rotate Right
+multiTool.split=Split
+
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
 

src/main/resources/static/css/multi-tool.css

@@ -61,10 +61,6 @@ label {
   padding: 0;
 }
 
-#export-button {
-  margin-left: auto;
-}
-
 .bg-card {
   background-color: var(--md-sys-color-surface-5);
   border-radius: 3rem;
@@ -290,3 +286,34 @@ label {
 .checkbox-label {
   font-size: medium;
 }
+
+.btn-tooltip {
+  position: absolute;
+  display: none;
+  bottom: 3.2rem;
+  white-space: nowrap;
+  flex-wrap: nowrap;
+  width: fit-content;
+  padding: 7px;
+  background-color: rgba(0, 29, 41, 0.6);
+  border-radius: 3px;
+  font-size: 12px;
+  color: whitesmoke;
+  animation: fadeup 0.15s linear;
+}
+.btn {
+  position: relative; /* Ensure the button is the positioning context for its children */
+}
+@keyframes fadeup {
+  0% {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.btn:hover .btn-tooltip {
+  display: block;
+  }

src/main/resources/static/js/multitool/PdfContainer.js

@@ -341,8 +341,8 @@ class PdfContainer {
   toggleSelectAll() {
     const checkboxes = document.querySelectorAll(".pdf-actions_checkbox");
     window.selectAll = !window.selectAll;
-    const selectIcon = document.getElementById("select-icon");
+    const selectIcon = document.getElementById("select-All-Container");
-    const deselectIcon = document.getElementById("deselect-icon");
+    const deselectIcon = document.getElementById("deselect-All-Container");
 
     if (selectIcon.style.display === "none") {
       selectIcon.style.display = "inline";
@@ -441,7 +441,7 @@ class PdfContainer {
     const selectedPagesList = document.getElementById("selected-pages-list");
     const selectedPagesInput = document.getElementById("csv-input");
     selectedPagesList.innerHTML = ""; // Clear the list
-
+    window.selectedPages.sort((a, b) => a - b);
     window.selectedPages.forEach((page) => {
       const pageItem = document.createElement("div");
       pageItem.className = "page-item";
@@ -745,7 +745,7 @@ class PdfContainer {
     const selectedPages = document.getElementById("selected-pages-display");
     selectedPages.classList.toggle("hidden", !window.selectPage);
     const selectAll = document.getElementById("select-All-Container");
-    selectedPages.classList.toggle("hidden", !window.selectPage);
+    selectAll.classList.toggle("hidden", !window.selectPage);
     const exportSelected = document.getElementById("export-selected-button");
     exportSelected.classList.toggle("hidden", !window.selectPage);
     const selectPagesButton = document.getElementById("select-pages-button");

src/main/resources/templates/fragments/multi-toolAdvert.html

@@ -3,8 +3,8 @@
     <div>
       <span th:utext="#{multiTool-advert.message(|/multi-tool|)}"></span>
       <button id="closeMultiToolAdvert" style="position: absolute;
-    top: 10px;
+  inset-inline-end: 12px;
-    right: 12px;
+  inset-block-start: 10px;
     border: none;
     background: transparent;
     color: white;
@@ -16,13 +16,13 @@
   <style>
     .multi-toolAdvert {
       margin-bottom: 10px;
-      margin-left: 50%;
+      margin-inline-start: 50%;
-      transform: translateX(-50%);
       max-width: 52rem;
       z-index: 0;
       background-color: var(--md-sys-color-surface-5);
       border-radius: 2rem;
-      padding: 10px 27px 10px 20px;
+      padding-block: 10px;
+      padding-inline: 20px 27px;
       font-size: 0.9rem;
       display: none;
       justify-content: center;
@@ -43,6 +43,7 @@
       const closeBtn = document.getElementById('closeMultiToolAdvert');
 
       const cacheKey = `closeMultiToolAdvert_${window.location.pathname}`;
+      const isRTL = document.documentElement.dir === 'rtl';
 
       if (localStorage.getItem(cacheKey) !== 'true') {
         advert.style.display = 'flex';
@@ -52,6 +53,13 @@
         advert.style.display = 'none';
         localStorage.setItem(cacheKey, 'true');
       });
+
+
+      if (isRTL) {
+        advert.style.transform = 'translateX(50%)'; // Flip direction for RTL
+      } else {
+        advert.style.transform = 'translateX(-50%)';
+      }
     });
   </script>
 </div>

src/main/resources/templates/multi-tool.html

@@ -31,64 +31,79 @@
                     <span class="material-symbols-rounded">
                       add
                     </span>
+                    <span class="btn-tooltip" th:text="#{multiTool.addFile}"></span>
                   </button>
                   <button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
                     <span class="material-symbols-rounded">
                       rotate_left
                     </span>
+                    <span class="btn-tooltip" th:text="#{multiTool.rotateLeft}"></span>
                   </button>
                   <button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
                     <span class="material-symbols-rounded">
                       rotate_right
                     </span>
+                    <span class="btn-tooltip" th:text="#{multiTool.rotateRight}"></span>
                   </button>
                   <button class="btn btn-secondary enable-on-file" onclick="splitAll()" disabled>
                     <span class="material-symbols-rounded">
                       cut
                     </span>
-                  </button>
+                    <span class="btn-tooltip" th:text="#{multiTool.split}"></span>
-                  <button id="select-pages-container" class="btn btn-secondary enable-on-file"
-                    th:title="#{multiTool.selectPages}" onclick="toggleSelectPageVisibility()" disabled>
-                    <span id="select-pages-button" class="material-symbols-rounded">
-                      event_list
-                    </span>
-                  </button>
-                  <button id="select-All-Container" class="btn btn-secondary enable-on-file hidden"
-                    onclick="toggleSelectAll()" disabled>
-                    <span th:title="#{multiTool.selectAll}" class="material-symbols-rounded"
-                      id="select-icon">select_all</span>
-                    <span th:title="#{multiTool.deselectAll}" class="material-symbols-rounded" style="display: none;"
-                      id="deselect-icon">deselect</span>
-                  </button>
-                  <div class=" button-container">
-                    <button th:title="#{multiTool.deleteSelected}" id="delete-button" class="btn btn-danger hidden"
-                      onclick="deleteSelected()">
-                      <span class="material-symbols-rounded">delete</span>
-                    </button>
-                  </div>
-                  <button id="export-selected-button" class="btn btn-primary enable-on-file hidden"
-                    onclick="exportPdf(true)" disabled>
-                    <span th:title="#{multiTool.downloadSelected}" class="material-symbols-rounded">
-                      file_save
-                    </span>
                   </button>
                   <button class="btn btn-secondary enable-on-file" onclick="addFilesBlankAll()" disabled>
                     <span class="material-symbols-rounded">
                       insert_page_break
                     </span>
+                    <span class="btn-tooltip" th:text="#{multiTool.insertPageBreak}"></span>
                   </button>
-                  <button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf(false)" disabled>
+                  <button id="select-pages-container" class="btn btn-secondary enable-on-file"
-                    <span th:title="#{multiTool.downloadAll}" class="material-symbols-rounded">
+                    onclick="toggleSelectPageVisibility()" disabled>
-                      download
+                    <span id="select-pages-button" class="material-symbols-rounded">
+                      event_list
+                    </span>
+                    <span class="btn-tooltip" th:text="#{multiTool.selectPages}"></span>
+
+                  </button>
+                  <button id="deselect-All-Container" class="btn btn-secondary enable-on-file hidden"
+                    onclick="toggleSelectAll()" disabled>
+                    <span  class="material-symbols-rounded" id="deselect-icon">deselect</span>
+                      <span class="btn-tooltip" th:text="#{multiTool.deselectAll}"></span>
+                  </button>
+                  <button id="select-All-Container" class="btn btn-secondary enable-on-file hidden"
+                  onclick="toggleSelectAll()" disabled>
+                  <span  class="material-symbols-rounded"
+                    id="select-icon">select_all</span>
+                    <span class="btn-tooltip" th:text="#{multiTool.selectAll}"></span>
+                </button>
+                  <div class="button-container">
+                    <button id="delete-button" class="btn btn-danger delete hidden"  onclick="deleteSelected()">
+                      <span class="material-symbols-rounded">delete</span>
+                      <span class="btn-tooltip" th:text="#{multiTool.deleteSelected}"></span>
+                    </button>
+                  </div>
+                  <div style="margin-left:auto">
+                    <button id="export-selected-button" class="btn btn-primary enable-on-file hidden"
+                      onclick="exportPdf(true)" disabled>
+                      <span class="btn-tooltip" th:text="#{multiTool.downloadSelected}"></span>
+                      <span  class="material-symbols-rounded">
+                        file_save
                       </span>
                     </button>
+                    <button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf(false)"
+                      disabled>
+                      <span class="material-symbols-rounded">
+                        download
+                      </span>
+                      <span class="btn-tooltip" th:text="#{multiTool.downloadAll}"></span>
+                    </button>
+                  </div>
                 </div>
                 <div id="selected-pages-display" class="selected-pages-container hidden">
                   <div style="display:flex; height:3rem; margin-right:1rem">
                     <h5 th:text="#{multiTool.selectedPages}" style="white-space: nowrap; margin-right: 1rem;">Selected
                       Pages</h5>
-                    <input type="text" id="csv-input" class="form-control" style="height:2.5rem" placeholder="1,3,5-10"
+                    <input type="text" id="csv-input" class="form-control" style="height:2.5rem" placeholder="1,3,5-10"  value="">
-                      value="">
                   </div>
                   <ul id="selected-pages-list" class="pages-list"></ul>
                 </div>