LoweBowe/MuseScore
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Navigation Control Border style changed (90% implementation done)

Browse source
This commit is contained in:
Arjun Taneja 2021-08-05 18:35:05 +05:30
parent b30d94e1e2
commit 883868732c
20 changed files with 337 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/appshell/qml/DevTools/KeyNav/KeyNavExample.qml
View file

@ -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

16
src/appshell/qml/DevTools/KeyNav/KeyNavSection.qml
View file

@ -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

17
src/appshell/qml/DevTools/KeyNav/KeyNavSubSection.qml
View file

@ -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)

16
src/appshell/qml/dockwindow/DockPanelTab.qml
View file

@ -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

30
src/framework/uicomponents/qml/MuseScore/UiComponents/CheckBox.qml
View file

@ -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
}
}
]

26
src/framework/uicomponents/qml/MuseScore/UiComponents/ColorPicker.qml
View file

@ -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

12
src/framework/uicomponents/qml/MuseScore/UiComponents/ExpandableBlankSection.qml
View file

@ -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 {

19
src/framework/uicomponents/qml/MuseScore/UiComponents/FlatButton.qml
View file

@ -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 {

20
src/framework/uicomponents/qml/MuseScore/UiComponents/FlatRadioButton.qml
View file

@ -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

19
src/framework/uicomponents/qml/MuseScore/UiComponents/FlatToggleButton.qml
View file

@ -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

20
src/framework/uicomponents/qml/MuseScore/UiComponents/FocusableControl.qml
View file

@ -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 {

21
src/framework/uicomponents/qml/MuseScore/UiComponents/GradientTabButton.qml
View file

@ -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
}

19
src/framework/uicomponents/qml/MuseScore/UiComponents/ProgressButton.qml
View file

@ -98,8 +98,23 @@ FocusScope {
color: prv.inProgress ? ui.theme.backgroundPrimaryColor : ui.theme.accentColor
opacity: ui.theme.buttonOpacityNormal
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
}
border.color: ui.theme.strokeColor
border.width: ui.theme.borderWidth
radius: 3
}

19
src/framework/uicomponents/qml/MuseScore/UiComponents/StyledTabButton.qml
View file

@ -82,8 +82,23 @@ TabButton {
color: root.backgroundColor
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
Rectangle {
id: selectedRect

22
src/framework/uicomponents/qml/MuseScore/UiComponents/TabPanel.qml
View file

@ -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 {

20
src/framework/uicomponents/qml/MuseScore/UiComponents/TextInputField.qml
View file

@ -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 {

28
src/framework/uicomponents/qml/MuseScore/UiComponents/internal/DropdownItem.qml
View file

@ -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

16
src/instrumentsscene/qml/MuseScore/InstrumentsScene/internal/InstrumentsTreeItemControl.qml
View file

@ -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
border.width: keynavItem.active ? 2 : 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
}
}
signal clicked()

35
src/instrumentsscene/qml/MuseScore/InstrumentsScene/internal/InstrumentsTreeItemDelegate.qml
View file

@ -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
border.width: keynavItem.active ? 2 : 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
}
states: [
State {
@ -148,16 +161,16 @@ Item {
}
},
State {
name: "SELECTED"
when: root.isSelected
// State {
// name: "SELECTED"
// when: root.isSelected
PropertyChanges {
target: background
color: ui.theme.accentColor
opacity: 0.5
}
},
// PropertyChanges {
// target: background
// color: ui.theme.accentColor
// opacity: 0.5
// }
// },
State {
name: "PART_EXPANDED"

19
src/userscores/qml/MuseScore/UserScores/internal/ScoreItem.qml
View file

@ -104,8 +104,23 @@ FocusScope {
color: "transparent"
radius: parent.radius
border.color: navCtrl.active ? ui.theme.focusColor : ui.theme.strokeColor
border.width: navCtrl.active ? 2 : parent.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: parent.borderWidth
}
states: [