joachim/FileRise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

folder dash adjusted

Browse Source
This commit is contained in:
Ryan
2025-03-21 17:38:44 -04:00
committed by GitHub
parent d3ce26e83d
commit 7898ad4f1c
2 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
folderManager.js
View File

@@ -78,7 +78,7 @@ function renderFolderTree(tree, parentPath = "", defaultDisplay = "block") {
const displayState = state[fullPath] !== undefined ? state[fullPath] : defaultDisplay; const displayState = state[fullPath] !== undefined ? state[fullPath] : defaultDisplay;
html += `<li class="folder-item">`; html += `<li class="folder-item">`;
if (hasChildren) { if (hasChildren) {
const toggleSymbol = (displayState === "none") ? "[+]" : "[-]"; const toggleSymbol = (displayState === 'none') ? '[+]' : '[' + '<span class="custom-dash">-</span>' + ']';
html += `<span class="folder-toggle" data-folder="${fullPath}">${toggleSymbol}</span>`; html += `<span class="folder-toggle" data-folder="${fullPath}">${toggleSymbol}</span>`;
} else { } else {
html += `<span class="folder-indent-placeholder"></span>`; html += `<span class="folder-indent-placeholder"></span>`;
@@ -109,7 +109,7 @@ function expandTreePath(path) {
nestedUl.classList.add("expanded"); nestedUl.classList.add("expanded");
const toggle = li.querySelector(".folder-toggle"); const toggle = li.querySelector(".folder-toggle");
if (toggle) { if (toggle) {
toggle.textContent = "[-]"; toggle.innerHTML = "[" + '<span class="custom-dash">-</span>' + "]";
let state = loadFolderTreeState(); let state = loadFolderTreeState();
state[cumulative] = "block"; state[cumulative] = "block";
saveFolderTreeState(state); saveFolderTreeState(state);
@@ -210,7 +210,7 @@ export async function loadFolderTree(selectedFolder) {
} }
let html = `<div id="rootRow" class="root-row"> let html = `<div id="rootRow" class="root-row">
<span class="folder-toggle" data-folder="root">[-]</span> <span class="folder-toggle" data-folder="root">[<span class="custom-dash">-</span>]</span>
<span class="folder-option root-folder-option" data-folder="root">(Root)</span> <span class="folder-option root-folder-option" data-folder="root">(Root)</span>
</div>`; </div>`;
if (folders.length === 0) { if (folders.length === 0) {
@@ -281,7 +281,7 @@ export async function loadFolderTree(selectedFolder) {
if (nestedUl.classList.contains("collapsed") || !nestedUl.classList.contains("expanded")) { if (nestedUl.classList.contains("collapsed") || !nestedUl.classList.contains("expanded")) {
nestedUl.classList.remove("collapsed"); nestedUl.classList.remove("collapsed");
nestedUl.classList.add("expanded"); nestedUl.classList.add("expanded");
this.textContent = "[-]"; this.innerHTML = "[" + '<span class="custom-dash">-</span>' + "]";
state["root"] = "block"; state["root"] = "block";
} else { } else {
nestedUl.classList.remove("expanded"); nestedUl.classList.remove("expanded");
@@ -304,7 +304,7 @@ export async function loadFolderTree(selectedFolder) {
if (siblingUl.classList.contains("collapsed") || !siblingUl.classList.contains("expanded")) { if (siblingUl.classList.contains("collapsed") || !siblingUl.classList.contains("expanded")) {
siblingUl.classList.remove("collapsed"); siblingUl.classList.remove("collapsed");
siblingUl.classList.add("expanded"); siblingUl.classList.add("expanded");
this.textContent = "[-]"; this.innerHTML = "[" + '<span class="custom-dash">-</span>' + "]";
state[folderPath] = "block"; state[folderPath] = "block";
} else { } else {
siblingUl.classList.remove("expanded"); siblingUl.classList.remove("expanded");

8
styles.css
View File

@@ -13,6 +13,12 @@ body {
body { body {
letter-spacing: 0.2px; letter-spacing: 0.2px;
} }
.custom-dash {
display: inline-block;
transform: scaleX(1.5);
padding-left: 2px !important;
padding-right: 2px !important;
}
/* CONTAINER */ /* CONTAINER */
.container { .container {
@@ -149,7 +155,7 @@ body.dark-mode header {
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 7px; padding: 9px;
border-radius: 50%; border-radius: 50%;
color: #fff; color: #fff;
transition: background-color 0.2s ease, box-shadow 0.2s ease; transition: background-color 0.2s ease, box-shadow 0.2s ease;