mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2024-11-16 12:20:12 +01:00
darkmode fix for account and pagenumber support filename
This commit is contained in:
parent
505855a53c
commit
39a187b6da
@ -116,7 +116,7 @@ public class PageNumbersController {
|
||||
Rectangle pageSize = page.getPageSize();
|
||||
PdfCanvas pdfCanvas = new PdfCanvas(page.newContentStreamAfter(), page.getResources(), pdfDoc);
|
||||
|
||||
String text = customText != null ? customText.replace("{n}", String.valueOf(pageNumber)).replace("{total}", String.valueOf(pdfDoc.getNumberOfPages())) : String.valueOf(pageNumber);
|
||||
String text = customText != null ? customText.replace("{n}", String.valueOf(pageNumber)).replace("{total}", String.valueOf(pdfDoc.getNumberOfPages())).replace("{filename}", file.getOriginalFilename().replaceFirst("[.][^.]+$", "")) : String.valueOf(pageNumber);
|
||||
|
||||
PdfFont font = PdfFontFactory.createFont(StandardFonts.HELVETICA);
|
||||
float textWidth = font.getWidth(text, fontSize);
|
||||
|
@ -20,7 +20,6 @@ server.error.include-message=always
|
||||
#logging.level.org.springframework=DEBUG
|
||||
#logging.level.org.springframework.security=DEBUG
|
||||
|
||||
#login.enabled=true
|
||||
|
||||
server.servlet.session.tracking-modes=cookie
|
||||
server.servlet.context-path=${APP_ROOT_PATH:/}
|
||||
|
@ -374,6 +374,9 @@ addPageNumbers.selectText.3=Position
|
||||
addPageNumbers.selectText.4=Starting Number
|
||||
addPageNumbers.selectText.5=Pages to Number
|
||||
addPageNumbers.selectText.6=Custom Text
|
||||
addPageNumbers.customTextDesc=Custom Text
|
||||
addPageNumbers.numberPagesDesc=Which pages to number, default 'all', also accepts 1-5 or 2,5,9 etc
|
||||
addPageNumbers.customNumberDesc=Defaults to {n}, also accepts 'Page {n} of {total}', 'Text-{n}', '{filename}-{n}
|
||||
addPageNumbers.submit=Add Page Numbers
|
||||
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
/* Dark Mode Styles */
|
||||
body {
|
||||
body, select, textarea {
|
||||
--body-background-color: 51, 51, 51;
|
||||
--base-font-color: 255, 255, 255;
|
||||
background-color: rgb(var(--body-background-color)) !important;
|
||||
@ -41,4 +41,53 @@ body {
|
||||
|
||||
.favorite-icon img {
|
||||
filter: brightness(0) invert(1) !important;
|
||||
}
|
||||
}
|
||||
table thead {
|
||||
background-color: #333 !important;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
table th, table td {
|
||||
border: 1px solid #444 !important;
|
||||
color: white;
|
||||
}
|
||||
.btn {
|
||||
background-color: #444 !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #007bff !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-secondary {
|
||||
background-color: #6c757d !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-info {
|
||||
background-color: #17a2b8 !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-danger {
|
||||
background-color: #dc3545 !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-outline-secondary {
|
||||
color: #fff !important;
|
||||
border-color: #fff;
|
||||
}
|
||||
.btn-outline-secondary:hover {
|
||||
background-color: #444 !important;
|
||||
color: #007bff !important;
|
||||
border-color: #007bff;
|
||||
}
|
||||
.blackwhite-icon {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
hr {
|
||||
border-color: rgba(255, 255, 255, 0.6); /* semi-transparent white */
|
||||
background-color: rgba(255, 255, 255, 0.6); /* for some browsers that might use background instead of border for <hr> */
|
||||
}
|
||||
|
@ -1,6 +1,44 @@
|
||||
var toggleCount = 0;
|
||||
var lastToggleTime = Date.now();
|
||||
|
||||
var elements = {
|
||||
lightModeStyles: null,
|
||||
darkModeStyles: null,
|
||||
rainbowModeStyles: null,
|
||||
darkModeIcon: null
|
||||
};
|
||||
|
||||
function getElements() {
|
||||
elements.lightModeStyles = document.getElementById("light-mode-styles");
|
||||
elements.darkModeStyles = document.getElementById("dark-mode-styles");
|
||||
elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles");
|
||||
elements.darkModeIcon = document.getElementById("dark-mode-icon");
|
||||
}
|
||||
|
||||
function setMode(mode) {
|
||||
elements.lightModeStyles.disabled = mode !== "off";
|
||||
elements.darkModeStyles.disabled = mode !== "on";
|
||||
elements.rainbowModeStyles.disabled = mode !== "rainbow";
|
||||
|
||||
if (mode === "on") {
|
||||
elements.darkModeIcon.src = "moon.svg";
|
||||
// Add the table-dark class to tables for dark mode
|
||||
var tables = document.querySelectorAll('.table');
|
||||
tables.forEach(table => {
|
||||
table.classList.add('table-dark');
|
||||
});
|
||||
} else if (mode === "off") {
|
||||
elements.darkModeIcon.src = "sun.svg";
|
||||
// Remove the table-dark class for light mode
|
||||
var tables = document.querySelectorAll('.table-dark');
|
||||
tables.forEach(table => {
|
||||
table.classList.remove('table-dark');
|
||||
});
|
||||
} else if (mode === "rainbow") {
|
||||
elements.darkModeIcon.src = "rainbow.svg";
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDarkMode() {
|
||||
var currentTime = Date.now();
|
||||
if (currentTime - lastToggleTime < 1000) {
|
||||
@ -10,67 +48,32 @@ function toggleDarkMode() {
|
||||
}
|
||||
lastToggleTime = currentTime;
|
||||
|
||||
var lightModeStyles = document.getElementById("light-mode-styles");
|
||||
var darkModeStyles = document.getElementById("dark-mode-styles");
|
||||
var rainbowModeStyles = document.getElementById("rainbow-mode-styles");
|
||||
var darkModeIcon = document.getElementById("dark-mode-icon");
|
||||
|
||||
if (toggleCount >= 18) {
|
||||
localStorage.setItem("dark-mode", "rainbow");
|
||||
lightModeStyles.disabled = true;
|
||||
darkModeStyles.disabled = true;
|
||||
rainbowModeStyles.disabled = false;
|
||||
darkModeIcon.src = "rainbow.svg";
|
||||
setMode("rainbow");
|
||||
} else if (localStorage.getItem("dark-mode") == "on") {
|
||||
localStorage.setItem("dark-mode", "off");
|
||||
lightModeStyles.disabled = false;
|
||||
darkModeStyles.disabled = true;
|
||||
rainbowModeStyles.disabled = true;
|
||||
darkModeIcon.src = "sun.svg";
|
||||
setMode("off");
|
||||
} else {
|
||||
localStorage.setItem("dark-mode", "on");
|
||||
lightModeStyles.disabled = true;
|
||||
darkModeStyles.disabled = false;
|
||||
rainbowModeStyles.disabled = true;
|
||||
darkModeIcon.src = "moon.svg";
|
||||
setMode("on");
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var lightModeStyles = document.getElementById("light-mode-styles");
|
||||
var darkModeStyles = document.getElementById("dark-mode-styles");
|
||||
var rainbowModeStyles = document.getElementById("rainbow-mode-styles");
|
||||
var darkModeIcon = document.getElementById("dark-mode-icon");
|
||||
getElements();
|
||||
|
||||
if (localStorage.getItem("dark-mode") == "on") {
|
||||
lightModeStyles.disabled = true;
|
||||
darkModeStyles.disabled = false;
|
||||
rainbowModeStyles.disabled = true;
|
||||
darkModeIcon.src = "moon.svg";
|
||||
} else if (localStorage.getItem("dark-mode") == "off") {
|
||||
lightModeStyles.disabled = false;
|
||||
darkModeStyles.disabled = true;
|
||||
rainbowModeStyles.disabled = true;
|
||||
darkModeIcon.src = "sun.svg";
|
||||
} else if (localStorage.getItem("dark-mode") == "rainbow") {
|
||||
lightModeStyles.disabled = true;
|
||||
darkModeStyles.disabled = true;
|
||||
rainbowModeStyles.disabled = false;
|
||||
darkModeIcon.src = "rainbow.svg";
|
||||
var currentMode = localStorage.getItem("dark-mode");
|
||||
if (currentMode === "on" || currentMode === "off" || currentMode === "rainbow") {
|
||||
setMode(currentMode);
|
||||
} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
setMode("on");
|
||||
} else {
|
||||
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
darkModeStyles.disabled = false;
|
||||
rainbowModeStyles.disabled = true;
|
||||
darkModeIcon.src = "moon.svg";
|
||||
} else {
|
||||
darkModeStyles.disabled = true;
|
||||
rainbowModeStyles.disabled = true;
|
||||
darkModeIcon.src = "sun.svg";
|
||||
}
|
||||
setMode("off");
|
||||
}
|
||||
|
||||
document.getElementById("dark-mode-toggle").addEventListener("click", function(event) {
|
||||
event.preventDefault();
|
||||
toggleDarkMode();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -30,7 +30,7 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="currentPassword" th:text="#{password}">Password</label>
|
||||
<input type="password" class="form-control" name="currentPassword" id="currentPassword" placeholder="Password">
|
||||
<input type="password" class="form-control" name="currentPassword" id="currentPasswordUsername" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change Username</button>
|
||||
@ -44,7 +44,7 @@
|
||||
<form action="/change-password" method="post">
|
||||
<div class="form-group">
|
||||
<label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>
|
||||
<input type="password" class="form-control" name="currentPassword" id="currentPassword" th:placeholder="#{account.oldPassword}">
|
||||
<input type="password" class="form-control" name="currentPassword" id="currentPasswordPassword" th:placeholder="#{account.oldPassword}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newPassword" th:text="#{account.newPassword}">New Password</label>
|
||||
@ -70,13 +70,13 @@
|
||||
<input type="password" class="form-control" id="apiKey" th:placeholder="#{account.yourApiKey}" readonly>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" id="copyBtn" type="button" onclick="copyToClipboard()">
|
||||
<img src="images/clipboard.svg" alt="Copy" style="height:20px;">
|
||||
<img class="blackwhite-icon" src="images/clipboard.svg" alt="Copy" style="height:20px;">
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" id="showBtn" type="button" onclick="showApiKey()">
|
||||
<img id="eyeIcon" src="images/eye.svg" alt="Toggle API Key Visibility" style="height:20px;">
|
||||
<img class="blackwhite-icon" id="eyeIcon" src="images/eye.svg" alt="Toggle API Key Visibility" style="height:20px;">
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">
|
||||
<img id="eyeIcon" src="images/arrow-clockwise.svg" alt="Refresh API-Key" style="height:20px;">
|
||||
<img class="blackwhite-icon" id="eyeIcon" src="images/arrow-clockwise.svg" alt="Refresh API-Key" style="height:20px;">
|
||||
</button>
|
||||
|
||||
|
||||
|
@ -103,12 +103,12 @@
|
||||
<label for="pagesToNumber" th:text="#{addPageNumbers.selectText.5}"></label> <input
|
||||
type="text" class="form-control" id="pagesToNumber"
|
||||
name="pagesToNumber"
|
||||
placeholder="Which pages to number, default 'all', also accepts 1-5 or 2,5,9 etc" />
|
||||
th:placeholder="#{addPageNumbers.numberPagesDesc}" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="customText" th:text="#{addPageNumbers.selectText.6}"></label> <input type="text"
|
||||
class="form-control" id="customText" name="customText"
|
||||
placeholder="Default just number, also accepts 'Page {n} of {total}', 'Tag-{n}' etc" />
|
||||
th:placeholder="#{addPageNumbers.customNumberDesc}" />
|
||||
</div>
|
||||
<button type="submit" id="submitBtn" class="btn btn-primary"
|
||||
th:text="#{addPageNumbers.submit}"></button>
|
||||
|
Loading…
Reference in New Issue
Block a user