Navigation Control Border style changed (90% implementation done)

musescore · RomanPudashkin · Aug 9, 2021 · Aug 5, 2021 · Aug 6, 2021 · Aug 8, 2021
commit 883868732cdfcf8e45084ca74cbca7e8a765e730
diff --git a/src/appshell/qml/DevTools/KeyNav/KeyNavExample.qml b/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
 

diff --git a/src/appshell/qml/DevTools/KeyNav/KeyNavSection.qml b/src/appshell/qml/DevTools/KeyNav/KeyNavSection.qml
@@ -34,8 +34,20 @@ Rectangle {
 
     default property alias content: contentItem.data
 
-    border.color: "#75507b"
-    border.width: keynavsec.active ? 4 : 0
+    Rectangle {
+        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

diff --git a/src/appshell/qml/DevTools/KeyNav/KeyNavSubSection.qml b/src/appshell/qml/DevTools/KeyNav/KeyNavSubSection.qml
@@ -34,8 +34,21 @@ Rectangle {
     height: 40
     width: btns.childrenRect.width
 
-    border.color: "#75507b"
-    border.width: keynavsec.active ? 4 : 0
+    Rectangle {
+        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)
 

diff --git a/src/appshell/qml/dockwindow/DockPanelTab.qml b/src/appshell/qml/dockwindow/DockPanelTab.qml
@@ -73,8 +73,20 @@ StyledTabButton {
     background: Rectangle {
         id: backgroundRect
 
-        border.width: root.navigation.active ? 2 : 0
-        border.color: ui.theme.focusColor
+        Rectangle {
+            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

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/CheckBox.qml b/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,25 +131,13 @@ 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
 
             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
             }
         }
     ]

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/ColorPicker.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/ColorPicker.qml
@@ -41,8 +41,23 @@ Rectangle {
     radius: 3
     color: "#000000"
 
-    border.width: navCtrl.active ? 2 : 1
-    border.color: navCtrl.active ? ui.theme.focusColor : "#000000"
+    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.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

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/ExpandableBlankSection.qml b/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
-        border.color: ui.theme.focusColor
+        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
     }
 
     Row {

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatButton.qml b/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
-        border.color: navCtrl.active ? ui.theme.focusColor : ui.theme.strokeColor
+        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.width: ui.theme.borderWidth
+        border.color: ui.theme.strokeColor
     }
 
     Loader {

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatRadioButton.qml b/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
-        border.color: navCtrl.active ? ui.theme.focusColor : ui.theme.strokeColor
+        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.width: ui.theme.borderWidth
+        border.color: ui.theme.strokeColor
 
         color: normalStateColor
         opacity: ui.theme.buttonOpacityNormal

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatToggleButton.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatToggleButton.qml
@@ -59,8 +59,23 @@ FocusScope {
 
         anchors.fill: parent
 
-        border.width: navCtrl.active ? 2 : 0
-        border.color: ui.theme.focusColor
+        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.width: ui.theme.borderWidth
+        border.color: ui.theme.strokeColor
 
         color: ui.theme.buttonColor
         opacity: ui.theme.buttonOpacityNormal

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/FocusableControl.qml b/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 {

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/GradientTabButton.qml b/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
-            border.width: keynavCtrl.active ? 2 : ui.theme.borderWidth
+            Rectangle {
+                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
         }