Gallery: allow navigating back to the home page

Instead of replacing the home page and throwing it away for good, push
control specific introduction pages on top. Change the drawer button to
a back button to allow navigating back. Also, disable the drawer while
not on the home page to keep the navigation simple.

Thanks to Wolfgang Schneider for bringing up the idea in QTBUG-54300.

Change-Id: Ie0501332e27d7edab59eef32e59a27973b59ebf3
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

10 files changed, 20 insertions, 5 deletions

diff --git a/examples/quickcontrols2/gallery/gallery.qml b/examples/quickcontrols2/gallery/gallery.qml
index cc458087..cc818abd 100644
--- a/examples/quickcontrols2/gallery/gallery.qml
+++ b/examples/quickcontrols2/gallery/gallery.qml
@@ -69,14 +69,21 @@ ApplicationWindow {
                     fillMode: Image.Pad
                     horizontalAlignment: Image.AlignHCenter
                     verticalAlignment: Image.AlignVCenter
-                    source: "qrc:/images/drawer.png"
+                    source: stackView.depth > 1 ? "images/back.png" : "images/drawer.png"
+                }
+                onClicked: {
+                    if (stackView.depth > 1) {
+                        stackView.pop()
+                        listView.currentIndex = -1
+                    } else {
+                        drawer.open()
+                    }
                 }
-                onClicked: drawer.open()
             }
 
             Label {
                 id: titleLabel
-                text: "Gallery"
+                text: listView.currentItem ? listView.currentItem.text : "Gallery"
                 font.pixelSize: 20
                 elide: Label.ElideRight
                 horizontalAlignment: Qt.AlignHCenter
@@ -115,6 +122,7 @@ ApplicationWindow {
         id: drawer
         width: Math.min(window.width, window.height) / 3 * 2
         height: window.height
+        dragMargin: stackView.depth > 1 ? 0 : undefined
 
         ListView {
             id: listView
@@ -128,8 +136,7 @@ ApplicationWindow {
                 onClicked: {
                     if (listView.currentIndex != index) {
                         listView.currentIndex = index
-                        titleLabel.text = model.title
-                        stackView.replace(model.source)
+                        stackView.push(model.source)
                     }
                     drawer.close()
                 }
diff --git a/examples/quickcontrols2/gallery/gallery.qrc b/examples/quickcontrols2/gallery/gallery.qrc
index 01c61324..d5c1b1d9 100644
--- a/examples/quickcontrols2/gallery/gallery.qrc
+++ b/examples/quickcontrols2/gallery/gallery.qrc
@@ -10,6 +10,10 @@
         <file>images/arrows@2x.png</file>
         <file>images/arrows@3x.png</file>
         <file>images/arrows@4x.png</file>
+        <file>images/back.png</file>
+        <file>images/back@2x.png</file>
+        <file>images/back@3x.png</file>
+        <file>images/back@4x.png</file>
         <file>images/drawer.png</file>
         <file>images/drawer@2x.png</file>
         <file>images/drawer@3x.png</file>
@@ -18,6 +22,10 @@
         <file>images/menu@2x.png</file>
         <file>images/menu@3x.png</file>
         <file>images/menu@4x.png</file>
+        <file>images/+material/back.png</file>
+        <file>images/+material/back@2x.png</file>
+        <file>images/+material/back@3x.png</file>
+        <file>images/+material/back@4x.png</file>
         <file>images/+material/drawer.png</file>
         <file>images/+material/drawer@2x.png</file>
         <file>images/+material/drawer@3x.png</file>
diff --git a/examples/quickcontrols2/gallery/images/+material/back.png b/examples/quickcontrols2/gallery/images/+material/back.png
new file mode 100644
index 00000000..ebc1000f
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/+material/back.png
diff --git a/examples/quickcontrols2/gallery/images/+material/back@2x.png b/examples/quickcontrols2/gallery/images/+material/back@2x.png
new file mode 100644
index 00000000..cf6163c8
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/+material/back@2x.png
diff --git a/examples/quickcontrols2/gallery/images/+material/back@3x.png b/examples/quickcontrols2/gallery/images/+material/back@3x.png
new file mode 100644
index 00000000..96376a5a
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/+material/back@3x.png
diff --git a/examples/quickcontrols2/gallery/images/+material/back@4x.png b/examples/quickcontrols2/gallery/images/+material/back@4x.png
new file mode 100644
index 00000000..578ac14f
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/+material/back@4x.png
diff --git a/examples/quickcontrols2/gallery/images/back.png b/examples/quickcontrols2/gallery/images/back.png
new file mode 100644
index 00000000..db43e273
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/back.png
diff --git a/examples/quickcontrols2/gallery/images/back@2x.png b/examples/quickcontrols2/gallery/images/back@2x.png
new file mode 100644
index 00000000..c55ab315
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/back@2x.png
diff --git a/examples/quickcontrols2/gallery/images/back@3x.png b/examples/quickcontrols2/gallery/images/back@3x.png
new file mode 100644
index 00000000..b228eb87
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/back@3x.png
diff --git a/examples/quickcontrols2/gallery/images/back@4x.png b/examples/quickcontrols2/gallery/images/back@4x.png
new file mode 100644
index 00000000..dd157e78
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/back@4x.png