Kirigami 1.0 feedback

[Dirk Hohndel]

Responding to myself again... must be a sign of approaching senility...

On Sat, Apr 02, 2016 at 09:55:51AM -0500, Dirk Hohndel wrote:
> > 
> > > I think this is our consolidated feedback:
> > > 
> > > - make it an intentional action; stop at the top when scrolling, but when
> > >   the user stops and scrolls down again, then do the overscroll
> > > 
> > > - have the title bar stay attached to the top of the list and create some
> > >   blurry background above, to make it visually more obvious that you are
> > >   pulling down the top of the application
> > > 
> > > - if the user lets go of the screen and takes no action for 3 seconds,
> > >   have it snap back up to the top again
> > > 
> > > I hope this helps and makes sense
> >  
> > Yes, this does help and makes a lot of sense!
> > Pulling down the titlebar together with the list would also fix the problem 
> > that the breadcrumb is otherwise hard to reach. I always felt bad about that 
> > (given that we otherwise so strongly advise against putting anything 
> > interactive at the top), but this would solve it very elegantly!
> 
> :-)
> But then this of course leads to the next thing... this should work not
> just on ListViews but on any page, right? So that you can get to the title
> bar...

And it already does - any ScrolledPage, I think.

> > Thank you a lot for your feedback! It is indeed very constructive. Especially 
> > the feedback from using Kirigami in an iOS context is very helpful for us, 
> > because we lack experience in that field.
> > And thank you for the patches, of course, we all know that's always what an 
> > open-source project likes best :)
> 
> I'll admit that I tried to send patches for more of the desired features -
> but I'm still in the "learning" stage of QML. I have all day today for
> hacking, so maybe I'll get some more done. Right now I'm playing with UI
> ideas in Subsurface-mobile for a long press since I realized that Kirigami
> supports that (reading the sources when trying to create more of the
> aforementioned patches...)

And to keep my promise, here's the surprisingly simple patch that allows
the application to handle the click on the title bar. A user for this will
be pushed to Subsurface master in a few minutes.

I'm not sure if this is "good QML" - Marco or anyone, feel free to comment
and improve. It took me an embarrassingly long time to make this work, but
I consider this a learning experience (and I believe I learned a lot
today).

/D

>From 6b7ade8a1416e56a94923d7641fe81c8ec540da0 Mon Sep 17 00:00:00 2001
From: Dirk Hohndel <dirk at hohndel.org>
Date: Sat, 2 Apr 2016 17:02:10 -0500
Subject: [PATCH 3/3] Allow the app to grab a click on the title bar

Actually, on the title bar and an area just below in case the title bar
completely disappeared - so then it's a click at the top of the page.

If the application accepts the click, don't do the bread-crumb navigation.

Signed-off-by: Dirk Hohndel <dirk at hohndel.org>
---
 src/qml/ApplicationHeader.qml | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/qml/ApplicationHeader.qml b/src/qml/ApplicationHeader.qml
index 1ee5c33..458de58 100644
--- a/src/qml/ApplicationHeader.qml
+++ b/src/qml/ApplicationHeader.qml
@@ -36,6 +36,7 @@ import QtGraphicalEffects 1.0
  *
  * To achieve a titlebar that stays completely fixed just set the 3 sizes as the same
  */
+
 Rectangle {
     id: headerItem
     z: 2
@@ -44,6 +45,15 @@ Rectangle {
         right: parent.right
     }
     color: Theme.highlightColor
+
+    /**
+     * emitted when the user clicks on the title bar
+     * The page can manage that click event by itself,
+     * and if it set event.accepted = true, it will prevent
+     * the code here from navigating to that page in the page stack
+     */
+    signal titleBarClicked(var event);
+
     property int minimumHeight: 0
     property int preferredHeight: Units.gridUnit * 1.6
     property int maximumHeight: Units.gridUnit * 3
@@ -128,6 +138,22 @@ Rectangle {
         }
     }
 
+    MouseArea {
+        z: 100    // make sure the click hits this MouseArea, first
+        anchors { // extend the MouseArea over the title bar plus Units.gridUnit below
+            left: parent.left
+            right: parent.right
+            top: parent.bottom
+            topMargin: - parent.height
+        }
+        height: parent.height + Units.gridUnit
+        propagateComposedEvents: true  // allow events to propagate to the title bar mouse area for bread crumbs...
+        onClicked: {
+            var clickEvent = {accepted: false}
+            titleBarClicked(clickEvent)
+            mouse.accepted = clickEvent.accepted // but only propagate if the app didn't accept it already.
+        }
+    }
     ListView {
         id: titleList
         anchors {
-- 
2.6.4 (Apple Git-63)