Navigation Control Border style changed (90% implementation done)

src/appshell/qml/DevTools/KeyNav/KeyNavExample.qml

@@ -56,6 +56,8 @@ Rectangle {
         height: 64
         color: "#fce94f"
 
+        anchors.margins: ui.theme.navCtrlBorderWidth
+
         sectionName: "mainMenu"
         sectionOrder: 101
 
@@ -92,6 +94,8 @@ Rectangle {
         height: 64
         color: "#e9b96e"
 
+        anchors.margins: ui.theme.navCtrlBorderWidth
+
         sectionName: "topTools"
         sectionOrder: 102
 
@@ -120,6 +124,8 @@ Rectangle {
         width: 120
         color: "#729fcf"
 
+        anchors.margins: ui.theme.navCtrlBorderWidth
+
         sectionName: "leftPanel"
         sectionOrder: 103
 
@@ -147,6 +153,8 @@ Rectangle {
         width: 120
         color: "#8ae234"
 
+        anchors.margins: ui.theme.navCtrlBorderWidth
+
         sectionName: "rightPanel"
         sectionOrder: 105
 
@@ -174,6 +182,8 @@ Rectangle {
         anchors.bottom: parent.bottom
         color: "#ef2929"
 
+        anchors.margins: ui.theme.navCtrlBorderWidth
+
         sectionName: "centerPanel"
         sectionOrder: 104
 

src/appshell/qml/DevTools/KeyNav/KeyNavSection.qml

@@ -34,8 +34,20 @@ Rectangle {
 
     default property alias content: contentItem.data
 
-    border.color: "#75507b"
+    Rectangle {
-    border.width: keynavsec.active ? 4 : 0
+        id: navCtrlBorderRect
+
+        anchors.fill: parent
+        anchors.margins: -ui.theme.navCtrlBorderWidth
+
+        visible: keynavsec.active
+
+        color: "transparent"
+        radius: parent.radius + navCtrlBorderRect.border.width
+
+        border.width: ui.theme.navCtrlBorderWidth
+        border.color: ui.theme.fontPrimaryColor
+    }
 
     NavigationSection {
         id: keynavsec

src/appshell/qml/DevTools/KeyNav/KeyNavSubSection.qml

@@ -34,8 +34,21 @@ Rectangle {
     height: 40
     width: btns.childrenRect.width
 
-    border.color: "#75507b"
+    Rectangle {
-    border.width: keynavsec.active ? 4 : 0
+        id: navCtrlBorderRect
+
+        anchors.fill: parent
+        anchors.margins: -ui.theme.navCtrlBorderWidth
+        opacity: 1
+
+        visible: keynavsec.active
+
+        color: "transparent"
+        radius: parent.radius + navCtrlBorderRect.border.width
+
+        border.width: ui.theme.navCtrlBorderWidth
+        border.color: ui.theme.fontPrimaryColor
+    }
 
     signal clicked(string info)
 

src/appshell/qml/dockwindow/DockPanelTab.qml

@@ -73,8 +73,20 @@ StyledTabButton {
     background: Rectangle {
         id: backgroundRect
 
-        border.width: root.navigation.active ? 2 : 0
+        Rectangle {
-        border.color: ui.theme.focusColor
+            id: navCtrlBorderRect
+
+            anchors.fill: parent
+            //anchors.margins: -ui.theme.navCtrlBorderWidth
+
+            visible: root.navigation.active
+
+            color: "transparent"
+            radius: parent.radius + navCtrlBorderRect.border.width
+
+            border.width: ui.theme.navCtrlBorderWidth
+            border.color: ui.theme.fontPrimaryColor
+        }
 
         color: ui.theme.backgroundSecondaryColor
         opacity: 1

src/framework/uicomponents/qml/MuseScore/UiComponents/CheckBox.qml

@@ -73,12 +73,29 @@ FocusScope {
             height: 20
             width: 20
 
+            opacity: ui.theme.buttonOpacityNormal
+
             border.width: ui.theme.borderWidth
             border.color: ui.theme.strokeColor
             color: ui.theme.buttonColor
 
             radius: 2
 
+            Rectangle {
+                id: navCtrlBorderRect
+
+                anchors.fill: parent
+                anchors.margins: -ui.theme.navCtrlBorderWidth
+
+                visible: navCtrl.active
+
+                color: "transparent"
+                radius: parent.radius + navCtrlBorderRect.border.width
+
+                border.width: ui.theme.navCtrlBorderWidth
+                border.color: ui.theme.fontPrimaryColor
+            }
+
             StyledIconLabel {
                 anchors.fill: parent
                 iconCode: root.isIndeterminate ? IconCode.MINUS : IconCode.TICK_RIGHT_ANGLE
@@ -114,17 +131,6 @@ FocusScope {
     }
 
     states: [
-        State {
-            name: "FOCUSED"
-            when: navCtrl.active
-
-            PropertyChanges {
-                target: box
-                border.color: ui.theme.focusColor
-                border.width: 2
-            }
-        },
-
         State {
             name: "HOVERED"
             when: clickableArea.containsMouse && !clickableArea.pressed
@@ -132,7 +138,6 @@ FocusScope {
             PropertyChanges {
                 target: box
                 opacity: ui.theme.buttonOpacityHover
-                border.color: navCtrl.active ? ui.theme.focusColor : ui.theme.strokeColor
             }
         },
 
@@ -143,7 +148,6 @@ FocusScope {
             PropertyChanges {
                 target: box
                 opacity: ui.theme.buttonOpacityHit
-                border.color: navCtrl.active ? ui.theme.focusColor : ui.theme.strokeColor
             }
         }
     ]

src/framework/uicomponents/qml/MuseScore/UiComponents/ColorPicker.qml

@@ -41,8 +41,23 @@ Rectangle {
     radius: 3
     color: "#000000"
 
-    border.width: navCtrl.active ? 2 : 1
+    Rectangle {
-    border.color: navCtrl.active ? ui.theme.focusColor : "#000000"
+        id: navCtrlBorderRect
+
+        anchors.fill: parent
+        anchors.margins: -ui.theme.navCtrlBorderWidth
+
+        visible: navCtrl.active
+
+        color: "transparent"
+        radius: parent.radius + navCtrlBorderRect.border.width
+
+        border.width: ui.theme.navCtrlBorderWidth
+        border.color: ui.theme.fontPrimaryColor
+    }
+
+    border.width: ui.theme.borderWidth
+    border.color: ui.theme.strokeColor
 
     NavigationControl {
         id: navCtrl
@@ -79,13 +94,6 @@ Rectangle {
     }
 
     states: [
-        State {
-            name: "NORMAL"
-            when: !clickableArea.containsMouse && !colorDialog.visible
-
-            PropertyChanges { target: root; border.color: ui.theme.strokeColor }
-        },
-
         State {
             name: "HOVERED"
             when: clickableArea.containsMouse && !clickableArea.pressed && !colorDialog.visible

src/framework/uicomponents/qml/MuseScore/UiComponents/ExpandableBlankSection.qml

@@ -51,10 +51,18 @@ FocusScope {
     }
 
     Rectangle {
+        id: navCtrlBorderRect
+
         anchors.fill: parent
-        border.width: navCtrl.active ? 2 : 0
+        anchors.margins: -ui.theme.navCtrlBorderWidth
-        border.color: ui.theme.focusColor
+
+        visible: navCtrl.active
+
         color: "transparent"
+        radius: parent.radius + navCtrlBorderRect.border.width
+
+        border.width: ui.theme.navCtrlBorderWidth
+        border.color: ui.theme.fontPrimaryColor
     }
 
     Row {

src/framework/uicomponents/qml/MuseScore/UiComponents/FlatButton.qml

@@ -100,8 +100,23 @@ FocusScope {
         opacity: ui.theme.buttonOpacityNormal
         radius: 3
 
-        border.width: navCtrl.active ? 2 : ui.theme.borderWidth
+        Rectangle {
-        border.color: navCtrl.active ? ui.theme.focusColor : ui.theme.strokeColor
+            id: navCtrlBorderRect
+
+            anchors.fill: parent
+            anchors.margins: -ui.theme.navCtrlBorderWidth
+
+            visible: navCtrl.active
+
+            color: "transparent"
+            radius: parent.radius + navCtrlBorderRect.border.width
+
+            border.width: ui.theme.navCtrlBorderWidth
+            border.color: ui.theme.fontPrimaryColor
+        }
+
+        border.width: ui.theme.borderWidth
+        border.color: ui.theme.strokeColor
     }
 
     Loader {

src/framework/uicomponents/qml/MuseScore/UiComponents/FlatRadioButton.qml

@@ -60,10 +60,24 @@ RadioDelegate {
         id: backgroundRect
 
         anchors.fill: parent
-        anchors.margins: navCtrl.active ? 1 : 0
 
-        border.width: navCtrl.active ? 2 : ui.theme.borderWidth
+        Rectangle {
-        border.color: navCtrl.active ? ui.theme.focusColor : ui.theme.strokeColor
+            id: navCtrlBorderRect
+
+            anchors.fill: parent
+            anchors.margins: -ui.theme.navCtrlBorderWidth
+
+            visible: navCtrl.active
+
+            color: "transparent"
+            radius: parent.radius + navCtrlBorderRect.border.width
+
+            border.width: ui.theme.navCtrlBorderWidth
+            border.color: ui.theme.fontPrimaryColor
+        }
+
+        border.width: ui.theme.borderWidth
+        border.color: ui.theme.strokeColor
 
         color: normalStateColor
         opacity: ui.theme.buttonOpacityNormal

src/framework/uicomponents/qml/MuseScore/UiComponents/FlatToggleButton.qml

@@ -59,8 +59,23 @@ FocusScope {
 
         anchors.fill: parent
 
-        border.width: navCtrl.active ? 2 : 0
+        Rectangle {
-        border.color: ui.theme.focusColor
+            id: navCtrlBorderRect
+
+            anchors.fill: parent
+            anchors.margins: -ui.theme.navCtrlBorderWidth
+
+            visible: navCtrl.active
+
+            color: "transparent"
+            radius: parent.radius + navCtrlBorderRect.border.width
+
+            border.width: ui.theme.navCtrlBorderWidth
+            border.color: ui.theme.fontPrimaryColor
+        }
+
+        border.width: ui.theme.borderWidth
+        border.color: ui.theme.strokeColor
 
         color: ui.theme.buttonColor
         opacity: ui.theme.buttonOpacityNormal

src/framework/uicomponents/qml/MuseScore/UiComponents/FocusableControl.qml

@@ -66,8 +66,24 @@ FocusScope {
     Rectangle {
         id: focusRectItem
         anchors.fill: parent
-        border.color: keynavItem.active ? ui.theme.focusColor : root.itemBorderColor
+
-        border.width: keynavItem.active ? 2 : root.itemBorderWidth
+        Rectangle {
+            id: navCtrlBorderRect
+
+            anchors.fill: parent
+            anchors.margins: -ui.theme.navCtrlBorderWidth
+
+            visible: keynavItem.active
+
+            color: "transparent"
+            radius: parent.radius + navCtrlBorderRect.border.width
+
+            border.width: ui.theme.navCtrlBorderWidth
+            border.color: ui.theme.fontPrimaryColor
+        }
+
+        border.color: root.itemBorderColor
+        border.width: root.itemBorderWidth
     }
 
     MouseArea {

src/framework/uicomponents/qml/MuseScore/UiComponents/GradientTabButton.qml

@@ -72,13 +72,28 @@ RadioDelegate {
         Rectangle {
             id: backgroundRect
             anchors.fill: parent
-            anchors.bottomMargin: 2
+            anchors.bottomMargin: 2  //what is happening...
 
             color: ui.theme.backgroundPrimaryColor
             opacity: ui.theme.buttonOpacityNormal
 
-            border.color: keynavCtrl.active ? ui.theme.focusColor : ui.theme.strokeColor
+            Rectangle {
-            border.width: keynavCtrl.active ? 2 : ui.theme.borderWidth
+                id: navCtrlBorderRect
+
+                anchors.fill: parent
+                anchors.margins: -ui.theme.navCtrlBorderWidth
+
+                visible: keynavCtrl.active
+
+                color: "transparent"
+                radius: parent.radius + navCtrlBorderRect.border.width
+
+                border.width: ui.theme.navCtrlBorderWidth
+                border.color: ui.theme.fontPrimaryColor
+            }
+
+            border.color: ui.theme.strokeColor
+            border.width: ui.theme.borderWidth
             radius: 2
         }
 

src/framework/uicomponents/qml/MuseScore/UiComponents/ProgressButton.qml

@@ -98,8 +98,23 @@ FocusScope {
         color: prv.inProgress ? ui.theme.backgroundPrimaryColor : ui.theme.accentColor
         opacity: ui.theme.buttonOpacityNormal
 
-        border.color: ui.theme.focusColor
+        Rectangle {
-        border.width: navCtrl.active ? 2 : 0
+            id: navCtrlBorderRect
+
+            anchors.fill: parent
+            anchors.margins: -ui.theme.navCtrlBorderWidth
+
+            visible: navCtrl.active
+
+            color: "transparent"
+            radius: parent.radius + navCtrlBorderRect.border.width
+
+            border.width: ui.theme.navCtrlBorderWidth
+            border.color: ui.theme.fontPrimaryColor
+        }
+
+        border.color: ui.theme.strokeColor
+        border.width: ui.theme.borderWidth
 
         radius: 3
     }

src/framework/uicomponents/qml/MuseScore/UiComponents/StyledTabButton.qml

@@ -82,8 +82,23 @@ TabButton {
 
         color: root.backgroundColor
 
-        border.width: navCtrl.active ? 2 : ui.theme.borderWidth
+        Rectangle {
-        border.color: navCtrl.active ? ui.theme.focusColor : ui.theme.strokeColor
+            id: navCtrlBorderRect
+
+            anchors.fill: parent
+            anchors.margins: -ui.theme.navCtrlBorderWidth
+
+            visible: navCtrl.active
+
+            color: "transparent"
+            radius: parent.radius + navCtrlBorderRect.border.width
+
+            border.width: ui.theme.navCtrlBorderWidth
+            border.color: ui.theme.fontPrimaryColor
+        }
+
+        border.width: ui.theme.borderWidth
+        border.color: ui.theme.strokeColor
 
         Rectangle {
             id: selectedRect

src/framework/uicomponents/qml/MuseScore/UiComponents/TabPanel.qml

@@ -82,8 +82,26 @@ TabView {
                 color:  ui.theme.backgroundPrimaryColor
                 radius: 4
                 anchors.margins: 1
-                border.width: (tab.tabItem.navigation && tab.tabItem.navigation.active) ? 2 : ui.theme.borderWidth
+
-                border.color: (tab.tabItem.navigation && tab.tabItem.navigation.active) ? ui.theme.focusColor : ui.theme.strokeColor
+                Rectangle {
+                    id: navCtrlBorderRect
+
+                    property bool visibleOrNot: (tab.tabItem.navigation && tab.tabItem.navigation.active) //evaluating this condition directly in the `visible` variable leads to strange behaviour
+
+                    anchors.fill: parent
+                    anchors.margins: -ui.theme.navCtrlBorderWidth
+
+                    visible: visibleOrNot
+
+                    color: "transparent"
+                    radius: parent.radius + navCtrlBorderRect.border.width
+
+                    border.width: ui.theme.navCtrlBorderWidth
+                    border.color: ui.theme.fontPrimaryColor
+                }
+
+                border.width: ui.theme.borderWidth
+                border.color: ui.theme.strokeColor
                 opacity: styleData.selected ? ui.theme.buttonOpacityHit : ui.theme.buttonOpacityNormal
 
                 StyledTextLabel {

src/framework/uicomponents/qml/MuseScore/UiComponents/TextInputField.qml

@@ -100,8 +100,24 @@ FocusScope {
         anchors.fill: parent
         color: ui.theme.textFieldColor
         radius: 4
-        border.color: navCtrl.active ? ui.theme.focusColor : ui.theme.strokeColor
+
-        border.width: navCtrl.active ? 2 : ui.theme.borderWidth
+        Rectangle {
+            id: navCtrlBorderRect
+
+            anchors.fill: parent
+            anchors.margins: -ui.theme.navCtrlBorderWidth
+
+            visible: navCtrl.active
+
+            color: "transparent"
+            radius: parent.radius + navCtrlBorderRect.border.width
+
+            border.width: ui.theme.navCtrlBorderWidth
+            border.color: ui.theme.fontPrimaryColor
+        }
+
+        border.color: ui.theme.strokeColor
+        border.width: ui.theme.borderWidth
     }
 
     RowLayout {

src/framework/uicomponents/qml/MuseScore/UiComponents/internal/DropdownItem.qml

@@ -33,6 +33,7 @@ Item {
 
     property bool selected: false
 
+    property bool insideDropdownList: false
     property alias background: backgroundItem
     property alias label: labelItem
     property alias mouseArea: mouseAreaItem
@@ -62,8 +63,21 @@ Item {
         color: ui.theme.buttonColor
         radius: 4
         opacity: 0.7
-        border.color: ui.theme.focusColor
+
-        border.width: navCtrl.active ? 2 : 0
+        Rectangle {
+            id: navCtrlBorderRect
+
+            anchors.fill: parent
+            anchors.margins: -ui.theme.navCtrlBorderWidth
+
+            visible: navCtrl.active
+
+            color: "transparent"
+            radius: parent.radius + navCtrlBorderRect.border.width
+
+            border.width: ui.theme.navCtrlBorderWidth
+            border.color: ui.theme.fontPrimaryColor
+        }
     }
 
     StyledTextLabel {
@@ -81,6 +95,16 @@ Item {
     }
 
     states: [
+        State {
+            name: "FOCUSED_INSIDE_DROPDOWN"
+            when: root.insideDropdownList && navCtrl.active
+
+            PropertyChanges {
+                target: backgroundItem
+                anchors.margins: ui.theme.navCtrlBorderWidth //this effectively cancels the child's margins and draws everything inside
+            }
+        },
+
         State {
             name: "HOVERED"
             when: mouseAreaItem.containsMouse && !mouseAreaItem.pressed

src/instrumentsscene/qml/MuseScore/InstrumentsScene/internal/InstrumentsTreeItemControl.qml

@@ -39,8 +39,20 @@ Item {
         color: root.isHighlighted ? ui.theme.accentColor : ui.theme.textFieldColor
         opacity: root.isHighlighted ? 0.5 : 1
 
-        border.color: ui.theme.focusColor
+        Rectangle {
-        border.width: keynavItem.active ? 2 : 0
+            id: navCtrlBorderRect
+
+            anchors.fill: parent
+            anchors.margins: -ui.theme.navCtrlBorderWidth
+
+            visible: keynavItem.active
+
+            color: "transparent"
+            radius: parent.radius + navCtrlBorderRect.border.width
+
+            border.width: ui.theme.navCtrlBorderWidth
+            border.color: ui.theme.fontPrimaryColor
+        }
     }
 
     signal clicked()

src/instrumentsscene/qml/MuseScore/InstrumentsScene/internal/InstrumentsTreeItemDelegate.qml

@@ -118,12 +118,25 @@ Item {
         id: background
 
         anchors.fill: parent
+        //anchors.margins: keynavItem.active ? ui.theme.navCtrlBorderWidth : 0
 
         color: ui.theme.backgroundPrimaryColor
         opacity: 1
 
-        border.color: ui.theme.focusColor
+        Rectangle {
-        border.width: keynavItem.active ? 2 : 0
+            id: navCtrlBorderRect
+
+            anchors.fill: parent
+            anchors.margins: -ui.theme.navCtrlBorderWidth
+
+            visible: keynavItem.active
+
+            color: "transparent"
+            radius: parent.radius + navCtrlBorderRect.border.width
+
+            border.width: ui.theme.navCtrlBorderWidth
+            border.color: ui.theme.fontPrimaryColor
+        }
 
         states: [
             State {
@@ -148,16 +161,16 @@ Item {
                 }
             },
 
-            State {
+//            State {
-                name: "SELECTED"
+//                name: "SELECTED"
-                when: root.isSelected
+//                when: root.isSelected
 
-                PropertyChanges {
+//                PropertyChanges {
-                    target: background
+//                    target: background
-                    color: ui.theme.accentColor
+//                    color: ui.theme.accentColor
-                    opacity: 0.5
+//                    opacity: 0.5
-                }
+//                }
-            },
+//            },
 
             State {
                 name: "PART_EXPANDED"

src/userscores/qml/MuseScore/UserScores/internal/ScoreItem.qml

@@ -104,8 +104,23 @@ FocusScope {
                 color: "transparent"
                 radius: parent.radius
 
-                border.color: navCtrl.active ? ui.theme.focusColor : ui.theme.strokeColor
+                Rectangle {
-                border.width: navCtrl.active ? 2 : parent.borderWidth
+                    id: navCtrlBorderRect
+
+                    anchors.fill: parent
+                    anchors.margins: -ui.theme.navCtrlBorderWidth
+
+                    visible: navCtrl.active
+
+                    color: "transparent"
+                    radius: parent.radius + navCtrlBorderRect.border.width
+
+                    border.width: ui.theme.navCtrlBorderWidth
+                    border.color: ui.theme.fontPrimaryColor
+                }
+
+                border.color: ui.theme.strokeColor
+                border.width: parent.borderWidth
             }
 
             states: [