[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kde-commits
Subject:    [peruse] src/app/qml/viewers: BUG: 398417 Add little buttons on hover for the page mouse areas.
From:       Wolthera_van_Hövell_tot_Westerflier <null () kde ! org>
Date:       2018-09-25 12:06:58
Message-ID: E1g4m7G-0005XO-G2 () code ! kde ! org
[Download RAW message or body]

Git commit 234f1122bcda036a1a08c3201a2534bfc83d3fa6 by Wolthera van Hövell tot \
Westerflier. Committed on 25/09/2018 at 12:06.
Pushed by woltherav into branch 'master'.

BUG: 398417 Add little buttons on hover for the page mouse areas.

Then it'll be easier for people to find them.

M  +62   -2    src/app/qml/viewers/ImageBrowser.qml
M  +58   -0    src/app/qml/viewers/okular.qml

https://commits.kde.org/peruse/234f1122bcda036a1a08c3201a2534bfc83d3fa6

diff --git a/src/app/qml/viewers/ImageBrowser.qml \
b/src/app/qml/viewers/ImageBrowser.qml index 3e353ef..abd3a2c 100644
--- a/src/app/qml/viewers/ImageBrowser.qml
+++ b/src/app/qml/viewers/ImageBrowser.qml
@@ -22,6 +22,7 @@
 import QtQuick 2.3
 // import QtQuick.Layouts 1.1
 // import QtQuick.Controls 1.0 as QtControls
+import org.kde.kirigami 2.1 as Kirigami
 
 /**
  * @brief The image viewer used by the CBR and Folder Viewer Base classes.
@@ -214,9 +215,39 @@ ListView {
                         left: parent.left;
                         bottom: parent.bottom;
                     }
-                    width: parent.width / 6;
+                    width: Math.max(parent.width / 6, \
(parent.width-image.paintedWidth)/2);  preventStealing: true;
                     onClicked: root.layoutDirection === Qt.RightToLeft? \
image.previousFrame(): image.nextFrame(); +                    hoverEnabled: true;
+
+                    onPositionChanged: {
+                        var hWidth = width/2;
+                        var hHeight = height/2;
+                        var opacityX = mouse.x>hWidth? hWidth-(mouse.x-hWidth) : \
mouse.x; +                        opacityX = opacityX/(hWidth - \
(Kirigami.Units.iconSizes.huge/2)); +                        var opacityY = \
mouse.y>hHeight? hHeight-(mouse.y-hHeight) : mouse.y; +                        \
opacityY = opacityY/(hHeight - (Kirigami.Units.iconSizes.huge/2)); +                  \
leftPageIcon.opacity = opacityX*opacityY; +                    }
+                    onExited: {
+                        leftPageIcon.opacity = 0;
+                    }
+
+                    Rectangle {
+                        id: leftPageIcon;
+                        anchors.centerIn: parent;
+                        width: Kirigami.Units.iconSizes.huge;
+                        height: width;
+                        radius:width/2;
+                        color: Kirigami.Theme.highlightColor;
+                        opacity: 0;
+                        Kirigami.Icon {
+                            anchors.centerIn: parent;
+                            source: "go-previous"
+                            width: parent.width*(2/3);
+                            height: width;
+                        }
+                    }
                 }
                 MouseArea {
                     anchors {
@@ -224,9 +255,38 @@ ListView {
                         right: parent.right;
                         bottom: parent.bottom;
                     }
-                    width: parent.width / 6;
+                    width: Math.max(parent.width / 6, \
(parent.width-image.paintedWidth)/2);  preventStealing: true;
                     onClicked: root.layoutDirection === Qt.RightToLeft? \
image.nextFrame(): image.previousFrame(); +                    hoverEnabled: true;
+                    onPositionChanged: {
+                        var hWidth = width/2;
+                        var hHeight = height/2;
+                        var opacityX = mouse.x>hWidth? hWidth-(mouse.x-hWidth) : \
mouse.x; +                        opacityX = opacityX/(hWidth - \
(Kirigami.Units.iconSizes.huge/2)); +                        var opacityY = \
mouse.y>hHeight? hHeight-(mouse.y-hHeight) : mouse.y; +                        \
opacityY = opacityY/(hHeight - (Kirigami.Units.iconSizes.huge/2)); +                  \
rightPageIcon.opacity = opacityX*opacityY; +                    }
+                    onExited: {
+                        rightPageIcon.opacity = 0;
+                    }
+
+                    Rectangle {
+                        id: rightPageIcon;
+                        anchors.centerIn: parent;
+                        width: Kirigami.Units.iconSizes.huge;
+                        height: width;
+                        radius:width/2;
+                        color: Kirigami.Theme.highlightColor;
+                        opacity: 0;
+                        Kirigami.Icon {
+                            anchors.centerIn: parent;
+                            source: "go-next"
+                            width: parent.width*(2/3);
+                            height: width;
+                        }
+                    }
                 }
             }
         }
diff --git a/src/app/qml/viewers/okular.qml b/src/app/qml/viewers/okular.qml
index 67621ed..a5164e0 100644
--- a/src/app/qml/viewers/okular.qml
+++ b/src/app/qml/viewers/okular.qml
@@ -237,6 +237,35 @@ ViewerBase {
         }
         width: parent.width / 6;
         onClicked: imageBrowser.layoutDirection == Qt.RightToLeft? \
root.goNextPage(): root.goPreviousPage(); +        hoverEnabled: true;
+        onPositionChanged: {
+            var hWidth = width/2;
+            var hHeight = height/2;
+            var opacityX = mouse.x>hWidth? hWidth-(mouse.x-hWidth) : mouse.x;
+            opacityX = opacityX/(hWidth - (Kirigami.Units.iconSizes.huge/2));
+            var opacityY = mouse.y>hHeight? hHeight-(mouse.y-hHeight) : mouse.y;
+            opacityY = opacityY/(hHeight - (Kirigami.Units.iconSizes.huge/2));
+            leftPageIcon.opacity = opacityX*opacityY;
+        }
+        onExited: {
+            leftPageIcon.opacity = 0;
+        }
+
+        Rectangle {
+            id: leftPageIcon;
+            anchors.centerIn: parent;
+            width: Kirigami.Units.iconSizes.huge;
+            height: width;
+            radius:width/2;
+            color: Kirigami.Theme.highlightColor;
+            opacity: 0;
+            Kirigami.Icon {
+                anchors.centerIn: parent;
+                source: "go-previous"
+                width: parent.width*(2/3);
+                height: width;
+            }
+        }
     }
     MouseArea {
         anchors {
@@ -246,5 +275,34 @@ ViewerBase {
         }
         width: parent.width / 6;
         onClicked:  imageBrowser.layoutDirection == Qt.RightToLeft? \
root.goPreviousPage(): root.goNextPage(); +        hoverEnabled: true;
+        onPositionChanged: {
+            var hWidth = width/2;
+            var hHeight = height/2;
+            var opacityX = mouse.x>hWidth? hWidth-(mouse.x-hWidth) : mouse.x;
+            opacityX = opacityX/(hWidth - (Kirigami.Units.iconSizes.huge/2));
+            var opacityY = mouse.y>hHeight? hHeight-(mouse.y-hHeight) : mouse.y;
+            opacityY = opacityY/(hHeight - (Kirigami.Units.iconSizes.huge/2));
+            rightPageIcon.opacity = opacityX*opacityY;
+        }
+        onExited: {
+            rightPageIcon.opacity = 0;
+        }
+
+        Rectangle {
+            id: rightPageIcon;
+            anchors.centerIn: parent;
+            width: Kirigami.Units.iconSizes.huge;
+            height: width;
+            radius:width/2;
+            color: Kirigami.Theme.highlightColor;
+            opacity: 0;
+            Kirigami.Icon {
+                anchors.centerIn: parent;
+                source: "go-next"
+                width: parent.width*(2/3);
+                height: width;
+            }
+        }
     }
 }


[prev in list] [next in list] [prev in thread] [next in thread]