Add labels for weather

Modules/Settings/WeatherTab.qml

@@ -243,55 +243,140 @@ Item {
                         }
 
                         Row {
-                            width: parent.width
+                                width: parent.width
-                            spacing: Theme.spacingM
+                                spacing: Theme.spacingM
 
-                            DankTextField {
+                                Column {
-                                id: latitudeInput
+                                    width: (parent.width - Theme.spacingM) / 2
-                                width: (parent.width - Theme.spacingM) / 2
+                                    spacing: Theme.spacingXS
-                                height: 48
+
-                                placeholderText: "Latitude"
+                                    StyledText {
-                                text: SettingsData.weatherCoordinates ? SettingsData.weatherCoordinates.split(',')[0] : ""
+                                        text: "Latitude"
-                                backgroundColor: Theme.surfaceVariant
+                                        font.pixelSize: Theme.fontSizeSmall
-                                normalBorderColor: Theme.primarySelected
+                                        color: Theme.surfaceVariantText
-                                focusedBorderColor: Theme.primary
-                                onTextEdited: {
-                                    if (text && longitudeInput.text) {
-                                        const coords = text + "," + longitudeInput.text
-                                        const displayName = `${text}, ${longitudeInput.text}`
-                                        SettingsData.setWeatherLocation(displayName, coords)
                                     }
-                                }
-                            }
 
-                            DankTextField {
+                                    DankTextField {
-                                id: longitudeInput
+                                        id: latitudeInput
-                                width: (parent.width - Theme.spacingM) / 2
+                                        width: parent.width
-                                height: 48
+                                        height: 48
-                                placeholderText: "Longitude"
+                                        placeholderText: "40.7128"
-                                text: SettingsData.weatherCoordinates ? SettingsData.weatherCoordinates.split(',')[1] : ""
+                                        backgroundColor: Theme.surfaceVariant
-                                backgroundColor: Theme.surfaceVariant
+                                        normalBorderColor: Theme.primarySelected
-                                normalBorderColor: Theme.primarySelected
+                                        focusedBorderColor: Theme.primary
-                                focusedBorderColor: Theme.primary
+                                        keyNavigationTab: longitudeInput
-                                onTextEdited: {
-                                    if (text && latitudeInput.text) {
-                                        const coords = latitudeInput.text + "," + text
-                                        const displayName = `${latitudeInput.text}, ${text}`
-                                        SettingsData.setWeatherLocation(displayName, coords)
-                                    }
-                                }
-                            }
-                        }
 
-                        DankLocationSearch {
+                                        Component.onCompleted: {
-                            width: parent.width
+                                            if (SettingsData.weatherCoordinates) {
-                            currentLocation: SettingsData.weatherLocation
+                                                const coords = SettingsData.weatherCoordinates.split(',')
-                            placeholderText: "New York, NY"
+                                                if (coords.length > 0) {
-                            onLocationSelected: (displayName, coordinates) => {
+                                                    text = coords[0].trim()
-                                                    SettingsData.setWeatherLocation(
-                                                        displayName,
-                                                        coordinates)
                                                 }
+                                            }
+                                        }
+
+                                        Connections {
+                                            target: SettingsData
+                                            function onWeatherCoordinatesChanged() {
+                                                if (SettingsData.weatherCoordinates) {
+                                                    const coords = SettingsData.weatherCoordinates.split(',')
+                                                    if (coords.length > 0) {
+                                                        latitudeInput.text = coords[0].trim()
+                                                    }
+                                                }
+                                            }
+                                        }
+
+                                        onTextEdited: {
+                                            if (text && longitudeInput.text) {
+                                                const coords = text + "," + longitudeInput.text
+                                                SettingsData.weatherCoordinates = coords
+                                                SettingsData.saveSettings()
+                                            }
+                                        }
+                                    }
+                                }
+
+                                Column {
+                                    width: (parent.width - Theme.spacingM) / 2
+                                    spacing: Theme.spacingXS
+
+                                    StyledText {
+                                        text: "Longitude"
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        color: Theme.surfaceVariantText
+                                    }
+
+                                    DankTextField {
+                                        id: longitudeInput
+                                        width: parent.width
+                                        height: 48
+                                        placeholderText: "-74.0060"
+                                        backgroundColor: Theme.surfaceVariant
+                                        normalBorderColor: Theme.primarySelected
+                                        focusedBorderColor: Theme.primary
+                                        keyNavigationTab: locationSearchInput
+                                        keyNavigationBacktab: latitudeInput
+
+                                        Component.onCompleted: {
+                                            if (SettingsData.weatherCoordinates) {
+                                                const coords = SettingsData.weatherCoordinates.split(',')
+                                                if (coords.length > 1) {
+                                                    text = coords[1].trim()
+                                                }
+                                            }
+                                        }
+
+                                        Connections {
+                                            target: SettingsData
+                                            function onWeatherCoordinatesChanged() {
+                                                if (SettingsData.weatherCoordinates) {
+                                                    const coords = SettingsData.weatherCoordinates.split(',')
+                                                    if (coords.length > 1) {
+                                                        longitudeInput.text = coords[1].trim()
+                                                    }
+                                                }
+                                            }
+                                        }
+
+                                        onTextEdited: {
+                                            if (text && latitudeInput.text) {
+                                                const coords = latitudeInput.text + "," + text
+                                                SettingsData.weatherCoordinates = coords
+                                                SettingsData.saveSettings()
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+
+                        Column {
+                            width: parent.width
+                            spacing: Theme.spacingXS
+
+                            StyledText {
+                                text: "Location Search"
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceVariantText
+                                font.weight: Font.Medium
+                            }
+
+                            DankLocationSearch {
+                                id: locationSearchInput
+                                width: parent.width
+                                currentLocation: ""
+                                placeholderText: "New York, NY"
+                                keyNavigationBacktab: longitudeInput
+                                onLocationSelected: (displayName, coordinates) => {
+                                                        SettingsData.setWeatherLocation(displayName, coordinates)
+
+                                                        const coords = coordinates.split(',')
+                                                        if (coords.length >= 2) {
+                                                            latitudeInput.text = coords[0].trim()
+                                                            longitudeInput.text = coords[1].trim()
+                                                        }
+                                                    }
+                            }
                         }
                     }
                 }

Widgets/DankLocationSearch.qml

@@ -7,11 +7,24 @@ import qs.Widgets
 Item {
     id: root
 
+    activeFocusOnTab: true
+
+    KeyNavigation.tab: keyNavigationTab
+    KeyNavigation.backtab: keyNavigationBacktab
+
+    onActiveFocusChanged: {
+        if (activeFocus) {
+            locationInput.forceActiveFocus()
+        }
+    }
+
     property string currentLocation: ""
     property string placeholderText: "Search for a location..."
     property bool _internalChange: false
     property bool isLoading: false
     property string currentSearchText: ""
+    property Item keyNavigationTab: null
+    property Item keyNavigationBacktab: null
 
     signal locationSelected(string displayName, string coordinates)
 
@@ -131,10 +144,12 @@ Item {
             height: parent.height
             leftIconName: "search"
             placeholderText: root.placeholderText
-            text: root.currentLocation
+            text: ""
             backgroundColor: Theme.surfaceVariant
             normalBorderColor: Theme.primarySelected
             focusedBorderColor: Theme.primary
+            keyNavigationTab: root.keyNavigationTab
+            keyNavigationBacktab: root.keyNavigationBacktab
             onTextEdited: {
                 if (root._internalChange)
                     return

Widgets/DankTextField.qml

@@ -6,6 +6,17 @@ import qs.Widgets
 StyledRect {
     id: root
 
+    activeFocusOnTab: true
+
+    KeyNavigation.tab: keyNavigationTab
+    KeyNavigation.backtab: keyNavigationBacktab
+
+    onActiveFocusChanged: {
+        if (activeFocus) {
+            textInput.forceActiveFocus()
+        }
+    }
+
     property alias text: textInput.text
     property string placeholderText: ""
     property alias font: textInput.font
@@ -32,6 +43,8 @@ StyledRect {
     property real bottomPadding: Theme.spacingM
     property bool ignoreLeftRightKeys: false
     property var keyForwardTargets: []
+    property Item keyNavigationTab: null
+    property Item keyNavigationBacktab: null
 
     signal textEdited
     signal editingFinished
@@ -89,6 +102,9 @@ StyledRect {
         verticalAlignment: TextInput.AlignVCenter
         selectByMouse: !root.ignoreLeftRightKeys
         clip: true
+        activeFocusOnTab: true
+        KeyNavigation.tab: root.keyNavigationTab
+        KeyNavigation.backtab: root.keyNavigationBacktab
         onTextChanged: root.textEdited()
         onEditingFinished: root.editingFinished()
         onAccepted: root.accepted()