builderadmin
/
NoteDiscovery
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

smaller items in navigation tree

This commit is contained in:
Gamosoft 2025-12-05 14:31:52 +01:00
parent 69a016d145
commit 5d61b115c2
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app.js
View File

@ -982,7 +982,7 @@ function noteApp() {
@dragenter.prevent="dragOverFolder = '${folder.path.replace(/'/g, "\\'")}'" @dragenter.prevent="dragOverFolder = '${folder.path.replace(/'/g, "\\'")}'"
@dragleave="dragOverFolder = null" @dragleave="dragOverFolder = null"
@drop.stop="onFolderDrop('${folder.path.replace(/'/g, "\\'")}' )" @drop.stop="onFolderDrop('${folder.path.replace(/'/g, "\\'")}' )"
class="folder-item px-3 py-3 mb-1 text-sm rounded transition-all relative" class="folder-item px-2 py-1 text-sm relative"
style="color: var(--text-primary); cursor: pointer;" style="color: var(--text-primary); cursor: pointer;"
:class="{ :class="{
'border-2 border-dashed bg-accent-light': (draggedNote || draggedFolder) && dragOverFolder === '${folder.path.replace(/'/g, "\\'")}', 'border-2 border-dashed bg-accent-light': (draggedNote || draggedFolder) && dragOverFolder === '${folder.path.replace(/'/g, "\\'")}',
@ -1040,7 +1040,7 @@ function noteApp() {
// If expanded, render folder contents (child folders + notes) // If expanded, render folder contents (child folders + notes)
if (isExpanded) { if (isExpanded) {
html += `<div class="folder-contents" style="padding-left: 12px;">`; html += `<div class="folder-contents" style="padding-left: 10px;">`;
// First, render child folders (if any) // First, render child folders (if any)
if (folder.children && Object.keys(folder.children).length > 0) { if (folder.children && Object.keys(folder.children).length > 0) {
@ -1080,7 +1080,7 @@ function noteApp() {
@dragstart="onNoteDragStart('${note.path.replace(/'/g, "\\'")}', $event)" @dragstart="onNoteDragStart('${note.path.replace(/'/g, "\\'")}', $event)"
@dragend="onNoteDragEnd()" @dragend="onNoteDragEnd()"
@click="${clickHandler}" @click="${clickHandler}"
class="note-item px-3 py-2 mb-1 text-sm rounded relative border-2 border-transparent" class="note-item px-2 py-1 text-sm relative border-2 border-transparent"
style="${isCurrent ? 'background-color: var(--accent-light); color: var(--accent-primary);' : 'color: var(--text-primary);'} ${isImage ? 'opacity: 0.85;' : ''} cursor: pointer;" style="${isCurrent ? 'background-color: var(--accent-light); color: var(--accent-primary);' : 'color: var(--text-primary);'} ${isImage ? 'opacity: 0.85;' : ''} cursor: pointer;"
@mouseover="if('${note.path}' !== currentNote && '${note.path}' !== currentImage) $el.style.backgroundColor='var(--bg-hover)'" @mouseover="if('${note.path}' !== currentNote && '${note.path}' !== currentImage) $el.style.backgroundColor='var(--bg-hover)'"
@mouseout="if('${note.path}' !== currentNote && '${note.path}' !== currentImage) $el.style.backgroundColor='transparent'" @mouseout="if('${note.path}' !== currentNote && '${note.path}' !== currentImage) $el.style.backgroundColor='transparent'"
@ -1169,7 +1169,7 @@ function noteApp() {
const sidebar = document.querySelector('.flex-1.overflow-y-auto.custom-scrollbar'); const sidebar = document.querySelector('.flex-1.overflow-y-auto.custom-scrollbar');
if (!sidebar) return; if (!sidebar) return;
const noteElements = sidebar.querySelectorAll('[class*="px-3 py-2 mb-1"]'); const noteElements = sidebar.querySelectorAll('.note-item');
let targetElement = null; let targetElement = null;
const noteName = notePath.split('/').pop().replace('.md', ''); const noteName = notePath.split('/').pop().replace('.md', '');

17
frontend/index.html
View File

@ -443,10 +443,10 @@
cursor: copy !important; cursor: copy !important;
} }
/* Folder tree styling */ /* Folder tree styling - compact Obsidian-like */
.folder-item { .folder-item {
user-select: none; user-select: none;
transition: all 0.2s ease; border-radius: 4px;
} }
.folder-item:hover { .folder-item:hover {
@ -458,8 +458,11 @@
} }
.note-item { .note-item {
padding-left: 1.5rem; border-radius: 4px;
transition: all 0.2s ease; }
.note-item:hover {
background-color: var(--bg-hover);
} }
/* Drag and drop improvements */ /* Drag and drop improvements */
@ -476,7 +479,7 @@
/* Smooth transitions for drag states */ /* Smooth transitions for drag states */
.folder-item, .folder-item,
.note-item { .note-item {
transition: opacity 0.2s ease, transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; transition: background-color 0.15s ease, border-color 0.15s ease;
} }
/* Better drop zone visibility */ /* Better drop zone visibility */
@ -1001,7 +1004,7 @@
<template x-for="note in searchResults" :key="note.path"> <template x-for="note in searchResults" :key="note.path">
<div <div
@click="openItem(note.path, note.type, searchQuery)" @click="openItem(note.path, note.type, searchQuery)"
class="px-3 py-2 mb-1 text-sm rounded cursor-pointer" class="px-2 py-1.5 text-sm cursor-pointer rounded"
:style="currentNote === note.path ? 'background-color: var(--accent-light); color: var(--accent-primary);' : 'color: var(--text-primary);'" :style="currentNote === note.path ? 'background-color: var(--accent-light); color: var(--accent-primary);' : 'color: var(--text-primary);'"
onmouseover="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='var(--bg-hover)'" onmouseover="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='var(--bg-hover)'"
onmouseout="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='transparent'" onmouseout="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='transparent'"
@ -1115,7 +1118,7 @@
@dragstart="onNoteDragStart(note.path, $event)" @dragstart="onNoteDragStart(note.path, $event)"
@dragend="onNoteDragEnd()" @dragend="onNoteDragEnd()"
@click="openItem(note.path, note.type)" @click="openItem(note.path, note.type)"
class="note-item px-3 py-2 mb-1 text-sm rounded relative border-2 border-transparent" class="note-item px-2 py-1 text-sm relative border-2 border-transparent"
:style="((note.type === 'image' ? currentImage === note.path : currentNote === note.path) ? 'background-color: var(--accent-light); color: var(--accent-primary);' : 'color: var(--text-primary);') + (note.type === 'image' ? ' opacity: 0.85;' : '') + (draggedNote || draggedFolder ? ' cursor: grabbing;' : ' cursor: pointer;')" :style="((note.type === 'image' ? currentImage === note.path : currentNote === note.path) ? 'background-color: var(--accent-light); color: var(--accent-primary);' : 'color: var(--text-primary);') + (note.type === 'image' ? ' opacity: 0.85;' : '') + (draggedNote || draggedFolder ? ' cursor: grabbing;' : ' cursor: pointer;')"
@mouseover="if(currentNote !== note.path && currentImage !== note.path) $el.style.backgroundColor='var(--bg-hover)'" @mouseover="if(currentNote !== note.path && currentImage !== note.path) $el.style.backgroundColor='var(--bg-hover)'"
@mouseout="if(currentNote !== note.path && currentImage !== note.path) $el.style.backgroundColor='transparent'" @mouseout="if(currentNote !== note.path && currentImage !== note.path) $el.style.backgroundColor='transparent'"