[vlc-commits] [Git][videolan/vlc][master] 6 commits: qml: update playlist delegate spacing

Jean-Baptiste Kempf (@jbk) gitlab at videolan.org
Sun Apr 9 11:04:03 UTC 2023



Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC


Commits:
21b64442 by Prince Gupta at 2023-04-09T10:10:57+00:00
qml: update playlist delegate spacing

- - - - -
d515c92c by Prince Gupta at 2023-04-09T10:10:57+00:00
qml: don't set font weight on subtitle of playlist delegate

- - - - -
2702b4d0 by Prince Gupta at 2023-04-09T10:10:57+00:00
qml: increase playlist art size

- - - - -
190e9f9e by Prince Gupta at 2023-04-09T10:10:57+00:00
qt: add separator colors on Item component

- - - - -
0bc8e1b1 by Prince Gupta at 2023-04-09T10:10:57+00:00
qml: improve CurrentIndicator widget

* allow to disable positioning (set source = null)
* simplify implementation

- - - - -
664ff645 by Prince Gupta at 2023-04-09T10:10:57+00:00
qml: add current indicator to playlistdelegate

- - - - -


13 changed files:

- modules/gui/qt/medialibrary/qml/MusicArtistDelegate.qml
- modules/gui/qt/playlist/qml/PlaylistDelegate.qml
- modules/gui/qt/playlist/qml/PlaylistListView.qml
- modules/gui/qt/style/VLCStyle.qml
- modules/gui/qt/style/colorcontext.cpp
- modules/gui/qt/style/colorcontext.hpp
- modules/gui/qt/style/gtkthemeprovider/gtkthemeprovider.cpp
- modules/gui/qt/style/qtthemeprovider.hpp
- modules/gui/qt/style/systempalette.cpp
- modules/gui/qt/style/systempalettethemeprovider.cpp
- modules/gui/qt/style/windowsthemeprovider.cpp
- modules/gui/qt/widgets/qml/BannerTabButton.qml
- modules/gui/qt/widgets/qml/CurrentIndicator.qml


Changes:

