Migrate settings UI to use Qt Quick Controls 2

Task-number: QTEE-1057
Change-Id: I389d784241d4b68384765dfde4b572e7652eb76c
Reviewed-by: Teemu Holappa <teemu.holappa@theqtcompany.com>

2 files changed, 63 insertions, 89 deletions

diff --git a/src/settingsui/locale/Language.qml b/src/settingsui/locale/Language.qml
index 6e4e3ad..bdcfbef 100644
--- a/src/settingsui/locale/Language.qml
+++ b/src/settingsui/locale/Language.qml
@@ -33,79 +33,67 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-import QtQuick 2.5
-import QtQuick.Layouts 1.1
-import QtQuick.Controls 1.4
-import QtQuick.Controls.Styles.Flat 1.0 as Flat
-import "../common"
+import QtQuick 2.6
+import QtQuick.Layouts 1.3
+import Qt.labs.controls 1.0
+import Qt.labs.controls.material 1.0
+import Qt.labs.controls.universal 1.0
 import com.theqtcompany.settings.locale 1.0
+import QtQml 2.2
 
 Item {
     id: root
     property string title: qsTr("Language and Region")
 
-    Column {
-        id: content
-        anchors.fill: parent
-        anchors.margins: Math.round(40 * Flat.FlatStyle.scaleFactor)
+    GroupBox {
+        id: groupBox
+        title: qsTr("Regional Format")
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.margins: 20
+        property var currentRegion: Qt.locale(LocaleManager.locale)
 
-        GroupBox {
-            id: groupBox
+        ColumnLayout {
             width: parent.width
-            title: qsTr("Regional Format")
-            Layout.fillWidth: true
-            property var currentRegion: Qt.locale(LocaleManager.locale)
 
-            ColumnLayout {
-                spacing: Math.round(10 * Flat.FlatStyle.scaleFactor)
+            Component {
+                id: regionSelect
+                RegionSelect {}
+            }
+            GroupBox {
                 width: parent.width
-                Layout.fillWidth: true
-
-                Component {
-                    id: regionSelect
-                    RegionSelect { }
-                }
-
-                GroupBox {
-                    width: parent.width
-                    title: {
-                        if (groupBox.currentRegion.name === "C" || groupBox.currentRegion.name === "POSIX") {
-                            return qsTr("Default");
-                        }
-                        else if (groupBox.currentRegion.name !== "") {
-                             return qsTr("%L1/%L2").arg(groupBox.currentRegion.nativeLanguageName).arg(groupBox.currentRegion.nativeCountryName)
-                        }
-                        else {
-                            return qsTr("Region not set");
-                        }
+                title: {
+                    if (groupBox.currentRegion.name === "C" || groupBox.currentRegion.name === "POSIX") {
+                        return qsTr("Default");
                     }
-
-                    flat: true
-
-                    ColumnLayout {
-                        spacing: Math.round(10 * Flat.FlatStyle.scaleFactor)
-                        Layout.fillWidth: true
-                        width: parent.width
-
-                        TextLabel {
-                            text: Date().toLocaleString(groupBox.currentRegion)
-                        }
-
-                        TextLabel {
-                            text: Number(2343.34).toLocaleString(groupBox.currentRegion)
-                        }
-
-                        TextLabel {
-                            text: Number(41334.34).toLocaleCurrencyString(groupBox.currentRegion)
-                        }
+                    else if (groupBox.currentRegion.name !== "") {
+                        return qsTr("%L1/%L2").arg(groupBox.currentRegion.nativeLanguageName).arg(groupBox.currentRegion.nativeCountryName)
+                    }
+                    else {
+                        return qsTr("Region not set");
                     }
                 }
+                ColumnLayout {
+                    spacing: 10
+                    Layout.fillWidth: true
+                    width: parent.width
 
-                Button {
-                    text: qsTr("Change region")
-                    onClicked: stackView.push(regionSelect)
+                    Label {
+                        text: Date().toLocaleString(groupBox.currentRegion)
+                    }
+                    Label {
+                        text: Number(2343.34).toLocaleString(groupBox.currentRegion)
+                    }
+                    Label {
+                        text: Number(41334.34).toLocaleCurrencyString(groupBox.currentRegion)
+                    }
                 }
             }
+            Button {
+                text: qsTr("Change region")
+                onClicked: stackView.push(regionSelect)
+            }
         }
     }
 }
diff --git a/src/settingsui/locale/RegionSelect.qml b/src/settingsui/locale/RegionSelect.qml
index 2d13afe..9282177 100644
--- a/src/settingsui/locale/RegionSelect.qml
+++ b/src/settingsui/locale/RegionSelect.qml
@@ -33,12 +33,13 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-import QtQuick 2.5
-import QtQuick.Layouts 1.1
-import QtQuick.Controls 1.4
-import QtQuick.Controls.Styles.Flat 1.0 as Flat
-import "../common"
+import QtQuick 2.6
+import QtQuick.Layouts 1.3
+import Qt.labs.controls 1.0
+import Qt.labs.controls.material 1.0
+import Qt.labs.controls.universal 1.0
 import com.theqtcompany.settings.locale 1.0
+import "../common"
 
 Item {
     id: root
@@ -46,46 +47,31 @@ Item {
 
     Component.onCompleted: country.text = LocaleFilter.filter
 
-    Column {
+    ColumnLayout {
         id: content
         anchors.fill: parent
-        anchors.margins: Math.round(20 * Flat.FlatStyle.scaleFactor)
-        spacing: Math.round(10 * Flat.FlatStyle.scaleFactor)
-        Row {
-            spacing: Math.round(10 * Flat.FlatStyle.scaleFactor)
+        anchors.margins: 20
+        spacing: 10
+        RowLayout {
+            spacing: 10
 
-            TextLabel {
+            Label {
                 text: qsTr("Search region: ")
+                Layout.alignment: Qt.AlignVCenter
             }
-
             TextField {
                 id: country
                 text: ""
                 onTextChanged: LocaleFilter.filter = country.text
+                Layout.alignment: Qt.AlignVCenter
             }
         }
-
-        TableView {
-            width: parent.width
-            height: Math.round(parent.height - 40 * Flat.FlatStyle.scaleFactor)
-            Layout.fillWidth: true
+        CustomTableView {
+            headerTexts: [qsTr("Language"), qsTr("Country")]
+            roleNames: ["language", "country"]
             model: LocaleFilter
-            headerVisible: true
-
-            TableViewColumn {
-                role: "language"
-                title: qsTr("Language")
-                width: Math.round(parent.width * 0.66)
-            }
-
-            TableViewColumn {
-                role: "country"
-                title: qsTr("Region")
-                width: Math.round(parent.width * 0.33)
-            }
-
             onClicked: {
-                var val = model.itemFromRow(row);
+                var val = model.itemFromRow(index);
                 if (val !== "") {
                     LocaleManager.locale = val;
                     stackView.pop();