Update API and settings UI

Implemented new UI design for Settings and minor changes to API

Task-number: QTBUG-63091
Change-Id: Id72e20b53bc33ca0a3068d1e9b664fc5836a1cda
Reviewed-by: Kari Oikarinen <kari.oikarinen@qt.io>
Reviewed-by: Teemu Holappa <teemu.holappa@qt.io>

1 files changed, 25 insertions, 31 deletions

diff --git a/src/settingsui/common/CustomTableView.qml b/src/settingsui/common/CustomTableView.qml
index 6b0505a..9efd584 100644
--- a/src/settingsui/common/CustomTableView.qml
+++ b/src/settingsui/common/CustomTableView.qml
@@ -32,56 +32,46 @@ import QtQuick.Controls 2.0
 
 ColumnLayout {
     id: root
-    spacing: 0
+
     Layout.fillHeight: true
     Layout.fillWidth: true
 
     property var headerTexts: []
     property var roleNames: []
     property alias model: listView.model
+    property alias localeIndex: listView.currentIndex
     signal clicked(int index)
 
-    Rectangle {
-        height: 40
-        Layout.fillWidth: true
-        color: "#80c342"
-
-        Row {
-            anchors.fill: parent
-            anchors.leftMargin: 10
-            spacing: 10
-
-            Repeater {
-                model: root.headerTexts.length
-                Text {
-                    width: parent.width / root.headerTexts.length
-                    text: root.headerTexts[index]
-                    color: "white"
-                    font.bold: true
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-        }
+    Timer { //A workaround to position the listView..
+        interval: 250
+        running: true
+        onTriggered: listView.positionViewAtIndex(listView.currentIndex, ListView.Beginning)
     }
+
     ListView {
         id: listView
         Layout.fillHeight: true
         Layout.fillWidth: true
         clip: true
 
-        Rectangle {
-            anchors.fill: parent
-            border.color: "#bdbebf"
-            border.width: 1
-            color: "transparent"
+        onCurrentIndexChanged: {
+            if (listView.model) {
+                positionViewAtIndex(listView.currentIndex, ListView.beginning)
+            }
         }
 
-        ScrollBar.vertical: ScrollBar {}
+        ScrollBar.vertical: ScrollBar {
+            contentItem: Rectangle {
+                implicitWidth: listView.width * 0.0175
+                implicitHeight: listView.height * 0.5
+                color: "#41cd52"
+            }
+        }
 
-        delegate: Rectangle {
+        delegate: Item {
+            id: delegateRectangle
             width: parent.width
-            height: 30
-            color: index % 2 ? "#e3e3e3" : "white"
+            height: listView.height * 0.1
             property var delegateData: modelData
 
             Row {
@@ -96,9 +86,13 @@ ColumnLayout {
                         width: parent.width / root.roleNames.length
                         text: delegateData[root.roleNames[index]]
                         anchors.verticalCenter: parent.verticalCenter
+                        verticalAlignment: Text.AlignVCenter
+                        font.pixelSize: delegateRectangle.height * 0.5
                         antialiasing: false
                         smooth: false
                         renderType: listView.moving ? Text.NativeRendering : Text.QtRendering
+                        color: listView.currentIndex == delegateRectangle.index ? "#41cd52" : "white"
+                        font.family: appFont
                     }
                 }
             }