Auto-hide image viewer bars when needed

TODO.md

@@ -1,7 +1,9 @@
 # TODO
 
 - Image viewer: 
-    - auto-hide buttons & header when needed
+    - fix: manual WM fullscreen > press f
+    - fix e in small window
+    - http not loading on click
     - hflickable: support kinetic scrolling disabler 
 
 - compress png in a thread

src/gui/Popups/ImageViewerPopup/ImageViewerPopup.qml

@@ -29,6 +29,7 @@ HPopup {
     readonly property alias info: info
     readonly property alias canvas: canvas
     readonly property alias buttons: buttons
+    readonly property alias autoHideTimer: autoHideTimer
 
     readonly property bool isAnimated:
         canvas.thumbnail.animated || canvas.full.animated
@@ -50,6 +51,14 @@ HPopup {
         canvas.full.animatedPaintedHeight || canvas.full.paintedHeight :
         canvas.thumbnail.animatedPaintedHeight || canvas.thumbnail.paintedHeight
 
+    readonly property bool canAutoHide:
+        paintedHeight * canvas.thumbnail.scale >
+        height - info.implicitHeight - buttons.implicitHeight &&
+        ! infoHover.hovered &&
+        ! buttonsHover.hovered
+
+    readonly property bool autoHide: canAutoHide && ! autoHideTimer.running
+
     signal openExternallyRequested()
 
     function showFullScreen() {
@@ -98,22 +107,51 @@ HPopup {
             viewer: popup
         }
 
+        HoverHandler {
+            readonly property point position: point.position
+
+            enabled: popup.canAutoHide
+            onPositionChanged:
+                if (Math.abs(point.velocity.x + point.velocity.y) >= 0.05)
+                    autoHideTimer.restart()
+        }
+
+        Timer {
+            id: autoHideTimer
+            interval: 3000
+        }
+
         ViewerInfo {
             id: info
             viewer: popup
             width: parent.width
-            y: parent.width < buttons.width * 4 ?  0 : parent.height - height
-            maxTitleWidth: y === 0 ? -1 : buttons.x - buttons.width / 2
+            y:
+                (parent.width < buttons.width * 4 || layout.vertical) &&
+                popup.autoHide ?
+                -height :
+
+                parent.width < buttons.width * 4  || layout.vertical ?
+                0 :
+
+                parent.height - (popup.autoHide ? 0 : height)
+
+            maxTitleWidth: y <= 0 ? -1 : buttons.x - buttons.width / 2
 
             Behavior on y { HNumberAnimation {} }
+
+            HoverHandler { id: infoHover }
         }
 
         ViewerButtons {
             id: buttons
-            anchors.bottom: parent.bottom
             anchors.horizontalCenter: parent.horizontalCenter
             width: Math.min(calculatedWidth, parent.width)
+            y: parent.height - (popup.autoHide ? 0 : height)
             viewer: popup
+
+            Behavior on y { HNumberAnimation {} }
+
+            HoverHandler { id: buttonsHover }
         }
     }
 }

src/gui/Popups/ImageViewerPopup/ViewerButtons.qml

@@ -11,7 +11,7 @@ HFlow {
     property HPopup viewer
 
     property color backgroundsColor:
-        viewer.info.y === viewer.height - viewer.info.height ?
+        viewer.info.y >= viewer.height - viewer.info.height ?
         "transparent" :
         theme.controls.button.background
 

src/gui/Popups/ImageViewerPopup/ViewerCanvas.qml

@@ -172,6 +172,7 @@ HFlickable {
             height: viewer.paintedHeight
 
             TapHandler {
+                acceptedPointerTypes: PointerDevice.GenericPointer
                 gesturePolicy: TapHandler.ReleaseWithinBounds
                 onTapped: {
                     thumbnail.scale === 1 ?
@@ -180,6 +181,12 @@ HFlickable {
                 }
                 onDoubleTapped: viewer.toggleFullScreen()
             }
+
+            TapHandler {
+                acceptedPointerTypes: PointerDevice.Finger | PointerDevice.Pen
+                gesturePolicy: TapHandler.ReleaseWithinBounds
+                onTapped: viewer.autoHideTimer.restart()
+            }
         }
     }
 }