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

Fine-tune appearance of AudioResourceControl

Browse source
This commit is contained in:
Casper Jeukendrup 2021-12-02 01:41:19 +01:00 committed by pereverzev+v
parent 4e652a7640
commit 2de21fe3e4
3 changed files with 57 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/framework/uicomponents/qml/MuseScore/UiComponents/Border.qml
View file

@ -19,9 +19,9 @@
* 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 QtQuick 2.15
QtObject {
property int width: 0
property real width: 0
property color color: "#00000000"
}

55
src/framework/uicomponents/qml/MuseScore/UiComponents/RoundedRectangle.qml
View file

@ -19,53 +19,38 @@
* 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 QtQuick 2.15
Canvas {
id: root
property int radius: 0
property real radius: 0
property int topLeftRadius: radius
property int topRightRadius: radius
property int bottomLeftRadius: radius
property int bottomRightRadius: radius
property real topLeftRadius: radius
property real topRightRadius: radius
property real bottomLeftRadius: radius
property real bottomRightRadius: radius
property color color: "#FFFFFF"
property Border border: Border {}
onColorChanged: {
requestPaint()
onColorChanged: { requestPaint() }
onBorderChanged: { requestPaint() }
Connections {
target: border
function onColorChanged() { requestPaint() }
function onWidthChanged() { requestPaint() }
}
onBorderChanged: {
requestPaint()
}
onTopLeftRadiusChanged: { requestPaint() }
onTopRightRadiusChanged: { requestPaint() }
onBottomRightRadiusChanged: { requestPaint() }
onBottomLeftRadiusChanged: { requestPaint() }
onTopLeftRadiusChanged: {
requestPaint()
}
onTopRightRadiusChanged: {
requestPaint()
}
onBottomRightRadiusChanged: {
requestPaint()
}
onBottomLeftRadiusChanged: {
requestPaint()
}
onOpacityChanged: {
requestPaint()
}
onActiveFocusChanged: {
requestPaint()
}
onOpacityChanged: { requestPaint() }
onActiveFocusChanged: { requestPaint() }
onPaint: {
roundRect(0, 0, width, height)
@ -84,6 +69,8 @@ Canvas {
return
}
context.clearRect(0, 0, width, height)
context.beginPath()
context.fillStyle = root.color
context.strokeStyle = root.border.color

88
src/playback/qml/MuseScore/Playback/internal/AudioResourceControl.qml
View file

@ -19,9 +19,9 @@
* 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 MuseScore.Ui 1.0
import MuseScore.UiComponents 1.0
import MuseScore.Audio 1.0
@ -92,17 +92,14 @@ Item {
backgroundItem: RoundedRectangle {
id: activityButtonBackground
color: root.active ? ui.theme.accentColor : ui.theme.buttonColor
opacity: ui.theme.buttonOpacityNormal
property real backgroundOpacity: ui.theme.buttonOpacityNormal
color: Utils.colorWithAlpha(root.active ? ui.theme.accentColor : ui.theme.buttonColor, backgroundOpacity)
topLeftRadius: 3
topRightRadius: 0
bottomLeftRadius: 3
bottomRightRadius: 0
border.width: ui.theme.borderWidth
border.color: ui.theme.strokeColor
NavigationFocusBorder {
navigationCtrl: activityButton.navigation
}
@ -114,31 +111,24 @@ Item {
PropertyChanges {
target: activityButtonBackground
opacity: ui.theme.buttonOpacityHit
backgroundOpacity: ui.theme.buttonOpacityHit
}
},
State {
name: "HOVERED"
when: rootMouseArea.containsMouse
when: (!activityButton.mouseArea.pressed && rootMouseArea.containsMouse) || root.resourcePickingActive
PropertyChanges {
target: activityButtonBackground
opacity: ui.theme.buttonOpacityHover
backgroundOpacity: ui.theme.buttonOpacityHover
}
}
]
Rectangle {
id: rightSeparator
SeparatorLine {
anchors.right: parent.right
height: root.height
width: 1
color: ui.theme.fontPrimaryColor
opacity: 0.3
orientation: Qt.Vertical
}
}
@ -182,13 +172,10 @@ Item {
backgroundItem: RoundedRectangle {
id: titleButtonBackground
color: root.active ? ui.theme.accentColor : ui.theme.buttonColor
opacity: ui.theme.buttonOpacityNormal
property real backgroundOpacity: ui.theme.buttonOpacityNormal
color: Utils.colorWithAlpha(root.active ? ui.theme.accentColor : ui.theme.buttonColor, backgroundOpacity)
radius: 3
border.width: ui.theme.borderWidth
border.color: ui.theme.strokeColor
NavigationFocusBorder {
navigationCtrl: titleButton.navigation
}
@ -200,21 +187,23 @@ Item {
PropertyChanges {
target: titleButtonBackground
opacity: ui.theme.buttonOpacityHit
radius: 0
topLeftRadius: root.supportsByPassing ? 0 : 3
bottomLeftRadius: topLeftRadius
backgroundOpacity: ui.theme.buttonOpacityHit
}
},
State {
name: "HOVERED"
when: rootMouseArea.containsMouse || root.resourcePickingActive
when: (!titleButton.mouseArea.pressed && rootMouseArea.containsMouse) || root.resourcePickingActive
PropertyChanges {
target: titleButtonBackground
topRightRadius: 0
bottomRightRadius: topRightRadius
radius: 0
topLeftRadius: root.supportsByPassing ? 0 : 3
bottomLeftRadius: topLeftRadius
opacity: ui.theme.buttonOpacityHover
backgroundOpacity: ui.theme.buttonOpacityHover
}
PropertyChanges {
@ -265,17 +254,14 @@ Item {
backgroundItem: RoundedRectangle {
id: menuButtonBackground
color: root.active ? ui.theme.accentColor : ui.theme.buttonColor
opacity: ui.theme.buttonOpacityNormal
property real backgroundOpacity: ui.theme.buttonOpacityNormal
color: Utils.colorWithAlpha(root.active ? ui.theme.accentColor : ui.theme.buttonColor, backgroundOpacity)
topLeftRadius: 0
topRightRadius: 3
bottomLeftRadius: 0
bottomRightRadius: 3
border.width: ui.theme.borderWidth
border.color: ui.theme.strokeColor
NavigationFocusBorder {
navigationCtrl: menuButton.navigation
}
@ -283,35 +269,28 @@ Item {
states: [
State {
name: "PRESSED"
when: root.resourcePickingActive
when: menuButton.mouseArea.pressed || root.resourcePickingActive
PropertyChanges {
target: menuButtonBackground
opacity: ui.theme.buttonOpacityHit
backgroundOpacity: ui.theme.buttonOpacityHit
}
},
State {
name: "HOVERED"
when: rootMouseArea.containsMouse && !root.resourcePickingActive
when: (!menuButton.mouseArea.pressed && rootMouseArea.containsMouse) && !root.resourcePickingActive
PropertyChanges {
target: menuButtonBackground
opacity: ui.theme.buttonOpacityHover
backgroundOpacity: ui.theme.buttonOpacityHover
}
}
]
Rectangle {
id: leftSeparator
SeparatorLine {
anchors.left: parent.left
height: root.height
width: 1
color: ui.theme.fontPrimaryColor
opacity: 0.3
orientation: Qt.Vertical
}
}
@ -352,18 +331,19 @@ Item {
}
}
Rectangle {
anchors.fill: parent
color: "transparent"
border.color: ui.theme.strokeColor
border.width: root.active ? ui.theme.borderWidth : 1
radius: 3
}
MouseArea {
id: rootMouseArea
anchors.fill: parent
propagateComposedEvents: true
acceptedButtons: Qt.NoButton
hoverEnabled: true
onClicked: mouse.accepted = false
onPressed: mouse.accepted = false
onReleased: mouse.accepted = false
onDoubleClicked: mouse.accepted = false
onPositionChanged: mouse.accepted = false
onPressAndHold: mouse.accepted = false
}
}