[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