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

contextual new item

This commit is contained in:
Gamosoft 2025-11-26 14:38:47 +01:00
parent 01ea9f6008
commit f256aef407
2 changed files with 72 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/app.js
View File

@ -100,6 +100,7 @@ function noteApp() {
// Dropdown state // Dropdown state
showNewDropdown: false, showNewDropdown: false,
dropdownTargetFolder: '', // Folder context for "New" dropdown (empty = root) dropdownTargetFolder: '', // Folder context for "New" dropdown (empty = root)
dropdownPosition: { top: 0, left: 0 }, // Position for contextual dropdown
// Template state // Template state
showTemplateModal: false, showTemplateModal: false,
@ -982,7 +983,7 @@ function noteApp() {
</div> </div>
<div class="hover-buttons flex gap-1 transition-opacity absolute right-2 top-1/2 transform -translate-y-1/2" style="opacity: 0; pointer-events: none; background: linear-gradient(to right, transparent, var(--bg-hover) 20%, var(--bg-hover)); padding-left: 20px;" @click.stop> <div class="hover-buttons flex gap-1 transition-opacity absolute right-2 top-1/2 transform -translate-y-1/2" style="opacity: 0; pointer-events: none; background: linear-gradient(to right, transparent, var(--bg-hover) 20%, var(--bg-hover)); padding-left: 20px;" @click.stop>
<button <button
@click="dropdownTargetFolder = '${folder.path.replace(/'/g, "\\'")}'; showNewDropdown = !showNewDropdown" @click="dropdownTargetFolder = '${folder.path.replace(/'/g, "\\'")}'; toggleNewDropdown($event)"
class="px-1.5 py-0.5 text-xs rounded hover:brightness-110" class="px-1.5 py-0.5 text-xs rounded hover:brightness-110"
style="background-color: var(--bg-tertiary); color: var(--text-secondary);" style="background-color: var(--bg-tertiary); color: var(--text-secondary);"
title="Add item here" title="Add item here"
@ -1965,10 +1966,26 @@ function noteApp() {
// DROPDOWN MENU SYSTEM // DROPDOWN MENU SYSTEM
// ===================================================== // =====================================================
toggleNewDropdown() { toggleNewDropdown(event) {
this.showNewDropdown = !this.showNewDropdown; this.showNewDropdown = true; // Always open (or keep open)
if (this.showNewDropdown) {
this.dropdownTargetFolder = ''; // Set to root when opening main dropdown if (event && event.target) {
const rect = event.target.getBoundingClientRect();
// Position dropdown next to the clicked element
let top = rect.bottom + 4; // 4px spacing
let left = rect.left;
// Keep dropdown on screen
const dropdownWidth = 200;
const dropdownHeight = 150;
if (left + dropdownWidth > window.innerWidth) {
left = rect.right - dropdownWidth;
}
if (top + dropdownHeight > window.innerHeight) {
top = rect.top - dropdownHeight - 4;
}
this.dropdownPosition = { top, left };
} }
}, },

99
frontend/index.html
View File

@ -903,9 +903,9 @@
</div> </div>
<!-- New Item Dropdown --> <!-- New Item Dropdown -->
<div class="p-3 border-b relative" style="border-color: var(--border-primary);"> <div class="p-3 border-b" style="border-color: var(--border-primary);">
<button <button
@click="toggleNewDropdown()" @click="dropdownTargetFolder = ''; toggleNewDropdown($event)"
class="w-full px-4 py-2 text-sm font-medium text-white rounded-lg focus:outline-none focus:ring-2 flex items-center justify-center gap-2" class="w-full px-4 py-2 text-sm font-medium text-white rounded-lg focus:outline-none focus:ring-2 flex items-center justify-center gap-2"
style="background-color: var(--accent-primary);" style="background-color: var(--accent-primary);"
onmouseover="this.style.backgroundColor='var(--accent-hover)'" onmouseover="this.style.backgroundColor='var(--accent-hover)'"
@ -916,53 +916,6 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg> </svg>
</button> </button>
<!-- Dropdown Menu -->
<div
x-show="showNewDropdown"
@click.outside="closeDropdown()"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute left-3 right-3 mt-2 rounded-lg shadow-lg z-50"
style="background-color: var(--bg-secondary); border: 1px solid var(--border-primary);"
>
<div class="py-1">
<button
@click="createNote()"
class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
style="color: var(--text-primary);"
onmouseover="this.style.backgroundColor='var(--bg-hover)'"
onmouseout="this.style.backgroundColor='transparent'"
>
<span class="text-lg">📝</span>
<span>New Note</span>
</button>
<button
@click="createFolder()"
class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
style="color: var(--text-primary);"
onmouseover="this.style.backgroundColor='var(--bg-hover)'"
onmouseout="this.style.backgroundColor='transparent'"
>
<span class="text-lg">📁</span>
<span>New Folder</span>
</button>
<button
@click.stop="showTemplateModal = true; showNewDropdown = false; mobileSidebarOpen = false"
class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
style="color: var(--text-primary);"
onmouseover="this.style.backgroundColor='var(--bg-hover)'"
onmouseout="this.style.backgroundColor='transparent'"
>
<span class="text-lg">📄</span>
<span>New from Template</span>
</button>
</div>
</div>
</div> </div>
<!-- Notes List --> <!-- Notes List -->
@ -1650,6 +1603,54 @@
</div> </div>
</div> </div>
<!-- Contextual New Item Dropdown -->
<div
x-show="showNewDropdown"
@click.outside="closeDropdown()"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="rounded-lg shadow-lg"
:style="`position: fixed; top: ${dropdownPosition.top}px; left: ${dropdownPosition.left}px; z-index: 1000; background-color: var(--bg-secondary); border: 1px solid var(--border-primary); min-width: 200px;`"
x-cloak
>
<div class="py-1">
<button
@click="createNote()"
class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
style="color: var(--text-primary);"
onmouseover="this.style.backgroundColor='var(--bg-hover)'"
onmouseout="this.style.backgroundColor='transparent'"
>
<span class="text-lg">📝</span>
<span>New Note</span>
</button>
<button
@click="createFolder()"
class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
style="color: var(--text-primary);"
onmouseover="this.style.backgroundColor='var(--bg-hover)'"
onmouseout="this.style.backgroundColor='transparent'"
>
<span class="text-lg">📁</span>
<span>New Folder</span>
</button>
<button
@click.stop="showTemplateModal = true; showNewDropdown = false; mobileSidebarOpen = false"
class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
style="color: var(--text-primary);"
onmouseover="this.style.backgroundColor='var(--bg-hover)'"
onmouseout="this.style.backgroundColor='transparent'"
>
<span class="text-lg">📄</span>
<span>New from Template</span>
</button>
</div>
</div>
<!-- Template Selection Modal --> <!-- Template Selection Modal -->
<div x-show="showTemplateModal" <div x-show="showTemplateModal"
@click.self="showTemplateModal = false; selectedTemplate = ''; newTemplateNoteName = ''" @click.self="showTemplateModal = false; selectedTemplate = ''; newTemplateNoteName = ''"