Improve gallery example

* Fix qmllint warnings
  * Added support for landscape mode
  * Updated docs

Fixes: QTBUG-110989
Change-Id: Id7422ad19b4336c64c866309dd07116d982ecff2
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
(cherry picked from commit 730c1d1630)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

examples/quickcontrols/gallery/doc/src/qtquickcontrols-gallery.qdoc

@@ -35,5 +35,16 @@
     graphical appearance of a control, allows you to interact with the control,
     and explains in which circumstances it is handy to use this control.
 
+    When the application is in portrait mode, the drawer is an interactive
+    side panel that can be swiped open from the left edge. It appears on
+    top of the content, blocking user interaction through its modal
+    background. When the application is in landscape mode, the drawer and
+    the content are laid out side-by-side.
+
+    The current orientation of the application is determined by comparing
+    the width and height of the window:
+
+    \snippet gallery/gallery.qml orientation
+
     \include examples-run.qdocinc
 */

examples/quickcontrols/gallery/gallery.qml

@@ -1,6 +1,8 @@
 // Copyright (C) 2022 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
+pragma ComponentBehavior: Bound
+
 import QtCore
 import QtQuick
 import QtQuick.Layouts
@@ -15,6 +17,10 @@ ApplicationWindow {
     visible: true
     title: "Qt Quick Controls"
 
+    //! [orientation]
+    readonly property bool portraitMode: window.width < window.height
+    //! [orientation]
+
     function help() {
         let displayingControl = listView.currentIndex !== -1
         let currentControlName = displayingControl
@@ -41,7 +47,7 @@ ApplicationWindow {
 
     Shortcut {
         sequence: StandardKey.HelpContents
-        onActivated: help()
+        onActivated: window.help()
     }
 
     Action {
@@ -72,14 +78,16 @@ ApplicationWindow {
         RowLayout {
             spacing: 20
             anchors.fill: parent
+            anchors.leftMargin: !window.portraitMode ? drawer.width : undefined
 
             ToolButton {
                 action: navigateBackAction
+                visible: window.portraitMode
             }
 
             Label {
                 id: titleLabel
-                text: listView.currentItem ? listView.currentItem.text : "Gallery"
+                text: listView.currentItem ? (listView.currentItem as ItemDelegate).text : "Gallery"
                 font.pixelSize: 20
                 elide: Label.ElideRight
                 horizontalAlignment: Qt.AlignHCenter
@@ -101,7 +109,7 @@ ApplicationWindow {
                     }
                     Action {
                         text: "Help"
-                        onTriggered: help()
+                        onTriggered: window.help()
                     }
                     Action {
                         text: "About"
@@ -114,9 +122,13 @@ ApplicationWindow {
 
     Drawer {
         id: drawer
+
         width: Math.min(window.width, window.height) / 3 * 2
         height: window.height
-        interactive: stackView.depth === 1
+        modal: window.portraitMode
+        interactive: window.portraitMode ? (stackView.depth === 1) : false
+        position: window.portraitMode ? 0 : 1
+        visible: !window.portraitMode
 
         ListView {
             id: listView
@@ -125,17 +137,6 @@ ApplicationWindow {
             currentIndex: -1
             anchors.fill: parent
 
-            delegate: ItemDelegate {
-                width: listView.width
-                text: model.title
-                highlighted: ListView.isCurrentItem
-                onClicked: {
-                    listView.currentIndex = index
-                    stackView.push(model.source)
-                    drawer.close()
-                }
-            }
-
             model: ListModel {
                 ListElement { title: "BusyIndicator"; source: "qrc:/pages/BusyIndicatorPage.qml" }
                 ListElement { title: "Button"; source: "qrc:/pages/ButtonPage.qml" }
@@ -165,13 +166,34 @@ ApplicationWindow {
                 ListElement { title: "Tumbler"; source: "qrc:/pages/TumblerPage.qml" }
             }
 
+            delegate: ItemDelegate {
+                id: delegateItem
+                width: ListView.view.width
+                text: title
+                highlighted: ListView.isCurrentItem
+
+                required property int index
+                required property var model
+                required property string title
+                required property string source
+
+                onClicked: {
+                    listView.currentIndex = index
+                    stackView.push(source)
+                    if (window.portraitMode)
+                        drawer.close()
+                }
+            }
+
             ScrollIndicator.vertical: ScrollIndicator { }
         }
     }
 
     StackView {
         id: stackView
+
         anchors.fill: parent
+        anchors.leftMargin: !window.portraitMode ? drawer.width : undefined
 
         initialItem: Pane {
             id: pane
@@ -203,6 +225,7 @@ ApplicationWindow {
                 source: "images/arrow.png"
                 anchors.left: parent.left
                 anchors.bottom: parent.bottom
+                visible: window.portraitMode
             }
         }
     }

examples/quickcontrols/gallery/pages/BusyIndicatorPage.qml

@@ -1,6 +1,8 @@
 // Copyright (C) 2017 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Controls
 

examples/quickcontrols/gallery/pages/ComboBoxPage.qml

@@ -33,16 +33,17 @@ ScrollablePage {
         }
 
         ComboBox {
+            id: comboBox
+
             editable: true
             model: ListModel {
-                id: model
                 ListElement { text: "Banana" }
                 ListElement { text: "Apple" }
                 ListElement { text: "Coconut" }
             }
             onAccepted: {
                 if (find(editText) === -1)
-                    model.append({text: editText})
+                    comboBox.model.append({text: comboBox.editText})
             }
             anchors.horizontalCenter: parent.horizontalCenter
         }

examples/quickcontrols/gallery/pages/DelegatePage.qml

@@ -6,89 +6,7 @@ import QtQuick.Layouts
 import QtQuick.Controls
 
 Pane {
-    padding: 0
-
-    property var delegateComponentMap: {
-        "ItemDelegate": itemDelegateComponent,
-        "SwipeDelegate": swipeDelegateComponent,
-        "CheckDelegate": checkDelegateComponent,
-        "RadioDelegate": radioDelegateComponent,
-        "SwitchDelegate": switchDelegateComponent
-    }
-
-    Component {
-        id: itemDelegateComponent
-
-        ItemDelegate {
-            text: labelText
-            width: parent.width
-        }
-    }
-
-    Component {
-        id: swipeDelegateComponent
-
-        SwipeDelegate {
-            id: swipeDelegate
-            text: labelText
-            width: parent.width
-
-            Component {
-                id: removeComponent
-
-                Rectangle {
-                    color: SwipeDelegate.pressed ? "#333" : "#444"
-                    width: parent.width
-                    height: parent.height
-                    clip: true
-
-                    SwipeDelegate.onClicked: view.model.remove(ourIndex)
-
-                    Label {
-                        font.pixelSize: swipeDelegate.font.pixelSize
-                        text: "Remove"
-                        color: "white"
-                        anchors.centerIn: parent
-                    }
-                }
-            }
-
-            swipe.left: removeComponent
-            swipe.right: removeComponent
-        }
-    }
-
-    Component {
-        id: checkDelegateComponent
-
-        CheckDelegate {
-            text: labelText
-        }
-    }
-
-    ButtonGroup {
-        id: radioButtonGroup
-    }
-
-    Component {
-        id: radioDelegateComponent
-
-        RadioDelegate {
-            text: labelText
-            ButtonGroup.group: radioButtonGroup
-        }
-    }
-
-    Component {
-        id: switchDelegateComponent
-
-        SwitchDelegate {
-            text: labelText
-        }
-    }
-
     ColumnLayout {
-        id: column
         spacing: 40
         anchors.fill: parent
         anchors.topMargin: 20
@@ -102,71 +20,181 @@ Pane {
 
         ListView {
             id: listView
-            Layout.fillWidth: true
-            Layout.fillHeight: true
             clip: true
-            model: ListModel {
-                ListElement { type: "ItemDelegate"; text: "ItemDelegate" }
-                ListElement { type: "ItemDelegate"; text: "ItemDelegate" }
-                ListElement { type: "ItemDelegate"; text: "ItemDelegate" }
-                ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" }
-                ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" }
-                ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" }
-                ListElement { type: "CheckDelegate"; text: "CheckDelegate" }
-                ListElement { type: "CheckDelegate"; text: "CheckDelegate" }
-                ListElement { type: "CheckDelegate"; text: "CheckDelegate" }
-                ListElement { type: "RadioDelegate"; text: "RadioDelegate" }
-                ListElement { type: "RadioDelegate"; text: "RadioDelegate" }
-                ListElement { type: "RadioDelegate"; text: "RadioDelegate" }
-                ListElement { type: "SwitchDelegate"; text: "SwitchDelegate" }
-                ListElement { type: "SwitchDelegate"; text: "SwitchDelegate" }
-                ListElement { type: "SwitchDelegate"; text: "SwitchDelegate" }
-            }
-
             section.property: "type"
             section.delegate: Pane {
-                width: listView.width
+                id: sectionPane
+                required property string section
+                width: ListView.view.width
                 height: sectionLabel.implicitHeight + 20
-
                 Label {
                     id: sectionLabel
-                    text: section
+                    text: sectionPane.section
                     anchors.centerIn: parent
                 }
             }
 
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            readonly property var delegateComponentMap: {
+                "ItemDelegate": itemDelegateComponent,
+                "SwipeDelegate": swipeDelegateComponent,
+                "CheckDelegate": checkDelegateComponent,
+                "RadioDelegate": radioDelegateComponent,
+                "SwitchDelegate": switchDelegateComponent
+            }
+
+            Component {
+                id: itemDelegateComponent
+
+                ItemDelegate {
+                    // qmllint disable unqualified
+                    text: value
+                    // qmllint enable unqualified
+                    width: parent.width
+                }
+            }
+
+            Component {
+                id: swipeDelegateComponent
+
+                SwipeDelegate {
+                    id: swipeDelegate
+                    // qmllint disable unqualified
+                    text: value
+                    // qmllint enable unqualified
+                    width: parent.width
+
+                    Component {
+                        id: removeComponent
+
+                        Rectangle {
+                            color: SwipeDelegate.pressed ? "#333" : "#444"
+                            width: parent.width
+                            height: parent.height
+                            clip: true
+
+                            SwipeDelegate.onClicked: {
+                                // qmllint disable unqualified
+                                view.model.remove(ourIndex)
+                                // qmllint enable unqualified
+                            }
+
+                            Label {
+                                // qmllint disable unqualified
+                                font.pixelSize: swipeDelegate.font.pixelSize
+                                // qmllint enable unqualified
+                                text: "Remove"
+                                color: "white"
+                                anchors.centerIn: parent
+                            }
+                        }
+                    }
+
+                    SequentialAnimation {
+                        id: removeAnimation
+
+                        PropertyAction {
+                            // qmllint disable unqualified
+                            target: delegateItem
+                            // qmllint enable unqualified
+                            property: "ListView.delayRemove"
+                            value: true
+                        }
+                        NumberAnimation {
+                            // qmllint disable unqualified
+                            target: delegateItem.item
+                            // qmllint enable unqualified
+                            property: "height"
+                            to: 0
+                            easing.type: Easing.InOutQuad
+                        }
+                        PropertyAction {
+                            // qmllint disable unqualified
+                            target: delegateItem
+                            // qmllint enable unqualified
+                            property: "ListView.delayRemove"
+                            value: false
+                        }
+                    }
+
+                    swipe.left: removeComponent
+                    swipe.right: removeComponent
+                    ListView.onRemove: removeAnimation.start()
+                }
+            }
+
+            Component {
+                id: checkDelegateComponent
+
+                CheckDelegate {
+                    // qmllint disable unqualified
+                    text: value
+                    // qmllint enable unqualified
+                }
+            }
+
+            ButtonGroup {
+                id: radioButtonGroup
+            }
+
+            Component {
+                id: radioDelegateComponent
+
+                RadioDelegate {
+                    // qmllint disable unqualified
+                    text: value
+                    ButtonGroup.group: radioButtonGroup
+                    // qmllint enable unqualified
+                }
+            }
+
+            Component {
+                id: switchDelegateComponent
+
+                SwitchDelegate {
+                    // qmllint disable unqualified
+                    text: value
+                    // qmllint enable unqualified
+                }
+            }
+
+            model: ListModel {
+                ListElement { type: "ItemDelegate"; value: "ItemDelegate1" }
+                ListElement { type: "ItemDelegate"; value: "ItemDelegate2" }
+                ListElement { type: "ItemDelegate"; value: "ItemDelegate3" }
+                ListElement { type: "SwipeDelegate"; value: "SwipeDelegate1" }
+                ListElement { type: "SwipeDelegate"; value: "SwipeDelegate2" }
+                ListElement { type: "SwipeDelegate"; value: "SwipeDelegate3" }
+                ListElement { type: "CheckDelegate"; value: "CheckDelegate1" }
+                ListElement { type: "CheckDelegate"; value: "CheckDelegate2" }
+                ListElement { type: "CheckDelegate"; value: "CheckDelegate3" }
+                ListElement { type: "RadioDelegate"; value: "RadioDelegate1" }
+                ListElement { type: "RadioDelegate"; value: "RadioDelegate2" }
+                ListElement { type: "RadioDelegate"; value: "RadioDelegate3" }
+                ListElement { type: "SwitchDelegate"; value: "SwitchDelegate1" }
+                ListElement { type: "SwitchDelegate"; value: "SwitchDelegate2" }
+                ListElement { type: "SwitchDelegate"; value: "SwitchDelegate3" }
+            }
+
             delegate: Loader {
                 id: delegateLoader
-                width: listView.width
+                width: ListView.view.width
-                sourceComponent: delegateComponentMap[text]
+                // qmllint disable unqualified
+                sourceComponent: listView.delegateComponentMap[type]
+                // qmllint enable unqualified
 
-                property string labelText: text
+                required property string value
+                required property string type
+                required property var model
+                required property int index
+
+                property Loader delegateItem: delegateLoader
+                // qmllint disable unqualified
                 property ListView view: listView
+                // qmllint enable unqualified
                 property int ourIndex: index
-
-                // Can't find a way to do this in the SwipeDelegate component itself,
-                // so do it here instead.
-                SequentialAnimation {
-                    id: removeAnimation
-
-                    PropertyAction {
-                        target: delegateLoader
-                        property: "ListView.delayRemove"
-                        value: true
-                    }
-                    NumberAnimation {
-                        target: item
-                        property: "height"
-                        to: 0
-                        easing.type: Easing.InOutQuad
-                    }
-                    PropertyAction {
-                        target: delegateLoader
-                        property: "ListView.delayRemove"
-                        value: false
-                    }
-                }
-                ListView.onRemove: removeAnimation.start()
             }
         }
     }

examples/quickcontrols/gallery/pages/DialogPage.qml

@@ -25,7 +25,7 @@ ScrollablePage {
         Button {
             text: "Message"
             anchors.horizontalCenter: parent.horizontalCenter
-            width: buttonWidth
+            width: page.buttonWidth
             onClicked: messageDialog.open()
 
             Dialog {
@@ -46,7 +46,7 @@ ScrollablePage {
             id: button
             text: "Confirmation"
             anchors.horizontalCenter: parent.horizontalCenter
-            width: buttonWidth
+            width: page.buttonWidth
             onClicked: confirmationDialog.open()
 
             Dialog {
@@ -77,7 +77,7 @@ ScrollablePage {
         Button {
             text: "Content"
             anchors.horizontalCenter: parent.horizontalCenter
-            width: buttonWidth
+            width: page.buttonWidth
             onClicked: contentDialog.open()
 
             Dialog {
@@ -139,7 +139,7 @@ ScrollablePage {
         Button {
             text: "Input"
             anchors.horizontalCenter: parent.horizontalCenter
-            width: buttonWidth
+            width: page.buttonWidth
             onClicked: inputDialog.open()
 
             Dialog {

examples/quickcontrols/gallery/pages/StackViewPage.qml

@@ -1,6 +1,8 @@
 // Copyright (C) 2017 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Controls
 
@@ -43,6 +45,13 @@ StackView {
                     anchors.horizontalCenter: parent.horizontalCenter
                     onClicked: stackView.pop()
                 }
+
+                Label {
+                    width: parent.width
+                    wrapMode: Label.Wrap
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: "Stack Depth: " + stackView.depth
+                }
             }
         }
     }

examples/quickcontrols/gallery/pages/SwipeViewPage.qml

@@ -16,8 +16,8 @@ Pane {
             model: 3
 
             Pane {
-                width: view.width
+                width: SwipeView.view.width
-                height: view.height
+                height: SwipeView.view.height
 
                 Column {
                     spacing: 40

examples/quickcontrols/gallery/pages/TabBarPage.qml

@@ -16,8 +16,8 @@ Page {
             model: 3
 
             Pane {
-                width: swipeView.width
+                width: SwipeView.view.width
-                height: swipeView.height
+                height: SwipeView.view.height
 
                 Column {
                     spacing: 40

examples/quickcontrols/gallery/pages/TextAreaPage.qml

@@ -19,7 +19,7 @@ ScrollablePage {
         }
 
         TextArea {
-            width: pane.availableWidth / 3
+            width: page.availableWidth / 3
             anchors.horizontalCenter: parent.horizontalCenter
 
             wrapMode: TextArea.Wrap