[vlc-commits] [Git][videolan/vlc][master] 2 commits: qml/PlayCover: Refactor and remove accent borders

[Hugo Beauzée-Luyssen (@chouquette)]

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


Commits:
54d6d387 by Benjamin Arnaud at 2021-10-10T16:43:57+00:00
qml/PlayCover: Refactor and remove accent borders

- - - - -
5cfaf2ac by Benjamin Arnaud at 2021-10-10T16:43:57+00:00
qml/GridItem: Update the 'highlighted' property with visualFocus

- - - - -


6 changed files:

- modules/gui/qt/network/qml/NetworkGridItem.qml
- modules/gui/qt/network/qml/NetworkThumbnailItem.qml
- modules/gui/qt/network/qml/ServicesHomeDisplay.qml
- modules/gui/qt/widgets/qml/GridItem.qml
- modules/gui/qt/widgets/qml/MediaCover.qml
- modules/gui/qt/widgets/qml/PlayCover.qml


Changes:

=====================================
modules/gui/qt/network/qml/NetworkGridItem.qml
=====================================
@@ -33,8 +33,13 @@ Widgets.GridItem {
 
     pictureWidth: VLCStyle.gridCover_network_width
     pictureHeight: VLCStyle.gridCover_network_height
+
     playCoverBorderWidth: VLCStyle.gridCover_network_border
-    playCoverOnlyBorders: model.type === NetworkMediaModel.TYPE_NODE || model.type === NetworkMediaModel.TYPE_DIRECTORY
+
+    playCoverShowGradient: (model.type !== NetworkMediaModel.TYPE_NODE
+                            &&
+                            model.type !== NetworkMediaModel.TYPE_DIRECTORY)
+
     image: model.artwork && model.artwork.toString() !== "" ? model.artwork : ""
 
     subtitle: model.mrl || ""


=====================================
modules/gui/qt/network/qml/NetworkThumbnailItem.qml
=====================================
@@ -63,9 +63,12 @@ Item {
             anchors.fill: parent
             iconSize: VLCStyle.play_cover_small
             visible: currentlyFocused || containsMouse
+
             onIconClicked: playClicked(item.index)
-            onlyBorders: rowModel.type === NetworkMediaModel.TYPE_NODE
-                         || rowModel.type === NetworkMediaModel.TYPE_DIRECTORY
+
+            showGradient: (rowModel.type !== NetworkMediaModel.TYPE_NODE
+                           &&
+                           rowModel.type !== NetworkMediaModel.TYPE_DIRECTORY)
         }
     }
 
@@ -89,9 +92,12 @@ Item {
             height: artwork.paintedHeight
             iconSize: VLCStyle.play_cover_small
             visible: currentlyFocused || containsMouse
+
             onIconClicked: playClicked(item.index)
-            onlyBorders: rowModel.type === NetworkMediaModel.TYPE_NODE
-                         || rowModel.type === NetworkMediaModel.TYPE_DIRECTORY
+
+            showGradient: (rowModel.type !== NetworkMediaModel.TYPE_NODE
+                           &&
+                           rowModel.type !== NetworkMediaModel.TYPE_DIRECTORY)
         }
     }
 }


