[vlc-commits] [Git][videolan/vlc][master] 12 commits: qml: correctly transfer focus to expand item

Steve Lhomme (@robUx4) gitlab at videolan.org
Fri Oct 21 15:53:22 UTC 2022



Steve Lhomme pushed to branch master at VideoLAN / VLC


Commits:
525e20f1 by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: correctly transfer focus to expand item

fixes #27241

- - - - -
4f073f5d by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: fix warning

- - - - -
19aa7baf by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: add 'iconRotation' property to TabButtonExt

- - - - -
bf1c955f by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: make 'View More' component of VideoExpandPanel a TabButtonExt

- - - - -
f2ab51ec by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: implement keyboard navigation to 'View More' button of VideoExpandPanel

- - - - -
cc6b1807 by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: make close button a IconToolButton

- - - - -
3014e933 by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: implement keyboard navigation to 'Close' button of VideoExpandPanel

- - - - -
5fc2fa72 by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: rename to root

- - - - -
8027849d by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: remove unused property

- - - - -
b0d73e6f by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: use fully qualified names

- - - - -
2e7fdcc3 by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: fix opacity animation

'visible' property is set on the column parent, not on column

- - - - -
0325402c by Prince Gupta at 2022-10-21T15:29:16+00:00
qml: fix retract animation on ExpandGridView.setCurrentItemFocus

- - - - -


4 changed files:

- modules/gui/qt/medialibrary/qml/VideoAll.qml
- modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
- modules/gui/qt/widgets/qml/ExpandGridView.qml
- modules/gui/qt/widgets/qml/TabButtonExt.qml


Changes:

=====================================
modules/gui/qt/medialibrary/qml/VideoAll.qml
=====================================
@@ -246,7 +246,12 @@ FocusScope {
             Connections {
                 target: root.contextMenu
 
-                onShowMediaInformation: gridView.switchExpandItem(index)
+                onShowMediaInformation: {
+                    gridView.switchExpandItem(index)
+
+                    if (gridView.focus)
+                        expandItem.setCurrentItemFocus(Qt.TabFocusReason)
+                }
             }
 
             // Children
@@ -302,12 +307,16 @@ FocusScope {
 
                 Navigation.parentItem: gridView
 
-                Navigation.cancelAction: function() { gridView.retract() }
-                Navigation.upAction    : function() { gridView.retract() }
-                Navigation.downAction  : function() { gridView.retract() }
+                Navigation.cancelAction: gridView.forceFocus
+                Navigation.upAction: gridView.forceFocus
+                Navigation.downAction: gridView.forceFocus
 
                 onRetract: gridView.retract()
             }
+
+            function forceFocus() {
+                setCurrentItemFocus(Qt.TabFocus)
+            }
         }
     }
 


=====================================
modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
=====================================
@@ -30,9 +30,8 @@ import "qrc:///util/Helpers.js" as Helpers
 import "qrc:///style/"
 
 FocusScope {
-    id: expandRect
+    id: root
 
-    property int currentId: -1
     property var model : ({})
     property bool _showMoreInfo: false
     signal retract()
@@ -42,6 +41,12 @@ FocusScope {
     // otherwise produces artefacts on retract animation
     clip: true
 
+    focus: true
+
+    function setCurrentItemFocus(reason) {
+        playActionBtn.forceActiveFocus(reason);
+    }
+
     Rectangle{
         id: contentRect
 
@@ -136,7 +141,8 @@ FocusScope {
                             }
                         }
 
-                        Navigation.parentItem: expandRect
+                        Navigation.parentItem: root
+                        Navigation.rightItem: showMoreButton
                     }
                 }
             }
@@ -158,63 +164,57 @@ FocusScope {
                         Layout.fillWidth: true
                     }
 
-                    Widgets.IconLabel {
-                        text: VLCIcons.close
+                    Widgets.IconToolButton {
+                        id: closeButton
 
-                        MouseArea {
-                            anchors.fill: parent
-                            onClicked: expandRect.retract()
-                        }
+                        iconText: VLCIcons.close
+
+                        onClicked: root.retract()
+
+                        Navigation.parentItem: root
+                        Navigation.leftItem: showMoreButton
                     }
                 }
 
                 Widgets.CaptionLabel {
-                    text: model.duration.formatHMS()
+                    text: (model && model.duration) ? model.duration.formatHMS() : ""
                     color: VLCStyle.colors.text
                     width: parent.width
                 }
 
                 Widgets.MenuCaption {
                     topPadding: VLCStyle.margin_normal
-                    text: "<b>" + I18n.qtr("File Name:") + "</b> " + expandRect.model.fileName
+                    text: "<b>" + I18n.qtr("File Name:") + "</b> " + root.model.fileName
                     width: parent.width
                     textFormat: Text.StyledText
                 }
 
                 Widgets.MenuCaption {
-                    text: "<b>" + I18n.qtr("Path:") + "</b> " + expandRect.model.display_mrl
+                    text: "<b>" + I18n.qtr("Path:") + "</b> " + root.model.display_mrl
                     topPadding: VLCStyle.margin_xsmall
+                    bottomPadding: VLCStyle.margin_large
                     width: parent.width
                     textFormat: Text.StyledText
                 }
 
