diff --git a/src/main/resources/static/css/edit-table-of-contents.css b/src/main/resources/static/css/edit-table-of-contents.css index 59ad7fdff..11a4bf777 100644 --- a/src/main/resources/static/css/edit-table-of-contents.css +++ b/src/main/resources/static/css/edit-table-of-contents.css @@ -172,20 +172,33 @@ .bookmark-title-preview { font-weight: 500; margin-right: 10px; - color: var(--text-primary, #212529); + color: var(--text-primary, var(--md-sys-color-on-surface, #212529)); } [data-bs-theme="dark"] .bookmark-title-preview { - --text-primary: #e9ecef; + --text-primary: var(--md-sys-color-on-surface, #e9ecef); } .bookmark-page-preview { font-size: 0.9em; - color: var(--text-secondary, #6c757d); + color: var(--text-secondary, var(--md-sys-color-on-surface-variant, #6c757d)); } [data-bs-theme="dark"] .bookmark-page-preview { - --text-secondary: #adb5bd; + --text-secondary: var(--md-sys-color-on-surface-variant, #adb5bd); +} + +/* Input text colors */ +.bookmark-content input, +.bookmark-content label { + color: var(--input-text, var(--md-sys-color-on-surface, #212529)); +} + +[data-bs-theme="dark"] .bookmark-content input, +[data-bs-theme="dark"] .bookmark-content label { + --input-text: var(--md-sys-color-on-surface, #e9ecef); + background-color: var(--input-bg, var(--md-sys-color-surface-container-high, #3a424a)); + border-color: var(--input-border, var(--md-sys-color-outline, #495057)); } /* We've removed the drag handle since it's not functional */ diff --git a/src/main/resources/static/js/pages/edit-table-of-contents.js b/src/main/resources/static/js/pages/edit-table-of-contents.js index 957ab3613..d13c7fde3 100644 --- a/src/main/resources/static/js/pages/edit-table-of-contents.js +++ b/src/main/resources/static/js/pages/edit-table-of-contents.js @@ -109,7 +109,7 @@ document.addEventListener('DOMContentLoaded', function() { title: bookmark.title || 'Untitled Bookmark', pageNumber: bookmark.pageNumber || 1, children: [], - expanded: true // All bookmarks start expanded + expanded: false // All bookmarks start collapsed for better visibility }; // Convert children recursively @@ -140,7 +140,7 @@ document.addEventListener('DOMContentLoaded', function() { title: title || 'New Bookmark', pageNumber: pageNumber || 1, children: [], - expanded: true + expanded: false // New bookmarks start collapsed }; if (parent === null) { @@ -285,6 +285,11 @@ document.addEventListener('DOMContentLoaded', function() { } updateBookmarkData(); + + // Initialize tooltips for dynamically added elements + if (typeof $ !== 'undefined') { + $('[data-bs-toggle="tooltip"]').tooltip(); + } } // Create the main bookmark element with collapsible interface @@ -333,23 +338,43 @@ document.addEventListener('DOMContentLoaded', function() { const headerLeft = document.createElement('div'); headerLeft.className = 'd-flex align-items-center'; - // Toggle expand/collapse icon - const toggleIcon = document.createElement('span'); - toggleIcon.className = 'material-symbols-rounded toggle-icon me-2'; - toggleIcon.textContent = 'expand_more'; - toggleIcon.style.cursor = 'pointer'; + // Toggle expand/collapse icon with child count + const toggleContainer = document.createElement('div'); + toggleContainer.className = 'd-flex align-items-center'; + toggleContainer.style.marginRight = '8px'; // Only show toggle if has children if (bookmark.children && bookmark.children.length > 0) { - headerLeft.appendChild(toggleIcon); + // Create toggle icon + const toggleIcon = document.createElement('span'); + toggleIcon.className = 'material-symbols-rounded toggle-icon me-1'; + toggleIcon.textContent = 'expand_more'; + toggleIcon.style.cursor = 'pointer'; + toggleContainer.appendChild(toggleIcon); + + // Add child count indicator + const childCount = document.createElement('span'); + childCount.className = 'badge rounded-pill'; + // Use theme-appropriate badge color + const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark'; + childCount.classList.add(isDarkMode ? 'bg-info' : 'bg-secondary'); + childCount.style.fontSize = '0.7rem'; + childCount.style.padding = '0.2em 0.5em'; + childCount.textContent = bookmark.children.length; + childCount.setAttribute('data-bs-toggle', 'tooltip'); + childCount.setAttribute('data-bs-placement', 'top'); + childCount.title = `${bookmark.children.length} child bookmark${bookmark.children.length > 1 ? 's' : ''}`; + toggleContainer.appendChild(childCount); } else { // Add spacer if no children const spacer = document.createElement('span'); spacer.style.width = '24px'; spacer.style.display = 'inline-block'; - headerLeft.appendChild(spacer); + toggleContainer.appendChild(spacer); } + headerLeft.appendChild(toggleContainer); + // Level indicator for nested items if (level > 0) { // Add relationship indicator visual line @@ -389,14 +414,14 @@ document.addEventListener('DOMContentLoaded', function() { const headerRight = document.createElement('div'); headerRight.className = 'bookmark-actions-header'; - // Quick add buttons with clear visual distinction - const quickAddChildButton = createButton('subdirectory_arrow_right', 'btn-add-child', 'Add child bookmark (nested under this)', function(e) { + // Quick add buttons with clear visual distinction - using Stirling-PDF's tooltip system + const quickAddChildButton = createButton('subdirectory_arrow_right', 'btn-add-child', 'Add child bookmark', function(e) { e.preventDefault(); e.stopPropagation(); addBookmark(bookmark.id); }); - const quickAddSiblingButton = createButton('add', 'btn-add-sibling', 'Add sibling bookmark (same level)', function(e) { + const quickAddSiblingButton = createButton('add', 'btn-add-sibling', 'Add sibling bookmark', function(e) { e.preventDefault(); e.stopPropagation(); @@ -520,7 +545,12 @@ document.addEventListener('DOMContentLoaded', function() { button.type = 'button'; button.className = `btn ${className} btn-bookmark-action`; button.innerHTML = `${icon}`; + + // Use Bootstrap tooltips + button.setAttribute('data-bs-toggle', 'tooltip'); + button.setAttribute('data-bs-placement', 'top'); button.title = title; + button.addEventListener('click', clickHandler); return button; } @@ -540,15 +570,24 @@ document.addEventListener('DOMContentLoaded', function() { addBookmarkBtn.innerHTML = 'add Add Top-level Bookmark'; addBookmarkBtn.className = 'btn btn-primary btn-add-bookmark top-level'; - // Add tooltip to better explain it - addBookmarkBtn.title = 'Add a new top-level bookmark (not nested under any other bookmark)'; + // Use Bootstrap tooltips + addBookmarkBtn.setAttribute('data-bs-toggle', 'tooltip'); + addBookmarkBtn.setAttribute('data-bs-placement', 'top'); + addBookmarkBtn.title = 'Add a new top-level bookmark'; // Add icon to empty state button as well const updateEmptyStateButton = function() { const emptyStateBtn = document.querySelector('.btn-add-first-bookmark'); if (emptyStateBtn) { emptyStateBtn.innerHTML = 'add Add First Bookmark'; - emptyStateBtn.title = 'Add your first bookmark to the document'; + emptyStateBtn.setAttribute('data-bs-toggle', 'tooltip'); + emptyStateBtn.setAttribute('data-bs-placement', 'top'); + emptyStateBtn.title = 'Add first bookmark'; + + // Initialize tooltips for the empty state button + if (typeof $ !== 'undefined') { + $('[data-bs-toggle="tooltip"]').tooltip(); + } } }; @@ -558,6 +597,21 @@ document.addEventListener('DOMContentLoaded', function() { updateEmptyStateButton(); } + // Listen for theme changes to update badge colors + const observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + if (mutation.attributeName === 'data-bs-theme') { + const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark'; + document.querySelectorAll('.badge').forEach(badge => { + badge.classList.remove('bg-secondary', 'bg-info'); + badge.classList.add(isDarkMode ? 'bg-info' : 'bg-secondary'); + }); + } + }); + }); + + observer.observe(document.documentElement, { attributes: true }); + // Add visual enhancement to clearly show the top-level/child relationship document.addEventListener('mouseover', function(e) { // When hovering over add buttons, highlight their relationship targets diff --git a/src/main/resources/templates/edit-table-of-contents.html b/src/main/resources/templates/edit-table-of-contents.html index 82148158b..99ab02c1d 100644 --- a/src/main/resources/templates/edit-table-of-contents.html +++ b/src/main/resources/templates/edit-table-of-contents.html @@ -68,8 +68,15 @@ - + \ No newline at end of file