[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