[vlc-commits] [Git][videolan/vlc][master] 5 commits: qml: implement AnimatedBackground
Jean-Baptiste Kempf
gitlab at videolan.org
Mon Jun 21 11:49:52 UTC 2021
Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC
Commits:
01fa1416 by Prince Gupta at 2021-06-21T15:28:56+05:30
qml: implement AnimatedBackground
- - - - -
fc953bd5 by Prince Gupta at 2021-06-21T15:40:21+05:30
qml/GridItem: use AnimatedBackground
- - - - -
a72a6374 by Prince Gupta at 2021-06-21T15:42:58+05:30
qml/tableviewdelegate: use AnimatedBackground
- - - - -
2a679d0e by Prince Gupta at 2021-06-21T15:42:58+05:30
qml/tableviewdelegate: remove unnecessary column root
- - - - -
2c63d6f0 by Prince Gupta at 2021-06-21T15:42:58+05:30
qml/griditem: replace unselected state with default state
all items load in default state, previously GridItem was using
`unselected` state for default state, this make transitions to run on
every GridItem load incurring performance cost, replace unselected state
with default state
- - - - -
5 changed files:
- modules/gui/qt/Makefile.am
- modules/gui/qt/vlc.qrc
- + modules/gui/qt/widgets/qml/AnimatedBackground.qml
- modules/gui/qt/widgets/qml/GridItem.qml
- modules/gui/qt/widgets/qml/TableViewDelegate.qml
Changes:
=====================================
modules/gui/qt/Makefile.am
=====================================
@@ -759,6 +759,7 @@ libqt_plugin_la_QML = \
gui/qt/widgets/qml/CheckedDelegate.qml \
gui/qt/widgets/qml/ComboBoxExt.qml \
gui/qt/widgets/qml/ContextButton.qml \
+ gui/qt/widgets/qml/AnimatedBackground.qml \
gui/qt/widgets/qml/CoverShadow.qml \
gui/qt/widgets/qml/CSDWindowButton.qml \
gui/qt/widgets/qml/CSDWindowButtonSet.qml \
=====================================
modules/gui/qt/vlc.qrc
=====================================
@@ -194,6 +194,7 @@
<file alias="BackgroundHover.qml">widgets/qml/BackgroundHover.qml</file>
<file alias="BannerTabButton.qml">widgets/qml/BannerTabButton.qml</file>
<file alias="BusyIndicatorExt.qml">widgets/qml/BusyIndicatorExt.qml</file>
+ <file alias="AnimatedBackground.qml">widgets/qml/AnimatedBackground.qml</file>
<file alias="CSDWindowButton.qml">widgets/qml/CSDWindowButton.qml</file>
<file alias="CSDWindowButtonSet.qml">widgets/qml/CSDWindowButtonSet.qml</file>
<file alias="CSDTitlebarTapNDrapHandler.qml">widgets/qml/CSDTitlebarTapNDrapHandler.qml</file>
=====================================
modules/gui/qt/widgets/qml/AnimatedBackground.qml
=====================================
@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * Copyright (C) 2021 VLC authors and VideoLAN
+ *
+ * Authors: Prince Gupta <guptaprince8832 at gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * 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, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+
+import QtQuick 2.11
+
+import "qrc:///style/"
+
+Rectangle {
+ id: root
+
+ //---------------------------------------------------------------------------------------------
+ // Settings
+ //---------------------------------------------------------------------------------------------
+
+ property bool active: activeFocus
+
+ // background of this component changes, set it in binding, the changes will be animated
+ property color backgroundColor: "transparent"
+
+ // `foregroundColor` property is not used in this component but is
+ // provided as a convienence as it gets animated with color property
+ property color foregroundColor: {
+ if (backgroundColor.a === 0)
+ return VLCStyle.colors.text
+ var brightness = backgroundColor.r*0.299 + backgroundColor.g*0.587 + backgroundColor.b*0.114
+ return brightness > .6 ? "black" : "white"
+ }
+
+ property int animationDuration: 200
+
+ property bool backgroundAnimationRunning: false
+
+ //---------------------------------------------------------------------------------------------
+ // Implementation
+ //---------------------------------------------------------------------------------------------
+
+ color: backgroundColor
+
+ border.width: root.active ? VLCStyle.focus_border : 0
+ border.color: VLCStyle.colors.bgFocus
+
+ //---------------------------------------------------------------------------------------------
+ // Animations
+ //---------------------------------------------------------------------------------------------
+
+ Behavior on color {
+ ColorAnimation {
+ id: bgAnimation
+
+ duration: root.animationDuration
+ onRunningChanged: root.backgroundAnimationRunning = running
+ }
+ }
+
+ Behavior on foregroundColor {
+ ColorAnimation {
+ duration: root.animationDuration
+ }
+ }
+}
=====================================
modules/gui/qt/widgets/qml/GridItem.qml
=====================================
@@ -70,31 +70,10 @@ MouseArea {
Accessible.role: Accessible.Cell
Accessible.name: title
- state: highlighted ? "selected" : "unselected"
states: [
State {
- name: "unselected"
-
- PropertyChanges {
- target: selectedUnderlayLoader
- opacity: 0
- visible: false
- }
-
- PropertyChanges {
- target: unselectedUnderlayLoader
- opacity: 1
- visible: true
- }
-
- PropertyChanges {
- target: picture
- playCoverOpacity: 0
- playCoverVisible: false
- }
- },
- State {
- name: "selected"
+ name: "highlighted"
+ when: highlighted
PropertyChanges {
target: selectedUnderlayLoader
@@ -118,8 +97,8 @@ MouseArea {
transitions: [
Transition {
- from: "unselected"
- to: "selected"
+ from: ""
+ to: "highlighted"
// reversible: true // doesn't work
SequentialAnimation {
@@ -142,8 +121,8 @@ MouseArea {
},
Transition {
- from: "selected"
- to: "unselected"
+ from: "highlighted"
+ to: ""
SequentialAnimation {
PropertyAction {
@@ -201,16 +180,21 @@ MouseArea {
}
}
- /* background visible when selected */
- Rectangle {
- id: selectionRect
+ Widgets.AnimatedBackground {
+ id: background
x: - root.selectedBorderWidth
y: - root.selectedBorderWidth
width: root.width + ( root.selectedBorderWidth * 2 )
height: root.height + ( root.selectedBorderWidth * 2 )
- color: VLCStyle.colors.bgHover
- visible: root.selected
+
+ active: root.activeFocus
+
+ backgroundColor: root.selected
+ ? VLCStyle.colors.bgHover
+ : VLCStyle.colors.setColorAlpha(VLCStyle.colors.bgHover, 0)
+
+ visible: backgroundAnimationRunning || background.active || root.selected
}
Loader {
@@ -225,6 +209,8 @@ MouseArea {
asynchronous: true
active: false
visible: false
+ opacity: 0
+
onVisibleChanged: {
if (visible && !active)
active = true
@@ -241,9 +227,11 @@ MouseArea {
width: pictureWidth
height: pictureHeight
- playCoverVisible: root.highlighted
- onPlayIconClicked: root.playClicked()
+ playCoverVisible: false
+ playCoverOpacity: 0
radius: VLCStyle.gridCover_radius
+
+ onPlayIconClicked: root.playClicked()
}
Widgets.ScrollingText {
@@ -262,7 +250,7 @@ MouseArea {
width: pictureWidth
horizontalAlignment: root.textAlignHCenter && titleLabel.contentWidth <= titleLabel.width ? Text.AlignHCenter : Text.AlignLeft
topPadding: root.titleMargin
- color: selectionRect.visible ? VLCStyle.colors.bgHoverText : VLCStyle.colors.text
+ color: background.foregroundColor
}
}
@@ -275,15 +263,11 @@ MouseArea {
topPadding: VLCStyle.margin_xsmall
elide: Text.ElideRight
horizontalAlignment: root.textAlignHCenter && subtitleTxt.contentWidth <= subtitleTxt.width ? Text.AlignHCenter : Text.AlignLeft
- color: selectionRect.visible
- ? VLCStyle.colors.setColorAlpha(VLCStyle.colors.bgHoverText, .6)
- : VLCStyle.colors.menuCaption
- }
- }
-
- BackgroundFocus {
- anchors.fill: selectionRect
+ color: background.foregroundColor
- visible: root.activeFocus
+ // this is based on that MenuCaption.color.a == .6, color of this component is animated (via binding with background.foregroundColor),
+ // to save operation during animation, directly set the opacity
+ opacity: .6
+ }
}
}
=====================================
modules/gui/qt/widgets/qml/TableViewDelegate.qml
=====================================
@@ -22,7 +22,7 @@ import QtQuick.Layouts 1.3
import "qrc:///widgets/" as Widgets
import "qrc:///style/"
-Rectangle {
+Widgets.AnimatedBackground {
id: delegate
//---------------------------------------------------------------------------------------------
@@ -33,15 +33,10 @@ Rectangle {
property bool selected: selectionDelegateModel.isSelected(root.model.index(index, 0))
- readonly property bool highlighted: (selected || hoverArea.containsMouse || activeFocus)
-
readonly property int _index: index
property int _modifiersOnLastPress: Qt.NoModifier
- readonly property color foregroundColor: (highlighted) ? VLCStyle.colors.bgHoverText
- : VLCStyle.colors.text
-
//---------------------------------------------------------------------------------------------
// Settings
//---------------------------------------------------------------------------------------------
@@ -50,8 +45,15 @@ Rectangle {
height: root.rowHeight
- color: (highlighted) ? VLCStyle.colors.bgHover
- : "transparent"
+ active: activeFocus
+
+ animationDuration: 140
+
+ backgroundColor: {
+ if (delegate.selected || hoverArea.containsMouse)
+ return VLCStyle.colors.bgHover
+ return VLCStyle.colors.setColorAlpha(VLCStyle.colors.bgHover)
+ }
//---------------------------------------------------------------------------------------------
// Connections
@@ -61,7 +63,9 @@ Rectangle {
target: selectionDelegateModel
onSelectionChanged: {
- delegate.selected = selectionDelegateModel.isSelected(root.model.index(index, 0));
+ delegate.selected = Qt.binding(function() {
+ return selectionDelegateModel.isSelected(root.model.index(index, 0))
+ })
}
}
@@ -165,37 +169,25 @@ Rectangle {
Repeater {
model: sortModel
- Item {
- height: parent.height
-
- width: (modelData.width) ? modelData.width
- : 1
+ Loader{
+ property var rowModel: delegate.rowModel
- Layout.alignment: Qt.AlignVCenter
+ property var colModel: modelData
- SmoothedAnimation on width {
- duration: 256
+ readonly property int index: delegate._index
- easing.type: Easing.OutCubic
- }
+ readonly property bool currentlyFocused: delegate.activeFocus
- Loader{
- property var rowModel: delegate.rowModel
- property var colModel: modelData
+ readonly property bool containsMouse: hoverArea.containsMouse
- readonly property int index: delegate._index
+ readonly property color foregroundColor: delegate.foregroundColor
- readonly property bool currentlyFocused: delegate.activeFocus
+ width: (modelData.width) ? modelData.width : 0
- readonly property bool containsMouse: hoverArea.containsMouse
-
- readonly property color foregroundColor: delegate.foregroundColor
-
- anchors.fill: parent
+ height: parent.height
- sourceComponent: (colModel.colDelegate) ? colModel.colDelegate
- : root.colDelegate
- }
+ sourceComponent: (colModel.colDelegate) ? colModel.colDelegate
+ : root.colDelegate
}
}
}
@@ -217,11 +209,5 @@ Rectangle {
onClicked: root.contextMenuButtonClicked(this, delegate.rowModel)
}
-
- BackgroundFocus {
- anchors.fill: parent
-
- visible: delegate.activeFocus
- }
}
}
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/cc88eb05bcc6f0470bfcc07e146216332ebb38b7...2c63d6f039fb7a002983b90daaf8369f88f93b3e
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/cc88eb05bcc6f0470bfcc07e146216332ebb38b7...2c63d6f039fb7a002983b90daaf8369f88f93b3e
You're receiving this email because of your account on code.videolan.org.
More information about the vlc-commits
mailing list