diff --git a/CHANGELOG.md b/CHANGELOG.md
index e66068a..bdfc34f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,9 @@
## Changes 4/12/2025
+- Moved Gallery view toggle button into header.
+- Removed css entries that are not needed anymore for Gallery View Toggle.
+
### Advanced Search Implementation
- **Advanced Search Toggle:**
diff --git a/css/styles.css b/css/styles.css
index 2eab649..b3d1546 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1584,39 +1584,6 @@ body.dark-mode .btn-secondary {
border-color: #6c757d;
}
-#toggleViewBtn {
- margin-bottom: 20px;
- margin-left: 14px;
- padding: 10px 20px;
- background: rgba(0, 0, 0, 0.6);
- color: #fff;
- border: none;
- border-radius: 4px;
- font-size: 16px;
- cursor: pointer;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
- transition: background 0.3s ease, box-shadow 0.3s ease;
-}
-
-@media (max-width: 768px) {
- #toggleViewBtn {
- margin-left: 0 !important;
- }
-}
-
-@media (max-width: 600px) {
- #toggleViewBtn {
- margin-left: 0 !important;
- margin-right: auto !important;
- display: block !important;
- }
-}
-
-#toggleViewBtn:hover {
- background: rgba(0, 0, 0, 0.8);
- box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
-}
-
body.dark-mode .btn-danger {
background-color: #dc3545;
color: #fff;
diff --git a/js/fileListView.js b/js/fileListView.js
index 815d32f..a85ea47 100644
--- a/js/fileListView.js
+++ b/js/fileListView.js
@@ -127,23 +127,43 @@ function searchFiles(searchTerm) {
export function createViewToggleButton() {
let toggleBtn = document.getElementById("toggleViewBtn");
if (!toggleBtn) {
- toggleBtn = document.createElement("button");
- toggleBtn.id = "toggleViewBtn";
- toggleBtn.classList.add("btn", "btn-secondary");
- const titleElem = document.getElementById("fileListTitle");
- if (titleElem) {
- titleElem.parentNode.insertBefore(toggleBtn, titleElem.nextSibling);
- }
+ toggleBtn = document.createElement("button");
+ toggleBtn.id = "toggleViewBtn";
+ toggleBtn.classList.add("btn", "btn-toggleview");
+
+ // Set initial icon and tooltip based on current view mode.
+ if (window.viewMode === "gallery") {
+ toggleBtn.innerHTML = 'view_list';
+ toggleBtn.title = t("switch_to_table_view");
+ } else {
+ toggleBtn.innerHTML = 'view_module';
+ toggleBtn.title = t("switch_to_gallery_view");
+ }
+
+ // Insert the button before the last button in the header.
+ const headerButtons = document.querySelector(".header-buttons");
+ if (headerButtons && headerButtons.lastElementChild) {
+ headerButtons.insertBefore(toggleBtn, headerButtons.lastElementChild);
+ } else if (headerButtons) {
+ headerButtons.appendChild(toggleBtn);
+ }
}
- toggleBtn.textContent = window.viewMode === "gallery" ? t("switch_to_table_view") : t("switch_to_gallery_view");
+
toggleBtn.onclick = () => {
- window.viewMode = window.viewMode === "gallery" ? "table" : "gallery";
- localStorage.setItem("viewMode", window.viewMode);
- loadFileList(window.currentFolder);
- toggleBtn.textContent = window.viewMode === "gallery" ? t("switch_to_table_view") : t("switch_to_gallery_view");
+ window.viewMode = window.viewMode === "gallery" ? "table" : "gallery";
+ localStorage.setItem("viewMode", window.viewMode);
+ loadFileList(window.currentFolder);
+ if (window.viewMode === "gallery") {
+ toggleBtn.innerHTML = 'view_list';
+ toggleBtn.title = t("switch_to_table_view");
+ } else {
+ toggleBtn.innerHTML = 'view_module';
+ toggleBtn.title = t("switch_to_gallery_view");
+ }
};
+
return toggleBtn;
-}
+ }
export function formatFolderName(folder) {
if (folder === "root") return "(Root)";