coulomb/markitect-main
2
0
Fork 0
Code Issues 62 Pull Requests Actions Projects 12 Releases 1 Wiki Activity

feat: comprehensive control panel UI improvements

Browse Source 
- Fix version information display with actual Markitect version
- Implement auto-resize functionality with double-click on resize dot
- Add viewport repositioning to keep panels visible during auto-resize
- Reduce title bar height by 25% for more compact appearance
- Remove duplicate content titles below titlebars across all panels
- Optimize scrollbar positioning to right border with proper spacing
- Reposition resize dot to optimal corner location (bottom: 0px, right: -4px)
- Set default panel height to 1/3 of window height
- Fix Debug panel title formatting consistency
- Remove duplicate initialization warnings
- Clean up panel layout with proper margin management (10px bottom margin)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Bernd Worsch
2025-11-14 22:51:25 +01:00
parent f788ccdfd3
commit 4e3f112987
9 changed files with 236 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
testdrive-jsui/static/js/controls/contents-control.js
View File

@@ -118,10 +118,10 @@ class ContentsControl extends ControlBase {
if (displayHeadings.length === 0) {
return `
<div style="padding: 1rem; text-align: center; color: #666;">
<div style="text-align: center; color: #666; padding: 2rem 0;">
<p>No headings found in document</p>
<button onclick="this.closest('.contents-control').contentsControl.refreshContents()"
style="padding: 0.5rem 1rem; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer;">
style="padding: 0.5rem 1rem; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; margin-top: 0.5rem;">
🔄 Refresh
</button>
</div>
@@ -129,10 +129,10 @@ class ContentsControl extends ControlBase {
}
const searchHTML = `
<div style="padding: 0.5rem; border-bottom: 1px solid #eee;">
<div style="margin-bottom: 0.5rem; border-bottom: 1px solid #eee; padding-bottom: 0.5rem;">
<input type="text"
placeholder="Search headings..."
style="width: 100%; padding: 0.25rem; border: 1px solid #ddd; border-radius: 3px; font-size: 0.8rem;"
style="width: 100%; padding: 0.25rem; border: 1px solid #ddd; border-radius: 3px; font-size: 0.8rem; box-sizing: border-box;"
onkeyup="this.closest('.contents-control').contentsControl.handleSearch(this.value)">
</div>
`;
@@ -157,15 +157,15 @@ class ContentsControl extends ControlBase {
}).join('');
return `
<div style="padding: 0;">
<div>
${searchHTML}
<div style="max-height: 300px; overflow-y: auto; padding: 0.5rem;">
<div style="margin-bottom: 0.5rem;">
<div style="margin-bottom: 0.5rem; font-size: 0.7rem; color: #666; text-align: center;">
Found ${displayHeadings.length} heading${displayHeadings.length !== 1 ? 's' : ''}
</div>
${contentsHTML}
</div>
<div style="padding: 0.5rem; border-top: 1px solid #eee; text-align: center;">
<div style="border-top: 1px solid #eee; padding-top: 0.5rem; text-align: center;">
<button onclick="this.closest('.contents-control').contentsControl.refreshContents()"
style="padding: 0.3rem 0.6rem; font-size: 0.7rem; background: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer;">
🔄 Refresh Contents