diff options
author | J-P Nurmi <jpnurmi@qt.io> | 2016-09-29 07:55:30 +0200 |
---|---|---|
committer | J-P Nurmi <jpnurmi@qt.io> | 2016-09-29 13:15:09 +0000 |
commit | 5d2c242d2d3fd6af724514ee00a6440864be0ade (patch) | |
tree | 3e8ffcafda4348bbf77c7682d16a2d1829331f8d /examples/quickcontrols2/gallery/pages | |
parent | c56b68bd76a0a608824054e09ec6e9ab34295188 (diff) |
Gallery: make most pages scrollable
Add a ScrollablePage type, which provides the scrolling behavior. The
available space can be quite limited, especially in landscape on low
resolution devices.
Change-Id: I4d2911aa6bfa6d8573a1385b5a06ef2cf3e2e548
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Diffstat (limited to 'examples/quickcontrols2/gallery/pages')
21 files changed, 226 insertions, 209 deletions
diff --git a/examples/quickcontrols2/gallery/pages/BusyIndicatorPage.qml b/examples/quickcontrols2/gallery/pages/BusyIndicatorPage.qml index ec73ac361d..2695055562 100644 --- a/examples/quickcontrols2/gallery/pages/BusyIndicatorPage.qml +++ b/examples/quickcontrols2/gallery/pages/BusyIndicatorPage.qml @@ -41,12 +41,12 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page Column { spacing: 40 - anchors.fill: parent + width: parent.width Label { width: parent.width @@ -57,7 +57,7 @@ Pane { } BusyIndicator { - readonly property int size: Math.min(pane.availableWidth, pane.availableHeight) / 5 + readonly property int size: Math.min(page.availableWidth, page.availableHeight) / 5 width: size height: size anchors.horizontalCenter: parent.horizontalCenter diff --git a/examples/quickcontrols2/gallery/pages/ButtonPage.qml b/examples/quickcontrols2/gallery/pages/ButtonPage.qml index da817ebacd..add29e83cb 100644 --- a/examples/quickcontrols2/gallery/pages/ButtonPage.qml +++ b/examples/quickcontrols2/gallery/pages/ButtonPage.qml @@ -41,51 +41,42 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Flickable { - id: flickable - contentHeight: pane.height +ScrollablePage { + id: page - readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3)) + readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, page.availableWidth / 3)) - Pane { - id: pane + Column { + spacing: 40 width: parent.width - Column { - id: column - spacing: 40 + 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." + } - 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." - } - - Column { - spacing: 20 - anchors.horizontalCenter: parent.horizontalCenter + Column { + spacing: 20 + anchors.horizontalCenter: parent.horizontalCenter - Button { - text: "First" - width: itemWidth - } - Button { - id: button - text: "Second" - width: itemWidth - highlighted: true - } - Button { - text: "Third" - enabled: false - width: itemWidth - } + Button { + text: "First" + width: itemWidth + } + Button { + id: button + text: "Second" + width: itemWidth + highlighted: true + } + Button { + text: "Third" + enabled: false + width: itemWidth } } } - - ScrollIndicator.vertical: ScrollIndicator { } } diff --git a/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml b/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml index 3e08555b4a..ee8b14dc4d 100644 --- a/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml +++ b/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml @@ -41,46 +41,37 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Flickable { - id: flickable - contentHeight: pane.height +ScrollablePage { + id: page - Pane { - id: pane + Column { + spacing: 40 width: parent.width - Column { - id: column - spacing: 40 + 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." + } - 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." - } - - Column { - spacing: 20 - anchors.horizontalCenter: parent.horizontalCenter + Column { + spacing: 20 + anchors.horizontalCenter: parent.horizontalCenter - CheckBox { - text: "First" - checked: true - } - CheckBox { - text: "Second" - } - CheckBox { - text: "Third" - checked: true - enabled: false - } + CheckBox { + text: "First" + checked: true + } + CheckBox { + text: "Second" + } + CheckBox { + text: "Third" + checked: true + enabled: false } } } - - ScrollIndicator.vertical: ScrollIndicator { } } diff --git a/examples/quickcontrols2/gallery/pages/ComboBoxPage.qml b/examples/quickcontrols2/gallery/pages/ComboBoxPage.qml index 58c5b97da4..66fb10dd6e 100644 --- a/examples/quickcontrols2/gallery/pages/ComboBoxPage.qml +++ b/examples/quickcontrols2/gallery/pages/ComboBoxPage.qml @@ -41,8 +41,8 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page Column { spacing: 40 @@ -58,7 +58,7 @@ Pane { ComboBox { model: ["First", "Second", "Third"] - width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3)) + width: Math.max(implicitWidth, Math.min(implicitWidth * 2, page.availableWidth / 3)) anchors.horizontalCenter: parent.horizontalCenter } } diff --git a/examples/quickcontrols2/gallery/pages/DialPage.qml b/examples/quickcontrols2/gallery/pages/DialPage.qml index bac6fb478b..9f07c11ed0 100644 --- a/examples/quickcontrols2/gallery/pages/DialPage.qml +++ b/examples/quickcontrols2/gallery/pages/DialPage.qml @@ -41,8 +41,8 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page Column { spacing: 40 diff --git a/examples/quickcontrols2/gallery/pages/FramePage.qml b/examples/quickcontrols2/gallery/pages/FramePage.qml index 1979007ca3..51b640c161 100644 --- a/examples/quickcontrols2/gallery/pages/FramePage.qml +++ b/examples/quickcontrols2/gallery/pages/FramePage.qml @@ -41,14 +41,14 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page - readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, pane.availableWidth / 3 * 2)) + readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, page.availableWidth / 3 * 2)) Column { spacing: 40 - anchors.fill: parent + width: parent.width Label { width: parent.width @@ -62,7 +62,7 @@ Pane { Column { spacing: 20 - width: pane.itemWidth + width: page.itemWidth RadioButton { text: "First" diff --git a/examples/quickcontrols2/gallery/pages/GroupBoxPage.qml b/examples/quickcontrols2/gallery/pages/GroupBoxPage.qml index 194c14b4ce..b0db537427 100644 --- a/examples/quickcontrols2/gallery/pages/GroupBoxPage.qml +++ b/examples/quickcontrols2/gallery/pages/GroupBoxPage.qml @@ -41,14 +41,14 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page - readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, pane.availableWidth / 3 * 2)) + readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, page.availableWidth / 3 * 2)) Column { spacing: 40 - anchors.fill: parent + width: parent.width Label { width: parent.width @@ -63,7 +63,7 @@ Pane { Column { spacing: 20 - width: pane.itemWidth + width: page.itemWidth RadioButton { text: "First" diff --git a/examples/quickcontrols2/gallery/pages/MenuPage.qml b/examples/quickcontrols2/gallery/pages/MenuPage.qml index ec1c88cd01..1e975bd020 100644 --- a/examples/quickcontrols2/gallery/pages/MenuPage.qml +++ b/examples/quickcontrols2/gallery/pages/MenuPage.qml @@ -41,12 +41,12 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page Column { spacing: 40 - anchors.fill: parent + width: parent.width Label { width: parent.width @@ -59,7 +59,7 @@ Pane { id: button text: "Open" anchors.horizontalCenter: parent.horizontalCenter - width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3)) + width: Math.max(implicitWidth, Math.min(implicitWidth * 2, page.availableWidth / 3)) onClicked: optionsMenu.open() } diff --git a/examples/quickcontrols2/gallery/pages/PageIndicatorPage.qml b/examples/quickcontrols2/gallery/pages/PageIndicatorPage.qml index 8dfd972537..e7f7e251b7 100644 --- a/examples/quickcontrols2/gallery/pages/PageIndicatorPage.qml +++ b/examples/quickcontrols2/gallery/pages/PageIndicatorPage.qml @@ -41,12 +41,12 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page Column { spacing: 40 - anchors.fill: parent + width: parent.width Label { width: parent.width diff --git a/examples/quickcontrols2/gallery/pages/PopupPage.qml b/examples/quickcontrols2/gallery/pages/PopupPage.qml index 5a70c61708..66c4614347 100644 --- a/examples/quickcontrols2/gallery/pages/PopupPage.qml +++ b/examples/quickcontrols2/gallery/pages/PopupPage.qml @@ -41,12 +41,12 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page Column { spacing: 40 - anchors.fill: parent + width: parent.width Label { width: parent.width @@ -60,7 +60,7 @@ Pane { id: button text: "Open" anchors.horizontalCenter: parent.horizontalCenter - width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3)) + width: Math.max(implicitWidth, Math.min(implicitWidth * 2, page.availableWidth / 3)) onClicked: settingsPopup.open() } diff --git a/examples/quickcontrols2/gallery/pages/ProgressBarPage.qml b/examples/quickcontrols2/gallery/pages/ProgressBarPage.qml index 901cddd852..92f26dd07d 100644 --- a/examples/quickcontrols2/gallery/pages/ProgressBarPage.qml +++ b/examples/quickcontrols2/gallery/pages/ProgressBarPage.qml @@ -41,14 +41,14 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page - readonly property int itemWidth: Math.max(bar.implicitWidth, pane.availableWidth / 3) + readonly property int itemWidth: Math.max(bar.implicitWidth, page.availableWidth / 3) Column { spacing: 40 - anchors.fill: parent + width: parent.width Label { width: parent.width diff --git a/examples/quickcontrols2/gallery/pages/RadioButtonPage.qml b/examples/quickcontrols2/gallery/pages/RadioButtonPage.qml index c57c7baf82..0cc1f0bd24 100644 --- a/examples/quickcontrols2/gallery/pages/RadioButtonPage.qml +++ b/examples/quickcontrols2/gallery/pages/RadioButtonPage.qml @@ -41,45 +41,36 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Flickable { - id: flickable - contentHeight: pane.height +ScrollablePage { + id: page - Pane { - id: pane + Column { + spacing: 40 width: parent.width - Column { - id: column - spacing: 40 + 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." + } - 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." - } - - Column { - spacing: 20 - anchors.horizontalCenter: parent.horizontalCenter + Column { + spacing: 20 + anchors.horizontalCenter: parent.horizontalCenter - RadioButton { - text: "First" - } - RadioButton { - text: "Second" - checked: true - } - RadioButton { - text: "Third" - enabled: false - } + RadioButton { + text: "First" + } + RadioButton { + text: "Second" + checked: true + } + RadioButton { + text: "Third" + enabled: false } } } - - ScrollIndicator.vertical: ScrollIndicator { } } diff --git a/examples/quickcontrols2/gallery/pages/RangeSliderPage.qml b/examples/quickcontrols2/gallery/pages/RangeSliderPage.qml index 5a73c09d13..62cbeb8803 100644 --- a/examples/quickcontrols2/gallery/pages/RangeSliderPage.qml +++ b/examples/quickcontrols2/gallery/pages/RangeSliderPage.qml @@ -41,14 +41,14 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page - readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, pane.availableWidth / 3)) + readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, page.availableWidth / 3)) Column { spacing: 40 - anchors.fill: parent + width: parent.width Label { width: parent.width diff --git a/examples/quickcontrols2/gallery/pages/ScrollablePage.qml b/examples/quickcontrols2/gallery/pages/ScrollablePage.qml new file mode 100644 index 0000000000..2a0f1165c5 --- /dev/null +++ b/examples/quickcontrols2/gallery/pages/ScrollablePage.qml @@ -0,0 +1,61 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +Page { + id: page + + default property alias content: pane.contentItem + + Flickable { + anchors.fill: parent + contentHeight: pane.implicitHeight + flickableDirection: Flickable.AutoFlickIfNeeded + + Pane { + id: pane + width: parent.width + } + + ScrollIndicator.vertical: ScrollIndicator { } + } +} diff --git a/examples/quickcontrols2/gallery/pages/SliderPage.qml b/examples/quickcontrols2/gallery/pages/SliderPage.qml index 43da420968..d9853c22d0 100644 --- a/examples/quickcontrols2/gallery/pages/SliderPage.qml +++ b/examples/quickcontrols2/gallery/pages/SliderPage.qml @@ -41,14 +41,14 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page - readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, pane.availableWidth / 3)) + readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, page.availableWidth / 3)) Column { spacing: 40 - anchors.fill: parent + width: parent.width Label { width: parent.width diff --git a/examples/quickcontrols2/gallery/pages/SpinBoxPage.qml b/examples/quickcontrols2/gallery/pages/SpinBoxPage.qml index febc869a85..2b3664cf0c 100644 --- a/examples/quickcontrols2/gallery/pages/SpinBoxPage.qml +++ b/examples/quickcontrols2/gallery/pages/SpinBoxPage.qml @@ -41,14 +41,14 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page readonly property int itemWidth: Math.max(box.implicitWidth, Math.min(box.implicitWidth * 2, pane.availableWidth / 3)) Column { spacing: 40 - anchors.fill: parent + width: parent.width Label { width: parent.width diff --git a/examples/quickcontrols2/gallery/pages/SwitchPage.qml b/examples/quickcontrols2/gallery/pages/SwitchPage.qml index f69a1409ed..1315268db4 100644 --- a/examples/quickcontrols2/gallery/pages/SwitchPage.qml +++ b/examples/quickcontrols2/gallery/pages/SwitchPage.qml @@ -41,45 +41,36 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Flickable { - id: flickable - contentHeight: pane.height +ScrollablePage { + id: page - Pane { - id: pane + Column { + spacing: 40 width: parent.width - Column { - id: column - spacing: 40 + 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." + } - 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." - } - - Column { - spacing: 20 - anchors.horizontalCenter: parent.horizontalCenter + Column { + spacing: 20 + anchors.horizontalCenter: parent.horizontalCenter - Switch { - text: "First" - } - Switch { - text: "Second" - checked: true - } - Switch { - text: "Third" - enabled: false - } + Switch { + text: "First" + } + Switch { + text: "Second" + checked: true + } + Switch { + text: "Third" + enabled: false } } } - - ScrollIndicator.vertical: ScrollIndicator { } } diff --git a/examples/quickcontrols2/gallery/pages/TextAreaPage.qml b/examples/quickcontrols2/gallery/pages/TextAreaPage.qml index 733ac24bcd..ca28e2b748 100644 --- a/examples/quickcontrols2/gallery/pages/TextAreaPage.qml +++ b/examples/quickcontrols2/gallery/pages/TextAreaPage.qml @@ -41,34 +41,26 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Flickable { - id: flickable - contentHeight: pane.height +ScrollablePage { + id: page - Pane { - id: pane + Column { + spacing: 40 width: parent.width - Column { - spacing: 40 - anchors.fill: parent - - Label { - width: parent.width - wrapMode: Label.Wrap - horizontalAlignment: Qt.AlignHCenter - 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 + TextArea { + width: Math.max(implicitWidth, Math.min(implicitWidth * 3, pane.availableWidth / 3)) + anchors.horizontalCenter: parent.horizontalCenter - wrapMode: TextArea.Wrap - text: "TextArea\n...\n...\n..." - } + wrapMode: TextArea.Wrap + text: "TextArea\n...\n...\n..." } } - - ScrollIndicator.vertical: ScrollIndicator { } } diff --git a/examples/quickcontrols2/gallery/pages/TextFieldPage.qml b/examples/quickcontrols2/gallery/pages/TextFieldPage.qml index cbae30cdf1..9092e10dfd 100644 --- a/examples/quickcontrols2/gallery/pages/TextFieldPage.qml +++ b/examples/quickcontrols2/gallery/pages/TextFieldPage.qml @@ -41,12 +41,12 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page Column { spacing: 40 - anchors.fill: parent + width: parent.width Label { width: parent.width diff --git a/examples/quickcontrols2/gallery/pages/ToolTipPage.qml b/examples/quickcontrols2/gallery/pages/ToolTipPage.qml index 06a5fbf97e..e0f769ebb3 100644 --- a/examples/quickcontrols2/gallery/pages/ToolTipPage.qml +++ b/examples/quickcontrols2/gallery/pages/ToolTipPage.qml @@ -41,8 +41,8 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page Column { spacing: 40 diff --git a/examples/quickcontrols2/gallery/pages/TumblerPage.qml b/examples/quickcontrols2/gallery/pages/TumblerPage.qml index ff295b4384..d12cc99984 100644 --- a/examples/quickcontrols2/gallery/pages/TumblerPage.qml +++ b/examples/quickcontrols2/gallery/pages/TumblerPage.qml @@ -41,8 +41,8 @@ import QtQuick 2.6 import QtQuick.Controls 2.0 -Pane { - id: pane +ScrollablePage { + id: page Column { spacing: 40 |