-                MouseArea {
-                    width: childrenRect.width
-                    height: childrenRect.height
-
-                    onClicked: _showMoreInfo = !_showMoreInfo
-
-                    Row {
-                        topPadding: VLCStyle.margin_large
-                        spacing: VLCStyle.margin_xsmall
+                Widgets.TabButtonExt {
+                    id: showMoreButton
 
-                        Widgets.IconLabel {
-                            text: VLCIcons.expand
-                            rotation: _showMoreInfo ? -180 : 0
-                            font.pixelSize: VLCStyle.icon_normal
+                    text: root._showMoreInfo ? I18n.qtr("View Less") : I18n.qtr("View More")
+                    iconTxt: VLCIcons.expand
+                    iconRotation: root._showMoreInfo ? -180 : 0
 
-                            Behavior on rotation {
-                                NumberAnimation {
-                                    duration: VLCStyle.duration_short
-                                }
-                            }
-                        }
-
-                        Widgets.CaptionLabel {
-                            text: _showMoreInfo ? I18n.qtr("View Less") : I18n.qtr("View More")
-                            color: VLCStyle.colors.text
+                    Behavior on iconRotation {
+                        NumberAnimation {
+                            duration: VLCStyle.duration_short
                         }
                     }
+
+                    onClicked: root._showMoreInfo = !root._showMoreInfo
+
+                    Navigation.parentItem: root
+                    Navigation.leftItem: enqueueActionBtn
+                    Navigation.rightItem: closeButton
                 }
 
                 Row {
@@ -224,7 +224,15 @@ FocusScope {
 
                     spacing: VLCStyle.margin_xlarge
 
-                    visible: _showMoreInfo
+                    visible: root._showMoreInfo
+
+                    opacity: visible ? 1.0 : 0.0
+
+                    Behavior on opacity {
+                        NumberAnimation {
+                            duration: VLCStyle.duration_long
+                        }
+                    }
 
                     Repeater {
                         model: [
@@ -241,14 +249,6 @@ FocusScope {
                         delegate: Column {
                             visible: delgateRepeater.count > 0
 
-                            opacity: (visible) ? 1.0 : 0.0
-
-                            Behavior on opacity {
-                                NumberAnimation {
-                                    duration: VLCStyle.duration_short
-                                }
-                            }
-
                             Widgets.MenuCaption {
                                 text: modelData.title
                                 font.bold: true
@@ -271,7 +271,7 @@ FocusScope {
         id: videoDescModel
 
         Repeater {
-            model: expandRect.model.videoDesc
+            model: root.model.videoDesc
 
             // TODO: use inline Component for Qt > 5.14
             delegate: Repeater {
@@ -299,7 +299,7 @@ FocusScope {
 
         // TODO: use inline Component for Qt > 5.14
         Repeater {
-            model: expandRect.model.audioDesc
+            model: root.model.audioDesc
 
             delegate: Repeater {
                 id: audioDescRepeaterDelegate


=====================================
modules/gui/qt/widgets/qml/ExpandGridView.qml
=====================================
@@ -299,9 +299,7 @@ FocusScope {
         positionViewAtIndex(currentIndex, ItemView.Contain);
 
         if (expandIndex !== -1) {
-            // NOTE: We clear expandIndex so we can apply the proper focus in _setupChild.
-            expandIndex = -1;
-
+            // We clear expandIndex so we can apply the proper focus in _setupChild.
             retract();
         }
     }


=====================================
modules/gui/qt/widgets/qml/TabButtonExt.qml
=====================================
@@ -48,6 +48,8 @@ T.TabButton {
 
     property alias colorFocus: background.activeBorderColor
 
+    property alias iconRotation: icon.rotation
+
     // Settings
 
     width: implicitWidth



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/5e4688e08e17878d66a739c702a7f70cc68cd799...0325402cf799c20ca0c0667771683bd563db6f34

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/5e4688e08e17878d66a739c702a7f70cc68cd799...0325402cf799c20ca0c0667771683bd563db6f34
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