Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-08-02 13:48:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix tooltip for theme toggle

Browse Source
This commit is contained in:
Anthony Stirling 2025-07-20 08:25:37 +01:00
parent 64d8ef4a39
commit a0593a2df7
3 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/core/src/main/resources/messages_en_GB.properties
View File

@ -347,6 +347,7 @@ analytics.settings=You can change the settings for analytics in the config/setti
navbar.favorite=Favorites navbar.favorite=Favorites
navbar.recent=New and recently updated navbar.recent=New and recently updated
navbar.darkmode=Dark Mode navbar.darkmode=Dark Mode
navbar.lightmode=Light Mode
navbar.language=Languages navbar.language=Languages
navbar.settings=Settings navbar.settings=Settings
navbar.allTools=Tools navbar.allTools=Tools

19
app/core/src/main/resources/static/js/darkmode.js
View File

@ -6,6 +6,8 @@ var elements = {
darkModeStyles: null, darkModeStyles: null,
rainbowModeStyles: null, rainbowModeStyles: null,
darkModeIcon: null, darkModeIcon: null,
darkModeToggle: null,
darkModeText: null,
searchBar: null, searchBar: null,
formControls: null, formControls: null,
navIcons: null, navIcons: null,
@ -17,6 +19,8 @@ function getElements() {
elements.darkModeStyles = document.getElementById("dark-mode-styles"); elements.darkModeStyles = document.getElementById("dark-mode-styles");
elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles"); elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles");
elements.darkModeIcon = document.getElementById("dark-mode-icon"); elements.darkModeIcon = document.getElementById("dark-mode-icon");
elements.darkModeToggle = document.getElementById("dark-mode-toggle");
elements.darkModeText = document.getElementById("dark-mode-text");
elements.searchBar = document.getElementById("searchBar"); elements.searchBar = document.getElementById("searchBar");
elements.formControls = document.querySelectorAll(".form-control"); elements.formControls = document.querySelectorAll(".form-control");
elements.navDropdownMenus = document.querySelectorAll(".dropdown-menu"); elements.navDropdownMenus = document.querySelectorAll(".dropdown-menu");
@ -41,6 +45,11 @@ function setMode(mode) {
if (elements && elements.darkModeIcon) { if (elements && elements.darkModeIcon) {
elements.darkModeIcon.textContent = "dark_mode"; elements.darkModeIcon.textContent = "dark_mode";
} }
if (elements && elements.darkModeToggle && elements.darkModeText) {
elements.darkModeToggle.title = elements.darkModeToggle.dataset.lightTitle;
elements.darkModeText.textContent = elements.darkModeText.dataset.lightText;
elements.darkModeText.setAttribute("data-text", elements.darkModeText.dataset.lightText);
}
var tables = document.querySelectorAll(".table"); var tables = document.querySelectorAll(".table");
tables.forEach((table) => { tables.forEach((table) => {
table.classList.add("table-dark"); table.classList.add("table-dark");
@ -49,6 +58,11 @@ function setMode(mode) {
if (elements && elements.darkModeIcon) { if (elements && elements.darkModeIcon) {
elements.darkModeIcon.textContent = "light_mode"; elements.darkModeIcon.textContent = "light_mode";
} }
if (elements && elements.darkModeToggle && elements.darkModeText) {
elements.darkModeToggle.title = elements.darkModeToggle.dataset.darkTitle;
elements.darkModeText.textContent = elements.darkModeText.dataset.darkText;
elements.darkModeText.setAttribute("data-text", elements.darkModeText.dataset.darkText);
}
var tables = document.querySelectorAll(".table-dark"); var tables = document.querySelectorAll(".table-dark");
tables.forEach((table) => { tables.forEach((table) => {
table.classList.remove("table-dark"); table.classList.remove("table-dark");
@ -57,6 +71,11 @@ function setMode(mode) {
if (elements && elements.darkModeIcon) { if (elements && elements.darkModeIcon) {
elements.darkModeIcon.textContent = "looks"; elements.darkModeIcon.textContent = "looks";
} }
if (elements && elements.darkModeToggle && elements.darkModeText) {
elements.darkModeToggle.title = elements.darkModeToggle.dataset.darkTitle;
elements.darkModeText.textContent = elements.darkModeText.dataset.darkText;
elements.darkModeText.setAttribute("data-text", elements.darkModeText.dataset.darkText);
}
} }
} }

4
app/core/src/main/resources/templates/fragments/navbar.html
View File

@ -127,12 +127,12 @@
</div> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" id="dark-mode-toggle" href="#" th:title="#{navbar.darkmode}"> <a class="nav-link" id="dark-mode-toggle" href="#" th:title="#{navbar.darkmode}" data-dark-title="#{navbar.darkmode}" data-light-title="#{navbar.lightmode}">
<span class="material-symbols-rounded" id="dark-mode-icon"> <span class="material-symbols-rounded" id="dark-mode-icon">
dark_mode dark_mode
</span> </span>
<span class="icon-text icon-hide" id="dark-mode-text" th:data-text="#{navbar.darkmode}" <span class="icon-text icon-hide" id="dark-mode-text" th:data-text="#{navbar.darkmode}"
th:text="#{navbar.darkmode}"></span> th:text="#{navbar.darkmode}" data-dark-text="#{navbar.darkmode}" data-light-text="#{navbar.lightmode}"></span>
</a> </a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">