🚀 v0.0.5-beta - Enhanced JSON Path Display Modal
Pre-release
Pre-release
🚀 JsonViewer.Blazor v0.0.5-beta
📋 Overview
This beta release brings significant UI/UX improvements with enhanced modal functionality and fullscreen compatibility fixes. The JSON Path Display feature has been completely redesigned as a professional modal component, and all modals now work seamlessly in fullscreen mode.
✨ What's New
🎨 Enhanced JSON Path Display Modal
- Complete Redesign: Converted JSON Path Display from a simple popup to a professional, centered modal dialog
- Modern UI: Beautiful card-based layout with icon indicators for each information type
- Better UX: Improved readability with organized information cards showing:
- JSON Path (with copyable format)
- Property Name
- Property Type (with color-coded badges)
- Property Value (with truncation for long values)
- Keyboard Support: Close modal with
ESCkey - Click Outside: Close modal by clicking on the overlay
🔧 Fullscreen Mode Enhancements
- Modal Compatibility: Fixed display issues with all modals in fullscreen mode
- Smart DOM Management: Automatic modal repositioning using MutationObserver for seamless fullscreen experience
- Z-Index Optimization: Proper layering ensures modals appear above fullscreen container
🎯 Key Features
Modal System Improvements
- ✅ JsonPathDisplay Modal: Professional modal design matching JsonStatistics modal style
- ✅ JsonStatistics Modal: Fixed fullscreen compatibility issues
- ✅ Consistent Behavior: All modals now behave uniformly across normal and fullscreen modes
- ✅ Dark Theme Support: Full dark theme compatibility for all modals
Technical Improvements
- MutationObserver Integration: Intelligent DOM manipulation for modal positioning
- Event Handling: Improved click event delegation for property name interactions
- State Management: Proper modal state restoration when exiting fullscreen mode
🐛 Bug Fixes
- Fixed: JSON Path Display modal not appearing in fullscreen mode
- Fixed: JSON Statistics modal not appearing in fullscreen mode
- Fixed: Modal z-index conflicts with fullscreen container
- Fixed: Modal positioning issues in fullscreen mode
- Fixed: CSS compilation errors with
@mediaqueries in Razor components
🎨 UI/UX Improvements
Visual Enhancements
- Beautiful fade-in and slide-up animations for modals
- Improved color scheme with better contrast
- Responsive design for mobile devices
- Enhanced hover effects and transitions
- Professional icon integration for better visual hierarchy
Accessibility
- Keyboard navigation support (ESC to close)
- Better focus management
- Improved screen reader compatibility
🔧 Technical Details
Components Modified
JsonPathDisplay.razor: Complete redesign from popup to modalJsonStatistics.razor: Fullscreen compatibility improvementsJsonViewer.razor: Enhanced modal management logicFullScreenToggle.razor: Modal repositioning on fullscreen enter/exit
CSS Improvements
- Updated z-index values for proper modal layering (10000 for modals, 9999 for fullscreen container)
- Added responsive media queries with proper escaping (
@@media) - Improved modal overlay styles with backdrop blur
- Enhanced dark theme support
JavaScript Enhancements
- MutationObserver for automatic modal DOM management
- Improved fullscreen state handling
- Better event delegation for property clicks
📦 Installation
dotnet add package JsonViewer.Blazor --version 0.0.5-betaOr via Package Manager:
<PackageReference Include="JsonViewer.Blazor" Version="0.0.5-beta" />🔄 Migration Notes
Breaking Changes
None - This release is fully backward compatible.
Deprecated Features
None - No features are deprecated in this release.
📝 Notes
- This is a beta release - Please test thoroughly before using in production
- Fullscreen modal functionality has been significantly improved
- All modals now follow the same design pattern for consistency
🙏 Acknowledgments
Thanks to all contributors and users who reported issues and provided feedback!
🔗 Links
Full Changelog: v0.0.4-beta...v0.0.5-beta