contextual new item
This commit is contained in:
Gamosoft
parent
01ea9f6008
commit
f256aef407
|
|
@ -100,6 +100,7 @@ function noteApp() {
|
|||
// Dropdown state
|
||||
showNewDropdown: false,
|
||||
dropdownTargetFolder: '', // Folder context for "New" dropdown (empty = root)
|
||||
dropdownPosition: { top: 0, left: 0 }, // Position for contextual dropdown
|
||||
|
||||
// Template state
|
||||
showTemplateModal: false,
|
||||
|
|
@ -982,7 +983,7 @@ function noteApp() {
|
|||
</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>
|
||||
<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"
|
||||
style="background-color: var(--bg-tertiary); color: var(--text-secondary);"
|
||||
title="Add item here"
|
||||
|
|
@ -1965,10 +1966,26 @@ function noteApp() {
|
|||
// DROPDOWN MENU SYSTEM
|
||||
// =====================================================
|
||||
|
||||
toggleNewDropdown() {
|
||||
this.showNewDropdown = !this.showNewDropdown;
|
||||
if (this.showNewDropdown) {
|
||||
this.dropdownTargetFolder = ''; // Set to root when opening main dropdown
|
||||
toggleNewDropdown(event) {
|
||||
this.showNewDropdown = true; // Always open (or keep open)
|
||||
|
||||
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 };
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -903,9 +903,9 @@
|
|||
</div>
|
||||
|
||||
<!-- 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
|
||||
@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"
|
||||
style="background-color: var(--accent-primary);"
|
||||
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>
|
||||
</svg>
|
||||
</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>
|
||||
|
||||
<!-- Notes List -->
|
||||
|
|
@ -1650,6 +1603,54 @@
|
|||
</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 -->
|
||||
<div x-show="showTemplateModal"
|
||||
@click.self="showTemplateModal = false; selectedTemplate = ''; newTemplateNoteName = ''"
|
||||
|
|
|
|||
Loading…
Reference in New Issue