Added and Implemented New UiComponent NavigationFocusBorder

musescore · Aug 8, 2021 · 82bb2b4 · 82bb2b4
1 parent af89b62
commit 82bb2b4
Show file tree

Hide file tree

Showing 26 changed files with 85 additions and 269 deletions.
diff --git a/src/appshell/qml/DevTools/KeyNav/KeyNavSection.qml b/src/appshell/qml/DevTools/KeyNav/KeyNavSection.qml
@@ -34,20 +34,7 @@ Rectangle {
 
     default property alias content: contentItem.data
 
-    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
-    }
+    NavigationFocusBorder { navigationCtrl: keynavsec }
 
     NavigationSection {
         id: keynavsec

diff --git a/src/appshell/qml/DevTools/KeyNav/KeyNavSubSection.qml b/src/appshell/qml/DevTools/KeyNav/KeyNavSubSection.qml
@@ -34,21 +34,7 @@ Rectangle {
     height: 40
     width: btns.childrenRect.width
 
-    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
-    }
+    NavigationFocusBorder { navigationCtrl: keynavsec }
 
     signal clicked(string info)
 

diff --git a/src/appshell/qml/dockwindow/DockPanelTab.qml b/src/appshell/qml/dockwindow/DockPanelTab.qml
@@ -73,18 +73,9 @@ StyledTabButton {
     background: Rectangle {
         id: backgroundRect
 
-        Rectangle {
-            id: navCtrlBorderRect
-
-            anchors.fill: parent
-
-            visible: root.navigation.active
-
-            color: "transparent"
-            radius: parent.radius + navCtrlBorderRect.border.width
-
-            border.width: ui.theme.navCtrlBorderWidth
-            border.color: ui.theme.fontPrimaryColor
+        NavigationFocusBorder{
+            navigationCtrl: root.navigation
+            anchors.margins: 0
         }
 
         color: ui.theme.backgroundSecondaryColor

diff --git a/src/framework/ui/internal/uiconfiguration.cpp b/src/framework/ui/internal/uiconfiguration.cpp
@@ -56,12 +56,14 @@ static const QMap<ThemeStyleKey, QVariant> LIGHT_THEME_VALUES {
     { ACCENT_COLOR, "#70AFEA" },
     { STROKE_COLOR, "#CED1D4" },
     { BUTTON_COLOR, "#CFD5DD" },
-    { BORDER_WIDTH, 0 },
     { FONT_PRIMARY_COLOR, "#111132" },
     { FONT_SECONDARY_COLOR, "#FFFFFF" },
     { LINK_COLOR, "#70AFEA" },
     { FOCUS_COLOR, "#75507b" },
 
+    { BORDER_WIDTH, 0 },
+    { NAVIGATION_CONTROL_BORDER_WIDTH, 2.0 },
+
     { ACCENT_OPACITY_NORMAL, 0.3 },
     { ACCENT_OPACITY_HOVER, 0.15 },
     { ACCENT_OPACITY_HIT, 0.5 },
@@ -81,12 +83,14 @@ static const QMap<ThemeStyleKey, QVariant> DARK_THEME_VALUES {
     { ACCENT_COLOR, "#FF4848" },
     { STROKE_COLOR, "#1E1E1E" },
     { BUTTON_COLOR, "#595959" },
-    { BORDER_WIDTH, 0 },
     { FONT_PRIMARY_COLOR, "#EBEBEB" },
     { FONT_SECONDARY_COLOR, "#BDBDBD" },
     { LINK_COLOR, "#70AFEA" },
     { FOCUS_COLOR, "#75507b" },
 
+    { BORDER_WIDTH, 0 },
+    { NAVIGATION_CONTROL_BORDER_WIDTH, 2.0 },
+
     { ACCENT_OPACITY_NORMAL, 0.8 },
     { ACCENT_OPACITY_HOVER, 1.0 },
     { ACCENT_OPACITY_HIT, 0.5 },
@@ -106,12 +110,14 @@ static const QMap<ThemeStyleKey, QVariant> HIGH_CONTRAST_BLACK_THEME_VALUES {
     { ACCENT_COLOR, "#0071DA" },
     { STROKE_COLOR, "#FFFFFF" },
     { BUTTON_COLOR, "#000000" },
-    { BORDER_WIDTH, 1.0 },
     { FONT_PRIMARY_COLOR, "#FFFD38" },
     { FONT_SECONDARY_COLOR, "#BDBDBD" },
     { LINK_COLOR, "#70AFEA" },
     { FOCUS_COLOR, "#75507b" },
 
+    { BORDER_WIDTH, 1.0 },
+    { NAVIGATION_CONTROL_BORDER_WIDTH, 2.0 },
+
     { ACCENT_OPACITY_NORMAL, 0.8 },
     { ACCENT_OPACITY_HOVER, 1.0 },
     { ACCENT_OPACITY_HIT, 0.5 },
@@ -131,12 +137,14 @@ static const QMap<ThemeStyleKey, QVariant> HIGH_CONTRAST_WHITE_THEME_VALUES {
     { ACCENT_COLOR, "#00D87D" },
     { STROKE_COLOR, "#000000" },
     { BUTTON_COLOR, "#FFFFFF" },
-    { BORDER_WIDTH, 1.0 },
     { FONT_PRIMARY_COLOR, "#1E0073" },
     { FONT_SECONDARY_COLOR, "#000000" },
     { LINK_COLOR, "#70AFEA" },
     { FOCUS_COLOR, "#75507b" },
 
+    { BORDER_WIDTH, 1.0 },
+    { NAVIGATION_CONTROL_BORDER_WIDTH, 2.0 },
+
     { ACCENT_OPACITY_NORMAL, 0.3 },
     { ACCENT_OPACITY_HOVER, 0.15 },
     { ACCENT_OPACITY_HIT, 0.5 },

diff --git a/src/framework/ui/uitypes.h b/src/framework/ui/uitypes.h
@@ -62,12 +62,14 @@ enum ThemeStyleKey
     ACCENT_COLOR,
     STROKE_COLOR,
     BUTTON_COLOR,
-    BORDER_WIDTH,
     FONT_PRIMARY_COLOR,
     FONT_SECONDARY_COLOR,
     LINK_COLOR,
     FOCUS_COLOR,
 
+    BORDER_WIDTH,
+    NAVIGATION_CONTROL_BORDER_WIDTH,
+
     ACCENT_OPACITY_NORMAL,
     ACCENT_OPACITY_HOVER,
     ACCENT_OPACITY_HIT,
@@ -201,8 +203,8 @@ class UiActionList : public std::vector<UiAction>
     bool contains(const actions::ActionCode& code) const
     {
         auto it = std::find_if(cbegin(), cend(), [code](const UiAction& a) {
-            return a.code == code;
-        });
+                return a.code == code;
+            });
         return it != cend();
     }
 

diff --git a/src/framework/ui/view/uitheme.cpp b/src/framework/ui/view/uitheme.cpp
@@ -125,7 +125,7 @@ void UiTheme::initThemeValues()
     m_focusColor = themeValues[FOCUS_COLOR].toString();
 
     m_borderWidth = themeValues[BORDER_WIDTH].toReal();
-    m_navCtrlBorderWidth = 2.0;
+    m_navCtrlBorderWidth = themeValues[NAVIGATION_CONTROL_BORDER_WIDTH].toReal();
     m_accentOpacityNormal = themeValues[ACCENT_OPACITY_NORMAL].toReal();
     m_accentOpacityHover = themeValues[ACCENT_OPACITY_HOVER].toReal();
     m_accentOpacityHit = themeValues[ACCENT_OPACITY_HIT].toReal();

diff --git a/src/framework/ui/view/uitheme.h b/src/framework/ui/view/uitheme.h
@@ -51,6 +51,7 @@ class UiTheme : public QProxyStyle, public async::Asyncable
 
     Q_PROPERTY(qreal borderWidth READ borderWidth NOTIFY themeChanged)
     Q_PROPERTY(qreal navCtrlBorderWidth READ navCtrlBorderWidth NOTIFY themeChanged)
+
     Q_PROPERTY(qreal accentOpacityNormal READ accentOpacityNormal NOTIFY themeChanged)
     Q_PROPERTY(qreal accentOpacityHit READ accentOpacityHit NOTIFY themeChanged)
     Q_PROPERTY(qreal accentOpacityHover READ accentOpacityHover NOTIFY themeChanged)

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/CheckBox.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/CheckBox.qml
@@ -81,20 +81,7 @@ FocusScope {
 
             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
-            }
+            NavigationFocusBorder { navigationCtrl: navCtrl }
 
             StyledIconLabel {
                 anchors.fill: parent

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/ColorPicker.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/ColorPicker.qml
@@ -41,20 +41,7 @@ Rectangle {
     radius: 3
     color: "#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
-    }
+    NavigationFocusBorder { navigationCtrl: navCtrl }
 
     border.width: ui.theme.borderWidth
     border.color: ui.theme.strokeColor

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/ExpandableBlankSection.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/ExpandableBlankSection.qml
@@ -50,18 +50,9 @@ FocusScope {
         }
     }
 
-    Rectangle {
-        id: navCtrlBorderRect
-
-        anchors.fill: parent
-
-        visible: navCtrl.active
-
-        color: "transparent"
-        radius: parent.radius + navCtrlBorderRect.border.width
-
-        border.width: ui.theme.navCtrlBorderWidth
-        border.color: ui.theme.fontPrimaryColor
+    NavigationFocusBorder{
+        navigationCtrl: navCtrl
+        anchors.margins: 0
     }
 
     Row {

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatButton.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatButton.qml
@@ -100,20 +100,7 @@ FocusScope {
         opacity: ui.theme.buttonOpacityNormal
         radius: 3
 
-        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
-        }
+        NavigationFocusBorder { navigationCtrl: navCtrl }
 
         border.width: ui.theme.borderWidth
         border.color: ui.theme.strokeColor

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatRadioButton.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatRadioButton.qml
@@ -61,20 +61,7 @@ RadioDelegate {
 
         anchors.fill: parent
 
-        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
-        }
+        NavigationFocusBorder { navigationCtrl: navCtrl }
 
         border.width: ui.theme.borderWidth
         border.color: ui.theme.strokeColor

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatToggleButton.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatToggleButton.qml
@@ -59,20 +59,7 @@ FocusScope {
 
         anchors.fill: parent
 
-        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
-        }
+        NavigationFocusBorder { navigationCtrl: navCtrl }
 
         border.width: ui.theme.borderWidth
         border.color: ui.theme.strokeColor

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/FocusableControl.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/FocusableControl.qml
@@ -69,20 +69,7 @@ FocusScope {
         anchors.fill: parent
         anchors.margins: keynavItem.active ? root.navCtrlBorderOverride : 0
 
-        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
-        }
+        NavigationFocusBorder { navigationCtrl: keynavItem }
 
         border.color: root.itemBorderColor
         border.width: root.itemBorderWidth

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/GradientTabButton.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/GradientTabButton.qml
@@ -72,25 +72,12 @@ RadioDelegate {
         Rectangle {
             id: backgroundRect
             anchors.fill: parent
-            anchors.bottomMargin: 2  //what is happening...
+            anchors.bottomMargin: 2
 
             color: ui.theme.backgroundPrimaryColor
             opacity: ui.theme.buttonOpacityNormal
 
-            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
-            }
+            NavigationFocusBorder { navigationCtrl: keynavCtrl }
 
             border.color: ui.theme.strokeColor
             border.width: ui.theme.borderWidth

diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/NavigationFocusBorder.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/NavigationFocusBorder.qml
@@ -0,0 +1,40 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-only
+ * MuseScore-CLA-applies
+ *
+ * MuseScore
+ * Music Composition & Notation
+ *
+ * Copyright (C) 2021 MuseScore BVBA and others
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * 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.0
+import MuseScore.Ui 1.0
+
+Rectangle {
+    id: root
+
+    property NavigationControl navigationCtrl: null
+
+    anchors.fill: parent
+    anchors.margins: -ui.theme.navCtrlBorderWidth
+
+    visible: navigationCtrl.active
+
+    color: "transparent"
+    radius: parent.radius + root.border.width
+
+    border.width: ui.theme.navCtrlBorderWidth
+    border.color: ui.theme.fontPrimaryColor
+}