[vlc-commits] qml: update play control button style
Fatih Uzunoglu
git at videolan.org
Wed Feb 17 09:31:56 UTC 2021
vlc | branch: master | Fatih Uzunoglu <fuzun54 at outlook.com> | Fri Feb 12 00:23:42 2021 +0300| [0b9fcd0132c476154c6d65daefb60a793d5f3059] | committer: Pierre Lamot
qml: update play control button style
This patch updates the style of play button according to the latest changes in the design.
Signed-off-by: Pierre Lamot <pierre at videolabs.io>
> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=0b9fcd0132c476154c6d65daefb60a793d5f3059
---
modules/gui/qt/player/qml/ControlButtons.qml | 135 +++++++++++++++------------
1 file changed, 77 insertions(+), 58 deletions(-)
diff --git a/modules/gui/qt/player/qml/ControlButtons.qml b/modules/gui/qt/player/qml/ControlButtons.qml
index c0880a9927..9729bc537f 100644
--- a/modules/gui/qt/player/qml/ControlButtons.qml
+++ b/modules/gui/qt/player/qml/ControlButtons.qml
@@ -154,18 +154,17 @@ Item{
width: VLCStyle.icon_medium
height: width
- // TODO: Bind videoOverlays (set 'true' below) to player property which indicates if video is rendered over player controls
- property bool videoOverlays: !isMiniplayer && true
+ property bool isOpaque: !isMiniplayer
property VLCColors colors: VLCStyle.colors
- property color color: colors.buttonText
- property color colorDisabled: colors.textInactive
+ property color color: isOpaque ? colors.buttonText : "#303030"
+ property color colorDisabled: isOpaque ? colors.textInactive : "#7f8c8d"
property bool acceptFocus: true
property bool paintOnly: false
- property bool realHovered: false
+ property bool isCursorInside: false
Keys.onPressed: {
if (KeyHelper.matchOk(event) ) {
@@ -177,16 +176,53 @@ Item{
mainPlaylistController.togglePlayPause()
}
+ states: [
+ State {
+ name: "hovered"
+ when: interactionIndicator
+
+ PropertyChanges {
+ target: contentLabel
+ color: "#FF610A"
+ }
+
+ PropertyChanges {
+ target: hoverShadow
+ radius: VLCStyle.dp(24, VLCStyle.scale)
+ }
+ },
+ State {
+ name: "default"
+ when: !interactionIndicator
+
+ PropertyChanges {
+ target: contentLabel
+ color: enabled ? playBtn.color : playBtn.colorDisabled
+ }
+
+ PropertyChanges {
+ target: hoverShadow
+ radius: 0
+ }
+ }
+ ]
+ readonly property bool interactionIndicator: (playBtn.activeFocus || playBtn.isCursorInside || playBtn.highlighted)
+
contentItem: Label {
id: contentLabel
- color: videoOverlays ? (playBtn.enabled ? playBtn.color : playBtn.colorDisabled)
- : (playBtn.enabled ? "#303030" : "#7f8c8d")
text: (player.playingState !== PlayerController.PLAYING_STATE_PAUSED
&& player.playingState !== PlayerController.PLAYING_STATE_STOPPED)
? VLCIcons.pause
: VLCIcons.play
+ Behavior on color {
+ ColorAnimation {
+ duration: 75
+ easing.type: Easing.InOutSine
+ }
+ }
+
Behavior on text {
SequentialAnimation {
NumberAnimation {
@@ -197,6 +233,8 @@ Item{
duration: 75
}
+ // this blank PropertyAction triggers the
+ // text (icon) change amidst the size animation
PropertyAction { }
NumberAnimation {
@@ -217,7 +255,6 @@ Item{
}
background: Item {
-
Gradient {
id: playBtnGradient
GradientStop { position: 0.0; color: "#f89a06" }
@@ -241,29 +278,52 @@ Item{
onPositionChanged: {
if (distance2D(playBtnMouseArea.mouseX, playBtnMouseArea.mouseY, playBtnMouseArea.width / 2, playBtnMouseArea.height / 2) < radius) {
// mouse is inside of the round button
- playBtn.realHovered = true
+ playBtn.isCursorInside = true
}
else {
// mouse is outside
- playBtn.realHovered = false
+ playBtn.isCursorInside = false
}
}
onHoveredChanged: {
if (!playBtnMouseArea.containsMouse)
- playBtn.realHovered = false
+ playBtn.isCursorInside = false
}
onClicked: {
- if (playBtn.realHovered)
- mainPlaylistController.togglePlayPause()
+ if (!playBtn.isCursorInside)
+ return
+
+ mainPlaylistController.togglePlayPause()
}
onPressAndHold: {
- if (playBtn.realHovered)
- mainPlaylistController.stop()
+ if (!playBtn.isCursorInside)
+ return
+
+ mainPlaylistController.stop()
}
+ }
+
+ DropShadow {
+ id: hoverShadow
+ anchors.fill: parent
+
+ visible: radius > 0
+ samples: (radius * 2) + 1
+ // opacity: 0.29 // it looks better without this
+ color: "#FF610A"
+ source: opacityMask
+ antialiasing: true
+
+ Behavior on radius {
+ NumberAnimation {
+ duration: 75
+ easing.type: Easing.InOutSine
+ }
+ }
}
Rectangle {
@@ -272,57 +332,17 @@ Item{
anchors.margins: VLCStyle.dp(1, VLCStyle.scale)
color: VLCStyle.colors.white
- opacity: playBtn.videoOverlays ? 0.4 : 1.0
+ opacity: playBtn.isOpaque ? 0.4 : 1.0
}
Rectangle {
id: outerRect
- radius: (width * 0.5)
anchors.fill: parent
- gradient: playBtnGradient
-
- visible: false
-
- antialiasing: true
- }
-
- Rectangle {
- id: innerColorRect
-
- anchors.fill: parent
radius: (width * 0.5)
-
- opacity: 0
gradient: playBtnGradient
- state: "transparent"
-
- readonly property bool stateIndicator: (playBtn.activeFocus || playBtn.realHovered || playBtn.highlighted)
- states: [
- State {
- name: "opaque"
- when: innerColorRect.stateIndicator
- PropertyChanges {
- target: innerColorRect
- opacity: 1.0
- }
- },
- State {
- name: "transparent"
- when: !innerColorRect.stateIndicator
- PropertyChanges {
- target: innerColorRect
- opacity: 0
- }
- }
- ]
-
- transitions: Transition {
- NumberAnimation { properties: "opacity"; duration: 75; easing.type: Easing.InOutSine }
- }
-
- antialiasing: true
+ visible: false
}
Rectangle {
@@ -343,7 +363,6 @@ Item{
source: outerRect
maskSource: innerRect
-
antialiasing: true
}
}
More information about the vlc-commits
mailing list