diff options
author | Shawn Rutledge <shawn.rutledge@digia.com> | 2014-10-16 17:28:09 +0200 |
---|---|---|
committer | Shawn Rutledge <shawn.rutledge@digia.com> | 2014-10-23 11:13:08 +0200 |
commit | 511a9b521f5c025bb513ac8eecaeff5d41bba7e8 (patch) | |
tree | 09e74003ec5e11b1da5567031efd8c65f5518e96 | |
parent | 11ff483c564b8a2f5b3ef5e28230fbfc742a2cd2 (diff) | |
download | qtquickcontrols-511a9b521f5c025bb513ac8eecaeff5d41bba7e8.tar.gz |
QtQuick.Dialogs examples: use controls and layouts; visual tweaks
Make tab and button labels shorter so that they fit even on very-small-
screen devices (like iOS).
Make the content of some tabs scrollable.
Background color of the Font tab matches the others.
Use RowLayout to make baseline alignment of checkboxes and associated
text fields possible.
Use ColumnLayout because it works better inside a ScrollView.
Use Label instead of Text so that the renderType is consistent.
Change-Id: Ie2d07153532f35d108a0b6ad0bb4f10326f79d24
Task-number: QTBUG-41999
Reviewed-by: Jan Arve Sæther <jan-arve.saether@theqtcompany.com>
6 files changed, 301 insertions, 284 deletions
diff --git a/examples/quick/dialogs/systemdialogs/ColorDialogs.qml b/examples/quick/dialogs/systemdialogs/ColorDialogs.qml index c44284df..8b26e081 100644 --- a/examples/quick/dialogs/systemdialogs/ColorDialogs.qml +++ b/examples/quick/dialogs/systemdialogs/ColorDialogs.qml @@ -65,7 +65,7 @@ Item { anchors.fill: parent anchors.margins: 12 spacing: 8 - Text { + Label { font.bold: true text: "Color dialog properties:" } @@ -99,9 +99,8 @@ Item { onClicked: colorDialog.open() } } - Text { + Label { id: colorLabel - color: palette.windowText text: "<b>current color:</b> " + colorDialog.color anchors.verticalCenter: parent.verticalCenter } diff --git a/examples/quick/dialogs/systemdialogs/CustomDialogs.qml b/examples/quick/dialogs/systemdialogs/CustomDialogs.qml index 43515536..90d012e1 100644 --- a/examples/quick/dialogs/systemdialogs/CustomDialogs.qml +++ b/examples/quick/dialogs/systemdialogs/CustomDialogs.qml @@ -67,7 +67,7 @@ Item { onApply: lastChosen.text = "Apply" onReset: lastChosen.text = "Reset" - Text { + Label { text: "Hello world!" } } @@ -91,9 +91,8 @@ Item { ColumnLayout { id: column width: parent ? parent.width : 100 - Text { + Label { text: "<b>What</b> is the average airspeed velocity of an unladen European swallow?" - textFormat: Text.StyledText Layout.columnSpan: 2 Layout.fillWidth: true wrapMode: Text.WordWrap @@ -104,7 +103,7 @@ Item { id: answer onEditingFinished: spinboxDialog.click(StandardButton.Ok) } - Text { + Label { text: "m/s" Layout.alignment: Qt.AlignBaseline | Qt.AlignLeft } @@ -144,7 +143,7 @@ Item { color: "lightskyblue" implicitWidth: 400 implicitHeight: 100 - Text { + Label { text: "Hello blue sky!" color: "navy" anchors.centerIn: parent @@ -156,12 +155,11 @@ Item { } } - Column { + ColumnLayout { anchors.fill: parent anchors.margins: 12 spacing: 8 - Text { - color: palette.windowText + Label { font.bold: true text: "Message dialog properties:" } @@ -170,22 +168,26 @@ Item { text: "Modal" Binding on checked { value: helloDialog.modality != Qt.NonModal } } - CheckBox { - id: customizeTitle - text: "Window Title" - checked: true - width: parent.width + RowLayout { + CheckBox { + id: customizeTitle + text: "Window Title" + Layout.alignment: Qt.AlignBaseline + checked: true + } TextField { id: windowTitleField - anchors.right: parent.right + Layout.alignment: Qt.AlignBaseline + Layout.fillWidth: true text: "Custom Dialog" - width: root.width - customizeTitle.implicitWidth - 30 } } - + Label { + text: "Buttons:" + } Flow { spacing: 8 - width: parent.width + Layout.fillWidth: true property bool updating: false function updateButtons(button, checked) { if (updating) return @@ -289,12 +291,14 @@ Item { Component.onCompleted: updateButtons() } - Text { + Label { id: lastChosen } + Item { Layout.fillHeight: true } } Rectangle { + id: bottomBar anchors { left: parent.left right: parent.right @@ -311,22 +315,22 @@ Item { anchors.leftMargin: 12 width: parent.width Button { - text: "Hello World dialog" + text: "Hello World" anchors.verticalCenter: parent.verticalCenter onClicked: helloDialog.open() } Button { - text: "Input dialog" + text: "Input" anchors.verticalCenter: parent.verticalCenter onClicked: spinboxDialog.open() } Button { - text: "Date picker" + text: "Date" anchors.verticalCenter: parent.verticalCenter onClicked: dateDialog.open() } Button { - text: "Buttonless marginless dialog" + text: "No buttons or margins" anchors.verticalCenter: parent.verticalCenter onClicked: filledDialog.open() } diff --git a/examples/quick/dialogs/systemdialogs/FileDialogs.qml b/examples/quick/dialogs/systemdialogs/FileDialogs.qml index 79a58b98..9f50abcd 100644 --- a/examples/quick/dialogs/systemdialogs/FileDialogs.qml +++ b/examples/quick/dialogs/systemdialogs/FileDialogs.qml @@ -41,6 +41,7 @@ import QtQuick 2.2 import QtQuick.Controls 1.2 import QtQuick.Dialogs 1.1 +import QtQuick.Layouts 1.1 import QtQuick.Window 2.0 Item { @@ -72,83 +73,79 @@ Item { } //! [filedialog] - Column { - anchors.fill: parent - anchors.margins: 12 - spacing: 8 - Text { - color: palette.windowText - font.bold: true - text: "File dialog properties:" - } - CheckBox { - id: fileDialogModal - text: "Modal" - checked: true - Binding on checked { value: fileDialog.modality != Qt.NonModal } - } - CheckBox { - id: fileDialogSelectFolder - text: "Select Folder" - Binding on checked { value: fileDialog.selectFolder } - } - CheckBox { - id: fileDialogSelectExisting - text: "Select Existing Files" - checked: true - Binding on checked { value: fileDialog.selectExisting } - } - CheckBox { - id: fileDialogSelectMultiple - text: "Select Multiple Files" - Binding on checked { value: fileDialog.selectMultiple } - } - CheckBox { - id: fileDialogOpenFiles - text: "Open Files After Accepting" - } - CheckBox { - id: fileDialogSidebarVisible - text: "Show Sidebar" - checked: fileDialog.sidebarVisible - Binding on checked { value: fileDialog.sidebarVisible } - } - CheckBox { - id: fileDialogVisible - text: "Visible" - Binding on checked { value: fileDialog.visible } - } - Text { - color: palette.windowText - text: "<b>current view folder:</b> " + fileDialog.folder - } - Text { - color: palette.windowText - text: "<b>name filters:</b> {" + fileDialog.nameFilters + "}" - width: parent.width - wrapMode: Text.Wrap - } - Text { - color: palette.windowText - text: "<b>current filter:</b>" + fileDialog.selectedNameFilter - width: parent.width - wrapMode: Text.Wrap - } - Text { - color: palette.windowText - text: "<b>chosen files:</b> " + fileDialog.fileUrls - width: parent.width - wrapMode: Text.Wrap - } - Text { - color: palette.windowText - text: "<b>chosen single path:</b> " + fileDialog.fileUrl - width: parent.width - wrapMode: Text.Wrap + ScrollView { + id: scrollView + anchors { + left: parent.left + right: parent.right + top: parent.top + bottom: bottomBar.top + leftMargin: 12 + } + ColumnLayout { + spacing: 8 + Item { Layout.preferredHeight: 4 } // padding + Label { + font.bold: true + text: "File dialog properties:" + } + CheckBox { + id: fileDialogModal + text: "Modal" + checked: true + Binding on checked { value: fileDialog.modality != Qt.NonModal } + } + CheckBox { + id: fileDialogSelectFolder + text: "Select Folder" + Binding on checked { value: fileDialog.selectFolder } + } + CheckBox { + id: fileDialogSelectExisting + text: "Select Existing Files" + checked: true + Binding on checked { value: fileDialog.selectExisting } + } + CheckBox { + id: fileDialogSelectMultiple + text: "Select Multiple Files" + Binding on checked { value: fileDialog.selectMultiple } + } + CheckBox { + id: fileDialogOpenFiles + text: "Open Files After Accepting" + } + CheckBox { + id: fileDialogSidebarVisible + text: "Show Sidebar" + checked: fileDialog.sidebarVisible + Binding on checked { value: fileDialog.sidebarVisible } + } + CheckBox { + id: fileDialogVisible + text: "Visible" + Binding on checked { value: fileDialog.visible } + } + Label { + text: "<b>current view folder:</b> " + fileDialog.folder + } + Label { + text: "<b>name filters:</b> {" + fileDialog.nameFilters + "}" + } + Label { + text: "<b>current filter:</b>" + fileDialog.selectedNameFilter + } + Label { + text: "<b>chosen files:</b> " + fileDialog.fileUrls + } + Label { + text: "<b>chosen single path:</b> " + fileDialog.fileUrl + } } } Rectangle { + id: bottomBar anchors { left: parent.left right: parent.right diff --git a/examples/quick/dialogs/systemdialogs/FontDialogs.qml b/examples/quick/dialogs/systemdialogs/FontDialogs.qml index dc8f245b..3b6f86f7 100644 --- a/examples/quick/dialogs/systemdialogs/FontDialogs.qml +++ b/examples/quick/dialogs/systemdialogs/FontDialogs.qml @@ -42,12 +42,11 @@ import QtQuick 2.2 import QtQuick.Controls 1.2 import QtQuick.Dialogs 1.1 -Rectangle { +Item { width: 320 height: 360 SystemPalette { id: palette } clip: true - color: palette.window FontDialog { id: fontDialog @@ -70,7 +69,7 @@ Rectangle { anchors.fill: parent anchors.margins: 12 spacing: 8 - Text { + Label { font.bold: true text: "Font dialog properties:" } @@ -105,12 +104,11 @@ Rectangle { text: "Visible" Binding on checked { value: fontDialog.visible } } - Text { + Label { text: "Current font:" } - Text { + Label { id: fontLabel - color: palette.windowText text: "<b>" + fontDialog.font.family + " - " + fontDialog.font.pointSize + "</b>" MouseArea { anchors.fill: parent diff --git a/examples/quick/dialogs/systemdialogs/MessageDialogs.qml b/examples/quick/dialogs/systemdialogs/MessageDialogs.qml index 1bc9a4b6..208a69d4 100644 --- a/examples/quick/dialogs/systemdialogs/MessageDialogs.qml +++ b/examples/quick/dialogs/systemdialogs/MessageDialogs.qml @@ -41,6 +41,7 @@ import QtQuick 2.2 import QtQuick.Controls 1.2 import QtQuick.Dialogs 1.1 +import QtQuick.Layouts 1.1 import QtQuick.Window 2.0 Item { @@ -72,211 +73,229 @@ Item { } //! [messagedialog] - Column { - anchors.fill: parent - anchors.margins: 12 - spacing: 8 - Text { - color: palette.windowText - font.bold: true - text: "Message dialog properties:" - } - CheckBox { - id: messageDialogModal - text: "Modal" - checked: true - Binding on checked { value: messageDialog.modality != Qt.NonModal } - } - CheckBox { - id: customizeTitle - text: "Window Title" - checked: true - width: parent.width - TextField { - id: windowTitleField - anchors.right: parent.right - width: informativeTextField.width - text: "Alert" - } + ScrollView { + id: scrollView + anchors { + left: parent.left + right: parent.right + top: parent.top + bottom: bottomBar.top + leftMargin: 12 } - Row { + ColumnLayout { spacing: 8 - property bool updating: false - function updateIcon(icon, checked) { - if (updating) return - updating = true - messageDialog.icon = (checked ? icon : StandardIcon.NoIcon) - for (var i = 0; i < children.length; ++i) - if (children[i].icon !== icon) - children[i].checked = false - updating = false + Item { Layout.preferredHeight: 4 } // padding + Label { + font.bold: true + text: "Message dialog properties:" } - CheckBox { - id: iconInformation - text: "Information" - property int icon: StandardIcon.Information - onCheckedChanged: parent.updateIcon(icon, checked) - } - - CheckBox { - id: iconWarning - text: "Warning" + id: messageDialogModal + text: "Modal" checked: true - property int icon: StandardIcon.Warning - onCheckedChanged: parent.updateIcon(icon, checked) - Component.onCompleted: parent.updateIcon(icon, true) + Binding on checked { value: messageDialog.modality != Qt.NonModal } } - - CheckBox { - id: iconCritical - text: "Critical" - property int icon: StandardIcon.Critical - onCheckedChanged: parent.updateIcon(icon, checked) + RowLayout { + CheckBox { + id: customizeTitle + text: "Window Title" + Layout.alignment: Qt.AlignBaseline + checked: true + } + TextField { + id: windowTitleField + Layout.alignment: Qt.AlignBaseline + Layout.fillWidth: true + text: "Alert" + } } + Label { text: "Icon:" } + Flow { + spacing: 8 + Layout.fillWidth: true + property bool updating: false + function updateIcon(icon, checked) { + if (updating) return + updating = true + messageDialog.icon = (checked ? icon : StandardIcon.NoIcon) + for (var i = 0; i < children.length; ++i) + if (children[i].icon !== icon) + children[i].checked = false + updating = false + } - CheckBox { - id: iconQuestion - text: "Question" - property int icon: StandardIcon.Question - onCheckedChanged: parent.updateIcon(icon, checked) - } - } + CheckBox { + id: iconInformation + text: "Information" + property int icon: StandardIcon.Information + onCheckedChanged: parent.updateIcon(icon, checked) + } - CheckBox { - id: customizeText - text: "Primary Text" - checked: true - width: parent.width - TextField { - id: textField - anchors.right: parent.right - width: informativeTextField.width - text: "Attention Please" + CheckBox { + id: iconWarning + text: "Warning" + checked: true + property int icon: StandardIcon.Warning + onCheckedChanged: parent.updateIcon(icon, checked) + Component.onCompleted: parent.updateIcon(icon, true) + } + + CheckBox { + id: iconCritical + text: "Critical" + property int icon: StandardIcon.Critical + onCheckedChanged: parent.updateIcon(icon, checked) + } + + CheckBox { + id: iconQuestion + text: "Question" + property int icon: StandardIcon.Question + onCheckedChanged: parent.updateIcon(icon, checked) + } } - } - CheckBox { - id: customizeInformativeText - text: "Informative Text" - checked: true - width: parent.width - TextField { - id: informativeTextField - anchors.right: parent.right - width: root.width - customizeInformativeText.implicitWidth - 20 - text: "Be alert!" + + RowLayout { + CheckBox { + id: customizeText + text: "Primary Text" + Layout.alignment: Qt.AlignBaseline + checked: true + } + TextField { + id: textField + Layout.alignment: Qt.AlignBaseline + Layout.fillWidth: true + text: "Attention Please" + } } - } - Text { - text: "Buttons:" - } - Flow { - spacing: 8 - width: parent.width - property bool updating: false - function updateButtons(button, checked) { - if (updating) return - updating = true - var buttons = 0 - for (var i = 0; i < children.length; ++i) - if (children[i].checked) - buttons |= children[i].button - if (!buttons) - buttons = StandardButton.Ok - messageDialog.standardButtons = buttons - updating = false + RowLayout { + CheckBox { + id: customizeInformativeText + text: "Informative Text" + Layout.alignment: Qt.AlignBaseline + checked: true + } + TextField { + id: informativeTextField + Layout.alignment: Qt.AlignBaseline + Layout.fillWidth: true + text: "Be alert!" + } } + Label { text: "Buttons:" } + Flow { + spacing: 8 + Layout.fillWidth: true + Layout.preferredWidth: root.width - 30 + property bool updating: false + function updateButtons(button, checked) { + if (updating) return + updating = true + var buttons = 0 + for (var i = 0; i < children.length; ++i) + if (children[i].checked) + buttons |= children[i].button + if (!buttons) + buttons = StandardButton.Ok + messageDialog.standardButtons = buttons + updating = false + } - CheckBox { - text: "Help" - property int button: StandardButton.Help - onCheckedChanged: parent.updateButtons(button, checked) - } + CheckBox { + text: "Help" + property int button: StandardButton.Help + onCheckedChanged: parent.updateButtons(button, checked) + } - CheckBox { - text: "Abort" - property int button: StandardButton.Abort - onCheckedChanged: parent.updateButtons(button, checked) - } + CheckBox { + text: "Abort" + property int button: StandardButton.Abort + onCheckedChanged: parent.updateButtons(button, checked) + } - CheckBox { - text: "Close" - property int button: StandardButton.Close - onCheckedChanged: parent.updateButtons(button, checked) - } + CheckBox { + text: "Close" + property int button: StandardButton.Close + onCheckedChanged: parent.updateButtons(button, checked) + } - CheckBox { - text: "Cancel" - property int button: StandardButton.Cancel - onCheckedChanged: parent.updateButtons(button, checked) - } + CheckBox { + text: "Cancel" + property int button: StandardButton.Cancel + onCheckedChanged: parent.updateButtons(button, checked) + } - CheckBox { - text: "NoToAll" - property int button: StandardButton.NoToAll - onCheckedChanged: parent.updateButtons(button, checked) - } + CheckBox { + text: "NoToAll" + property int button: StandardButton.NoToAll + onCheckedChanged: parent.updateButtons(button, checked) + } - CheckBox { - text: "No" - property int button: StandardButton.No - onCheckedChanged: parent.updateButtons(button, checked) - } + CheckBox { + text: "No" + property int button: StandardButton.No + onCheckedChanged: parent.updateButtons(button, checked) + } - CheckBox { - text: "YesToAll" - property int button: StandardButton.YesToAll - onCheckedChanged: parent.updateButtons(button, checked) - } + CheckBox { + text: "YesToAll" + property int button: StandardButton.YesToAll + onCheckedChanged: parent.updateButtons(button, checked) + } - CheckBox { - text: "Yes" - property int button: StandardButton.Yes - onCheckedChanged: parent.updateButtons(button, checked) - } + CheckBox { + text: "Yes" + property int button: StandardButton.Yes + onCheckedChanged: parent.updateButtons(button, checked) + } - CheckBox { - text: "Ignore" - property int button: StandardButton.Ignore - onCheckedChanged: parent.updateButtons(button, checked) - } + CheckBox { + text: "Ignore" + property int button: StandardButton.Ignore + onCheckedChanged: parent.updateButtons(button, checked) + } - CheckBox { - text: "Retry" - property int button: StandardButton.Retry - onCheckedChanged: parent.updateButtons(button, checked) - } + CheckBox { + text: "Retry" + property int button: StandardButton.Retry + onCheckedChanged: parent.updateButtons(button, checked) + } + CheckBox { + text: "OK" + checked: true + property int button: StandardButton.Ok + onCheckedChanged: parent.updateButtons(button, checked) + } + } + RowLayout { + CheckBox { + id: customizeDetailedText + text: "Detailed Text" + Layout.alignment: Qt.AlignBaseline + checked: true + } + TextField { + id: detailedTextField + Layout.alignment: Qt.AlignBaseline + Layout.fillWidth: true + text: "The world needs more lerts." + } + } CheckBox { - text: "OK" - checked: true - property int button: StandardButton.Ok - onCheckedChanged: parent.updateButtons(button, checked) + id: messageDialogVisible + text: "Visible" + Binding on checked { value: messageDialog.visible } } - } - CheckBox { - id: customizeDetailedText - text: "Detailed Text" - checked: true - width: parent.width - TextField { - id: detailedTextField - anchors.right: parent.right - width: informativeTextField.width - text: "The world needs more lerts." + Label { + id: lastChosen } } - CheckBox { - id: messageDialogVisible - text: "Visible" - Binding on checked { value: messageDialog.visible } - } - Text { - id: lastChosen - } } Rectangle { + id: bottomBar anchors { left: parent.left right: parent.right diff --git a/examples/quick/dialogs/systemdialogs/systemdialogs.qml b/examples/quick/dialogs/systemdialogs/systemdialogs.qml index 0c30d9e5..5e8cb786 100644 --- a/examples/quick/dialogs/systemdialogs/systemdialogs.qml +++ b/examples/quick/dialogs/systemdialogs/systemdialogs.qml @@ -52,23 +52,23 @@ ApplicationWindow { anchors.margins: 8 Tab { id: controlPage - title: "File Dialog" + title: "File" FileDialogs { } } Tab { - title: "Color Dialog" + title: "Color" ColorDialogs { } } Tab { - title: "Font Dialog" + title: "Font" FontDialogs { anchors.fill: parent } } Tab { - title: "Message Dialog" + title: "Message" MessageDialogs { anchors.fill:parent } } Tab { - title: "Custom Dialogs" + title: "Custom" CustomDialogs { anchors.fill:parent } } } |