[vlc-commits] [Git][videolan/vlc][master] 7 commits: qml/GlobalTabBar: fix color animation in light theme

Hugo Beauzée-Luyssen (@chouquette) gitlab at videolan.org
Mon Sep 27 11:36:07 UTC 2021



Hugo Beauzée-Luyssen pushed to branch master at VideoLAN / VLC


Commits:
c6caa33e by Prince Gupta at 2021-09-27T11:01:16+00:00
qml/GlobalTabBar: fix color animation in light theme

- - - - -
f065fff3 by Prince Gupta at 2021-09-27T11:01:16+00:00
qml/PlaylistDelegate: fix focus color

- - - - -
644bfa09 by Prince Gupta at 2021-09-27T11:01:16+00:00
qml/PlaylistDelegate: use Control.padding for spacing

also move non-content item out off Control.contentItem

- - - - -
784b9fc4 by Prince Gupta at 2021-09-27T11:01:16+00:00
qml/PlaylistDelegate: don't elide duration text

- - - - -
0641c12f by Prince Gupta at 2021-09-27T11:01:16+00:00
qml/AnimatedBackground: simplify animation running flag

- - - - -
96bad455 by Prince Gupta at 2021-09-27T11:01:16+00:00
qml/PlaylistDelegate: use AnimatedBackground

- - - - -
f4eab27d by Prince Gupta at 2021-09-27T11:01:16+00:00
qml/PlaylistDelegate: simplify code

- - - - -


5 changed files:

- modules/gui/qt/maininterface/qml/BannerSources.qml
- modules/gui/qt/playlist/qml/PlaylistDelegate.qml
- modules/gui/qt/playlist/qml/PlaylistListView.qml
- modules/gui/qt/widgets/qml/AnimatedBackground.qml
- modules/gui/qt/widgets/qml/GridItem.qml


Changes:

