Commit Graph

4 Commits

Author SHA1 Message Date
f788ccdfd3 feat: refactor control panel architecture and fix layout issues
Base class architecture improvements:
- Centralize all panel layout, styling, and behavior in ControlBase
- Implement consistent generateContent() pattern for subclasses
- Add proper flexbox layout with fixed header and scrollable content
- Standardize title styling, positioning, and scroll behavior

Panel layout fixes:
- Fix content positioning to appear inside panels instead of floating above
- Implement proper height management (expands with content up to browser height)
- Add correct scroll boundaries with only content area scrolling
- Position resize handle outside scroll area to avoid scrollbar interference

Visual improvements:
- Fix rounded border appearance with proper overflow handling
- Ensure header respects panel corner radius
- Add proper content margins and padding
- Improve resize handle positioning and visibility

Architecture standardization:
- All panels now follow same base class pattern
- Individual panels only provide configuration and content generation
- Eliminate duplicate styling and layout code across controls
- Consistent behavior across all panel types

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-14 21:55:06 +01:00
512085d283 feat: enhance control panel UI and resize functionality
Panel UI improvements:
- Replace heading elements (h1-h6) with styled divs to avoid navigation interference
- Change ContentsControl position from northwest to west for better accessibility

Panel collapse/expand enhancements:
- Fix panel dragging to prevent unexpected positioning jumps
- Keep panel width and upper-left position when collapsing to header-only mode
- Complete height reduction when collapsed (no minimal size maintained)
- Toggle resize handle visibility based on panel state

Resize handle improvements:
- Change resize symbol from arrow to clean dot (●) in bottom-right corner
- Remove background circle, show transparent dot only
- Fix resize direction to properly follow mouse movement from bottom-right
- Set dynamic minimum size constraints (header height + padding)
- Allow arbitrary panel sizing with proper bounds checking
- Reset panel size to defaults when closed/collapsed

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-14 16:40:23 +01:00
ca431ac11f feat: add Reset All button to EditControl panel
Add the missing "Reset All" functionality from Legacy Document Control
to the enhanced EditControl panel for complete feature parity.

## New Functionality
- Added "Reset All" button in Document Actions section
- Comprehensive reset functionality with user confirmation
- Resets font size, editing mode, unsaved changes, highlights
- Integrates with SectionManager, DocumentControls, and DebugControl
- Offers page reload as ultimate fallback for complete reset

## Implementation Details
- Button styled consistently with Legacy Document Control (🔄 Reset All)
- Uses #ffc107 background with #212529 text to match legacy styling
- Comprehensive confirmation dialog explains all actions
- Safe operation wrapper with proper error handling
- Graceful fallbacks when integrated components are unavailable

## Integration
- Deployed to both markitect system and deployment source
- Compatible with existing enhanced ControlBase architecture
- Maintains consistency with other EditControl actions
- Ready for immediate use in production environment

Users now have access to the familiar Reset All functionality
within the modern enhanced control panel system.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-14 15:25:29 +01:00
4262310302 feat: enhance ControlBase with advanced panel behavior patterns
Implement comprehensive control panel functionality based on reference patterns:

## New Features
- Icon-only collapsed state with compass positioning
- Expand/drag functionality for repositioning panels
- Bottom-left corner resize with minimum size constraints
- Collapse button returns to original position
- Header toggle for content visibility control

## Technical Improvements
- Enhanced DOM structure with expanded/collapsed states
- Robust event handling with automatic cleanup
- State management for drag, resize, expand operations
- Position restoration system for collapse behavior
- Comprehensive styling system with backdrop effects

## Components Added
- Enhanced ControlBase class with 5 core behaviors
- ContentsControl, StatusControl, EditControl, DebugControl panels
- Component discovery system with TDD implementation
- Legacy DocumentControlsLegacy for backward compatibility

## Testing & Documentation
- Interactive test page for behavior validation
- Comprehensive implementation notes
- TDD test suite with 84 passing tests
- Component listing automation

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-14 11:33:49 +01:00