[vlc-commits] [Git][videolan/vlc][master] 10 commits: qml/AnimatedBackground: animate border
Jean-Baptiste Kempf
gitlab at videolan.org
Thu Jun 24 18:31:07 UTC 2021
Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC
Commits:
87275e07 by Prince Gupta at 2021-06-24T22:08:45+05:30
qml/AnimatedBackground: animate border
- - - - -
58b94d7e by Prince Gupta at 2021-06-24T22:08:45+05:30
qml/BannerTabButton: use AnimatedBackground
- - - - -
0e534d74 by Prince Gupta at 2021-06-24T22:29:54+05:30
qml/IconToolButton: use AnimatedBackground
- - - - -
d140b635 by Prince Gupta at 2021-06-24T22:29:54+05:30
qml/SortControl: use AnimatedBackground
- - - - -
e7cd9618 by Prince Gupta at 2021-06-24T22:29:54+05:30
qml/TabButtonExt: use AnimatedBackground
- - - - -
9c9359df by Prince Gupta at 2021-06-24T22:29:54+05:30
qml/TextToolButton: use AnimatedBackground
- - - - -
47907745 by Prince Gupta at 2021-06-24T22:29:54+05:30
qml/PlayerMenuItem: use AnimatedBackground
- - - - -
0cdf8bdf by Prince Gupta at 2021-06-24T22:29:54+05:30
qml/ArtworkInfo: use AnimatedBackground
- - - - -
f598c6ee by Prince Gupta at 2021-06-24T22:29:54+05:30
qml: remove BackgroundFocus
- - - - -
fb9b8af9 by Prince Gupta at 2021-06-24T22:29:54+05:30
qml: remove BackgroundHover
- - - - -
14 changed files:
- modules/gui/qt/Makefile.am
- modules/gui/qt/player/qml/ControlButtons.qml
- modules/gui/qt/player/qml/PlaybackSpeed.qml
- modules/gui/qt/player/qml/PlayerMenuItem.qml
- modules/gui/qt/vlc.qrc
- modules/gui/qt/widgets/qml/AnimatedBackground.qml
- − modules/gui/qt/widgets/qml/BackgroundFocus.qml
- − modules/gui/qt/widgets/qml/BackgroundHover.qml
- modules/gui/qt/widgets/qml/BannerTabButton.qml
- modules/gui/qt/widgets/qml/GridItem.qml
- modules/gui/qt/widgets/qml/IconToolButton.qml
- modules/gui/qt/widgets/qml/SortControl.qml
- modules/gui/qt/widgets/qml/TabButtonExt.qml
- modules/gui/qt/widgets/qml/TextToolButton.qml
Changes:
=====================================
modules/gui/qt/Makefile.am
=====================================
@@ -751,8 +751,6 @@ libqt_plugin_la_QML = \
gui/qt/util/qml/Helpers.js \
gui/qt/util/qml/KeyHelper.js \
gui/qt/util/qml/SelectableDelegateModel.qml \
- gui/qt/widgets/qml/BackgroundFocus.qml \
- gui/qt/widgets/qml/BackgroundHover.qml \
gui/qt/widgets/qml/BannerTabButton.qml \
gui/qt/widgets/qml/BusyIndicatorExt.qml \
gui/qt/widgets/qml/CaptionLabel.qml \
=====================================
modules/gui/qt/player/qml/ControlButtons.qml
=====================================
@@ -807,7 +807,7 @@ Item{
Component {
id: artworkInfoDelegate
- Widgets.BackgroundHover {
+ Widgets.AnimatedBackground {
id: artworkInfoItem
property bool paintOnly: false
@@ -1016,7 +1016,7 @@ Item{
anchors.centerIn: parent
font.pixelSize: VLCStyle.fontSize_normal
text: !playbackSpeedButton.paintOnly ? i18n.qtr("%1x").arg(+player.rate.toFixed(2)) : i18n.qtr("1x")
- color: playbackSpeedButton.background.foregroundColor // IconToolButton.background is a BackgroundHover
+ color: playbackSpeedButton.background.foregroundColor // IconToolButton.background is a AnimatedBackground
}
}
}
=====================================
modules/gui/qt/player/qml/PlaybackSpeed.qml
=====================================
@@ -151,7 +151,7 @@ Popup {
anchors.centerIn: parent
font.pixelSize: VLCStyle.fontSize_normal
text: i18n.qtr("1x")
- color: resetButton.background.foregroundColor // IconToolButton.background is a BackgroundHover
+ color: resetButton.background.foregroundColor // IconToolButton.background is a AnimatedBackground
}
}
=====================================
modules/gui/qt/player/qml/PlayerMenuItem.qml
=====================================
@@ -104,9 +104,11 @@ T.MenuItem {
}
- background: Widgets.BackgroundHover {
+ background: Widgets.AnimatedBackground {
implicitHeight: VLCStyle.fontHeight_normal
- active: control.highlighted
+
+ backgroundColor: control.highlighted ? VLCStyle.colors.buttonHover
+ : VLCStyle.colors.setColorAlpha(VLCStyle.colors.buttonHover, 0)
}
//hack around QTBUG-79115
=====================================
modules/gui/qt/vlc.qrc
=====================================
@@ -190,8 +190,6 @@
<file alias="MiniPlayerBottomMargin.qml">maininterface/qml/MiniPlayerBottomMargin.qml</file>
</qresource>
<qresource prefix="/widgets">
- <file alias="BackgroundFocus.qml">widgets/qml/BackgroundFocus.qml</file>
- <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>
=====================================
modules/gui/qt/widgets/qml/AnimatedBackground.qml
=====================================
@@ -43,23 +43,42 @@ Rectangle {
return brightness > .6 ? "black" : "white"
}
+ property color activeBorderColor: VLCStyle.colors.bgFocus
+
property int animationDuration: 200
property bool backgroundAnimationRunning: false
+ property bool borderColorAnimationRunning: false
+
//---------------------------------------------------------------------------------------------
// Implementation
//---------------------------------------------------------------------------------------------
color: backgroundColor
- border.width: root.active ? VLCStyle.focus_border : 0
- border.color: VLCStyle.colors.bgFocus
+ border.color: root.active
+ ? root.activeBorderColor
+ : VLCStyle.colors.setColorAlpha(root.activeBorderColor, 0)
//---------------------------------------------------------------------------------------------
// Animations
//---------------------------------------------------------------------------------------------
+ Behavior on border.color {
+ ColorAnimation {
+ duration: root.animationDuration
+ onRunningChanged: {
+ root.borderColorAnimationRunning = running
+ if (running && root.active) {
+ border.width = VLCStyle.focus_border
+ } else if (!running && !root.active) {
+ border.width = 0
+ }
+ }
+ }
+ }
+
Behavior on color {
ColorAnimation {
id: bgAnimation
=====================================
modules/gui/qt/widgets/qml/BackgroundFocus.qml deleted
=====================================
@@ -1,34 +0,0 @@
-/*****************************************************************************
- * Copyright (C) 2021 VLC authors and VideoLAN
- *
- * Authors: Benjamin Arnaud <bunjee at omega.gg>
- *
- * 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 {
- //---------------------------------------------------------------------------------------------
- // Settings
- //---------------------------------------------------------------------------------------------
-
- color: "transparent"
-
- border.color: VLCStyle.colors.bgFocus
- border.width: VLCStyle.focus_border
-}
=====================================
modules/gui/qt/widgets/qml/BackgroundHover.qml deleted
=====================================
@@ -1,76 +0,0 @@
-/*****************************************************************************
- * Copyright (C) 2019 VLC authors and VideoLAN
- *
- * Authors: Benjamin Arnaud <bunjee at omega.gg>
- *
- * 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.0
-
-import "qrc:///style/"
-
-Rectangle {
- id: root
-
- //---------------------------------------------------------------------------------------------
- // Properties
- //---------------------------------------------------------------------------------------------
-
- property bool active: activeFocus
-
- property color foregroundColor: foregroundColorBase
-
- //---------------------------------------------------------------------------------------------
- // Style
-
- property int durationAnimation: 100
-
- property color backgroundColor: VLCStyle.colors.buttonHover
-
- property color foregroundColorBase : VLCStyle.colors.text
- property color foregroundColorActive: VLCStyle.colors.buttonTextHover
-
- //---------------------------------------------------------------------------------------------
- // Settings
- //---------------------------------------------------------------------------------------------
-
- // NOTE: We want the set the proper transparent color to avoid animating from black.
- color: VLCStyle.colors.setColorAlpha(backgroundColor, 0)
-
- states: State {
- name: "active"
-
- when: (active || activeFocus)
-
- PropertyChanges {
- target: root
-
- color: backgroundColor
-
- foregroundColor: foregroundColorActive
- }
- }
-
- transitions: Transition {
- ColorAnimation {
- property: "color"
-
- duration: durationAnimation
-
- easing.type: Easing.InOutSine
- }
- }
-}
=====================================
modules/gui/qt/widgets/qml/BannerTabButton.qml
=====================================
@@ -41,16 +41,15 @@ T.TabButton {
property string iconTxt: ""
property bool selected: false
- background: Rectangle {
+ background: Widgets.AnimatedBackground {
height: control.height
width: control.width
- color: (control.activeFocus || control.hovered) ? VLCStyle.colors.buttonHover
- : control.color
- Behavior on color {
- ColorAnimation {
- duration: 128
- }
- }
+ active: control.activeFocus
+ animationDuration: 140
+ foregroundColor: (control.activeFocus || control.hovered) ? VLCStyle.colors.buttonTextHover
+ : ((control.selected) ? VLCStyle.colors.text : VLCStyle.colors.menuCaption)
+ backgroundColor: (control.activeFocus || control.hovered) ? VLCStyle.colors.buttonHover
+ : control.color
}
contentItem: Item {
@@ -78,9 +77,8 @@ T.TabButton {
visible: showText
font.pixelSize: VLCStyle.fontSize_normal
font.weight: (control.activeFocus || control.hovered || control.selected) ? Font.DemiBold : Font.Normal
- color: (control.activeFocus || control.hovered) ? VLCStyle.colors.buttonTextHover
- : ((control.selected) ? VLCStyle.colors.text : VLCStyle.colors.menuCaption)
text: control.text
+ color: control.background.foregroundColor
}
}
@@ -90,11 +88,5 @@ T.TabButton {
margin: VLCStyle.dp(3, VLCStyle.scale)
visible: control.showCurrentIndicator && control.selected
}
-
- BackgroundFocus {
- anchors.fill: parent
-
- visible: control.activeFocus
- }
}
}
=====================================
modules/gui/qt/widgets/qml/GridItem.qml
=====================================
@@ -194,7 +194,7 @@ MouseArea {
? VLCStyle.colors.bgHover
: VLCStyle.colors.setColorAlpha(VLCStyle.colors.bgHover, 0)
- visible: backgroundAnimationRunning || background.active || root.selected
+ visible: backgroundAnimationRunning || borderColorAnimationRunning || background.active || root.selected
}
Loader {
=====================================
modules/gui/qt/widgets/qml/IconToolButton.qml
=====================================
@@ -29,13 +29,16 @@ ToolButton {
padding: 0
property string iconText: ""
- property alias color: backgroundHover.foregroundColor
+
+ property color color: (control.highlighted) ? VLCStyle.colors.accent
+ : VLCStyle.colors.icon
+
property color colorDisabled: VLCStyle.colors.textInactive
property color colorOverlay: "transparent"
property color colorFocus: VLCStyle.colors.bgFocus
property string textOverlay: ""
property bool borderEnabled: false
- property bool backgroundVisible: backgroundHover.active
+ property bool backgroundVisible: background.active
enabled: !paintOnly
@@ -59,7 +62,7 @@ ToolButton {
Label {
id: text
text: control.iconText
- color: (control.enabled) ? control.color : control.colorDisabled
+ color: (control.enabled) ? background.foregroundColor : control.colorDisabled
anchors.centerIn: parent
@@ -90,7 +93,7 @@ ToolButton {
Label {
text: VLCIcons.active_indicator
- color: (control.enabled) ? control.color : control.colorDisabled
+ color: (control.enabled) ? background.foregroundColor : control.colorDisabled
visible: !control.paintOnly && control.checked
anchors.centerIn: parent
@@ -105,25 +108,20 @@ ToolButton {
}
}
+ }
- BackgroundFocus {
- anchors.fill: parent
-
- visible: control.activeFocus
+ background: AnimatedBackground {
+ id: background
- // NOTE: This ensures the focus rectangle stays visible when switching between light
- // and dark theme on the player view.
- border.color: control.colorFocus
- }
- }
+ active: control.activeFocus
- background: BackgroundHover {
- id: backgroundHover
+ backgroundColor: control.hovered ? VLCStyle.colors.buttonHover
+ : VLCStyle.colors.setColorAlpha(VLCStyle.colors.buttonHover, 0)
- active: control.hovered
+ foregroundColor: control.hovered ? VLCStyle.colors.buttonTextHover
+ : control.color
- foregroundColor: (control.highlighted) ? VLCStyle.colors.accent
- : VLCStyle.colors.icon
+ activeBorderColor: control.colorFocus
implicitHeight: control.size
implicitWidth : control.size
=====================================
modules/gui/qt/widgets/qml/SortControl.qml
=====================================
@@ -180,13 +180,15 @@ Widgets.NavigableFocusScope {
readonly property bool isActive: (delegateSortKey === sortKey)
- background: BackgroundHover {
- active: (closeAnimation.running === false && itemDelegate.hovered)
+ background: Widgets.AnimatedBackground {
+ active: itemDelegate.activeFocus
// NOTE: We don't want animations here, because it looks sluggish.
- durationAnimation: 0
+ animationDuration: 0
- backgroundColor: VLCStyle.colors.dropDown
+ backgroundColor: (closeAnimation.running === false && itemDelegate.hovered)
+ ? VLCStyle.colors.dropDown
+ : "transparent"
}
onHoveredChanged: {
@@ -257,12 +259,6 @@ Widgets.NavigableFocusScope {
popup.close()
}
-
- BackgroundFocus {
- anchors.fill: parent
-
- visible: itemDelegate.activeFocus
- }
}
}
=====================================
modules/gui/qt/widgets/qml/TabButtonExt.qml
=====================================
@@ -38,18 +38,24 @@ T.TabButton {
property string iconTxt: ""
property int iconSize: VLCStyle.icon_normal
property bool selected: false
- property alias color: backgroundHover.foregroundColor
+ property color color: VLCStyle.colors.text
property bool busy: false
font.pixelSize: VLCStyle.fontSize_normal
- background: BackgroundHover {
- id: backgroundHover
+ background: Widgets.AnimatedBackground {
+ id: background
height: control.height
width : control.width
- active: control.hovered
+ active: control.activeFocus
+
+ backgroundColor: control.hovered ? VLCStyle.colors.buttonHover
+ : VLCStyle.colors.setColorAlpha(VLCStyle.colors.buttonHover, 0)
+
+ foregroundColor: control.hovered ? VLCStyle.colors.buttonTextHover
+ : control.color
}
contentItem: Item {
@@ -80,7 +86,7 @@ T.TabButton {
visible: !control.busy
text: control.iconTxt
- color: control.color
+ color: background.foregroundColor
font.pixelSize: VLCIcons.pixelSize(control.iconSize)
}
@@ -94,7 +100,7 @@ T.TabButton {
Widgets.ListLabel {
text: control.text
- color: backgroundHover.foregroundColor
+ color: background.foregroundColor
}
}
@@ -109,11 +115,5 @@ T.TabButton {
color: "transparent"
border.color: VLCStyle.colors.accent
}
-
- BackgroundFocus {
- anchors.fill: parent
-
- visible: control.activeFocus
- }
}
}
=====================================
modules/gui/qt/widgets/qml/TextToolButton.qml
=====================================
@@ -54,15 +54,12 @@ T.ToolButton {
visible: control.checked
color: control.activeFocus ? VLCStyle.colors.accent : VLCStyle.colors.bgHover
}
-
- BackgroundFocus {
- anchors.fill: parent
-
- visible: control.activeFocus
- }
}
- background: BackgroundHover {
- active: control.hovered
+ background: AnimatedBackground {
+ active: control.activeFocus
+
+ backgroundColor: control.hovered ? VLCStyle.colors.buttonHover
+ : VLCStyle.colors.setColorAlpha(VLCStyle.colors.buttonHover, 0)
}
}
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/7d83226e5ff3f9b5a0c9a9b6bb8ffa95eaac784d...fb9b8af9354da09adc1579f23900d91b0ec947d5
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/7d83226e5ff3f9b5a0c9a9b6bb8ffa95eaac784d...fb9b8af9354da09adc1579f23900d91b0ec947d5
You're receiving this email because of your account on code.videolan.org.
More information about the vlc-commits
mailing list