smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-07-16 14:21:01 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Combine into single explorer tree

Browse Source
This commit is contained in:
saberzero1 2024-10-02 00:53:24 +02:00
parent 526e50aff0
commit 7d404acedd
No known key found for this signature in database
GPG Key ID: 41AEE99107640F10
3 changed files with 74 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
quartz/components/Explorer.tsx
View File

@ -88,7 +88,7 @@ export default ((userOpts?: Partial<Options>) => {
} }
return ( return (
<div class="explorer-container"> <div class="explorer-container">
<div class={`mobile-explorer explorer ${displayClass ?? ""}`}> <div class={`explorer ${displayClass ?? ""}`}>
<button <button
type="button" type="button"
id="mobile-explorer" id="mobile-explorer"
@ -115,14 +115,6 @@ export default ((userOpts?: Partial<Options>) => {
<line x1="4" x2="20" y1="18" y2="18" /> <line x1="4" x2="20" y1="18" y2="18" />
</svg> </svg>
</button> </button>
<div id="explorer-content" class="collapsed">
<ul class="overflow" id="explorer-ul">
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
<li id="explorer-end" />
</ul>
</div>
</div>
<div class={`desktop-explorer explorer ${displayClass ?? ""}`}>
<button <button
type="button" type="button"
id="desktop-explorer" id="desktop-explorer"

16
quartz/components/scripts/explorer.inline.ts
View File

@ -58,11 +58,15 @@ function toggleFolder(evt: MouseEvent) {
function toggleExplorer(this: HTMLElement) { function toggleExplorer(this: HTMLElement) {
// Toggle collapsed state of entire explorer // Toggle collapsed state of entire explorer
this.classList.toggle("collapsed") this.classList.toggle("collapsed")
const content = this.nextElementSibling as MaybeHTMLElement const content = (
this.nextElementSibling?.nextElementSibling
? this.nextElementSibling.nextElementSibling
: this.nextElementSibling
) as MaybeHTMLElement
if (!content) return if (!content) return
content.classList.toggle("collapsed") content.classList.toggle("collapsed")
//content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px" //content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
content.style.maxHeight = content.style.maxHeight === "0px" ? "100dvh" : "0px" content.classList.toggle("explorer-viewmode")
//prevent scroll under //prevent scroll under
if (document.querySelector("#mobile-explorer")) { if (document.querySelector("#mobile-explorer")) {
@ -167,9 +171,9 @@ document.addEventListener("DOMContentLoaded", () => {
const explorer = document.querySelector("#mobile-explorer") const explorer = document.querySelector("#mobile-explorer")
if (explorer) { if (explorer) {
explorer.classList.add("collapsed") explorer.classList.add("collapsed")
const content = explorer.nextElementSibling as HTMLElement const content = explorer.nextElementSibling?.nextElementSibling as HTMLElement
content.classList.add("collapsed") content.classList.add("collapsed")
content.style.maxHeight = "0px" content.classList.toggle("explorer-viewmode")
} }
toggleExplorerFolders() toggleExplorerFolders()
}) })
@ -178,9 +182,9 @@ document.addEventListener("nav", () => {
const explorer = document.querySelector("#mobile-explorer") const explorer = document.querySelector("#mobile-explorer")
if (explorer) { if (explorer) {
explorer.classList.add("collapsed") explorer.classList.add("collapsed")
const content = explorer.nextElementSibling as HTMLElement const content = explorer.nextElementSibling?.nextElementSibling as HTMLElement
content.classList.add("collapsed") content.classList.add("collapsed")
content.style.maxHeight = "0px" content.classList.toggle("explorer-viewmode")
} }
setupExplorer() setupExplorer()
//add collapsed class to all folders //add collapsed class to all folders

122
quartz/components/styles/explorer.scss
View File

@ -2,24 +2,24 @@
.explorer-container { .explorer-container {
overflow-y: hidden; overflow-y: hidden;
.mobile-explorer {
display: none; .explorer {
}
.desktop-explorer {
display: flex; display: flex;
} button#mobile-explorer {
@media all and ($mobile) {
order: -1;
.mobile-explorer {
display: flex;
}
.desktop-explorer {
display: none; display: none;
} }
} button#desktop-explorer {
display: flex;
.mobile-explorer, }
.desktop-explorer { @media all and ($mobile) {
order: -1;
button#mobile-explorer {
display: flex;
}
button#desktop-explorer {
display: none;
}
}
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
overflow-y: hidden; overflow-y: hidden;
@ -88,19 +88,19 @@
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
max-height: 100%; max-height: 0px;
transition: transition:
max-height 0.35s ease, max-height 0.35s ease,
visibility 0s linear 0s; visibility 0s linear 0.35s;
margin-top: 0.5rem; margin-top: 0.5rem;
visibility: visible; visibility: hidden;
&.collapsed { &.collapsed {
max-height: 0; max-height: 100%;
transition: transition:
max-height 0.35s ease, max-height 0.35s ease,
visibility 0s linear 0.35s; visibility 0s linear 0s;
visibility: hidden; visibility: visible;
} }
& ul { & ul {
@ -200,47 +200,51 @@
margin: 0; margin: 0;
} }
.mobile-explorer { .explorer {
#explorer-content { @media all and ($mobile) {
overscroll-behavior: none; #explorer-content {
z-index: 100; overscroll-behavior: none;
position: absolute; z-index: 100;
background-color: var(--light); position: absolute;
max-width: calc(100% - 4rem); background-color: var(--light);
left: 0; max-width: calc(100% - 4rem);
width: 100%; left: 0;
transition: all 300ms ease-in-out;
overflow: hidden;
padding: 1rem 2rem 5rem;
height: 100%;
max-height: calc(100dvh - 8rem);
margin-top: 36px;
&:not(.collapsed) {
height: calc(100dvh - 8rem);
}
ul.overflow {
max-height: calc(100dvh - 8rem);
width: 100%; width: 100%;
transition: all 300ms ease-in-out;
overflow: hidden;
padding: 1rem 2rem 5rem;
height: 100%;
max-height: calc(100dvh - 8rem);
margin-top: 2rem;
visibility: visible;
&:not(.collapsed) {
height: calc(100dvh - 8rem);
}
ul.overflow {
max-height: calc(100dvh - 8rem);
width: 100%;
}
&.collapsed {
height: 0;
visibility: hidden;
}
} }
&.collapsed { #mobile-explorer {
height: 0; margin: 5px;
} &:not(.collapsed) .lucide-menu {
} transform: rotate(90deg);
transition: transform 200ms ease-in-out;
#mobile-explorer { }
margin: 5px; .lucide-menu {
&:not(.collapsed) .lucide-menu { stroke: var(--darkgray);
transform: rotate(90deg); transition: transform 200ms ease;
transition: transform 200ms ease-in-out; &:hover {
} stroke: var(--dark);
.lucide-menu { }
stroke: var(--darkgray);
transition: transform 200ms ease;
&:hover {
stroke: var(--dark);
} }
} }
} }