[vlc-commits] qml: new styling for SortControl

[Fatih Uzunoglu]

vlc | branch: master | Fatih Uzunoglu <fuzun54 at outlook.com> | Fri Oct  9 19:56:30 2020 +0300| [4297bf0259636dba9ff679086f8b6ef3a5412470] | committer: Pierre Lamot

qml: new styling for SortControl

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=4297bf0259636dba9ff679086f8b6ef3a5412470
---

 modules/gui/qt/widgets/qml/SortControl.qml | 59 +++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 10 deletions(-)

diff --git a/modules/gui/qt/widgets/qml/SortControl.qml b/modules/gui/qt/widgets/qml/SortControl.qml
index e44206a55e..9129b8a6d7 100644
--- a/modules/gui/qt/widgets/qml/SortControl.qml
+++ b/modules/gui/qt/widgets/qml/SortControl.qml
@@ -17,6 +17,9 @@
  *****************************************************************************/
 import QtQuick 2.11
 import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.3
+
+import org.videolan.vlc 0.1
 
 import "qrc:///style/"
 import "qrc:///widgets/" as Widgets
@@ -29,7 +32,7 @@ Widgets.NavigableFocusScope {
 
     property alias model: list.model
     property string textRole
-
+    property string criteriaRole
 
     property int popupAlignment: Qt.AlignRight | Qt.AlignBottom
     property int listWidth
@@ -38,6 +41,11 @@ Widgets.NavigableFocusScope {
 
     property VLCColors _colors: VLCStyle.colors
 
+    // properties that should be handled by parent
+    // if they are not updated, SortControl will behave as before
+    property var sortKey : PlaylistControllerModel.SORT_KEY_NONE
+    property var sortOrder : undefined
+
     signal sortSelected(var modelData)
 
     onFocusChanged: {
@@ -122,7 +130,7 @@ Widgets.NavigableFocusScope {
 
                 background: Item {}
                 contentItem: Item {
-                    implicitHeight: itemText.implicitHeight
+                    implicitHeight: itemRow.implicitHeight
 
                     Rectangle {
                         anchors.fill: parent
@@ -130,15 +138,46 @@ Widgets.NavigableFocusScope {
                         visible: mouseArea.containsMouse
                     }
 
-                    MenuCaption {
-                        id: itemText
-                        text: root.textRole ? (Array.isArray(root.model) ? modelData[root.textRole] : model[root.textRole]) : modelData
+                    RowLayout {
+                        id: itemRow
                         anchors.fill: parent
-                        topPadding: VLCStyle.margin_xxsmall
-                        bottomPadding: VLCStyle.margin_xxsmall
-                        leftPadding: VLCStyle.margin_xsmall
-                        rightPadding: VLCStyle.margin_xsmall
-                        color: _colors.buttonText
+
+                        MenuCaption {
+                            id: isActiveText
+                            Layout.preferredHeight: itemText.implicitHeight
+                            Layout.preferredWidth: tickMetric.width
+                            Layout.leftMargin: VLCStyle.margin_xsmall
+
+                            text: root.criteriaRole ? (Array.isArray(root.model) ? (modelData[root.criteriaRole] === sortKey ? "✓" : "")
+                                                                                 : (model[root.criteriaRole] === sortKey ? "✓" : "")) : ""
+                            color: _colors.buttonText
+
+                            TextMetrics {
+                                id: tickMetric
+                                text: "✓"
+                            }
+                        }
+
+                        MenuCaption {
+                            Layout.fillWidth: true
+                            Layout.topMargin: VLCStyle.margin_xxsmall
+                            Layout.bottomMargin: VLCStyle.margin_xxsmall
+                            Layout.leftMargin: VLCStyle.margin_xsmall
+
+                            id: itemText
+                            text: root.textRole ? (Array.isArray(root.model) ? modelData[root.textRole] : model[root.textRole]) : modelData
+
+                            color: _colors.buttonText
+                        }
+
+                        MenuCaption {
+                            Layout.preferredHeight: itemText.implicitHeight
+                            Layout.rightMargin: VLCStyle.margin_xsmall
+
+                            text: (isActiveText.text === "" ? "" : (sortOrder === PlaylistControllerModel.SORT_ORDER_ASC ? "↓" : "↑"))
+
+                            color: _colors.buttonText
+                        }
                     }
 
                     MouseArea {