|
| 1 | +# 🚀 JsonViewer.Blazor v0.0.5-beta |
| 2 | + |
| 3 | +## 📋 Overview |
| 4 | + |
| 5 | +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. |
| 6 | + |
| 7 | +--- |
| 8 | + |
| 9 | +## ✨ What's New |
| 10 | + |
| 11 | +### 🎨 Enhanced JSON Path Display Modal |
| 12 | +- **Complete Redesign**: Converted JSON Path Display from a simple popup to a professional, centered modal dialog |
| 13 | +- **Modern UI**: Beautiful card-based layout with icon indicators for each information type |
| 14 | +- **Better UX**: Improved readability with organized information cards showing: |
| 15 | + - JSON Path (with copyable format) |
| 16 | + - Property Name |
| 17 | + - Property Type (with color-coded badges) |
| 18 | + - Property Value (with truncation for long values) |
| 19 | +- **Keyboard Support**: Close modal with `ESC` key |
| 20 | +- **Click Outside**: Close modal by clicking on the overlay |
| 21 | + |
| 22 | +### 🔧 Fullscreen Mode Enhancements |
| 23 | +- **Modal Compatibility**: Fixed display issues with all modals in fullscreen mode |
| 24 | +- **Smart DOM Management**: Automatic modal repositioning using MutationObserver for seamless fullscreen experience |
| 25 | +- **Z-Index Optimization**: Proper layering ensures modals appear above fullscreen container |
| 26 | + |
| 27 | +--- |
| 28 | + |
| 29 | +## 🎯 Key Features |
| 30 | + |
| 31 | +### Modal System Improvements |
| 32 | +- ✅ **JsonPathDisplay Modal**: Professional modal design matching JsonStatistics modal style |
| 33 | +- ✅ **JsonStatistics Modal**: Fixed fullscreen compatibility issues |
| 34 | +- ✅ **Consistent Behavior**: All modals now behave uniformly across normal and fullscreen modes |
| 35 | +- ✅ **Dark Theme Support**: Full dark theme compatibility for all modals |
| 36 | + |
| 37 | +### Technical Improvements |
| 38 | +- **MutationObserver Integration**: Intelligent DOM manipulation for modal positioning |
| 39 | +- **Event Handling**: Improved click event delegation for property name interactions |
| 40 | +- **State Management**: Proper modal state restoration when exiting fullscreen mode |
| 41 | + |
| 42 | +--- |
| 43 | + |
| 44 | +## 🐛 Bug Fixes |
| 45 | + |
| 46 | +- **Fixed**: JSON Path Display modal not appearing in fullscreen mode |
| 47 | +- **Fixed**: JSON Statistics modal not appearing in fullscreen mode |
| 48 | +- **Fixed**: Modal z-index conflicts with fullscreen container |
| 49 | +- **Fixed**: Modal positioning issues in fullscreen mode |
| 50 | +- **Fixed**: CSS compilation errors with `@media` queries in Razor components |
| 51 | + |
| 52 | +--- |
| 53 | + |
| 54 | +## 🎨 UI/UX Improvements |
| 55 | + |
| 56 | +### Visual Enhancements |
| 57 | +- Beautiful fade-in and slide-up animations for modals |
| 58 | +- Improved color scheme with better contrast |
| 59 | +- Responsive design for mobile devices |
| 60 | +- Enhanced hover effects and transitions |
| 61 | +- Professional icon integration for better visual hierarchy |
| 62 | + |
| 63 | +### Accessibility |
| 64 | +- Keyboard navigation support (ESC to close) |
| 65 | +- Better focus management |
| 66 | +- Improved screen reader compatibility |
| 67 | + |
| 68 | +--- |
| 69 | + |
| 70 | +## 🔧 Technical Details |
| 71 | + |
| 72 | +### Components Modified |
| 73 | +- `JsonPathDisplay.razor`: Complete redesign from popup to modal |
| 74 | +- `JsonStatistics.razor`: Fullscreen compatibility improvements |
| 75 | +- `JsonViewer.razor`: Enhanced modal management logic |
| 76 | +- `FullScreenToggle.razor`: Modal repositioning on fullscreen enter/exit |
| 77 | + |
| 78 | +### CSS Improvements |
| 79 | +- Updated z-index values for proper modal layering (10000 for modals, 9999 for fullscreen container) |
| 80 | +- Added responsive media queries with proper escaping (`@@media`) |
| 81 | +- Improved modal overlay styles with backdrop blur |
| 82 | +- Enhanced dark theme support |
| 83 | + |
| 84 | +### JavaScript Enhancements |
| 85 | +- MutationObserver for automatic modal DOM management |
| 86 | +- Improved fullscreen state handling |
| 87 | +- Better event delegation for property clicks |
| 88 | + |
| 89 | +--- |
| 90 | + |
| 91 | +## 📦 Installation |
| 92 | + |
| 93 | +```bash |
| 94 | +dotnet add package JsonViewer.Blazor --version 0.0.5-beta |
| 95 | +``` |
| 96 | + |
| 97 | +Or via Package Manager: |
| 98 | +```xml |
| 99 | +<PackageReference Include="JsonViewer.Blazor" Version="0.0.5-beta" /> |
| 100 | +``` |
| 101 | + |
| 102 | +--- |
| 103 | + |
| 104 | +## 🔄 Migration Notes |
| 105 | + |
| 106 | +### Breaking Changes |
| 107 | +**None** - This release is fully backward compatible. |
| 108 | + |
| 109 | +### Deprecated Features |
| 110 | +**None** - No features are deprecated in this release. |
| 111 | + |
| 112 | +--- |
| 113 | + |
| 114 | +## 📝 Notes |
| 115 | + |
| 116 | +- This is a **beta release** - Please test thoroughly before using in production |
| 117 | +- Fullscreen modal functionality has been significantly improved |
| 118 | +- All modals now follow the same design pattern for consistency |
| 119 | + |
| 120 | +--- |
| 121 | + |
| 122 | +## 🙏 Acknowledgments |
| 123 | + |
| 124 | +Thanks to all contributors and users who reported issues and provided feedback! |
| 125 | + |
| 126 | +--- |
| 127 | + |
| 128 | +## 🔗 Links |
| 129 | + |
| 130 | +- 📚 [Documentation](https://github.com/JsonViewer-Component/Blazor) |
| 131 | +- 📦 [NuGet Package](https://www.nuget.org/packages/JsonViewer.Blazor/0.0.5-beta) |
| 132 | +- 🐛 [Report Issues](https://github.com/JsonViewer-Component/Blazor/issues) |
| 133 | +- 💬 [Discussions](https://github.com/JsonViewer-Component/Blazor/discussions) |
| 134 | + |
| 135 | +--- |
| 136 | + |
| 137 | +**Full Changelog**: https://github.com/JsonViewer-Component/Blazor/compare/v0.0.4-beta...v0.0.5-beta |
| 138 | + |
0 commit comments