Gallery: improve the behavior in landscape

Change-Id: Ia5acec45da1c94673641004eca73491b587db054
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

26 files changed, 64 insertions, 41 deletions

diff --git a/examples/controls/gallery/gallery.qml b/examples/controls/gallery/gallery.qml
index 86465d0d..1552ec55 100644
--- a/examples/controls/gallery/gallery.qml
+++ b/examples/controls/gallery/gallery.qml
@@ -95,7 +95,7 @@ ApplicationWindow {
 
         Pane {
             padding: 0
-            width: window.width / 3 * 2
+            width: Math.min(window.width, window.height) / 3 * 2
             height: window.height
 
             ListView {
@@ -200,7 +200,7 @@ ApplicationWindow {
         contentItem: Pane {
             x: (window.width - width) / 2
             y: window.height / 6
-            width: window.width / 3 * 2
+            width: Math.min(window.width, window.height) / 3 * 2
             contentHeight: settingsColumn.implicitHeight
 
             Keys.onEscapePressed: settingsPopup.close()
@@ -284,7 +284,7 @@ ApplicationWindow {
         contentItem: Pane {
             x: (window.width - width) / 2
             y: (window.height - height) / 2
-            width: window.width / 3 * 2
+            width: Math.min(window.width, window.height) / 3 * 2
             contentHeight: aboutColumn.implicitHeight
 
             Keys.onEscapePressed: aboutDialog.close()
diff --git a/examples/controls/gallery/pages/BusyIndicatorPage.qml b/examples/controls/gallery/pages/BusyIndicatorPage.qml
index 5ee1cd63..2d538216 100644
--- a/examples/controls/gallery/pages/BusyIndicatorPage.qml
+++ b/examples/controls/gallery/pages/BusyIndicatorPage.qml
@@ -51,6 +51,7 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "BusyIndicator is used to indicate activity while content is being loaded,"
                   + " or the UI is blocked waiting for a resource to become available."
         }
diff --git a/examples/controls/gallery/pages/ButtonPage.qml b/examples/controls/gallery/pages/ButtonPage.qml
index e251a346..329b53a7 100644
--- a/examples/controls/gallery/pages/ButtonPage.qml
+++ b/examples/controls/gallery/pages/ButtonPage.qml
@@ -45,7 +45,7 @@ Flickable {
     id: flickable
     contentHeight: pane.height
 
-    readonly property int itemWidth: Math.max(button.implicitWidth, pane.availableWidth / 3)
+    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
 
     Pane {
         id: pane
@@ -59,6 +59,7 @@ Flickable {
             Label {
                 width: parent.width
                 wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
                 text: "Button presents a push-button that can be pushed or clicked by the user. "
                     + "Buttons are normally used to perform an action, or to answer a question."
             }
diff --git a/examples/controls/gallery/pages/CheckBoxPage.qml b/examples/controls/gallery/pages/CheckBoxPage.qml
index 65a70086..861f144d 100644
--- a/examples/controls/gallery/pages/CheckBoxPage.qml
+++ b/examples/controls/gallery/pages/CheckBoxPage.qml
@@ -45,8 +45,6 @@ Flickable {
     id: flickable
     contentHeight: pane.height
 
-    readonly property int itemWidth: Math.max(box.implicitWidth, pane.availableWidth / 3)
-
     Pane {
         id: pane
         width: parent.width
@@ -59,6 +57,7 @@ Flickable {
             Label {
                 width: parent.width
                 wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
                 text: "CheckBox presents an option button that can be toggled on or off. "
                     + "Check boxes are typically used to select one or more options from a set of options."
             }
@@ -70,18 +69,14 @@ Flickable {
                 CheckBox {
                     text: "First"
                     checked: true
-                    width: itemWidth
                 }
                 CheckBox {
-                    id: box
                     text: "Second"
-                    width: itemWidth
                 }
                 CheckBox {
                     text: "Third"
                     checked: true
                     enabled: false
-                    width: itemWidth
                 }
             }
         }
diff --git a/examples/controls/gallery/pages/ComboBoxPage.qml b/examples/controls/gallery/pages/ComboBoxPage.qml
index 44295450..3c497c48 100644
--- a/examples/controls/gallery/pages/ComboBoxPage.qml
+++ b/examples/controls/gallery/pages/ComboBoxPage.qml
@@ -51,13 +51,14 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "ComboBox is a combined button and popup list. It provides means of presenting a "
                 + "list of options to the user in a way that takes up the minimum amount of screen space."
         }
 
         ComboBox {
             model: ["First", "Second", "Third"]
-            width: Math.max(implicitWidth, pane.availableWidth / 3)
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
             anchors.horizontalCenter: parent.horizontalCenter
         }
     }
diff --git a/examples/controls/gallery/pages/DialPage.qml b/examples/controls/gallery/pages/DialPage.qml
index 8db5f08f..5277d7b0 100644
--- a/examples/controls/gallery/pages/DialPage.qml
+++ b/examples/controls/gallery/pages/DialPage.qml
@@ -51,6 +51,7 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "The Dial is similar to a traditional dial knob that is found on devices such as "
                 + "stereos or industrial equipment. It allows the user to specify a value within a range."
         }
diff --git a/examples/controls/gallery/pages/DrawerPage.qml b/examples/controls/gallery/pages/DrawerPage.qml
index fe6e07d3..910a0c7c 100644
--- a/examples/controls/gallery/pages/DrawerPage.qml
+++ b/examples/controls/gallery/pages/DrawerPage.qml
@@ -51,6 +51,7 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "Drawer provides a swipe-based side panel, similar to those often used "
                 + "in touch interfaces to provide a central location for navigation."
         }
@@ -58,7 +59,7 @@ Pane {
         Button {
             text: "Open"
             anchors.horizontalCenter: parent.horizontalCenter
-            width: Math.max(implicitWidth, pane.availableWidth / 3)
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
 
             onClicked: drawer.open()
         }
diff --git a/examples/controls/gallery/pages/FramePage.qml b/examples/controls/gallery/pages/FramePage.qml
index 5c613fb5..5b3ef4de 100644
--- a/examples/controls/gallery/pages/FramePage.qml
+++ b/examples/controls/gallery/pages/FramePage.qml
@@ -44,6 +44,8 @@ import Qt.labs.controls 1.0
 Pane {
     id: pane
 
+    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, pane.availableWidth / 3 * 2))
+
     Column {
         spacing: 40
         anchors.fill: parent
@@ -51,15 +53,16 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "Frame is used to layout a logical group of controls together, within a visual frame."
         }
 
         Frame {
-            width: parent.width
+            anchors.horizontalCenter: parent.horizontalCenter
 
             Column {
                 spacing: 20
-                anchors.fill: parent
+                width: itemWidth
 
                 RadioButton {
                     text: "First"
@@ -67,6 +70,7 @@ Pane {
                     width: parent.width
                 }
                 RadioButton {
+                    id: button
                     text: "Second"
                     width: parent.width
                 }
diff --git a/examples/controls/gallery/pages/GroupBoxPage.qml b/examples/controls/gallery/pages/GroupBoxPage.qml
index 0d81418f..e9d67849 100644
--- a/examples/controls/gallery/pages/GroupBoxPage.qml
+++ b/examples/controls/gallery/pages/GroupBoxPage.qml
@@ -44,6 +44,8 @@ import Qt.labs.controls 1.0
 Pane {
     id: pane
 
+    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, pane.availableWidth / 3 * 2))
+
     Column {
         spacing: 40
         anchors.fill: parent
@@ -51,16 +53,17 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "GroupBox is used to layout a logical group of controls together, within a titled visual frame."
         }
 
         GroupBox {
             title: "Title"
-            width: parent.width
+            anchors.horizontalCenter: parent.horizontalCenter
 
             Column {
                 spacing: 20
-                anchors.fill: parent
+                width: itemWidth
 
                 RadioButton {
                     text: "First"
@@ -68,6 +71,7 @@ Pane {
                     width: parent.width
                 }
                 RadioButton {
+                    id: button
                     text: "Second"
                     width: parent.width
                 }
diff --git a/examples/controls/gallery/pages/MenuPage.qml b/examples/controls/gallery/pages/MenuPage.qml
index a892ca7a..119be559 100644
--- a/examples/controls/gallery/pages/MenuPage.qml
+++ b/examples/controls/gallery/pages/MenuPage.qml
@@ -51,6 +51,7 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "Menu can be used either as a context menu, or as a popup menu."
         }
 
@@ -58,7 +59,7 @@ Pane {
             id: button
             text: "Open"
             anchors.horizontalCenter: parent.horizontalCenter
-            width: Math.max(implicitWidth, pane.availableWidth / 3)
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
 
             onClicked: optionsMenu.open()
         }
diff --git a/examples/controls/gallery/pages/PageIndicatorPage.qml b/examples/controls/gallery/pages/PageIndicatorPage.qml
index ac24ba61..f8557f24 100644
--- a/examples/controls/gallery/pages/PageIndicatorPage.qml
+++ b/examples/controls/gallery/pages/PageIndicatorPage.qml
@@ -51,6 +51,7 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "PageIndicator is used to indicate the currently active page in a container of pages."
         }
 
diff --git a/examples/controls/gallery/pages/PopupPage.qml b/examples/controls/gallery/pages/PopupPage.qml
index 19bd3ba0..d2685969 100644
--- a/examples/controls/gallery/pages/PopupPage.qml
+++ b/examples/controls/gallery/pages/PopupPage.qml
@@ -51,6 +51,7 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "Popup is used to display modal or modeless content that overlays other "
                 + "application content. In this example, the settings are shown in a popup."
         }
@@ -59,7 +60,7 @@ Pane {
             id: button
             text: "Open"
             anchors.horizontalCenter: parent.horizontalCenter
-            width: Math.max(implicitWidth, pane.availableWidth / 3)
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
 
             onClicked: settingsPopup.open()
         }
diff --git a/examples/controls/gallery/pages/ProgressBarPage.qml b/examples/controls/gallery/pages/ProgressBarPage.qml
index 946760e6..7beb4125 100644
--- a/examples/controls/gallery/pages/ProgressBarPage.qml
+++ b/examples/controls/gallery/pages/ProgressBarPage.qml
@@ -53,6 +53,7 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "ProgressBar indicates the progress of an operation. It can be set in an "
                 + "indeterminate mode to indicate that the length of the operation is unknown."
         }
diff --git a/examples/controls/gallery/pages/RadioButtonPage.qml b/examples/controls/gallery/pages/RadioButtonPage.qml
index 7141137d..fe6a751c 100644
--- a/examples/controls/gallery/pages/RadioButtonPage.qml
+++ b/examples/controls/gallery/pages/RadioButtonPage.qml
@@ -45,8 +45,6 @@ Flickable {
     id: flickable
     contentHeight: pane.height
 
-    readonly property int itemWidth: Math.max(button.implicitWidth, pane.availableWidth / 3)
-
     Pane {
         id: pane
         width: parent.width
@@ -59,6 +57,7 @@ Flickable {
             Label {
                 width: parent.width
                 wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
                 text: "RadioButton presents an option button that can be toggled on or off. "
                     + "Radio buttons are typically used to select one option from a set of options."
             }
@@ -69,18 +68,14 @@ Flickable {
 
                 RadioButton {
                     text: "First"
-                    width: itemWidth
                 }
                 RadioButton {
-                    id: button
                     text: "Second"
                     checked: true
-                    width: itemWidth
                 }
                 RadioButton {
                     text: "Third"
                     enabled: false
-                    width: itemWidth
                 }
             }
         }
diff --git a/examples/controls/gallery/pages/RangeSliderPage.qml b/examples/controls/gallery/pages/RangeSliderPage.qml
index 6eb6d5fb..c41097df 100644
--- a/examples/controls/gallery/pages/RangeSliderPage.qml
+++ b/examples/controls/gallery/pages/RangeSliderPage.qml
@@ -44,7 +44,7 @@ import Qt.labs.controls 1.0
 Pane {
     id: pane
 
-    readonly property int itemWidth: Math.max(slider.implicitWidth, pane.availableWidth / 3)
+    readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, pane.availableWidth / 3))
 
     Column {
         spacing: 40
@@ -53,6 +53,7 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "RangeSlider is used to select a range specified by two values, by sliding each handle along a track."
         }
 
diff --git a/examples/controls/gallery/pages/ScrollBarPage.qml b/examples/controls/gallery/pages/ScrollBarPage.qml
index 8fa2e7c5..0db1888d 100644
--- a/examples/controls/gallery/pages/ScrollBarPage.qml
+++ b/examples/controls/gallery/pages/ScrollBarPage.qml
@@ -59,6 +59,7 @@ Flickable {
             Label {
                 width: parent.width
                 wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
                 text: "ScrollBar is an interactive bar that can be used to scroll to a specific position. "
                     + "A scroll bar can be either vertical or horizontal, and can be attached to any Flickable, "
                     + "such as ListView and GridView."
diff --git a/examples/controls/gallery/pages/ScrollIndicatorPage.qml b/examples/controls/gallery/pages/ScrollIndicatorPage.qml
index 61cb0f62..658b7d15 100644
--- a/examples/controls/gallery/pages/ScrollIndicatorPage.qml
+++ b/examples/controls/gallery/pages/ScrollIndicatorPage.qml
@@ -59,6 +59,7 @@ Flickable {
             Label {
                 width: parent.width
                 wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
                 text: "ScrollIndicator is a non-interactive indicator that indicates the current scroll position. "
                     + "A scroll indicator can be either vertical or horizontal, and can be attached to any Flickable, "
                     + "such as ListView and GridView."
diff --git a/examples/controls/gallery/pages/SliderPage.qml b/examples/controls/gallery/pages/SliderPage.qml
index bbe09a3e..550ccec9 100644
--- a/examples/controls/gallery/pages/SliderPage.qml
+++ b/examples/controls/gallery/pages/SliderPage.qml
@@ -44,7 +44,7 @@ import Qt.labs.controls 1.0
 Pane {
     id: pane
 
-    readonly property int itemWidth: Math.max(slider.implicitWidth, pane.availableWidth / 3)
+    readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, pane.availableWidth / 3))
 
     Column {
         spacing: 40
@@ -53,6 +53,7 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "Slider is used to select a value by sliding a handle along a track."
         }
 
diff --git a/examples/controls/gallery/pages/SpinBoxPage.qml b/examples/controls/gallery/pages/SpinBoxPage.qml
index 325b6ce7..c309ce8e 100644
--- a/examples/controls/gallery/pages/SpinBoxPage.qml
+++ b/examples/controls/gallery/pages/SpinBoxPage.qml
@@ -44,7 +44,7 @@ import Qt.labs.controls 1.0
 Pane {
     id: pane
 
-    readonly property int itemWidth: Math.max(box.implicitWidth, pane.availableWidth / 3)
+    readonly property int itemWidth: Math.max(box.implicitWidth, Math.min(box.implicitWidth * 2, pane.availableWidth / 3))
 
     Column {
         spacing: 40
@@ -53,6 +53,7 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "SpinBox allows the user to choose an integer value by clicking the up or down indicator buttons, "
                 + "by pressing up or down on the keyboard, or by entering a text value in the input field."
         }
diff --git a/examples/controls/gallery/pages/StackViewPage.qml b/examples/controls/gallery/pages/StackViewPage.qml
index d8ac093e..42e1df43 100644
--- a/examples/controls/gallery/pages/StackViewPage.qml
+++ b/examples/controls/gallery/pages/StackViewPage.qml
@@ -59,6 +59,7 @@ StackView {
                 Label {
                     width: parent.width
                     wrapMode: Label.Wrap
+                    horizontalAlignment: Qt.AlignHCenter
                     text: "StackView provides a stack-based navigation model."
                 }
 
@@ -66,14 +67,14 @@ StackView {
                     id: button
                     text: "Push"
                     anchors.horizontalCenter: parent.horizontalCenter
-                    width: Math.max(button.implicitWidth, pane.availableWidth / 3)
+                    width: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
                     onClicked: stackView.push(page)
                 }
 
                 Button {
                     text: "Pop"
                     enabled: stackView.depth > 1
-                    width: Math.max(button.implicitWidth, pane.availableWidth / 3)
+                    width: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
                     anchors.horizontalCenter: parent.horizontalCenter
                     onClicked: stackView.pop()
                 }
diff --git a/examples/controls/gallery/pages/SwipeViewPage.qml b/examples/controls/gallery/pages/SwipeViewPage.qml
index 9036a22a..29739451 100644
--- a/examples/controls/gallery/pages/SwipeViewPage.qml
+++ b/examples/controls/gallery/pages/SwipeViewPage.qml
@@ -63,6 +63,7 @@ Pane {
                     Label {
                         width: parent.width
                         wrapMode: Label.Wrap
+                        horizontalAlignment: Qt.AlignHCenter
                         text: "SwipeView provides a swipe-based navigation model."
                     }
 
diff --git a/examples/controls/gallery/pages/SwitchPage.qml b/examples/controls/gallery/pages/SwitchPage.qml
index 72bd93e6..ebb4f2ee 100644
--- a/examples/controls/gallery/pages/SwitchPage.qml
+++ b/examples/controls/gallery/pages/SwitchPage.qml
@@ -45,8 +45,6 @@ Flickable {
     id: flickable
     contentHeight: pane.height
 
-    readonly property int itemWidth: Math.max(swtch.implicitWidth, pane.availableWidth / 3)
-
     Pane {
         id: pane
         width: parent.width
@@ -59,6 +57,7 @@ Flickable {
             Label {
                 width: parent.width
                 wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
                 text: "Switch is an option button that can be dragged or toggled on or off. "
                     + "Switches are typically used to select between two states."
             }
@@ -69,18 +68,14 @@ Flickable {
 
                 Switch {
                     text: "First"
-                    width: itemWidth
                 }
                 Switch {
-                    id: swtch
                     text: "Second"
                     checked: true
-                    width: itemWidth
                 }
                 Switch {
                     text: "Third"
                     enabled: false
-                    width: itemWidth
                 }
             }
         }
diff --git a/examples/controls/gallery/pages/TabBarPage.qml b/examples/controls/gallery/pages/TabBarPage.qml
index 6cf2c584..0ab4a100 100644
--- a/examples/controls/gallery/pages/TabBarPage.qml
+++ b/examples/controls/gallery/pages/TabBarPage.qml
@@ -65,6 +65,7 @@ Pane {
                     Label {
                         width: parent.width
                         wrapMode: Label.Wrap
+                        horizontalAlignment: Qt.AlignHCenter
                         text: "TabBar provides a tab-based navigation model."
                     }
 
diff --git a/examples/controls/gallery/pages/TextAreaPage.qml b/examples/controls/gallery/pages/TextAreaPage.qml
index f69e0cd5..8ca759c8 100644
--- a/examples/controls/gallery/pages/TextAreaPage.qml
+++ b/examples/controls/gallery/pages/TextAreaPage.qml
@@ -49,11 +49,24 @@ Flickable {
         id: pane
         width: parent.width
 
-        TextArea {
+        Column {
+            spacing: 40
             anchors.fill: parent
 
-            wrapMode: TextArea.Wrap
-            text: "TextArea is a multi-line text editor."
+            Label {
+                width: parent.width
+                wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
+                text: "TextArea is a multi-line text editor."
+            }
+
+            TextArea {
+                width: Math.max(implicitWidth, Math.min(implicitWidth * 3, pane.availableWidth / 3))
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                wrapMode: TextArea.Wrap
+                text: "TextArea\n...\n...\n..."
+            }
         }
     }
 
diff --git a/examples/controls/gallery/pages/TextFieldPage.qml b/examples/controls/gallery/pages/TextFieldPage.qml
index ed4799bb..761d2fa6 100644
--- a/examples/controls/gallery/pages/TextFieldPage.qml
+++ b/examples/controls/gallery/pages/TextFieldPage.qml
@@ -44,8 +44,6 @@ import Qt.labs.controls 1.0
 Pane {
     id: pane
 
-    readonly property int itemWidth: Math.max(field.implicitWidth, pane.availableWidth / 3)
-
     Column {
         spacing: 40
         anchors.fill: parent
@@ -53,13 +51,14 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "TextField is a single-line text editor."
         }
 
         TextField {
             id: field
             placeholderText: "TextField"
-            width: itemWidth
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
             anchors.horizontalCenter: parent.horizontalCenter
         }
     }
diff --git a/examples/controls/gallery/pages/TumblerPage.qml b/examples/controls/gallery/pages/TumblerPage.qml
index 205ae5aa..b15407e5 100644
--- a/examples/controls/gallery/pages/TumblerPage.qml
+++ b/examples/controls/gallery/pages/TumblerPage.qml
@@ -51,6 +51,7 @@ Pane {
         Label {
             width: parent.width
             wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
             text: "Tumbler is used to select a value by spinning a wheel."
         }