From 45635fa850dd1a287806f93653ad9ceb50b5df05 Mon Sep 17 00:00:00 2001 From: maliksenpai Date: Sat, 16 Dec 2023 13:57:40 +0300 Subject: [PATCH 1/6] - Added tooltip for arrow direction --- example/lib/gallery/sections/tooltips.dart | 35 ++++++++++++++++++++-- lib/src/widgets/nes_tooltip.dart | 30 +++++++++++++++++-- 2 files changed, 59 insertions(+), 6 deletions(-) diff --git a/example/lib/gallery/sections/tooltips.dart b/example/lib/gallery/sections/tooltips.dart index c5f6af3..2fbf5ac 100644 --- a/example/lib/gallery/sections/tooltips.dart +++ b/example/lib/gallery/sections/tooltips.dart @@ -19,20 +19,20 @@ class TooltipsSection extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ NesTooltip( - message: 'This is a tooltip', + message: 'This is a top tooltip', arrowPlacement: NesTooltipArrowPlacement.left, child: NesIcon( iconData: NesIcons.exclamationMarkBlock, ), ), NesTooltip( - message: 'This is a tooltip', + message: 'This is a top tooltip', child: NesIcon( iconData: NesIcons.exclamationMarkBlock, ), ), NesTooltip( - message: 'This is a tooltip', + message: 'This is a top tooltip', arrowPlacement: NesTooltipArrowPlacement.right, child: NesIcon( iconData: NesIcons.exclamationMarkBlock, @@ -40,6 +40,35 @@ class TooltipsSection extends StatelessWidget { ), ], ), + const SizedBox(height: 16), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + NesTooltip( + message: 'This is a bottom tooltip', + arrowPlacement: NesTooltipArrowPlacement.left, + arrowDirection: NesTooltipArrowDirection.bottom, + child: NesIcon( + iconData: NesIcons.exclamationMarkBlock, + ), + ), + NesTooltip( + message: 'This is a bottom tooltip', + arrowDirection: NesTooltipArrowDirection.bottom, + child: NesIcon( + iconData: NesIcons.exclamationMarkBlock, + ), + ), + NesTooltip( + message: 'This is a bottom tooltip', + arrowPlacement: NesTooltipArrowPlacement.right, + arrowDirection: NesTooltipArrowDirection.bottom, + child: NesIcon( + iconData: NesIcons.exclamationMarkBlock, + ), + ), + ], + ), ], ); } diff --git a/lib/src/widgets/nes_tooltip.dart b/lib/src/widgets/nes_tooltip.dart index db5c41e..f376bf4 100644 --- a/lib/src/widgets/nes_tooltip.dart +++ b/lib/src/widgets/nes_tooltip.dart @@ -14,6 +14,11 @@ enum NesTooltipArrowPlacement { right, } +enum NesTooltipArrowDirection { + top, + bottom, +} + /// {@template nes_tooltip} /// A tooltip that appears when the user long-presses on a widget, /// or hovers over it with a mouse. @@ -25,6 +30,7 @@ class NesTooltip extends StatefulWidget { required this.child, required this.message, this.arrowPlacement = NesTooltipArrowPlacement.middle, + this.arrowDirection = NesTooltipArrowDirection.top, }); /// The Widget that will trigger the tooltip. @@ -36,6 +42,9 @@ class NesTooltip extends StatefulWidget { /// The placement of the arrow of the tooltip. final NesTooltipArrowPlacement arrowPlacement; + /// The direction fo the arrow of the tooltip + final NesTooltipArrowDirection arrowDirection; + @override State createState() => _NesTooltipState(); } @@ -56,6 +65,7 @@ class _NesTooltipState extends State { color: tooltipTheme.background, pixelSize: nesTheme.pixelSize.toDouble(), arrowPlacement: widget.arrowPlacement, + arrowDirection: widget.arrowDirection, textStyle: textStyle, message: widget.message, textColor: tooltipTheme.textColor, @@ -100,6 +110,7 @@ class _TooltipPainter extends CustomPainter { required this.color, required this.pixelSize, required this.arrowPlacement, + required this.arrowDirection, required this.textStyle, required this.textColor, required this.message, @@ -108,6 +119,7 @@ class _TooltipPainter extends CustomPainter { final Color color; final double pixelSize; final NesTooltipArrowPlacement arrowPlacement; + final NesTooltipArrowDirection arrowDirection; final TextStyle textStyle; final Color textColor; final String message; @@ -160,7 +172,10 @@ class _TooltipPainter extends CustomPainter { NesTooltipArrowPlacement.right => -size.width + childSize.width, }; - final translateY = -size.height - pixelSize * 4; + final translateY = switch (arrowDirection) { + NesTooltipArrowDirection.top => -size.height - pixelSize * 4, + NesTooltipArrowDirection.bottom => size.height + pixelSize * 8, + }; canvas ..translate(translateX, translateY) @@ -189,12 +204,21 @@ class _TooltipPainter extends CustomPainter { textPainter.paint(canvas, Offset(pixelSize * 2, pixelSize)); + final arrowBodyTopPosition = switch (arrowDirection) { + NesTooltipArrowDirection.top => size.height + pixelSize, + NesTooltipArrowDirection.bottom => pixelSize * -2, + }; + + final arrowHeadTopPosition = switch (arrowDirection) { + NesTooltipArrowDirection.top => size.height + pixelSize * 2, + NesTooltipArrowDirection.bottom => pixelSize * -3, + }; // Arrow canvas ..drawRect( Rect.fromLTWH( arrowOffset, - size.height + pixelSize, + arrowBodyTopPosition, pixelSize * 2, pixelSize, ), @@ -203,7 +227,7 @@ class _TooltipPainter extends CustomPainter { ..drawRect( Rect.fromLTWH( arrowOffset + pixelSize / 2, - size.height + pixelSize * 2, + arrowHeadTopPosition, pixelSize, pixelSize, ), From 5280a10fc9c8cd1f399fb82fde651eea705abf6f Mon Sep 17 00:00:00 2001 From: maliksenpai Date: Sat, 16 Dec 2023 14:00:02 +0300 Subject: [PATCH 2/6] - Added more comments --- lib/src/widgets/nes_tooltip.dart | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/src/widgets/nes_tooltip.dart b/lib/src/widgets/nes_tooltip.dart index f376bf4..20dec91 100644 --- a/lib/src/widgets/nes_tooltip.dart +++ b/lib/src/widgets/nes_tooltip.dart @@ -14,8 +14,12 @@ enum NesTooltipArrowPlacement { right, } +/// Enum with the possible direction for the arrow of the tooltip. enum NesTooltipArrowDirection { + /// The arrow will be direct on the top side of the tooltip. (Default value) top, + + /// The arrow will be direct on the bottom side of the tooltip. bottom, } From 3664a5e8a644d403022b5a36641fe356c61ea8d6 Mon Sep 17 00:00:00 2001 From: maliksenpai Date: Sat, 16 Dec 2023 14:43:33 +0300 Subject: [PATCH 3/6] - Typo fix --- lib/src/widgets/nes_tooltip.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/widgets/nes_tooltip.dart b/lib/src/widgets/nes_tooltip.dart index 20dec91..5951a91 100644 --- a/lib/src/widgets/nes_tooltip.dart +++ b/lib/src/widgets/nes_tooltip.dart @@ -46,7 +46,7 @@ class NesTooltip extends StatefulWidget { /// The placement of the arrow of the tooltip. final NesTooltipArrowPlacement arrowPlacement; - /// The direction fo the arrow of the tooltip + /// The direction for the arrow of the tooltip final NesTooltipArrowDirection arrowDirection; @override From c8e76a28c09fc3ae53ef580a73e62a26eb6ac6f2 Mon Sep 17 00:00:00 2001 From: maliksenpai Date: Thu, 11 Jan 2024 23:55:54 +0300 Subject: [PATCH 4/6] - Add ticker duration for nes_blinker.dart nes_selection_list.dart --- example/lib/gallery/sections/selection_list.dart | 1 + lib/src/widgets/nes_blinker.dart | 6 +++++- lib/src/widgets/nes_selection_list.dart | 8 ++++++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/example/lib/gallery/sections/selection_list.dart b/example/lib/gallery/sections/selection_list.dart index 05e8b3d..4ef7fbf 100644 --- a/example/lib/gallery/sections/selection_list.dart +++ b/example/lib/gallery/sections/selection_list.dart @@ -45,6 +45,7 @@ class _SelectionListSectionState extends State { child: NesSelectionList( initialIndex: _horizontal, axis: Axis.horizontal, + tickerDuration: const Duration(milliseconds: 100), children: const [ Text('Yes'), Text('No'), diff --git a/lib/src/widgets/nes_blinker.dart b/lib/src/widgets/nes_blinker.dart index ad4c4f1..7258df8 100644 --- a/lib/src/widgets/nes_blinker.dart +++ b/lib/src/widgets/nes_blinker.dart @@ -9,13 +9,17 @@ class NesBlinker extends Phased { NesBlinker({ super.key, required this.child, + this.tickerDuration = const Duration(seconds: 1), }) : super( state: PhasedState( values: [true, false], - ticker: const Duration(seconds: 1), + ticker: tickerDuration, ), ); + /// Duration of ticker, it is change blink speed + final Duration? tickerDuration; + /// The child widget to blink. final Widget child; diff --git a/lib/src/widgets/nes_selection_list.dart b/lib/src/widgets/nes_selection_list.dart index bf8b2fa..dfb092e 100644 --- a/lib/src/widgets/nes_selection_list.dart +++ b/lib/src/widgets/nes_selection_list.dart @@ -16,6 +16,7 @@ class NesSelectionList extends StatefulWidget { this.canAutoFocus = true, this.focusNode, this.onCancelSelection, + this.tickerDuration, this.canCancelSelection = true, }) : assert( initialIndex == null || initialIndex < children.length, @@ -58,6 +59,9 @@ class NesSelectionList extends StatefulWidget { /// This can be useful in lists that are the "root" of a page or section. final bool canCancelSelection; + /// Duration of ticker, it is change blink speed + final Duration? tickerDuration; + @override State createState() => _NesSelectionListState(); } @@ -171,6 +175,7 @@ class _NesSelectionListState extends State { for (var i = 0; i < widget.children.length; i++) _SelectionItem( markerKey: _markerKey, + tickerDuration: widget.tickerDuration, onTap: () { if (_focusNode.hasFocus) { setState(() { @@ -230,6 +235,7 @@ class _SelectionItem extends StatelessWidget { required this.markerSize, required this.itemMinHeight, required this.hasFocus, + this.tickerDuration, }); final Key markerKey; @@ -242,12 +248,14 @@ class _SelectionItem extends StatelessWidget { final Widget child; final double itemMinHeight; final bool hasFocus; + final Duration? tickerDuration; @override Widget build(BuildContext context) { final itemMarker = cursor && hasFocus ? NesBlinker( key: markerKey, + tickerDuration: tickerDuration, child: marker, ) : (selected ? marker : null); From 573f5317cacf468fec4d77f62b1814f8eced9872 Mon Sep 17 00:00:00 2001 From: Erick Date: Thu, 11 Jan 2024 22:47:42 -0300 Subject: [PATCH 5/6] Apply suggestions from code review --- lib/src/widgets/nes_blinker.dart | 2 +- lib/src/widgets/nes_selection_list.dart | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/src/widgets/nes_blinker.dart b/lib/src/widgets/nes_blinker.dart index 7258df8..f349e14 100644 --- a/lib/src/widgets/nes_blinker.dart +++ b/lib/src/widgets/nes_blinker.dart @@ -17,7 +17,7 @@ class NesBlinker extends Phased { ), ); - /// Duration of ticker, it is change blink speed + /// Duration of ticker, it changes the blink speed. final Duration? tickerDuration; /// The child widget to blink. diff --git a/lib/src/widgets/nes_selection_list.dart b/lib/src/widgets/nes_selection_list.dart index dfb092e..d356b3e 100644 --- a/lib/src/widgets/nes_selection_list.dart +++ b/lib/src/widgets/nes_selection_list.dart @@ -59,7 +59,7 @@ class NesSelectionList extends StatefulWidget { /// This can be useful in lists that are the "root" of a page or section. final bool canCancelSelection; - /// Duration of ticker, it is change blink speed + /// Duration of ticker, it changes the blink speed. final Duration? tickerDuration; @override From cbceeb9630fe4c4d82f0ee751357a6480f3dda5d Mon Sep 17 00:00:00 2001 From: Erick Date: Thu, 11 Jan 2024 22:48:15 -0300 Subject: [PATCH 6/6] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cedb4f8..004e8b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,11 +3,11 @@ - fix: `NesRunningText` was not disposing its controller. - feat: add `NesRunningTextLines`. - feat: add `NesPulser`. + - feat: allow duration to be configured on selection list. # 0.12.1 - fix: theme lerp causing error on null access. - # 0.12.0 - feat: adding `NesBlinker`. - fix: `NesRunningText` would not update its text.