Fix keyboard navigation in Preferences > Appearance

Author: cbjeukendrup

src/appshell/qml/Preferences/internal/ColorAndWallpaperSection.qml

@@ -30,6 +30,8 @@ BaseSection {
 
     navigation.direction: NavigationPanel.Both
 
+    property int navigationRowStart: 0
+
     property alias wallpaperDialogTitle: wallpaperPicker.dialogTitle
 
     property bool useColor: true
@@ -63,7 +65,7 @@ BaseSection {
 
             navigation.name: "ColorBox"
             navigation.panel: root.navigation
-            navigation.row: 0
+            navigation.row: root.navigationRowStart
             navigation.column: 0
 
             onToggled: {
@@ -80,7 +82,7 @@ BaseSection {
 
             navigation.name: "ColorBox"
             navigation.panel: root.navigation
-            navigation.row: 0
+            navigation.row: root.navigationRowStart
             navigation.column: 1
 
             onNewColorSelected: function(newColor) {
@@ -96,7 +98,7 @@ BaseSection {
 
             navigation.name: "WallpaperBox"
             navigation.panel: root.navigation
-            navigation.row: 1
+            navigation.row: root.navigationRowStart + 1
             navigation.column: 0
 
             onToggled: {
@@ -111,7 +113,7 @@ BaseSection {
             enabled: !root.useColor
 
             navigation: root.navigation
-            navigationRowOrderStart: 1
+            navigationRowOrderStart: root.navigationRowStart + 1
             navigationColumnOrderStart: 1
 
             onPathEdited: function(newPath) {

src/appshell/qml/Preferences/internal/PageSection.qml

@@ -19,16 +19,19 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
+import QtQuick
+import QtQuick.Layouts
 
-import Muse.UiComponents 1.0
+import Muse.Ui
+import Muse.UiComponents
 
 BaseSection {
     id: root
 
     title: qsTrc("appshell/preferences", "Page")
 
+    navigation.direction: NavigationPanel.Both
+
     property alias scoreInversionEnabled: scoreInversionEnable.checked
     property alias isOnlyInvertInDarkTheme: isOnlyInvertInDarkTheme.checked
     property bool isCurrentThemeDark
@@ -85,8 +88,11 @@ BaseSection {
         id: colorAndWallpaper
 
         enabled: !root.scoreInversionEnabled || (root.isOnlyInvertInDarkTheme && !root.isCurrentThemeDark)
-        opacityOverride: enabled ? 1.0 : 0.6
+        opacityOverride: enabled ? 1.0 : ui.theme.itemOpacityDisabled
 
         wallpaperDialogTitle: qsTrc("appshell/preferences", "Choose notepaper")
+
+        navigation: root.navigation
+        navigationRowStart: 1
     }
 }

src/framework/uicomponents/qml/Muse/UiComponents/FilePicker.qml

@@ -65,10 +65,30 @@ Item {
         id: filePickerModel
     }
 
-    QtObject {
+    Item {
         id: prv
 
         property bool isNavigationBoth: root.navigation && root.navigation.direction === NavigationPanel.Both
+
+        states: [
+            State {
+                when: prv.isNavigationBoth
+                PropertyChanges {
+                    pathField.navigation.row: root.navigationRowOrderStart
+                    pathField.navigation.column: root.navigationColumnOrderStart
+
+                    button.navigation.row: root.navigationRowOrderStart
+                    button.navigation.column: root.navigationColumnOrderStart + 1
+                }
+            },
+            State {
+                when: !prv.isNavigationBoth
+                PropertyChanges {
+                    pathField.navigation.order: root.navigationRowOrderStart
+                    button.navigation.order: root.navigationRowOrderStart + 1
+                }
+            }
+        ]
     }
 
     RowLayout {
@@ -90,10 +110,6 @@ Item {
             navigation.enabled: root.visible && root.enabled
             navigation.accessible.name: root.pathFieldTitle + " " + pathField.currentText
 
-            navigation.row: prv.isNavigationBoth ? root.navigationRowOrderStart : -1
-            navigation.column: prv.isNavigationBoth ? root.navigationColumnOrderStart : -1
-            navigation.order: prv.isNavigationBoth ? -1 : root.navigationRowOrderStart
-
             onTextEditingFinished: function(newTextValue) {
                 root.pathEdited(newTextValue)
             }
@@ -114,10 +130,6 @@ Item {
             accessible.name: root.pickerType === FilePicker.PickerType.File ? qsTrc("ui", "Choose file")
                                                                             : qsTrc("ui", "Choose directory")
 
-            navigation.row: prv.isNavigationBoth ? root.navigationRowOrderStart : -1
-            navigation.column: prv.isNavigationBoth ? root.navigationColumnOrderStart + 1 : -1
-            navigation.order: prv.isNavigationBoth ? -1 : root.navigationRowOrderStart + 1
-
             onClicked: {
                 switch (root.pickerType) {
                 case FilePicker.PickerType.File: {