diff --git a/Modules/Settings/WeatherTab.qml b/Modules/Settings/WeatherTab.qml index eb9c2f21..479dda1f 100644 --- a/Modules/Settings/WeatherTab.qml +++ b/Modules/Settings/WeatherTab.qml @@ -243,55 +243,140 @@ Item { } Row { - width: parent.width - spacing: Theme.spacingM + width: parent.width + spacing: Theme.spacingM - DankTextField { - id: latitudeInput - width: (parent.width - Theme.spacingM) / 2 - height: 48 - placeholderText: "Latitude" - text: SettingsData.weatherCoordinates ? SettingsData.weatherCoordinates.split(',')[0] : "" - backgroundColor: Theme.surfaceVariant - normalBorderColor: Theme.primarySelected - focusedBorderColor: Theme.primary - onTextEdited: { - if (text && longitudeInput.text) { - const coords = text + "," + longitudeInput.text - const displayName = `${text}, ${longitudeInput.text}` - SettingsData.setWeatherLocation(displayName, coords) + Column { + width: (parent.width - Theme.spacingM) / 2 + spacing: Theme.spacingXS + + StyledText { + text: "Latitude" + font.pixelSize: Theme.fontSizeSmall + color: Theme.surfaceVariantText } - } - } - DankTextField { - id: longitudeInput - width: (parent.width - Theme.spacingM) / 2 - height: 48 - placeholderText: "Longitude" - text: SettingsData.weatherCoordinates ? SettingsData.weatherCoordinates.split(',')[1] : "" - backgroundColor: Theme.surfaceVariant - normalBorderColor: Theme.primarySelected - focusedBorderColor: Theme.primary - onTextEdited: { - if (text && latitudeInput.text) { - const coords = latitudeInput.text + "," + text - const displayName = `${latitudeInput.text}, ${text}` - SettingsData.setWeatherLocation(displayName, coords) - } - } - } - } + DankTextField { + id: latitudeInput + width: parent.width + height: 48 + placeholderText: "40.7128" + backgroundColor: Theme.surfaceVariant + normalBorderColor: Theme.primarySelected + focusedBorderColor: Theme.primary + keyNavigationTab: longitudeInput - DankLocationSearch { - width: parent.width - currentLocation: SettingsData.weatherLocation - placeholderText: "New York, NY" - onLocationSelected: (displayName, coordinates) => { - SettingsData.setWeatherLocation( - displayName, - coordinates) + Component.onCompleted: { + if (SettingsData.weatherCoordinates) { + const coords = SettingsData.weatherCoordinates.split(',') + if (coords.length > 0) { + text = coords[0].trim() } + } + } + + 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() + } + } + } } } } diff --git a/Widgets/DankLocationSearch.qml b/Widgets/DankLocationSearch.qml index 265acbb6..49f391df 100644 --- a/Widgets/DankLocationSearch.qml +++ b/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 diff --git a/Widgets/DankTextField.qml b/Widgets/DankTextField.qml index 72165217..db227724 100644 --- a/Widgets/DankTextField.qml +++ b/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()