=====================================
modules/gui/qt/maininterface/qml/BannerSources.qml
=====================================
@@ -170,7 +170,7 @@ FocusScope {
 
                             delegate: Widgets.BannerTabButton {
                                 iconTxt: model.icon
-                                color: "transparent"
+                                color: VLCStyle.colors.setColorAlpha(VLCStyle.colors.buttonHover, 0)
                                 showText: globalToolbar.colapseTabButtons
                                 selected: model.index === selectedIndex
                                 onClicked: root.itemClicked(model.index)


=====================================
modules/gui/qt/playlist/qml/PlaylistDelegate.qml
=====================================
@@ -40,7 +40,13 @@ Control {
 
     // Settings
 
-    height: artworkItem.height * 1.5
+    topPadding: VLCStyle.margin_xxsmall
+
+    bottomPadding: VLCStyle.margin_xxsmall
+
+    leftPadding: VLCStyle.margin_normal
+
+    rightPadding: Math.max(listView.scrollBarWidth, VLCStyle.margin_normal)
 
     // Events
 
@@ -83,274 +89,277 @@ Control {
 
     // Childs
 
-    background: Rectangle {
+    background: Widgets.AnimatedBackground {
         color: {
             if (selected)
                 return colors.gridSelect;
             else if (hovered)
                 return colors.listHover;
             else
-                return "transparent";
+                return colors.setColorAlpha(colors.gridSelect, 0);
         }
 
-        border.width: (visualFocus) ? VLCStyle.focus_border : 0
+        active: visualFocus
 
-        border.color: VLCStyle.colors.bgFocus
-    }
+        activeBorderColor: colors.bgFocus
 
-    contentItem: Item {
-        Rectangle {
-            id: topDropIndicator
+        visible: animationRunning || active || selected || hovered
+    }
 
-            anchors.left: parent.left
-            anchors.right: parent.right
+    contentItem: RowLayout {
+        id: content
 
-            height: VLCStyle.dp(1)
-            anchors.top: parent.top
+        spacing: 0
 
-            visible: higherDropArea.containsDragItem
-            color: colors.accent
-        }
+        Item {
+            id: artworkItem
 
-        MouseArea {
-            id: mouseArea
+            Layout.preferredHeight: VLCStyle.icon_normal
+            Layout.preferredWidth: VLCStyle.icon_normal
+            Layout.alignment: Qt.AlignVCenter
 
-            width: parent.width
-            implicitHeight: childrenRect.height
+            DropShadow {
+                id: effect
 
-            hoverEnabled: true
+                anchors.fill: artwork
+                source: artwork
+                radius: 8
+                samples: 17
+                color: colors.glowColorBanner
+                visible: artwork.visible
+                spread: 0.1
+            }
 
-            acceptedButtons: Qt.LeftButton | Qt.RightButton
+            Image {
+                id: artwork
 
-            onContainsMouseChanged: {
-                if (containsMouse) {
-                    var bottomItemIndex = listView.listView.indexAt(delegate.width / 2, (listView.listView.contentY + listView.height) + 1)
-                    var topItemIndex = listView.listView.indexAt(delegate.width / 2, listView.listView.contentY - 1)
+                mipmap: true
+                anchors.fill: parent
+                fillMode: Image.PreserveAspectFit
+                source: (model.artwork && model.artwork.toString()) ? model.artwork : VLCStyle.noArtCover
+                visible: !statusIcon.visible
+            }
 
-                    if(bottomItemIndex !== -1 && model.index >= bottomItemIndex - 1)
-                    {
-                        listView.fadeRectBottomHovered = Qt.binding(function() {return delegate.hovered})
-                    }
-                    if(model.index <= topItemIndex + 1)
-                    {
-                        listView.fadeRectTopHovered = Qt.binding(function() {return delegate.hovered})
-                    }
+            Widgets.IconLabel {
+                id: statusIcon
+
+                anchors.fill: parent
+                visible: (model.isCurrent && text !== "")
+                width: height
+                height: VLCStyle.icon_normal
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                color: colors.accent
+                text: {
+                    if (player.playingState === PlayerController.PLAYING_STATE_PLAYING)
+                        return VLCIcons.volume_high
+                    if (player.playingState === PlayerController.PLAYING_STATE_PAUSED)
+                        return VLCIcons.pause
+                    return ""
                 }
             }
+        }
 
-            onClicked: {
-                /* to receive keys events */
-                listView.forceActiveFocus()
-                if (listView.mode === PlaylistListView.Mode.Move) {
-                    var selectedIndexes = root.model.getSelection()
-                    if (selectedIndexes.length === 0)
-                        return
-                    var preTarget = index
-                    /* move to _above_ the clicked item if move up, but
-                     * _below_ the clicked item if move down */
-                    if (preTarget > selectedIndexes[0])
-                        preTarget++
-                    listView.currentIndex = selectedIndexes[0]
-                    root.model.moveItemsPre(selectedIndexes, preTarget)
-                    return
-                } else if (listView.mode === PlaylistListView.Mode.Select) {
-                } else if (!(root.model.isSelected(index) && mouse.button === Qt.RightButton)) {
-                    listView.updateSelection(mouse.modifiers, listView.currentIndex, index)
-                    listView.currentIndex = index
-                }
+        ColumnLayout {
+            id: textInfoColumn
+
+            Layout.fillWidth: true
+            Layout.leftMargin: VLCStyle.margin_large
+            Layout.preferredHeight: artworkItem.height * 1.25
+            spacing: 0
 
-                if (mouse.button === Qt.RightButton)
-                    contextMenu.popup(index, this.mapToGlobal(mouse.x, mouse.y))
+            Widgets.ListLabel {
+                id: textInfo
+
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+
+                font.weight: model.isCurrent ? Font.Bold : Font.DemiBold
+                text: model.title
+                color: colors.text
             }
 
-            onDoubleClicked: {
-                if (mouse.button !== Qt.RightButton && listView.mode === PlaylistListView.Mode.Normal)
-                    mainPlaylistController.goTo(index, true)
+            Widgets.ListSubtitleLabel {
+                id: textArtist
+
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+
+                font.weight: model.isCurrent ? Font.DemiBold : Font.Normal
+                text: (model.artist ? model.artist : i18n.qtr("Unknown Artist"))
+                color: colors.text
             }
+        }
+
+        Widgets.ListLabel {
+            id: textDuration
+
+            text: model.duration
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: colors.text
+            opacity: 0.5
+        }
+    }
+
+    Rectangle {
+        id: topDropIndicator
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+
+        visible: higherDropArea.containsDragItem
+
+        height: VLCStyle.dp(1, VLCStyle.scale)
+
+        color: colors.accent
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
 
-            drag.target: dragItem
+        hoverEnabled: true
 
-            drag.onActiveChanged: {
-                if (drag.active) {
-                    if (!selected) {
-                        /* the dragged item is not in the selection, replace the selection */
-                        root.model.setSelection([index])
-                    }
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
 
-                    dragItem.index = index
-                    dragItem.Drag.active = drag.active
+        onContainsMouseChanged: {
+            if (containsMouse) {
+                var bottomItemIndex = listView.listView.indexAt(delegate.width / 2, (listView.listView.contentY + listView.height) + 1)
+                var topItemIndex = listView.listView.indexAt(delegate.width / 2, listView.listView.contentY - 1)
+
+                if(bottomItemIndex !== -1 && model.index >= bottomItemIndex - 1)
+                {
+                    listView.fadeRectBottomHovered = Qt.binding(function() {return delegate.hovered})
                 }
-                else {
-                    dragItem.Drag.drop()
+                if(model.index <= topItemIndex + 1)
+                {
+                    listView.fadeRectTopHovered = Qt.binding(function() {return delegate.hovered})
                 }
 
                 delegate.ListView.delayRemove = drag.active
             }
+        }
 
-            onPositionChanged: {
-                if (drag.active) {
-                    var pos = drag.target.parent.mapFromItem(mouseArea, mouseX, mouseY)
-                    dragItem.updatePos(pos)
-                }
+        onClicked: {
+            /* to receive keys events */
+            listView.forceActiveFocus()
+            if (listView.mode === PlaylistListView.Mode.Move) {
+                var selectedIndexes = root.model.getSelection()
+                if (selectedIndexes.length === 0)
+                    return
+                var preTarget = index
+                /* move to _above_ the clicked item if move up, but
+                 * _below_ the clicked item if move down */
+                if (preTarget > selectedIndexes[0])
+                    preTarget++
+                listView.currentIndex = selectedIndexes[0]
+                root.model.moveItemsPre(selectedIndexes, preTarget)
+                return
+            } else if (listView.mode === PlaylistListView.Mode.Select) {
+            } else if (!(root.model.isSelected(index) && mouse.button === Qt.RightButton)) {
+                listView.updateSelection(mouse.modifiers, listView.currentIndex, index)
+                listView.currentIndex = index
             }
 
-            RowLayout {
-                id: content
-
-                height: delegate.height
-                spacing: 0
+            if (mouse.button === Qt.RightButton)
+                contextMenu.popup(index, this.mapToGlobal(mouse.x, mouse.y))
+        }
 
-                anchors {
-                    left: parent.left
-                    right: parent.right
+        onDoubleClicked: {
+            if (mouse.button !== Qt.RightButton && listView.mode === PlaylistListView.Mode.Normal)
+                mainPlaylistController.goTo(index, true)
+        }
 
-                    leftMargin: VLCStyle.margin_normal
-                    rightMargin: listView.scrollBarWidth
-                }
+        drag.target: dragItem
 
-                Item {
-                    id: artworkItem
-                    Layout.preferredHeight: VLCStyle.icon_normal
-                    Layout.preferredWidth: VLCStyle.icon_normal
-                    Layout.alignment: Qt.AlignVCenter
-
-                    DropShadow {
-                        id: effect
-                        anchors.fill: artwork
-                        source: artwork
-                        radius: 8
-                        samples: 17
-                        color: colors.glowColorBanner
-                        visible: artwork.visible
-                        spread: 0.1
-                    }
-
-                    Image {
-                        id: artwork
-
-                        mipmap: true
-                        anchors.fill: parent
-                        fillMode: Image.PreserveAspectFit
-                        source: (model.artwork && model.artwork.toString()) ? model.artwork : VLCStyle.noArtCover
-                        visible: !statusIcon.visible
-                    }
-
-                    Widgets.IconLabel {
-                        id: statusIcon
-                        anchors.fill: parent
-                        visible: (model.isCurrent && text !== "")
-                        width: height
-                        height: VLCStyle.icon_normal
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignVCenter
-                        color: colors.accent
-                        text: player.playingState === PlayerController.PLAYING_STATE_PLAYING ? VLCIcons.volume_high :
-                                                        player.playingState === PlayerController.PLAYING_STATE_PAUSED ? VLCIcons.pause : ""
-                    }
+        drag.onActiveChanged: {
+            if (drag.active) {
+                if (!selected) {
+                    /* the dragged item is not in the selection, replace the selection */
+                    root.model.setSelection([index])
                 }
 
-                ColumnLayout {
-                    id: textInfoColumn
-                    Layout.fillWidth: true
-                    Layout.leftMargin: VLCStyle.margin_large
-                    Layout.preferredHeight: artworkItem.height * 1.25
-                    spacing: 0
+                dragItem.index = index
+                dragItem.Drag.active = drag.active
+            }
+            else {
+                dragItem.Drag.drop()
+            }
+        }
 
-                    Widgets.ListLabel {
-                        id: textInfo
+        onPositionChanged: {
+            if (drag.active) {
+                var pos = drag.target.parent.mapFromItem(mouseArea, mouseX, mouseY)
+                dragItem.updatePos(pos)
+            }
+        }
+    }
 
-                        Layout.fillHeight: true
-                        Layout.fillWidth: true
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: 0
 
-                        font.weight: model.isCurrent ? Font.Bold : Font.DemiBold
-                        text: model.title
-                        color: colors.text
-                    }
+        DropArea {
+            id: higherDropArea
 
-                    Widgets.ListSubtitleLabel {
-                        id: textArtist
+            Layout.fillWidth: true
+            Layout.fillHeight: true
 
-                        Layout.fillHeight: true
-                        Layout.fillWidth: true
+            property bool containsDragItem: false
 
-                        font.weight: model.isCurrent ? Font.DemiBold : Font.Normal
-                        text: (model.artist ? model.artist : i18n.qtr("Unknown Artist"))
-                        color: colors.text
-                    }
-                }
+            onEntered: {
+                if (!isDropAcceptable(drag, index))
+                    return
 
-                Widgets.ListLabel {
-                    id: textDuration
-                    Layout.rightMargin: VLCStyle.margin_xsmall
-                    Layout.preferredWidth: durationMetric.width
-                    text: model.duration
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    color: colors.text
-                    opacity: 0.5
-                }
+                containsDragItem = true
             }
+            onExited: {
+                containsDragItem = false
+            }
+            onDropped: {
+                if (!isDropAcceptable(drop, index))
+                    return
 
-            ColumnLayout {
-                anchors.fill: content
-                spacing: 0
+                root.acceptDrop(index, drop)
+
+                containsDragItem = false
+            }
+        }
 
-                DropArea {
-                    id: higherDropArea
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
+        DropArea {
+            id: lowerDropArea
 
-                    property bool containsDragItem: false
+            Layout.fillWidth: true
+            Layout.fillHeight: true
 
-                    onEntered: {
-                        if (!isDropAcceptable(drag, index))
-                            return
+            function handleDropIndicators(visible) {
+                if (isLastItem)
+                    listView.footerItem.setDropIndicatorVisible(visible)
+                else
+                    listView.setItemDropIndicatorVisible(index + 1, visible)
+            }
 
-                        containsDragItem = true
-                    }
-                    onExited: {
-                        containsDragItem = false
-                    }
-                    onDropped: {
-                        if (!isDropAcceptable(drop, index))
-                            return
+            onEntered: {
+                if (!isDropAcceptable(drag, index + 1))
+                    return
 
-                        root.acceptDrop(index, drop)
+                handleDropIndicators(true)
+            }
+            onExited: {
+                handleDropIndicators(false)
+            }
+            onDropped: {
+                if(!isDropAcceptable(drop, index + 1))
+                    return
 
-                        containsDragItem = false
-                    }
-                }
+                root.acceptDrop(index + 1, drop)
 
-                DropArea {
-                    id: lowerDropArea
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    function handleDropIndicators(visible) {
-                        if (isLastItem)
-                            listView.footerItem.setDropIndicatorVisible(visible)
-                        else
-                            listView.setItemDropIndicatorVisible(index + 1, visible)
-                    }
-
-                    onEntered: {
-                        if (!isDropAcceptable(drag, index + 1))
-                            return
-
-                        handleDropIndicators(true)
-                    }
-                    onExited: {
-                        handleDropIndicators(false)
-                    }
-                    onDropped: {
-                        if(!isDropAcceptable(drop, index + 1))
-                            return
-
-                        root.acceptDrop(index + 1, drop)
-
-                        handleDropIndicators(false)
-                    }
-                }
+                handleDropIndicators(false)
             }
         }
     }


=====================================
modules/gui/qt/playlist/qml/PlaylistListView.qml
=====================================
@@ -269,7 +269,7 @@ Control {
             Layout.topMargin: VLCStyle.margin_normal
             Layout.bottomMargin: VLCStyle.margin_xxsmall
             Layout.leftMargin: VLCStyle.margin_normal
-            Layout.rightMargin: listView.scrollBarWidth
+            Layout.rightMargin: Math.max(listView.scrollBarWidth, VLCStyle.margin_normal)
 
             spacing: 0
 
@@ -292,7 +292,6 @@ Control {
             }
 
             Widgets.IconLabel {
-                Layout.rightMargin: VLCStyle.margin_xsmall
                 Layout.preferredWidth: durationMetric.width
 
                 text: VLCIcons.time
@@ -302,8 +301,10 @@ Control {
 
                 TextMetrics {
                     id: durationMetric
+
+                    font.weight: Font.DemiBold
                     font.pixelSize: VLCStyle.fontSize_normal
-                    text: "-00:00-"
+                    text: "00:00"
                 }
             }
         }


=====================================
modules/gui/qt/widgets/qml/AnimatedBackground.qml
=====================================
@@ -47,9 +47,7 @@ Rectangle {
 
     property int animationDuration: VLCStyle.duration_normal
 
-    property bool backgroundAnimationRunning: false
-
-    property bool borderColorAnimationRunning: false
+    property bool animationRunning: borderAnimation.running || bgAnimation.running
 
     //---------------------------------------------------------------------------------------------
     // Implementation
@@ -67,9 +65,10 @@ Rectangle {
 
     Behavior on border.color {
         ColorAnimation {
+            id: borderAnimation
+
             duration: root.animationDuration
             onRunningChanged: {
-                root.borderColorAnimationRunning = running
                 if (running && root.active) {
                     border.width = Qt.binding(function() { return VLCStyle.focus_border })
                 } else if (!running && !root.active) {
@@ -84,7 +83,6 @@ Rectangle {
             id: bgAnimation
 
             duration: root.animationDuration
-            onRunningChanged: root.backgroundAnimationRunning = running
         }
     }
 


=====================================
modules/gui/qt/widgets/qml/GridItem.qml
=====================================
@@ -169,7 +169,7 @@ Control {
                          ? VLCStyle.colors.gridSelect
                          : VLCStyle.colors.setColorAlpha(VLCStyle.colors.gridSelect, 0)
 
-        visible: backgroundAnimationRunning || borderColorAnimationRunning || background.active || root.selected
+        visible: animationRunning || background.active || root.selected
     }
 
     contentItem: MouseArea {



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/ed6b866f29d9767d01f401285a0082132746e569...f4eab27d08989a18e6218434a2e61a06d4b89901

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/ed6b866f29d9767d01f401285a0082132746e569...f4eab27d08989a18e6218434a2e61a06d4b89901
You're receiving this email because of your account on code.videolan.org.




More information about the vlc-commits mailing list