Fix date & time setting screens

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

4 files changed, 269 insertions, 383 deletions

diff --git a/src/settingsui/settingsuiapp.qrc b/src/settingsui/settingsuiapp.qrc
index 6fddb2d..618d761 100644
--- a/src/settingsui/settingsuiapp.qrc
+++ b/src/settingsui/settingsuiapp.qrc
@@ -31,5 +31,6 @@
         <file>settingsuiplugin/ShutdownPopup.qml</file>
         <file>bluetooth/Bluetooth.qml</file>
         <file>bluetooth/Discovery.qml</file>
+        <file>timedate/TimeDate.qml</file>
     </qresource>
 </RCC>
diff --git a/src/settingsui/timedate/CustomComboBox.qml b/src/settingsui/timedate/CustomComboBox.qml
index 22c0bd1..e7e1da4 100644
--- a/src/settingsui/timedate/CustomComboBox.qml
+++ b/src/settingsui/timedate/CustomComboBox.qml
@@ -32,27 +32,11 @@ import QtGraphicalEffects 1.0
 
 ComboBox {
     id: comboBox
-    delegate: ItemDelegate {
-        id: del
-        background: Item {}
-        width: comboBox.width
-        contentItem: Text {
-            anchors.left: del.left
-            anchors.leftMargin: del.width * 0.15
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: comboBox.height * 0.375
-            color: comboBox.currentIndex == index ? "#41cd52" : "white"
-            text: modelData
-            font.family: appFont
-            font.styleName: comboBox.currentIndex == index ? "Bold" : "Regular"
-            elide: Text.ElideRight
-        }
-    }
     indicator: Image {
         id: indicatorImage
         height: comboBox.height * 0.4
         anchors.right: comboBox.right
-        anchors.rightMargin: comboBox.width * 0.15
+        anchors.rightMargin: pluginMain.margin
         anchors.verticalCenter: comboBox.verticalCenter
         fillMode: Image.PreserveAspectFit
         rotation: -90
@@ -68,15 +52,14 @@ ComboBox {
     }
     contentItem: Text {
         anchors.left: comboBox.left
-        anchors.leftMargin: comboBox.width * 0.15
+        anchors.leftMargin: pluginMain.margin
         verticalAlignment: Text.AlignVCenter
-        font.pixelSize: comboBox.height * 0.375
-        font.bold: true
+        font.pixelSize: pluginMain.valueFontSize
+        font.family: appFont
+        font.styleName: "SemiBold"
         color: "white"
         elide: Text.ElideRight
         text: comboBox.displayText
-        font.family: appFont
-        font.styleName: "SemiBold"
     }
     background: Rectangle {
         color: "transparent"
@@ -95,7 +78,6 @@ ComboBox {
             implicitHeight: root.height - (comboBox.y + comboBox.height)
             model: comboBox.popup.visible ? comboBox.delegateModel : null
             currentIndex: comboBox.currentIndex
-
             onCurrentIndexChanged: positionViewAtIndex(listView.currentIndex, ListView.beginning)
         }
         onOpened: {
diff --git a/src/settingsui/timedate/ManualTime.qml b/src/settingsui/timedate/ManualTime.qml
index 564edc7..7448629 100644
--- a/src/settingsui/timedate/ManualTime.qml
+++ b/src/settingsui/timedate/ManualTime.qml
@@ -41,259 +41,204 @@ Item {
         return timeToPad < 10 ? "0" + timeToPad : timeToPad
     }
 
-    Text {
-        id: setDateAndTimeText
-        anchors.top: parent.top
-        anchors.left: parent.left
-        fontSizeMode: Text.Fit
-        minimumPixelSize: 1
-        font.pixelSize: parent.height * 0.05
-        color: "white"
-        text: qsTr("Set Date & Time")
-        font.family: appFont
-        font.styleName: "Bold"
-    }
-    Rectangle {
-        id: btmLine
-        anchors.top: setDateAndTimeText.bottom
-        anchors.topMargin: parent.height * 0.025
-        anchors.left: setDateAndTimeText.left
-        width: parent.width * 0.275
-        height: parent.height * 0.005
-    }
-
-    Text {
-        id: setDateText
-        anchors.top: btmLine.bottom
-        anchors.topMargin: parent.height * 0.075
-        anchors.left: parent.left
-        color: "white"
-        font.pixelSize: parent.height * 0.04
-        text: qsTr("Set Date")
-        font.family: appFont
-        font.styleName: "Bold"
-    }
-
-    CustomComboBox {
-        id: dayBox
-        width: parent.width * 0.15
-        height: parent.height * 0.075
-        anchors.left: parent.left
-        anchors.top: setDateText.bottom
-        anchors.topMargin: parent.height * 0.025
-        displayText: currentIndex + 1
-        property var date: new Date(firstYear, 1, 0)
-
-        model: date.getDate()
+    Column {
+        spacing: pluginMain.spacing
 
-        delegate: ItemDelegate {
-            id: dayDelegate
-            background: Item {}
-            width: dayBox.width
-            contentItem: Text {
-                anchors.left: dayDelegate.left
-                anchors.leftMargin: dayDelegate.width * 0.15
-                verticalAlignment: Text.AlignVCenter
-                font.pixelSize: dayBox.height * 0.35
-                color: dayBox.currentIndex == index ? "#41cd52" : "white"
-                text: modelData + 1
-                font.family: appFont
-                font.styleName: dayBox.currentIndex == index ? "Bold" : "Regular"
-                elide: Text.ElideRight
-            }
-        }
-
-        property int month: monthBox.currentIndex + 1
-        onMonthChanged: updateDate()
-
-        property int year: yearBox.currentIndex + firstYear
-        onYearChanged: updateDate()
-
-        function updateDate() {
-            date = new Date(year, month, 0)
-        }
-    }
-
-    CustomComboBox {
-        id: monthBox
-        width: parent.width * 0.35
-        height: parent.height * 0.075
-        anchors.top: setDateText.bottom
-        anchors.topMargin: parent.height * 0.025
-        anchors.left: dayBox.right
-        anchors.leftMargin: root.margin * 0.5
-
-        model: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
-    }
-    CustomComboBox {
-        id: yearBox
-        width: parent.width * 0.2
-        height: parent.height * 0.075
-        anchors.top: setDateText.bottom
-        anchors.topMargin: parent.height * 0.025
-        anchors.left: monthBox.right
-        anchors.leftMargin: root.margin * 0.5
-
-        model: 50
-        delegate: ItemDelegate {
-            id: yearDelegate
-            background: Item {}
-            width: yearBox.width
-            contentItem: Text {
-                anchors.left: yearDelegate.left
-                anchors.leftMargin: yearDelegate.width * 0.15
-                verticalAlignment: Text.AlignVCenter
-                font.pixelSize: yearBox.height * 0.35
-                text: index + firstYear
-                color: yearBox.currentIndex == index ? "#41cd52" : "white"
-                font.family: appFont
-                font.styleName: yearBox.currentIndex == index ? "Bold" : "Regular"
-                elide: Text.ElideRight
-
-            }
-        }
-        contentItem: Text {
-            property var date: new Date()
-            anchors.left: yearBox.left
-            anchors.leftMargin: yearBox.width * 0.15
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: yearBox.height * 0.35
+        Text {
             color: "white"
-            elide: Text.ElideRight
-            text: yearBox.currentIndex + date.getFullYear()
+            text: qsTr("Set Date")
+            font.pixelSize: pluginMain.subTitleFontSize
             font.family: appFont
-            font.styleName: "SemiBold"
         }
-    }
-
-    Text {
-        id: setTimeText
-        anchors.top: dayBox.bottom
-        anchors.topMargin: parent.height * 0.075
-        anchors.left: parent.left
-        color: "white"
-        font.pixelSize: parent.height * 0.04
-        text: qsTr("Set Time")
-        font.family: appFont
-        font.styleName: "Bold"
-    }
 
-    CustomComboBox {
-        id: hourBox
-        width: parent.width * 0.15
-        height: parent.height * 0.075
-        anchors.top: setTimeText.bottom
-        anchors.topMargin: parent.height * 0.025
-        anchors.left: parent.left
-        property int hour: currentIndex
-
-        model: 24
+        // Row of date comboboxes
+        Row {
+            spacing: pluginMain.spacing
+
+            CustomComboBox {
+                id: dayBox
+                width: root.width * 0.15
+                height: pluginMain.buttonHeight
+                displayText: currentIndex + 1
+                property var date: new Date(firstYear, 1, 0)
+
+                model: 31
+
+                delegate: ItemDelegate {
+                    id: dayDelegate
+                    height: dayBox.height
+                    contentItem: Text {
+                        anchors.left: dayDelegate.left
+                        anchors.leftMargin: pluginMain.margin
+                        text: modelData + 1
+                        color: dayBox.currentIndex == index ? "#41cd52" : "white"
+                        elide: Text.ElideRight
+                        verticalAlignment: Text.AlignVCenter
+                        font.pixelSize: pluginMain.valueFontSize
+                        font.family: appFont
+                        font.styleName: "Regular"
+                    }
+                }
+
+                property int month: monthBox.currentIndex + 1
+                onMonthChanged: updateDate()
+
+                property int year: yearBox.currentIndex + firstYear
+                onYearChanged: updateDate()
+
+                function updateDate() {
+                    date = new Date(year, month, 0)
+                }
+            }
 
-        delegate: ItemDelegate {
-            id: hourDelegate
-            background: Item {}
-            width: hourBox.width
-            contentItem: Text {
-                anchors.left: hourDelegate.left
-                anchors.leftMargin: hourDelegate.width * 0.15
-                verticalAlignment: Text.AlignVCenter
-                font.pixelSize: hourBox.height * 0.35
-                color: hourBox.currentIndex == index ? "#41cd52" : "white"
-                text: zeroPadTime(parseInt(modelData))
-                elide: Text.ElideRight
-                font.family: appFont
-                font.styleName: hourBox.currentIndex == index ? "Bold" : "Regular"
+            CustomComboBox {
+                id: monthBox
+                width: root.width * 0.35
+                height: pluginMain.buttonHeight
+                model: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+                delegate: ItemDelegate {
+                    id: monthDelegate
+                    height: monthBox.height
+                    contentItem: Text {
+                        anchors.left: monthDelegate.left
+                        anchors.leftMargin: pluginMain.margin
+                        color: monthBox.currentIndex == index ? "#41cd52" : "white"
+                        elide: Text.ElideRight
+                        text: modelData
+                        verticalAlignment: Text.AlignVCenter
+                        font.pixelSize: pluginMain.valueFontSize
+                        font.family: appFont
+                        font.styleName: "Regular"
+
+                    }
+                }
             }
-        }
-        contentItem: Text {
-            anchors.left: hourBox.left
-            anchors.leftMargin: hourBox.width * 0.15
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: hourBox.height * 0.35
-            font.bold: true
+            CustomComboBox {
+                id: yearBox
+                width: root.width * 0.2
+                height: pluginMain.buttonHeight
+                displayText: yearBox.currentIndex + date.getFullYear()
+                property var date: new Date()
+
+                model: 50
+                delegate: ItemDelegate {
+                    id: yearDelegate
+                    height: yearBox.height
+                    contentItem: Text {
+                        anchors.left: yearDelegate.left
+                        anchors.leftMargin: pluginMain.margin
+                        text: index + firstYear
+                        color: yearBox.currentIndex == index ? "#41cd52" : "white"
+                        elide: Text.ElideRight
+                        verticalAlignment: Text.AlignVCenter
+                        font.pixelSize: pluginMain.valueFontSize
+                        font.family: appFont
+                        font.styleName: "Regular"
+                    }
+                }
+            }
+        } // Row of date comboboxes
+
+        Text {
             color: "white"
-            elide: Text.ElideRight
-            text: zeroPadTime(hourBox.displayText)
+            text: qsTr("Set Time")
+            font.pixelSize: pluginMain.subTitleFontSize
             font.family: appFont
-            font.styleName: "SemiBold"
         }
-    }
-    CustomComboBox {
-        id: minuteBox
-        width: parent.width * 0.15
-        height: parent.height * 0.075
-        anchors.top: setTimeText.bottom
-        anchors.topMargin: parent.height * 0.025
-        anchors.left: hourBox.right
-        anchors.leftMargin: root.margin * 0.5
-        property int minute: currentIndex
 
-        model: 60
-
-        delegate: ItemDelegate {
-            id: minuteDelegate
-            background: Item {}
-            width: minuteBox.width
-            contentItem: Text {
-                anchors.left: minuteDelegate.left
-                anchors.leftMargin: minuteDelegate.width * 0.15
-                verticalAlignment: Text.AlignVCenter
-                font.pixelSize: minuteBox.height * 0.35
-                color: minuteBox.currentIndex == index ? "#41cd52" : "white"
-                text: zeroPadTime(parseInt(modelData))
-                font.family: appFont
-                font.styleName: minuteBox.currentIndex == index ? "Bold" : "Regular"
-                elide: Text.ElideRight
+        // Row of time comboboxes
+        Row {
+            spacing: pluginMain.spacing
+
+            CustomComboBox {
+                id: hourBox
+                width: root.width * 0.15
+                height: pluginMain.buttonHeight
+                displayText: zeroPadTime(hour)
+                property int hour: currentIndex
+
+                model: 24
+
+                delegate: ItemDelegate {
+                    id: hourDelegate
+                    height: hourBox.height
+                    contentItem: Text {
+                        anchors.left: hourDelegate.left
+                        anchors.leftMargin: pluginMain.margin
+                        text: zeroPadTime(parseInt(modelData))
+                        color: hourBox.currentIndex == index ? "#41cd52" : "white"
+                        elide: Text.ElideRight
+                        verticalAlignment: Text.AlignVCenter
+                        font.pixelSize: pluginMain.valueFontSize
+                        font.family: appFont
+                        font.styleName: "Regular"
+                    }
+                }
             }
-        }
-        contentItem: Text {
-            anchors.left: minuteBox.left
-            anchors.leftMargin: minuteBox.width * 0.15
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: minuteBox.height * 0.35
-            font.family: appFont
-            font.styleName: "SemiBold"
-            color: "white"
-            elide: Text.ElideRight
-            text: zeroPadTime(parseInt(minuteBox.displayText))
-        }
-    }
-
-    QtButton {
-        id: dateSetButton
-        height: parent.height * 0.075
-        anchors.top: hourBox.bottom
-        anchors.topMargin: parent.height * 0.1
-        anchors.left: parent.left
-        fillColor: "#41cd52"
-        borderColor: "transparent"
-        text: qsTr("SET")
-
-        onClicked: {
-            var currentTime = TimeManager.time;
-            var newDate = new Date();
-
-            newDate.setFullYear(dayBox.year)
-            newDate.setMonth(dayBox.month - 1)
-            newDate.setDate(dayBox.currentIndex+1)
-
-            newDate.setHours(hourBox.hour)
-            newDate.setMinutes(minuteBox.minute)
-            newDate.setSeconds(currentTime.getSeconds())
-            TimeManager.ntp = false
-            TimeManager.time = newDate;
-        }
-    }
-    QtButton {
-        id: dateCancelButton
-        height: parent.height * 0.075
-        anchors.top: hourBox.bottom
-        anchors.topMargin: parent.height * 0.1
-        anchors.left: dateSetButton.right
-        anchors.leftMargin: root.margin * 0.5
-        fillColor: "#9d9faa"
-        borderColor: "transparent"
-        text: qsTr("CANCEL")
-        onClicked: settingsLoader.source = "qrc:/timedate/TimeDate.qml"
-    }
+            CustomComboBox {
+                id: minuteBox
+                width: root.width * 0.15
+                height: pluginMain.buttonHeight
+                displayText: zeroPadTime(minute)
+                property int minute: currentIndex
+
+                model: 60
+
+                delegate: ItemDelegate {
+                    id: minuteDelegate
+                    height: minuteBox.height
+                    contentItem: Text {
+                        anchors.left: minuteDelegate.left
+                        anchors.leftMargin: pluginMain.margin
+                        text: zeroPadTime(parseInt(modelData))
+                        color: minuteBox.currentIndex == index ? "#41cd52" : "white"
+                        elide: Text.ElideRight
+                        verticalAlignment: Text.AlignVCenter
+                        font.pixelSize: pluginMain.valueFontSize
+                        font.family: appFont
+                        font.styleName: "Regular"
+                    }
+                }
+            }
+        } // Row of time comboboxes
+
+        // Row of set/cancel buttons
+        Row {
+            spacing: pluginMain.spacing
+
+            QtButton {
+                id: dateSetButton
+                height: pluginMain.buttonHeight
+                fillColor: "#41cd52"
+                borderColor: "transparent"
+                text: qsTr("SET")
+
+                onClicked: {
+                    var currentTime = TimeManager.time;
+                    var newDate = new Date();
+
+                    newDate.setFullYear(dayBox.year)
+                    newDate.setMonth(dayBox.month - 1)
+                    newDate.setDate(dayBox.currentIndex+1)
+                    newDate.setHours(hourBox.hour)
+                    newDate.setMinutes(minuteBox.minute)
+                    newDate.setSeconds(currentTime.getSeconds())
+                    TimeManager.ntp = false
+                    TimeManager.time = newDate;
+                    console.log("newDate: " + newDate)
+                    console.log("TimeManager.time: " + TimeManager.time)
+                }
+            }
+            QtButton {
+                id: dateCancelButton
+                height: pluginMain.buttonHeight
+                fillColor: "#9d9faa"
+                borderColor: "transparent"
+                text: qsTr("CANCEL")
+                onClicked: {
+                    settingsLoader.source = "qrc:/timedate/TimeDate.qml"
+                }
+            }
+        } // Row of set/cancel buttons
+    } // Main column
 }
diff --git a/src/settingsui/timedate/TimeDate.qml b/src/settingsui/timedate/TimeDate.qml
index b38ed54..c8719e2 100644
--- a/src/settingsui/timedate/TimeDate.qml
+++ b/src/settingsui/timedate/TimeDate.qml
@@ -37,23 +37,23 @@ Item {
     id: root
     property int margin: root.width * 0.05
 
-    Flickable {
-        id: flickable
-        anchors.fill: parent
-        contentHeight: height
-        contentWidth: width
+    Column {
+        spacing: pluginMain.spacing
+        anchors.top: parent.top
+
+        // Display current date
+        Text {
+            color: "white"
+            text: qsTr("Current date")
+            font.pixelSize: pluginMain.subTitleFontSize
+            font.family: appFont
+        }
 
         Text {
             id: dateText
-            width: parent.width
-            height: parent.height * 0.055
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.topMargin: parent.height * 0.05
-            fontSizeMode: Text.Fit
-            minimumPixelSize: 1
-            font.pixelSize: height
+            leftPadding: pluginMain.margin
             color: "white"
+            font.pixelSize: pluginMain.valueFontSize
             font.family: appFont
             Timer {
                 id: dateTimer
@@ -63,139 +63,97 @@ Item {
                 triggeredOnStart: true
                 onTriggered: {
                     var date = new Date();
-                    var hours = date.getHours();
-                    var minutes = date.getMinutes();
-                    var seconds = date.getSeconds();
-                    var days = date.getDate();
-
                     dateText.text = date.toLocaleString(Qt.locale(LocaleManager.locale), Locale.LongFormat)
                 }
-                function nth(days) {
-                    if (days > 3 && days < 21) return 'th';
-                    switch (days % 10) {
-                    case 1:  return "st";
-                    case 2:  return "nd";
-                    case 3:  return "rd";
-                    default: return "th";
-                    }
-                }
             }
         }
 
+        // Set date automatically / manually
         Text {
-            id: setDateText
-            width: parent.width * 0.3
-            height: parent.height * 0.05
-            anchors.left: parent.left
-            anchors.top: dateText.bottom
-            anchors.topMargin: parent.height * 0.05
-            fontSizeMode: Text.Fit
-            minimumPixelSize: 1
-            font.pixelSize: height
             color: "white"
             text: qsTr("Set Date & Time")
+            font.pixelSize: pluginMain.subTitleFontSize
             font.family: appFont
-            font.styleName: "Bold"
         }
 
-        QtButton {
-            id: automaticButton
-            anchors.top: setDateText.bottom
-            anchors.topMargin: parent.height * 0.025
-            anchors.left: parent.left
-            height: parent.height * 0.075
-            fillColor: "#41cd52"
-            borderColor: "transparent"
-            text: qsTr("AUTOMATICALLY")
-            onClicked: TimeManager.ntp = true
-        }
-
-        QtButton {
-            id: manualButton
-            anchors.top: setDateText.bottom
-            anchors.topMargin: parent.height * 0.025
-            anchors.left: automaticButton.right
-            anchors.leftMargin: root.margin * 0.5
-            height: parent.height * 0.075
-            fillColor: "#9d9faa"
-            borderColor: "transparent"
-            text: qsTr("MANUALLY")
-            onClicked: settingsLoader.source = "qrc:/timedate/ManualTime.qml"
+        Row {
+            spacing: pluginMain.spacing
+            leftPadding: pluginMain.margin
+            QtButton {
+                id: automaticButton
+                height: pluginMain.buttonHeight
+                fillColor: "#41cd52"
+                borderColor: "transparent"
+                text: qsTr("AUTOMATICALLY")
+                onClicked: TimeManager.ntp = true
+            }
+            QtButton {
+                id: manualButton
+                height: pluginMain.buttonHeight
+                fillColor: "#9d9faa"
+                borderColor: "transparent"
+                text: qsTr("MANUALLY")
+                onClicked: {
+                    settingsLoader.source = "qrc:/timedate/ManualTime.qml"
+                }
+            }
         }
 
+        // Select timezone
         Text {
             id: timeZoneText
-            width: parent.width * 0.3
-            height: parent.height * 0.05
-            anchors.left: parent.left
-            anchors.top: automaticButton.bottom
-            anchors.topMargin: parent.height * 0.05
-            fontSizeMode: Text.Fit
-            minimumPixelSize: 1
-            font.pixelSize: height
             color: "white"
             text: qsTr("Time Zone")
+            font.pixelSize: pluginMain.subTitleFontSize
             font.family: appFont
-            font.styleName: "Bold"
         }
 
-        CustomComboBox {
-            id: timeZoneBox
-            width: automaticButton.width + manualButton.width + root.margin * 0.5
-            height: parent.height * 0.075
-            anchors.top: timeZoneText.bottom
-            anchors.topMargin: parent.height * 0.025
-            anchors.left: parent.left
-            textRole: "id"
-            model: TimezonesFilter
-            delegate: ItemDelegate {
-                id: timeZoneDelegate
-                background: Item {}
-                width: timeZoneBox.width
-                contentItem: Text {
-                    anchors.left: timeZoneDelegate.left
-                    anchors.leftMargin: timeZoneDelegate.width * 0.05
-                    text: modelData["id"]
-                    font.family: appFont
-                    font.styleName: timeZoneBox.currentIndex == index ? "Bold" : "Regular"
-                    color: timeZoneBox.currentIndex == index ? "#41cd52" : "white"
-                    elide: Text.ElideRight
-                    verticalAlignment: Text.AlignVCenter
+        Row {
+            leftPadding: pluginMain.margin
+            height: 500
+            CustomComboBox {
+                id: timeZoneBox
+                width: automaticButton.width + manualButton.width + pluginMain.spacing
+                height: pluginMain.buttonHeight
+                textRole: "id"
+                popup.height: 200
+                model: TimezonesFilter
+                delegate: ItemDelegate {
+                    id: timeZoneDelegate
+                    height: timeZoneBox.height
+                    contentItem: Text {
+                        anchors.left: timeZoneDelegate.left
+                        anchors.leftMargin: pluginMain.margin
+                        text: modelData["id"]
+                        color: timeZoneBox.currentIndex == index ? "#41cd52" : "white"
+                        elide: Text.ElideRight
+                        verticalAlignment: Text.AlignVCenter
+                        font.pixelSize: pluginMain.valueFontSize
+                        font.family: appFont
+                        font.styleName: "Regular"
+                    }
                 }
-            }
-
-            Component.onCompleted: {
-                var n = TimezonesFilter.indexForTimezone(TimeManager.timeZone)
-                timeZoneBox.currentIndex = n
-            }
 
-            Connections {
-                target: TimezonesFilter.sourceModel
-                onReady: {
+                Component.onCompleted: {
                     var n = TimezonesFilter.indexForTimezone(TimeManager.timeZone)
                     timeZoneBox.currentIndex = n
                 }
-            }
 
+                Connections {
+                    target: TimezonesFilter.sourceModel
+                    onReady: {
+                        var n = TimezonesFilter.indexForTimezone(TimeManager.timeZone)
+                        timeZoneBox.currentIndex = n
+                    }
+                }
 
-            onCurrentIndexChanged: {
-                var val = TimezonesFilter.itemFromRow(currentIndex);
-                if (val !== "") {
-                    TimeManager.timeZone = val
+                onCurrentIndexChanged: {
+                    var val = TimezonesFilter.itemFromRow(currentIndex);
+                    if (val !== "") {
+                        TimeManager.timeZone = val
+                    }
                 }
             }
-            contentItem: Text {
-                anchors.left: timeZoneBox.left
-                anchors.leftMargin: timeZoneBox.width * 0.05
-                verticalAlignment: Text.AlignVCenter
-                font.pixelSize: timeZoneBox.height * 0.35
-                font.bold: true
-                color: "white"
-                elide: Text.ElideRight
-                text: timeZoneBox.displayText
-                font.family: appFont
-                font.styleName: "SemiBold"
-            }
         }
 
         Component {