summaryrefslogtreecommitdiffstats
path: root/examples/quick/dialogs/systemdialogs/MessageDialogs.qml
diff options
context:
space:
mode:
authorShawn Rutledge <shawn.rutledge@digia.com>2014-10-16 17:28:09 +0200
committerShawn Rutledge <shawn.rutledge@digia.com>2014-10-23 11:13:08 +0200
commit511a9b521f5c025bb513ac8eecaeff5d41bba7e8 (patch)
tree09e74003ec5e11b1da5567031efd8c65f5518e96 /examples/quick/dialogs/systemdialogs/MessageDialogs.qml
parent11ff483c564b8a2f5b3ef5e28230fbfc742a2cd2 (diff)
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>
Diffstat (limited to 'examples/quick/dialogs/systemdialogs/MessageDialogs.qml')
-rw-r--r--examples/quick/dialogs/systemdialogs/MessageDialogs.qml369
1 files changed, 194 insertions, 175 deletions
diff --git a/examples/quick/dialogs/systemdialogs/MessageDialogs.qml b/examples/quick/dialogs/systemdialogs/MessageDialogs.qml
index 1bc9a4b66..208a69d46 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
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-13 18:31:59 +0000