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 <bun...@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 <bun...@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.
_______________________________________________ vlc-commits mailing list vlc-commits@videolan.org https://mailman.videolan.org/listinfo/vlc-commits