[vlc-devel] [PATCH 4/7] qml: reorganize player Topbar icons

Pierre Lamot pierre at videolabs.io
Wed Sep 30 18:21:56 CEST 2020


---
 modules/gui/qt/player/qml/TopBar.qml | 143 ++++++++++++++++++---------
 1 file changed, 97 insertions(+), 46 deletions(-)

diff --git a/modules/gui/qt/player/qml/TopBar.qml b/modules/gui/qt/player/qml/TopBar.qml
index b5b5b121cc..8da792d0df 100644
--- a/modules/gui/qt/player/qml/TopBar.qml
+++ b/modules/gui/qt/player/qml/TopBar.qml
@@ -48,7 +48,7 @@ Widgets.NavigableFocusScope{
         id : topcontrolContent
         color: VLCStyle.colors.setColorAlpha(VLCStyle.colors.banner, 0.8)
         anchors.fill: parent
-        implicitHeight: VLCStyle.icon_topbar + topcontrollerMouseArea.anchors.topMargin
+        implicitHeight: topcontrollerMouseArea.implicitHeight + topcontrollerMouseArea.anchors.topMargin
 
         gradient: Gradient {
             GradientStop { position: 0.0; color: VLCStyle.colors.playerBg }
@@ -63,62 +63,113 @@ Widgets.NavigableFocusScope{
             anchors.topMargin: VLCStyle.applicationVerticalMargin
             anchors.leftMargin: VLCStyle.applicationHorizontalMargin
             anchors.rightMargin: VLCStyle.applicationHorizontalMargin
+            implicitHeight: rowLayout.implicitHeight
 
-            RowLayout{
+            RowLayout {
+                id: rowLayout
                 anchors.fill: parent
-                anchors.leftMargin:  VLCStyle.margin_xsmall
-                anchors.rightMargin: VLCStyle.margin_xsmall
-
-                Widgets.IconToolButton {
-                    id: backBtn
-
-                    Layout.alignment: Qt.AlignTop
-
-                    objectName: "IconToolButton"
-                    size: VLCStyle.icon_normal
-                    iconText: VLCIcons.exit
-                    text: i18n.qtr("Back")
-                    color: VLCStyle.colors.playerFg
-                    onClicked: {
-                        if (player.hasVideoOutput) {
-                           mainPlaylistController.stop()
+
+                Column{
+                    id: backAndTitleLayout
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+
+                    spacing: VLCStyle.margin_xsmall
+
+                    RowLayout {
+                        anchors.left: parent.left
+                        spacing: 0
+
+                        Widgets.IconToolButton {
+                            id: backBtn
+
+                            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+
+                            objectName: "IconToolButton"
+                            size: VLCStyle.icon_normal
+                            iconText: VLCIcons.topbar_previous
+                            text: i18n.qtr("Back")
+                            color: VLCStyle.colors.playerFg
+                            onClicked: {
+                                if (player.hasVideoOutput) {
+                                    mainPlaylistController.stop()
+                                }
+                                history.previous()
+                            }
+                            KeyNavigation.right: menu_selector
+                            focus: true
+                        }
+
+                        Image {
+                            Layout.alignment: Qt.AlignVCenter
+                            sourceSize.width: VLCStyle.icon_small
+                            sourceSize.height: VLCStyle.icon_small
+                            source: "qrc:///logo/cone.svg"
+                            enabled: false
                         }
-                        history.previous()
                     }
-                    KeyNavigation.right: playlistBtn
-                    focus: true
-                }
 
-                Label {
-                    id: titleText
+                    Label {
+                        id: titleText
+
+                        anchors.left: parent.left
+                        anchors.leftMargin: VLCStyle.icon_normal
+                        width: rowLayout.width - (windowAndGlobalButtonsLayout.width + anchors.leftMargin)
+
+                        horizontalAlignment: Text.AlignLeft
+                        color: VLCStyle.colors.playerFg
+                        font.pixelSize: VLCStyle.fontSize_xxlarge
+                        font.weight: Font.DemiBold
+                        textFormat: Text.PlainText
+                        elide: Text.ElideRight
+                    }
 
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: implicitHeight
-                    Layout.leftMargin:  VLCStyle.margin_large
-                    Layout.rightMargin: VLCStyle.margin_large
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
-
-                    horizontalAlignment: Text.AlignHCenter
-                    color: VLCStyle.colors.playerFg
-                    font.pixelSize: VLCStyle.fontSize_xxxlarge
-                    textFormat: Text.PlainText
-                    elide: Text.ElideRight
                 }
 
-                Widgets.IconToolButton {
-                    id: playlistBtn
+                Column{
+                    id: windowAndGlobalButtonsLayout
+                    Layout.alignment: Qt.AlignTop | Qt.AlignRight
+
+                    spacing: VLCStyle.margin_xsmall
 
-                    Layout.alignment: Qt.AlignTop
+                    Row {
+                        //Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                        anchors.right: parent.right
 
-                    objectName: PlayerControlBarModel.PLAYLIST_BUTTON
-                    size: VLCStyle.icon_normal
-                    iconText: VLCIcons.playlist
-                    text: i18n.qtr("Playlist")
-                    color: VLCStyle.colors.playerFg
-                    onClicked: togglePlaylistVisiblity()
-                    property bool acceptFocus: true
+                        Widgets.IconToolButton {
+                            id: playlistBtn
 
-                    KeyNavigation.left: backBtn
+                            objectName: PlayerControlBarModel.PLAYLIST_BUTTON
+                            size: VLCStyle.icon_normal
+                            iconText: VLCIcons.playlist
+                            text: i18n.qtr("Playlist")
+                            color: VLCStyle.colors.playerFg
+                            onClicked: togglePlaylistVisiblity()
+                            property bool acceptFocus: true
+
+                            KeyNavigation.left: menu_selector
+                        }
+
+                        Widgets.IconToolButton {
+                            id: menu_selector
+
+                            size: VLCStyle.icon_normal
+                            iconText: VLCIcons.ellipsis
+                            text: i18n.qtr("Menu")
+                            color: VLCStyle.colors.playerFg
+                            property bool acceptFocus: true
+
+                            onClicked: contextMenu.popup(this.mapToGlobal(0, height))
+
+                            KeyNavigation.left: backBtn
+                            KeyNavigation.right: playlistBtn
+
+                            QmlGlobalMenu {
+                                id: contextMenu
+                                ctx: mainctx
+                            }
+                        }
+                    }
                 }
             }
         }
-- 
2.25.1



More information about the vlc-devel mailing list