TW-180: Support hide/show appbar when on double tap in full area `Ima…

…geViewerView`
linagora · Jun 22, 2023 · 194faa4 · 194faa4
1 parent 3a4d735
commit 194faa4
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 42 deletions.
diff --git 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<ImageViewer> {
+
+  final ValueNotifier<bool> 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<ImageViewer> {
     );
   }
 
+  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
@@ -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<bool>(
+        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
@@ -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<MxcImage> {
         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<MxcImage> {
   @override
   Widget build(BuildContext context) {
     return InkWell(
-      onTap: () => _onTap(context),
+      onTap: widget.isPreview ? null : () => _onTap(context),
       child: widget.animated
         ? AnimatedCrossFade(
           duration: widget.animationDuration,