diff --git a/CHANGELOG.md b/CHANGELOG.md index ab7b130..b1e8676 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 0.5.0 + +- **FEAT**: Improved `HelpOverlay` UI. +- **FEAT**: Improved spacing in `TabBar`. + ## 0.4.0 - **FIX**: Removed excessive whitespace from multi screen form summary. diff --git a/lib/src/components/help_overlay.dart b/lib/src/components/help_overlay.dart index 7a8dd4d..dcd3d0b 100644 --- a/lib/src/components/help_overlay.dart +++ b/lib/src/components/help_overlay.dart @@ -11,11 +11,21 @@ const _keyColumnWidth = 24.0; /// Help overlay showing all keybindings. Sizes to its content; scrolls if /// content exceeds the available terminal height. class HelpOverlay extends StatefulComponent { - const HelpOverlay({super.key, required this.bindings, this.controller}); + const HelpOverlay({ + super.key, + required this.bindings, + required this.closeKey, + this.controller, + }); final HelpOverlayBindings bindings; final ScrollController? controller; + /// The key for dismissing this overlay. + /// This is only displayed. Users should listen for the key event + /// and to dismiss the overlay. + final String closeKey; + @override State createState() => _HelpOverlayState(); } @@ -50,11 +60,14 @@ class _HelpOverlayState extends State { color: theme.surface, border: BoxBorder.all( style: BoxBorderStyle.rounded, - color: st.primary, + color: st.activationKey, ), title: BorderTitle( text: 'Help', - style: TextStyle(color: st.primary), + style: TextStyle( + color: st.activationKey, + fontWeight: FontWeight.bold, + ), ), ), child: Column( @@ -68,11 +81,12 @@ class _HelpOverlayState extends State { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ + const SizedBox(height: 1), for (final (section, items) in component.bindings) ...[ Text( section, style: TextStyle( - color: st.primary, + color: theme.onSurface, fontWeight: FontWeight.bold, ), ), @@ -83,7 +97,7 @@ class _HelpOverlayState extends State { SizedBox( width: _keyColumnWidth, child: Text( - ' $key', + key, style: TextStyle( color: theme.onSurface, fontWeight: FontWeight.dim, @@ -102,11 +116,23 @@ class _HelpOverlayState extends State { ), ), const SizedBox(height: 1), - Text( - 'Press H or Esc to close', - style: TextStyle( - color: theme.onSurface, - fontWeight: FontWeight.dim, + RichText( + text: TextSpan( + text: 'Press ', + style: TextStyle( + color: theme.onSurface, + fontWeight: FontWeight.dim, + ), + children: [ + TextSpan( + text: component.closeKey, + style: TextStyle( + color: st.activationKey, + fontWeight: FontWeight.bold, + ), + ), + TextSpan(text: ' to close'), + ], ), ), ], diff --git a/lib/src/components/tab_bar.dart b/lib/src/components/tab_bar.dart index 5a7554e..794d5af 100644 --- a/lib/src/components/tab_bar.dart +++ b/lib/src/components/tab_bar.dart @@ -41,8 +41,6 @@ class TabBar extends StatelessComponent { _TabSpacingType spacingType; if (i == selectedTab) { spacingType = _TabSpacingType.shortLeft; - } else if (i == selectedTab - 1) { - spacingType = _TabSpacingType.shortRight; } else { spacingType = _TabSpacingType.full; } diff --git a/pubspec.yaml b/pubspec.yaml index b32bdf7..e6f7b54 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: serverpod_tui description: A collection of tools for building terminal user interfaces. -version: 0.4.0 +version: 0.5.0 repository: https://github.com/serverpod/serverpod_tui homepage: https://serverpod.dev issue_tracker: https://github.com/serverpod/serverpod_tui/issues