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 }
         }
     }