From 60c7f378577b0b6606000a95b1a609942904dddc Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Fri, 18 Dec 2015 16:32:00 +0100 Subject: Gallery: improve the behavior in landscape Change-Id: Ia5acec45da1c94673641004eca73491b587db054 Reviewed-by: J-P Nurmi --- examples/controls/gallery/gallery.qml | 6 +++--- examples/controls/gallery/pages/BusyIndicatorPage.qml | 1 + examples/controls/gallery/pages/ButtonPage.qml | 3 ++- examples/controls/gallery/pages/CheckBoxPage.qml | 7 +------ examples/controls/gallery/pages/ComboBoxPage.qml | 3 ++- examples/controls/gallery/pages/DialPage.qml | 1 + examples/controls/gallery/pages/DrawerPage.qml | 3 ++- examples/controls/gallery/pages/FramePage.qml | 8 ++++++-- examples/controls/gallery/pages/GroupBoxPage.qml | 8 ++++++-- examples/controls/gallery/pages/MenuPage.qml | 3 ++- examples/controls/gallery/pages/PageIndicatorPage.qml | 1 + examples/controls/gallery/pages/PopupPage.qml | 3 ++- examples/controls/gallery/pages/ProgressBarPage.qml | 1 + examples/controls/gallery/pages/RadioButtonPage.qml | 7 +------ examples/controls/gallery/pages/RangeSliderPage.qml | 3 ++- examples/controls/gallery/pages/ScrollBarPage.qml | 1 + .../controls/gallery/pages/ScrollIndicatorPage.qml | 1 + examples/controls/gallery/pages/SliderPage.qml | 3 ++- examples/controls/gallery/pages/SpinBoxPage.qml | 3 ++- examples/controls/gallery/pages/StackViewPage.qml | 5 +++-- examples/controls/gallery/pages/SwipeViewPage.qml | 1 + examples/controls/gallery/pages/SwitchPage.qml | 7 +------ examples/controls/gallery/pages/TabBarPage.qml | 1 + examples/controls/gallery/pages/TextAreaPage.qml | 19 ++++++++++++++++--- examples/controls/gallery/pages/TextFieldPage.qml | 5 ++--- examples/controls/gallery/pages/TumblerPage.qml | 1 + 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." } -- cgit v1.2.3