From 194faa4e881420e8d6e9d379eedff1451381e87e Mon Sep 17 00:00:00 2001 From: HuyNguyen Date: Thu, 22 Jun 2023 09:20:55 +0700 Subject: [PATCH] TW-180: Support hide/show appbar when on double tap in full area `ImageViewerView` --- lib/pages/image_viewer/image_viewer.dart | 7 ++ lib/pages/image_viewer/image_viewer_view.dart | 101 +++++++++++------- lib/widgets/mxc_image.dart | 8 +- 3 files changed, 74 insertions(+), 42 deletions(-) diff --git a/lib/pages/image_viewer/image_viewer.dart b/lib/pages/image_viewer/image_viewer.dart index 3291206b74..f0135b36b7 100644 --- a/lib/pages/image_viewer/image_viewer.dart +++ b/lib/pages/image_viewer/image_viewer.dart @@ -18,6 +18,9 @@ class ImageViewer extends StatefulWidget { } class ImageViewerController extends State { + + final ValueNotifier showAppbarPreview = ValueNotifier(false); + /// Forward this image to another room. void forwardAction() async { Matrix.of(context).shareContent = widget.event.content; @@ -29,6 +32,10 @@ class ImageViewerController extends State { ); } + void toggleAppbarPreview() { + showAppbarPreview.value = !showAppbarPreview.value; + } + /// Save this file with a system call. void saveFileAction(BuildContext context) => widget.event.saveFile(context); diff --git a/lib/pages/image_viewer/image_viewer_view.dart b/lib/pages/image_viewer/image_viewer_view.dart index c7e43b0bda..3fb3aaae92 100644 --- a/lib/pages/image_viewer/image_viewer_view.dart +++ b/lib/pages/image_viewer/image_viewer_view.dart @@ -14,51 +14,72 @@ class ImageViewerView extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - extendBodyBehindAppBar: false, - appBar: AppBar( - elevation: 0, - leading: IconButton( - icon: Icon(Icons.close, color: Theme.of(context).colorScheme.onSurface), - onPressed: Navigator.of(context).pop, - color: Theme.of(context).colorScheme.onSurface, - tooltip: L10n.of(context)!.close, - ), - surfaceTintColor: Colors.transparent, - actions: [ - if (PlatformInfos.isMobile) - Builder( - builder: (context) => IconButton( - onPressed: () => controller.shareFileAction(context), - tooltip: L10n.of(context)!.share, - color: Theme.of(context).colorScheme.onSurface, - icon: Icon(Icons.share, color: Theme.of(context).colorScheme.onSurface,), + extendBodyBehindAppBar: true, + appBar: _buildAppBarPreview(), + body: GestureDetector( + onTap: () {}, + onDoubleTap: () => controller.toggleAppbarPreview(), + child: InteractiveViewer( + minScale: 1.0, + maxScale: 10.0, + onInteractionEnd: controller.onInteractionEnds, + child: Center( + child: Hero( + tag: controller.widget.event.eventId, + child: MxcImage( + event: controller.widget.event, + fit: BoxFit.contain, + isThumbnail: false, + animated: false, + imageData: imageData, + isPreview: true, ), ), - IconButton( - icon: Icon(Icons.shortcut, color: Theme.of(context).colorScheme.onSurface), - onPressed: controller.forwardAction, - color: Theme.of(context).colorScheme.onSurface, - tooltip: L10n.of(context)!.share, - ), - ], - ), - body: InteractiveViewer( - minScale: 1.0, - maxScale: 10.0, - onInteractionEnd: controller.onInteractionEnds, - child: Center( - child: Hero( - tag: controller.widget.event.eventId, - child: MxcImage( - event: controller.widget.event, - fit: BoxFit.contain, - isThumbnail: false, - animated: false, - imageData: imageData, - ), ), ), ), ); } + + PreferredSize _buildAppBarPreview() { + return PreferredSize( + preferredSize: const Size.fromHeight(64), + child: ValueListenableBuilder( + valueListenable: controller.showAppbarPreview, + builder: (context, showAppbar, _) { + if (showAppbar) { + return AppBar( + elevation: 0, + leading: IconButton( + icon: Icon(Icons.close, color: Theme.of(context).colorScheme.onSurface), + onPressed: Navigator.of(context).pop, + color: Theme.of(context).colorScheme.onSurface, + tooltip: L10n.of(context)!.close, + ), + surfaceTintColor: Colors.transparent, + actions: [ + if (PlatformInfos.isMobile) + Builder( + builder: (context) => IconButton( + onPressed: () => controller.shareFileAction(context), + tooltip: L10n.of(context)!.share, + color: Theme.of(context).colorScheme.onSurface, + icon: Icon(Icons.share, color: Theme.of(context).colorScheme.onSurface,), + ), + ), + IconButton( + icon: Icon(Icons.shortcut, color: Theme.of(context).colorScheme.onSurface), + onPressed: controller.forwardAction, + color: Theme.of(context).colorScheme.onSurface, + tooltip: L10n.of(context)!.share, + ), + ], + ); + } else { + return const SizedBox.shrink(); + } + }, + ), + ); + } } diff --git a/lib/widgets/mxc_image.dart b/lib/widgets/mxc_image.dart index 00eb19c9cd..fa8eb258d0 100644 --- a/lib/widgets/mxc_image.dart +++ b/lib/widgets/mxc_image.dart @@ -25,6 +25,7 @@ class MxcImage extends StatefulWidget { final void Function()? onTapPreview; final void Function()? onTapSelectMode; final Uint8List? imageData; + final bool isPreview; const MxcImage({ this.uri, @@ -44,6 +45,7 @@ class MxcImage extends StatefulWidget { this.onTapPreview, this.onTapSelectMode, this.imageData, + this.isPreview = false, Key? key, }) : super(key: key); @@ -172,9 +174,11 @@ class _MxcImageState extends State { pageBuilder: (_, animationOne, animationTwo) => ImageViewer(widget.event!, imageData: _imageData) ); - } else { + } else if (widget.onTapSelectMode != null) { widget.onTapSelectMode!(); return; + } else { + return; } } @@ -193,7 +197,7 @@ class _MxcImageState extends State { @override Widget build(BuildContext context) { return InkWell( - onTap: () => _onTap(context), + onTap: widget.isPreview ? null : () => _onTap(context), child: widget.animated ? AnimatedCrossFade( duration: widget.animationDuration,