diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb index dd7ba00c..8d923104 100644 --- a/lib/l10n/app_en.arb +++ b/lib/l10n/app_en.arb @@ -348,6 +348,14 @@ "@downloadFailureNoPermissionNotification": { "description": "Inform user that the file cannot be downloaded due to missing storage permission" }, + "nextTooltip": "Next", + "@nextTooltip": { + "description": "Tooltip of the next button" + }, + "previousTooltip": "Previous", + "@previousTooltip": { + "description": "Tooltip of the previous button" + }, "changelogTitle": "Changelog", "@changelogTitle": { "description": "Title of the changelog dialog" diff --git a/lib/widget/viewer.dart b/lib/widget/viewer.dart index eaabe6d9..9f7b7eda 100644 --- a/lib/widget/viewer.dart +++ b/lib/widget/viewer.dart @@ -126,6 +126,7 @@ class _ViewerState extends State with TickerProviderStateMixin { ? null : const NeverScrollableScrollPhysics(), ), + if (kIsWeb) ..._buildNavigationButtons(context), _buildBottomAppBar(context), _buildAppBar(context), ], @@ -154,6 +155,77 @@ class _ViewerState extends State with TickerProviderStateMixin { return content; } + List _buildNavigationButtons(BuildContext context) { + return [ + Align( + alignment: Alignment.centerRight, + child: Material( + type: MaterialType.transparency, + child: Visibility( + visible: _canSwitchPage(), + child: AnimatedOpacity( + opacity: _isShowNext ? 1.0 : 0.0, + duration: k.animationDurationShort, + child: MouseRegion( + onEnter: (details) { + setState(() { + _isShowNext = true; + }); + }, + onExit: (details) { + setState(() { + _isShowNext = false; + }); + }, + child: Padding( + padding: + const EdgeInsets.symmetric(horizontal: 24, vertical: 36), + child: IconButton( + icon: Icon(Icons.arrow_forward_ios_outlined), + onPressed: _switchToRightImage, + ), + ), + ), + ), + ), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Material( + type: MaterialType.transparency, + child: Visibility( + visible: _canSwitchPage(), + child: AnimatedOpacity( + opacity: _isShowPrevious ? 1.0 : 0.0, + duration: k.animationDurationShort, + child: MouseRegion( + onEnter: (details) { + setState(() { + _isShowPrevious = true; + }); + }, + onExit: (details) { + setState(() { + _isShowPrevious = false; + }); + }, + child: Padding( + padding: + const EdgeInsets.symmetric(horizontal: 24, vertical: 36), + child: IconButton( + icon: Icon(Icons.arrow_back_ios_outlined), + onPressed: _switchToLeftImage, + ), + ), + ), + ), + ), + ), + ), + ]; + } + Widget _buildAppBar(BuildContext context) { return Wrap( children: [ @@ -722,6 +794,9 @@ class _ViewerState extends State with TickerProviderStateMixin { var _isDetailPaneActive = false; var _isClosingDetailPane = false; + var _isShowNext = false; + var _isShowPrevious = false; + var _isZooming = false; var _wasZoomed = false; final _transformationController = TransformationController();