=====================================
modules/gui/qt/medialibrary/qml/MusicArtistDelegate.qml
=====================================
@@ -116,7 +116,7 @@ T.ItemDelegate {
         onDoubleClicked: itemDoubleClicked(mouse)
 
         Widgets.CurrentIndicator {
-            height: parent.height - (margin * 2)
+            length: parent.height - (margin * 2)
 
             margin: VLCStyle.dp(4, VLCStyle.scale)
 


=====================================
modules/gui/qt/playlist/qml/PlaylistDelegate.qml
=====================================
@@ -44,11 +44,11 @@ T.ItemDelegate {
 
     // Settings
 
-    topPadding: VLCStyle.margin_xxsmall
+    topPadding: VLCStyle.playlistDelegate_verticalPadding
 
-    bottomPadding: VLCStyle.margin_xxsmall
+    bottomPadding: VLCStyle.playlistDelegate_verticalPadding
 
-    leftPadding: VLCStyle.margin_normal
+    leftPadding: VLCStyle.margin_xxsmall
 
     rightPadding: Math.max(listView.scrollBarWidth, VLCStyle.margin_normal)
 
@@ -112,12 +112,34 @@ T.ItemDelegate {
     contentItem: RowLayout {
         spacing: 0
 
+        Widgets.CurrentIndicator {
+            id: currentIndicator
+
+            // disable positioning via CurrentIndicator, manually position according to RowLayout
+            source: null
+
+            implicitWidth: VLCStyle.heightBar_xxxsmall
+            Layout.fillHeight: true
+
+            color: {
+                if (model.isCurrent)
+                    return theme.accent
+
+                // based on design, ColorContext can't handle this case
+                if (!delegate.hovered)
+                    return VLCStyle.setColorAlpha(theme.indicator, 0)
+
+                return theme.indicator
+            }
+        }
+
         Item {
             id: artworkItem
 
-            Layout.preferredHeight: VLCStyle.icon_normal
-            Layout.preferredWidth: VLCStyle.icon_normal
+            Layout.preferredHeight: VLCStyle.icon_playlistArt
+            Layout.preferredWidth: VLCStyle.icon_playlistArt
             Layout.alignment: Qt.AlignVCenter
+            Layout.leftMargin: VLCStyle.margin_xsmall
 
             Accessible.role: Accessible.Graphic
             Accessible.name: I18n.qtr("Cover")
@@ -178,7 +200,7 @@ T.ItemDelegate {
             Layout.fillWidth: true
             Layout.fillHeight: true
             Layout.leftMargin: VLCStyle.margin_large
-            spacing: 0
+            spacing: VLCStyle.margin_xsmall
 
             Widgets.ListLabel {
                 id: textInfo
@@ -198,7 +220,6 @@ T.ItemDelegate {
                 Layout.fillHeight: true
                 Layout.fillWidth: true
 
-                font.weight: model.isCurrent ? Font.DemiBold : Font.Normal
                 text: (model.artist ? model.artist : I18n.qtr("Unknown Artist"))
                 color: theme.fg.primary
                 verticalAlignment: Text.AlignBottom


=====================================
modules/gui/qt/playlist/qml/PlaylistListView.qml
=====================================
@@ -238,7 +238,8 @@ Control {
             spacing: VLCStyle.margin_large
 
             Widgets.IconLabel {
-                Layout.preferredWidth: VLCStyle.icon_playlistHeader
+                // playlist cover column
+                Layout.preferredWidth: VLCStyle.icon_playlistArt
 
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter


=====================================
modules/gui/qt/style/VLCStyle.qml
=====================================
@@ -114,6 +114,7 @@ QtObject {
     readonly property int icon_actionButton: icon_normal
     readonly property int icon_PIP: icon_normal
     readonly property int icon_CSD: icon_small
+    readonly property int icon_playlistArt: dp(32, scale)
 
     readonly property int play_cover_small: dp(24, scale)
     readonly property int play_cover_normal: dp(48, scale)
@@ -222,6 +223,8 @@ QtObject {
 
     readonly property int artistBanner_height: dp(200, scale)
 
+    readonly property int playlistDelegate_verticalPadding: dp(6, scale)
+
     //global application size, updated by the root widget
     property int appWidth: 0
     property int appHeight: 0


=====================================
modules/gui/qt/style/colorcontext.cpp
=====================================
@@ -402,6 +402,11 @@ QColor ColorContext::separator() const
     return getColor(Decoration, Separator);
 }
 
+QColor ColorContext::indicator() const
+{
+    return getColor(Decoration, Indicator);
+}
+
 QColor ColorContext::shadow() const
 {
     return getColor(Decoration, Shadow);


=====================================
modules/gui/qt/style/colorcontext.hpp
=====================================
@@ -117,6 +117,7 @@ public:
         Accent = VQTC_NAME_ACCENT,
         Shadow = VQTC_NAME_SHADOW,
         Separator = VQTC_NAME_SEPARATOR,
+        Indicator = VQTC_NAME_INDICATOR
     };
 
     Q_PROPERTY(SystemPalette* palette READ palette WRITE setPalette NOTIFY paletteChanged FINAL)
@@ -139,6 +140,7 @@ public:
     Q_PROPERTY(QColor visualFocus READ visualFocus NOTIFY colorsChanged FINAL)
     Q_PROPERTY(QColor border READ border NOTIFY colorsChanged FINAL)
     Q_PROPERTY(QColor separator READ separator NOTIFY colorsChanged FINAL)
+    Q_PROPERTY(QColor indicator READ indicator NOTIFY colorsChanged FINAL)
     Q_PROPERTY(QColor shadow READ shadow NOTIFY colorsChanged FINAL)
     Q_PROPERTY(QColor accent READ accent NOTIFY colorsChanged FINAL)
 
@@ -160,6 +162,7 @@ public:
     QColor visualFocus() const;
     QColor border() const;
     QColor separator() const;
+    QColor indicator() const;
     QColor shadow() const;
     QColor accent() const;
 


=====================================
modules/gui/qt/style/gtkthemeprovider/gtkthemeprovider.cpp
=====================================
@@ -359,6 +359,9 @@ static int updatePalette(vlc_qt_theme_provider_t* obj)
         setGtkColorSetFg(obj, CS, VQTC_NAME_PRIMARY, ITEM_SELECTOR);
         setGtkColorSetBorder(obj, CS, ITEM_SELECTOR);
         setGtkColorSetHighlight(obj, CS, ITEM_SELECTOR);
+
+        const auto separator = GetSeparatorColor(" GtkListBoxRow#separator.horizontal");
+        setGtkColor(obj, CS, VQTC_SECTION_DECORATION,  VQTC_NAME_INDICATOR, VQTC_STATE_NORMAL, separator);
     }
 
 #define COMBOBOX_SELECTOR VIEW_SELECTOR " GtkComboBoxText#combobox #box.linked #entry.combo"


=====================================
modules/gui/qt/style/qtthemeprovider.hpp
=====================================
@@ -74,6 +74,7 @@ enum vlc_qt_theme_color_name {
     VQTC_NAME_ACCENT,
     VQTC_NAME_SHADOW,
     VQTC_NAME_SEPARATOR,
+    VQTC_NAME_INDICATOR,
     VQTC_NAME_COUNT
 };
 


=====================================
modules/gui/qt/style/systempalette.cpp
=====================================
@@ -561,6 +561,9 @@ void SystemPalette::makeLightPalette()
 
         setColor(CS, C::Fg, C::Primary, C::Normal, Qt::black);
         setColor(CS, C::Fg, C::Secondary, C::Normal, setColorAlpha(Qt::black, 0.6));
+
+        setColor(CS, C::Decoration, C::Indicator, C::Normal, QColor("#9e9e9e")); //FIXME not a predef
+
     }
 
     //Accent Buttons
@@ -755,6 +758,8 @@ void SystemPalette::makeDarkPalette()
 
         setColor(CS, C::Fg, C::Primary, C::Normal, Qt::white);
         setColor(CS, C::Fg, C::Secondary, C::Normal, setColorAlpha(Qt::white, 0.6));
+
+        setColor(CS, C::Decoration, C::Indicator, C::Normal, QColor("#666666"));  //FIXME not a predef
     }
 
     //Accent Buttons


=====================================
modules/gui/qt/style/systempalettethemeprovider.cpp
=====================================
@@ -327,6 +327,13 @@ static int updatePalette(vlc_qt_theme_provider_t* obj)
         setQtColor(obj, CS, VQTC_SECTION_BG, VQTC_NAME_HIGHLIGHT, VQTC_STATE_FOCUSED, hightlightHover);
         setQtColor(obj, CS, VQTC_SECTION_BG, VQTC_NAME_HIGHLIGHT, VQTC_STATE_HOVERED, hightlightHover);
         setQtColor(obj, CS, VQTC_SECTION_FG, VQTC_NAME_HIGHLIGHT, VQTC_STATE_NORMAL, textOnHightlight);
+
+
+        const auto bg = palette.color(QPalette::AlternateBase);
+        const auto indicator = sys->m_isDark ? bg.lighter() : bg.darker();
+        setQtColor(obj, CS, VQTC_SECTION_DECORATION, VQTC_NAME_INDICATOR
+                   , VQTC_STATE_NORMAL, indicator);
+
     }
 
     //Badge


=====================================
modules/gui/qt/style/windowsthemeprovider.cpp
=====================================
@@ -171,6 +171,8 @@ static int updatePalette(vlc_qt_theme_provider_t* obj)
             setQtColor(obj, CS, VQTC_SECTION_DECORATION, VQTC_NAME_BORDER, VQTC_STATE_NORMAL, COLOR_BTNTEXT);
             setQtColor(obj, CS, VQTC_SECTION_DECORATION, VQTC_NAME_BORDER, VQTC_STATE_FOCUSED, COLOR_HIGHLIGHT);
             setQtColor(obj, CS, VQTC_SECTION_DECORATION, VQTC_NAME_BORDER, VQTC_STATE_HOVERED, COLOR_HIGHLIGHT);
+
+            setQtColor(obj, CS, VQTC_SECTION_DECORATION, VQTC_NAME_INDICATOR, VQTC_STATE_NORMAL, COLOR_HIGHLIGHT);
         }
 
         //set colors on all buttons


=====================================
modules/gui/qt/widgets/qml/BannerTabButton.qml
=====================================
@@ -130,7 +130,7 @@ T.TabButton {
         }
 
         Widgets.CurrentIndicator {
-            width: tabRow.width
+            length: tabRow.width
 
             orientation: Qt.Horizontal
 


=====================================
modules/gui/qt/widgets/qml/CurrentIndicator.qml
=====================================
@@ -23,6 +23,7 @@ import org.videolan.vlc 0.1
 import "qrc:///style/"
 
 Rectangle {
+    id: root
 
     property int orientation: Qt.Vertical
     property int margin: VLCStyle.margin_xxxsmall
@@ -31,37 +32,33 @@ Rectangle {
         id: theme
     }
 
-    color: theme.accent
-    width: orientation === Qt.Vertical ? VLCStyle.heightBar_xxxsmall : parent.width
-    height: orientation === Qt.Horizontal ? VLCStyle.heightBar_xxxsmall : parent.height
+    property Item source: parent
+
+    property int length: 0
 
-    onOrientationChanged: {
-        if (orientation == Qt.Vertical) {
-            anchors.horizontalCenter = undefined
-            anchors.verticalCenter = Qt.binding(function () {
-                return parent.verticalCenter
-            })
-            anchors.left = Qt.binding(function () {
-                return parent.left
-            })
-            anchors.right = undefined
-            anchors.leftMargin = Qt.binding(function () {
-                return margin
-            })
-            anchors.bottomMargin = 0
-        } else {
-            anchors.top = undefined
-            anchors.bottom = Qt.binding(function () {
-                return parent.bottom
-            })
-            anchors.horizontalCenter = Qt.binding(function () {
-                return parent.horizontalCenter
-            })
-            anchors.verticalCenter = undefined
-            anchors.leftMargin = 0
-            anchors.bottomMargin = Qt.binding(function () {
-                return margin
-            })
+    property var _position: [
+        {
+            // for orientation == Qt.Vertical
+            "width" : VLCStyle.heightBar_xxxsmall,
+            "height": root.length,
+            "x": margin,
+            "y": !!source ? (source.height - root.length) / 2 : 0
+        },
+        {
+            // for orientation == Qt.Horizontal
+            "width": root.length,
+            "height": VLCStyle.heightBar_xxxsmall,
+            "x": !!source ? (source.width - root.length) / 2 : 0,
+            "y": !!source ? source.height - margin : 0,
         }
-    }
+    ]
+
+    property var _currentPosition: (orientation === Qt.Vertical) ? _position[0] : _position[1]
+
+    color: theme.accent
+
+    x: _currentPosition.x
+    y: _currentPosition.y
+    width: _currentPosition.width
+    height: _currentPosition.height
 }



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/5db6d3c820ec004f54fec9474d950746eaf3a3d0...664ff6454d6fc95eb95c49f49a60421e43c0884b

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


VideoLAN code repository instance


More information about the vlc-commits mailing list