Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2024-12-21 19:08:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update: changed JS to new theme system + Darkmode system

Browse Source
This commit is contained in:
Rectos VX 2024-05-05 15:12:30 +04:00
parent 04d1ff3822
commit 5c572a7d89
4 changed files with 26 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/main/resources/static/js/darkmode.js
View File

@ -8,7 +8,6 @@ var elements = {
darkModeIcon: null,
searchBar: null,
formControls: null,
navbar: null,
navIcons: null,
navDropdownMenus: null,
};
@ -20,8 +19,6 @@ function getElements() {
elements.darkModeIcon = document.getElementById("dark-mode-icon");
elements.searchBar = document.getElementById("searchBar");
elements.formControls = document.querySelectorAll(".form-control");
elements.navbar = document.querySelectorAll("nav.navbar");
elements.navIcons = document.querySelectorAll("nav .icon, .navbar-icon");
elements.navDropdownMenus = document.querySelectorAll(".dropdown-menu");
}
function setMode(mode) {
@ -42,64 +39,20 @@ function setMode(mode) {
if (mode === "on") {
if (elements && elements.darkModeIcon) {
elements.darkModeIcon.src = "moon.svg";
}
if (elements && elements.searchBar) {
elements.searchBar.classList.add("dark-mode-search");
}
if (elements && elements.formControls) {
elements.formControls.forEach((input) => input.classList.add("bg-dark", "text-white"));
}
if (elements && elements.navbar) {
elements.navbar.forEach((navElement) => {
navElement.classList.remove("navbar-light", "bg-light");
navElement.classList.add("navbar-dark", "bg-dark");
});
}
if (elements && elements.navDropdownMenus) {
elements.navDropdownMenus.forEach((menu) => menu.classList.add("dropdown-menu-dark"));
}
if (elements && elements.navIcons) {
elements.navIcons.forEach((icon) => (icon.style.filter = "invert(1)"));
elements.darkModeIcon.textContent = "dark_mode";
}
var tables = document.querySelectorAll(".table");
tables.forEach((table) => {
table.classList.add("table-dark");
});
if (jumbotron) {
jumbotron.classList.add("bg-dark");
jumbotron.classList.remove("bg-light");
}
} else if (mode === "off") {
if (elements && elements.darkModeIcon) {
elements.darkModeIcon.src = "sun.svg";
}
if (elements && elements.searchBar) {
elements.searchBar.classList.remove("dark-mode-search");
}
if (elements && elements.formControls) {
elements.formControls.forEach((input) => input.classList.remove("bg-dark", "text-white"));
}
if (elements && elements.navbar) {
elements.navbar.forEach((navElement) => {
navElement.classList.remove("navbar-dark", "bg-dark");
navElement.classList.add("navbar-light", "bg-light");
});
}
if (elements && elements.navDropdownMenus) {
elements.navDropdownMenus.forEach((menu) => menu.classList.remove("dropdown-menu-dark"));
}
if (elements && elements.navIcons) {
elements.navIcons.forEach((icon) => (icon.style.filter = "none"));
elements.darkModeIcon.textContent = "light_mode";
}
var tables = document.querySelectorAll(".table-dark");
tables.forEach((table) => {
table.classList.remove("table-dark");
});
if (jumbotron) {
jumbotron.classList.remove("bg-dark");
jumbotron.classList.add("bg-light");
}
} else if (mode === "rainbow") {
if (elements && elements.darkModeIcon) {
elements.darkModeIcon.src = "rainbow.svg";

17
src/main/resources/static/js/homecard.js
View File

@ -23,15 +23,17 @@ function filterCards() {
}
function toggleFavorite(element) {
var img = element.querySelector("img");
var span = element.querySelector("span.material-symbols-rounded");
var card = element.closest(".feature-card");
var cardId = card.id;
if (img.src.endsWith("star.svg")) {
img.src = "images/star-fill.svg";
if (span.classList.contains("no-fill")) {
span.classList.remove("no-fill");
span.classList.add("fill");
card.classList.add("favorite");
localStorage.setItem(cardId, "favorite");
} else {
img.src = "images/star.svg";
span.classList.remove("fill");
span.classList.add("no-fill");
card.classList.remove("favorite");
localStorage.removeItem(cardId);
}
@ -40,6 +42,7 @@ function toggleFavorite(element) {
filterCards();
}
function reorderCards() {
var container = document.querySelector(".features-container");
var cards = Array.from(container.getElementsByClassName("feature-card"));
@ -58,13 +61,15 @@ function reorderCards() {
container.appendChild(card);
});
}
function initializeCards() {
var cards = document.querySelectorAll(".feature-card");
cards.forEach(function (card) {
var cardId = card.id;
var img = card.querySelector(".favorite-icon img");
var span = card.querySelector(".favorite-icon span.material-symbols-rounded");
if (localStorage.getItem(cardId) === "favorite") {
img.src = "images/star-fill.svg";
span.classList.remove("no-fill");
span.classList.add("fill");
card.classList.add("favorite");
}
});

31
src/main/resources/static/js/multitool/PdfActionsManager.js
View File

@ -92,44 +92,35 @@ class PdfActionsManager {
const rightDirection = this.pageDirection === "rtl" ? "left" : "right";
const buttonContainer = document.createElement("div");
buttonContainer.classList.add("pdf-actions_button-container", "hide-on-drag");
buttonContainer.classList.add("btn-group", "pdf-actions_button-container", "hide-on-drag");
const moveUp = document.createElement("button");
moveUp.classList.add("pdf-actions_move-left-button", "btn", "btn-secondary");
moveUp.innerHTML = `<i class="bi bi-arrow-${leftDirection}-short"></i>`;
moveUp.innerHTML = `<span class="material-symbols-rounded">arrow_${leftDirection}_alt</span>`;
moveUp.onclick = this.moveUpButtonCallback;
buttonContainer.appendChild(moveUp);
const moveDown = document.createElement("button");
moveDown.classList.add("pdf-actions_move-right-button", "btn", "btn-secondary");
moveDown.innerHTML = `<i class="bi bi-arrow-${rightDirection}-short"></i>`;
moveDown.innerHTML = `<span class="material-symbols-rounded">arrow_${rightDirection}_alt</span>`;
moveDown.onclick = this.moveDownButtonCallback;
buttonContainer.appendChild(moveDown);
const rotateCCW = document.createElement("button");
rotateCCW.classList.add("btn", "btn-secondary");
rotateCCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
</svg>`;
rotateCCW.innerHTML = `<span class="material-symbols-rounded">rotate_left</span>`;
rotateCCW.onclick = this.rotateCCWButtonCallback;
buttonContainer.appendChild(rotateCCW);
const rotateCW = document.createElement("button");
rotateCW.classList.add("btn", "btn-secondary");
rotateCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>`;
rotateCW.innerHTML = `<span class="material-symbols-rounded">rotate_right</span>`;
rotateCW.onclick = this.rotateCWButtonCallback;
buttonContainer.appendChild(rotateCW);
const deletePage = document.createElement("button");
deletePage.classList.add("btn", "btn-danger");
deletePage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
</svg>`;
deletePage.innerHTML = `<span class="material-symbols-rounded">delete</span>`;
deletePage.onclick = this.deletePageButtonCallback;
buttonContainer.appendChild(deletePage);
@ -145,10 +136,7 @@ class PdfActionsManager {
const insertFileButton = document.createElement("button");
insertFileButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
insertFileButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
<path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
</svg>`;
insertFileButton.innerHTML = `<span class="material-symbols-rounded">add</span>`;
insertFileButton.onclick = this.insertFileButtonCallback;
insertFileButtonContainer.appendChild(insertFileButton);
@ -164,10 +152,7 @@ class PdfActionsManager {
const insertFileButtonRight = document.createElement("button");
insertFileButtonRight.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
insertFileButtonRight.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
<path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
insertFileButtonRight</svg>`;
insertFileButtonRight.innerHTML = `<span class="material-symbols-rounded">add</span>`;
insertFileButtonRight.onclick = () => addPdfs();
insertFileButtonRightContainer.appendChild(insertFileButtonRight);

8
src/main/resources/static/js/pipeline.js
View File

@ -251,14 +251,14 @@ document.getElementById("addOperationBtn").addEventListener("click", function ()
<div class="d-flex justify-content-between align-items-center w-100">
<div class="operationName">${selectedOperation}</div>
<div class="arrows d-flex">
<button class="btn btn-secondary move-up ms-1"><span>&uarr;</span></button>
<button class="btn btn-secondary move-down ms-1"><span>&darr;</span></button>
<button class="btn btn-secondary move-up ms-1"><span class="material-symbols-rounded">arrow_upward</span></button>
<button class="btn btn-secondary move-down ms-1"><span class="material-symbols-rounded">arrow_downward</span></button>
<button class="btn ${hasSettings ? "btn-warning" : "btn-secondary"} pipelineSettings ms-1" ${
hasSettings ? "" : "disabled"
}>
<span style="color: ${hasSettings ? "white" : "grey"};">⚙️</span>
<span class="material-symbols-rounded">settings</span>
</button>
<button class="btn btn-danger remove ms-1"><span>X</span></button>
<button class="btn btn-danger remove ms-1"><span class="material-symbols-rounded">close</span></button>
</div>
</div>
`;