Skip to content

Feat(viewer): Toggle action buttons visibility on tap #162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Quffik wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Feat(viewer): Toggle action buttons visibility on tap #162

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 88 additions & 62 deletions lib/pages/image_viewer/image_viewer_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ class ImageViewerView extends StatefulWidget {
}

class _ImageViewerViewState extends State<ImageViewerView> {
bool _showUI = true;

void _toggleUI() {
setState(() {_showUI = !_showUI;});
}

// Default physics allowing scroll
ScrollPhysics _pageScrollPhysics = const BouncingScrollPhysics();

Expand Down Expand Up @@ -47,47 +53,57 @@ class _ImageViewerViewState extends State<ImageViewerView> {
child: Scaffold(
backgroundColor: Colors.black.withAlpha(128),
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0,
leading: IconButton(
style: iconButtonStyle,
icon: const Icon(Icons.close),
onPressed: Navigator.of(context).pop,
color: Colors.white,
tooltip: L10n.of(context).close,
),
backgroundColor: Colors.transparent,
actions: [
IconButton(
style: iconButtonStyle,
icon: const Icon(Icons.reply_outlined),
onPressed: widget.controller.forwardAction,
color: Colors.white,
tooltip: L10n.of(context).share,
),
const SizedBox(width: 8),
IconButton(
style: iconButtonStyle,
icon: const Icon(Icons.download_outlined),
onPressed: () => widget.controller.saveFileAction(context),
color: Colors.white,
tooltip: L10n.of(context).downloadFile,
),
const SizedBox(width: 8),
if (PlatformInfos.isMobile)
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Builder(
builder: (context) => IconButton(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight),
child: AnimatedOpacity(
opacity: _showUI ? 1.0 : 0.0,
duration: const Duration(milliseconds: 200),
child: IgnorePointer(
ignoring: !_showUI,
child: AppBar(
elevation: 0,
leading: IconButton(
style: iconButtonStyle,
icon: const Icon(Icons.close),
onPressed: Navigator.of(context).pop,
color: Colors.white,
tooltip: L10n.of(context).close,
),
backgroundColor: Colors.transparent,
actions: [
IconButton(
style: iconButtonStyle,
onPressed: () => widget.controller.shareFileAction(context),
icon: const Icon(Icons.reply_outlined),
onPressed: widget.controller.forwardAction,
color: Colors.white,
tooltip: L10n.of(context).share,
),
const SizedBox(width: 8),
IconButton(
style: iconButtonStyle,
icon: const Icon(Icons.download_outlined),
onPressed: () => widget.controller.saveFileAction(context),
color: Colors.white,
icon: Icon(Icons.adaptive.share_outlined),
tooltip: L10n.of(context).downloadFile,
),
),
const SizedBox(width: 8),
if (PlatformInfos.isMobile)
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Builder(
builder: (context) => IconButton(
style: iconButtonStyle,
onPressed: () => widget.controller.shareFileAction(context),
tooltip: L10n.of(context).share,
color: Colors.white,
icon: Icon(Icons.adaptive.share_outlined),
),
),
),
],
),
],
),
),
),
body: HoverBuilder(
builder: (context, hovered) => Stack(
Expand All @@ -109,7 +125,7 @@ class _ImageViewerViewState extends State<ImageViewerView> {
padding: const EdgeInsets.only(top: 52.0),
child: Center(
child: GestureDetector(
onTap: () {},
onTap: _toggleUI,
child: EventVideoPlayer(event, widget.controller),
),
),
Expand All @@ -122,6 +138,7 @@ class _ImageViewerViewState extends State<ImageViewerView> {
event: event,
controller: widget.controller,
onZoomStatusChanged: _lockScroll,
onTap: _toggleUI,
);
}
},
Expand All @@ -130,30 +147,37 @@ class _ImageViewerViewState extends State<ImageViewerView> {
if (hovered)
Align(
alignment: Alignment.centerRight,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (widget.controller.canGoBack)
Padding(
padding: const EdgeInsets.all(12.0),
child: IconButton(
style: iconButtonStyle,
tooltip: L10n.of(context).previous,
icon: const Icon(Icons.arrow_upward_outlined),
onPressed: widget.controller.prevImage,
),
),
if (widget.controller.canGoNext)
Padding(
padding: const EdgeInsets.all(12.0),
child: IconButton(
style: iconButtonStyle,
tooltip: L10n.of(context).next,
icon: const Icon(Icons.arrow_downward_outlined),
onPressed: widget.controller.nextImage,
),
),
],
child: AnimatedOpacity(
opacity: _showUI ? 1.0 : 0.0,
duration: const Duration(milliseconds: 200),
child: IgnorePointer(
ignoring: !_showUI,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (widget.controller.canGoBack)
Padding(
padding: const EdgeInsets.all(12.0),
child: IconButton(
style: iconButtonStyle,
tooltip: L10n.of(context).previous,
icon: const Icon(Icons.arrow_upward_outlined),
onPressed: widget.controller.prevImage,
),
),
if (widget.controller.canGoNext)
Padding(
padding: const EdgeInsets.all(12.0),
child: IconButton(
style: iconButtonStyle,
tooltip: L10n.of(context).next,
icon: const Icon(Icons.arrow_downward_outlined),
onPressed: widget.controller.nextImage,
),
),
],
),
),
),
),
],
Expand All @@ -169,11 +193,13 @@ class _ZoomableImage extends StatefulWidget {
final Event event;
final ImageViewerController controller;
final ValueChanged<bool> onZoomStatusChanged;
final VoidCallback onTap;

const _ZoomableImage({
required this.event,
required this.controller,
required this.onZoomStatusChanged,
required this.onTap,
});

@override
Expand Down Expand Up @@ -219,7 +245,7 @@ class _ZoomableImageState extends State<_ZoomableImage> {
child: Hero(
tag: widget.event.eventId,
child: GestureDetector(
onTap: () {},
onTap: widget.onTap,
child: MxcImage(
key: ValueKey(widget.event.eventId),
event: widget.event,
Expand Down