From ce7ce0470f52844f2b6e357886c0500f3bbd3b5b Mon Sep 17 00:00:00 2001 From: tegwick Date: Sat, 25 Oct 2025 20:55:45 +0200 Subject: [PATCH] feat: implement elegant slide-in floating control panel for edit mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaced the intrusive blue status bar with a sleek slide-in control panel: UI/UX Improvements: - Minimized ribbon (📝 icon) on top-right that slides out to full panel - Beautiful gradient design with backdrop blur effects - Smooth CSS transitions with cubic-bezier easing - Auto-expand on load, then minimize after 2 seconds - Click outside to close, click ribbon to toggle Features Combined: - Status indicators with dynamic icons (⏳ loading, ✅ success, ❌ error) - Save & Download and Preview buttons in clean grid layout - Version information in panel header - Error reporting with expandable details - Responsive design for mobile devices Technical Changes: - Replaced old floating-header with integrated control panel - Enhanced status update function with visual state management - Added toggle functionality with click-outside-to-close - Improved typography and spacing throughout - Updated test to match new element ID structure This provides a much cleaner editing experience with better space utilization while maintaining all previous functionality and adding visual polish. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- markitect/document_manager.py | 360 +++++++++++++++++-- tests/test_issue_144_edit_mode_regression.py | 2 +- 2 files changed, 323 insertions(+), 39 deletions(-) diff --git a/markitect/document_manager.py b/markitect/document_manager.py index 7e8ad445..36f2c761 100644 --- a/markitect/document_manager.py +++ b/markitect/document_manager.py @@ -396,35 +396,245 @@ class DocumentManager: body_classes = ' class="markitect-edit-mode"' editor_css = """ """ @@ -445,19 +655,19 @@ class DocumentManager: } initializeEditor() { - const header = document.createElement('div'); - header.className = 'markitect-floating-header'; - header.innerHTML = ` - - - Ready - - Saves as: filename-edited-YYYY-MM-DD-HH-MM-SS.md - - `; - document.body.insertBefore(header, document.body.firstChild); - + // Control panel is already in HTML, just make content editable this.makeContentEditable(); + + // Auto-expand control panel briefly to show it's available + setTimeout(() => { + const panel = document.getElementById('markitect-control-panel'); + if (panel) { + panel.classList.add('expanded'); + setTimeout(() => { + panel.classList.remove('expanded'); + }, 2000); // Show for 2 seconds then minimize + } + }, 1000); } makeContentEditable() { @@ -613,7 +823,25 @@ class DocumentManager: } } - let markitectEditor;""" + let markitectEditor; + + // Control panel toggle functionality + function toggleControlPanel() { + const panel = document.getElementById('markitect-control-panel'); + if (panel) { + panel.classList.toggle('expanded'); + } + } + + // Auto-close panel when clicking outside + document.addEventListener('click', function(event) { + const panel = document.getElementById('markitect-control-panel'); + if (panel && panel.classList.contains('expanded')) { + if (!panel.contains(event.target)) { + panel.classList.remove('expanded'); + } + } + });""" # Edit mode status and error reporting section edit_mode_html = "" @@ -692,20 +920,58 @@ class DocumentManager: version_info = "0.3.0" edit_mode_html = f""" -
-
📝 Markitect Edit Mode v{version_info}
-
Loading edit capabilities...
- + + +
+
+ + +
+ +
+
Ready to save
+
Saves as: filename-edited-YYYY-MM-DD-HH-MM-SS.md
+
+
""" @@ -786,9 +1052,27 @@ class DocumentManager: // Status update utility function updateStatus(message, isError = false) {{ const statusMsg = document.getElementById('status-message'); + const statusIndicator = document.getElementById('status-indicator'); + const statusIcon = document.querySelector('.markitect-status-icon'); + if (statusMsg) {{ statusMsg.textContent = message; - statusMsg.style.color = isError ? '#c62828' : '#1976d2'; + }} + + if (statusIndicator) {{ + // Remove all status classes + statusIndicator.classList.remove('loading', 'error'); + + if (isError) {{ + statusIndicator.classList.add('error'); + if (statusIcon) statusIcon.textContent = '❌'; + }} else if (message.includes('Loading') || message.includes('Initializing')) {{ + statusIndicator.classList.add('loading'); + if (statusIcon) statusIcon.textContent = '⏳'; + }} else {{ + // Success state + if (statusIcon) statusIcon.textContent = '✅'; + }} }} }} diff --git a/tests/test_issue_144_edit_mode_regression.py b/tests/test_issue_144_edit_mode_regression.py index 765d8e55..925d1a86 100644 --- a/tests/test_issue_144_edit_mode_regression.py +++ b/tests/test_issue_144_edit_mode_regression.py @@ -226,7 +226,7 @@ class TestEditModeRegression: ) # Should contain error handling elements - assert 'id="markitect-status"' in html_content + assert 'id="markitect-control-panel"' in html_content assert 'id="status-message"' in html_content assert 'id="error-details"' in html_content assert 'reportEditModeError' in html_content