=====================================
modules/gui/qt/network/qml/ServicesHomeDisplay.qml
=====================================
@@ -318,7 +318,7 @@ Widgets.PageLoader {
                 pictureHeight: VLCStyle.gridCover_network_height
                 height: VLCStyle.gridCover_network_height + VLCStyle.margin_xsmall + VLCStyle.fontHeight_normal
                 playCoverBorderWidth: VLCStyle.gridCover_network_border
-                playCoverOnlyBorders: true
+                playCoverShowGradient: false
                 pictureOverlay: overlay
                 unselectedUnderlay: shadows.unselected
                 selectedUnderlay: shadows.selected


=====================================
modules/gui/qt/widgets/qml/GridItem.qml
=====================================
@@ -35,7 +35,8 @@ Control {
     property int titleMargin: VLCStyle.margin_xsmall
     property Item dragItem: null
 
-    readonly property bool highlighted: mouseArea.containsMouse || activeFocus
+    readonly property bool highlighted: (mouseArea.containsMouse || visualFocus)
+
     readonly property int selectedBorderWidth: VLCStyle.gridItemSelectedBorder
 
     property int _modifiersOnLastPress: Qt.NoModifier
@@ -52,7 +53,7 @@ Control {
     property alias title: titleLabel.text
     property alias subtitle: subtitleTxt.text
     property alias playCoverBorderWidth: picture.playCoverBorderWidth
-    property alias playCoverOnlyBorders: picture.playCoverOnlyBorders
+    property alias playCoverShowGradient: picture.playCoverShowGradient
     property alias playIconSize: picture.playIconSize
     property alias pictureRadius: picture.radius
     property alias pictureOverlay: picture.imageOverlay


=====================================
modules/gui/qt/widgets/qml/MediaCover.qml
=====================================
@@ -31,7 +31,7 @@ Rectangle {
 
     // Properties
 
-    property bool playCoverOnlyBorders: false
+    property bool playCoverShowGradient: true
 
     property real playIconSize: VLCStyle.play_cover_normal
 
@@ -80,12 +80,11 @@ Rectangle {
         visible: false
         active: false
         sourceComponent: Widgets.PlayCover {
-            onlyBorders: root.playCoverOnlyBorders
-            iconSize: root.playIconSize
-            border.width: root.playCoverBorderWidth
+            showGradient: playCoverShowGradient
+            iconSize: playIconSize
             radius: root.radius
 
-            onIconClicked: root.playIconClicked()
+            onIconClicked: playIconClicked()
         }
 
         onVisibleChanged: {


=====================================
modules/gui/qt/widgets/qml/PlayCover.qml
=====================================
@@ -17,45 +17,64 @@
  *****************************************************************************/
 import QtQuick 2.11
 import QtQuick.Controls 2.4
+
 import "qrc:///style/"
 
 Rectangle {
     id: root
 
+    // Properties
+
+    property bool showGradient: true
+
+    // Aliases
+
     property alias iconSize: icon.width
-    property bool onlyBorders: false
+
+    // Signals
+
     signal iconClicked()
 
-    border.color: VLCStyle.colors.accent
-    border.width: VLCStyle.table_cover_border
+    // Settings
+
+    opacity: (visible)
 
-    opacity: visible ? 1 : 0
-    gradient: !onlyBorders ? background : undefined
-    color: 'transparent'
+    color: (showGradient) ? undefined : "transparent"
+
+    gradient: (showGradient) ? background : undefined
+
+    // Animations
 
     Behavior on opacity {
         NumberAnimation { duration: VLCStyle.duration_fast; easing.type: Easing.OutQuad }
     }
 
+    // Children
+
+    Gradient {
+        id: background
+
+        GradientStop { position: 0.0; color: Qt.rgba(0, 0, 0, 0.5) }
+        GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.7) }
+    }
+
     Image {
         id: icon
 
         anchors.centerIn: parent
-        fillMode: Image.PreserveAspectFit
+
+        visible: showGradient
+
         source: "qrc:/play_button.svg"
-        visible: !root.onlyBorders
-        mipmap: width < VLCStyle.icon_normal
+
+        fillMode: Image.PreserveAspectFit
+
+        mipmap: (width < VLCStyle.icon_normal)
 
         MouseArea {
             anchors.fill: parent
-            onClicked: root.iconClicked()
-        }
-    }
-
-    Gradient {
-        id: background
 
-        GradientStop { position: 0.0; color: Qt.rgba(0, 0, 0, .5) }
-        GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, .7) }
+            onClicked: iconClicked()
+        }
     }
 }



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/a9581488bc666579f3a859541d92ae2e7fc66c0d...5cfaf2ac26bc462645ec4c0434f870eeac034328

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