[vlc-devel] [PATCH 19/25] qml: allow different layouts in TopBar
Prince Gupta
guptaprince8832 at gmail.com
Thu Mar 11 09:16:27 UTC 2021
---
modules/gui/qt/player/qml/TopBar.qml | 387 ++++++++++++++++-----------
1 file changed, 236 insertions(+), 151 deletions(-)
diff --git a/modules/gui/qt/player/qml/TopBar.qml b/modules/gui/qt/player/qml/TopBar.qml
index 73cf472e61..b865f725b2 100644
--- a/modules/gui/qt/player/qml/TopBar.qml
+++ b/modules/gui/qt/player/qml/TopBar.qml
@@ -29,175 +29,260 @@ import "qrc:///menus/" as Menus
Widgets.NavigableFocusScope{
id: topFocusScope
- property alias title: titleText.text
+ enum GroupAlignment {
+ Horizontal,
+ Vertical
+ }
+
+ property string title
property VLCColors colors: VLCStyle.nightColors
+ property int groupAlignment: TopBar.GroupAlignment.Vertical
+ property Label _currentTitleText: null
signal tooglePlaylistVisibility()
signal requestLockUnlockAutoHide(bool lock, var source)
- implicitHeight: topcontrolContent.implicitHeight
+ implicitHeight: topcontrollerMouseArea.implicitHeight
Keys.priority: Keys.AfterItem
Keys.onPressed: defaultKeyAction(event, 0)
- Item {
- id : topcontrolContent
+ Component.onCompleted: {
+ // if groupAlignment == Horizontal, then onGroupAlignment isn't called when Component is created
+ if (groupAlignment === TopBar.GroupAlignment.Horizontal)
+ _layout()
+ }
+
+ onGroupAlignmentChanged: _layout()
+
+ function _layout() {
+ if (topFocusScope._currentTitleText)
+ topFocusScope._currentTitleText.destroy()
+
+ switch (groupAlignment) {
+ case TopBar.GroupAlignment.Horizontal:
+ leftColumn.children = [menubar, logoGroup]
+
+ _currentTitleText = centerTitleTextComponent.createObject(topcontrollerMouseArea)
+
+ var rightRow = Qt.createQmlObject("import QtQuick 2.11; Row {}", rightColumn, "TopBar")
+ rightRow.children = [playlistGroup, csdDecorations]
+ playlistGroup.anchors.verticalCenter = rightRow.verticalCenter
+ break;
+ case TopBar.GroupAlignment.Vertical:
+ _currentTitleText = leftTitleTextComponent.createObject()
+ leftColumn.children = [menubar, logoGroup, _currentTitleText]
+ playlistGroup.anchors.verticalCenter = undefined
+ rightColumn.children = [csdDecorations, playlistGroup]
+ playlistGroup.Layout.alignment = Qt.AlignRight
+ }
+ }
+
+ // Main Content Container
+ MouseArea {
+ id: topcontrollerMouseArea
+
+ hoverEnabled: true
anchors.fill: parent
- implicitHeight: topcontrollerMouseArea.implicitHeight + topcontrollerMouseArea.anchors.topMargin
+ anchors.topMargin: VLCStyle.applicationVerticalMargin
+ anchors.leftMargin: VLCStyle.applicationHorizontalMargin
+ anchors.rightMargin: VLCStyle.applicationHorizontalMargin
+ implicitHeight: rowLayout.implicitHeight + anchors.topMargin
+
+ onContainsMouseChanged: topFocusScope.requestLockUnlockAutoHide(containsMouse, topFocusScope)
+
+ //drag and dbl click the titlebar in CSD mode
+ Loader {
+ anchors.fill: parent
+ active: mainInterface.clientSideDecoration
+ source: "qrc:///widgets/CSDTitlebarTapNDrapHandler.qml"
+ }
+
+ RowLayout {
+ id: rowLayout
- MouseArea {
- id: topcontrollerMouseArea
- hoverEnabled: true
anchors.fill: parent
- anchors.topMargin: VLCStyle.applicationVerticalMargin
- anchors.leftMargin: VLCStyle.applicationHorizontalMargin
- anchors.rightMargin: VLCStyle.applicationHorizontalMargin
- implicitHeight: rowLayout.implicitHeight
-
- onContainsMouseChanged: topFocusScope.requestLockUnlockAutoHide(containsMouse, topFocusScope)
-
- //drag and dbl click the titlebar in CSD mode
- Loader {
- anchors.fill: parent
- active: mainInterface.clientSideDecoration
- source: "qrc:///widgets/CSDTitlebarTapNDrapHandler.qml"
+
+ ColumnLayout {
+ id: leftColumn
+
+ spacing: 0
+ Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+ Layout.leftMargin: VLCStyle.margin_xxsmall
+ Layout.topMargin: VLCStyle.margin_xxsmall
+ Layout.bottomMargin: VLCStyle.margin_xxsmall
}
- RowLayout {
- id: rowLayout
- anchors.fill: parent
- anchors.leftMargin: VLCStyle.margin_xxsmall
-
- Column{
- id: backAndTitleLayout
- Layout.fillWidth: true
- Layout.alignment: Qt.AlignTop | Qt.AlignLeft
-
- Menus.Menubar {
- id: menubar
-
- width: parent.width
- height: VLCStyle.icon_normal
- visible: mainInterface.hasToolbarMenu
- textColor: topFocusScope.colors.text
- highlightedBgColor: topFocusScope.colors.bgHover
- highlightedTextColor: topFocusScope.colors.bgHoverText
- }
-
- RowLayout {
- anchors.left: parent.left
- spacing: VLCStyle.margin_xxsmall
-
- Widgets.IconToolButton {
- id: backBtn
-
- Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-
- objectName: "IconToolButton"
- size: VLCStyle.banner_icon_size
- iconText: VLCIcons.topbar_previous
- text: i18n.qtr("Back")
- color: topFocusScope.colors.playerFg
- onClicked: {
- if (mainInterface.hasEmbededVideo && !mainInterface.canShowVideoPIP) {
- mainPlaylistController.stop()
- }
- history.previous()
- }
- focus: true
- KeyNavigation.right: menuSelector
- }
-
- Image {
- id: logo
-
- Layout.alignment: Qt.AlignVCenter
- sourceSize.width: VLCStyle.icon_small
- sourceSize.height: VLCStyle.icon_small
- source: "qrc:///logo/cone.svg"
- enabled: false
- }
- }
-
- Label {
- id: titleText
-
- anchors.left: parent.left
- anchors.leftMargin: logo.x
- width: rowLayout.width - anchors.leftMargin
- topPadding: VLCStyle.margin_large
- horizontalAlignment: Text.AlignLeft
- color: topFocusScope.colors.playerFg
- font.pixelSize: VLCStyle.dp(18, VLCStyle.scale)
- font.weight: Font.DemiBold
- textFormat: Text.PlainText
- elide: Text.ElideRight
- }
+ ColumnLayout {
+ id: rightColumn
+
+ spacing: 0
+ Layout.alignment: Qt.AlignTop | Qt.AlignRight
+ // this column may contain CSD, don't apply margins directly
+ }
+ }
+ }
+
+ // Components -
+ Menus.Menubar {
+ id: menubar
+
+ width: implicitWidth
+ height: VLCStyle.icon_normal
+ visible: mainInterface.hasToolbarMenu
+ textColor: topFocusScope.colors.text
+ highlightedBgColor: topFocusScope.colors.bgHover
+ highlightedTextColor: topFocusScope.colors.bgHoverText
+ }
+
+ RowLayout {
+ id: logoGroup
+
+ spacing: VLCStyle.margin_xxsmall
+
+ Widgets.IconToolButton {
+ id: backBtn
+
+ Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+
+ objectName: "IconToolButton"
+ size: VLCStyle.banner_icon_size
+ iconText: VLCIcons.topbar_previous
+ text: i18n.qtr("Back")
+ color: topFocusScope.colors.playerFg
+ focus: true
+ KeyNavigation.right: menuSelector
+ onClicked: {
+ if (mainInterface.hasEmbededVideo && !mainInterface.canShowVideoPIP) {
+ mainPlaylistController.stop()
}
+ history.previous()
+ }
+ }
+
+ Image {
+ id: logo
- Column {
- spacing: VLCStyle.margin_xxsmall
- Layout.alignment: Qt.AlignRight | Qt.AlignTop
-
- Loader {
- focus: false
- anchors.right: parent.right
- height: VLCStyle.icon_normal
- active: mainInterface.clientSideDecoration
- enabled: mainInterface.clientSideDecoration
- visible: mainInterface.clientSideDecoration
- source: "qrc:///widgets/CSDWindowButtonSet.qml"
- onLoaded: {
- item.color = Qt.binding(function() { return topFocusScope.colors.playerFg })
- item.hoverColor = Qt.binding(function() { return topFocusScope.colors.windowCSDButtonDarkBg })
- }
- }
-
- Row {
- anchors.right: parent.right
- anchors.rightMargin: VLCStyle.applicationHorizontalMargin + VLCStyle.margin_xxsmall
- focus: true
- spacing: VLCStyle.margin_xxsmall
-
- Widgets.IconToolButton {
- id: menuSelector
-
- focus: true
- size: VLCStyle.banner_icon_size
- iconText: VLCIcons.ellipsis
- text: i18n.qtr("Menu")
- color: rootPlayer.colors.playerFg
- property bool acceptFocus: true
-
- onClicked: contextMenu.popup(this.mapToGlobal(0, height))
-
- KeyNavigation.left: backBtn
- KeyNavigation.right: playlistButton
-
- QmlGlobalMenu {
- id: contextMenu
- ctx: mainctx
- }
- }
-
- Widgets.IconToolButton {
- id: playlistButton
-
- objectName: PlayerControlBarModel.PLAYLIST_BUTTON
- size: VLCStyle.banner_icon_size
- iconText: VLCIcons.playlist
- text: i18n.qtr("Playlist")
- color: rootPlayer.colors.playerFg
- focus: false
-
- property bool acceptFocus: true
-
- KeyNavigation.left: menuSelector
- onClicked: tooglePlaylistVisibility()
- }
- }
+ Layout.alignment: Qt.AlignVCenter
+ sourceSize.width: VLCStyle.icon_small
+ sourceSize.height: VLCStyle.icon_small
+ source: "qrc:///logo/cone.svg"
+ enabled: false
+ }
+ }
+
+ Component {
+ id: centerTitleTextComponent
+
+ Label {
+ id: centerTitleText
+
+ readonly property int _availableWidth: rightColumn.x - (leftColumn.x + leftColumn.width)
+ readonly property int _centerX: ((topcontrollerMouseArea.width - centerTitleText.implicitWidth) / 2)
+ readonly property bool _alignHCenter: _centerX > leftColumn.x + leftColumn.width
+ && _centerX + centerTitleText.implicitWidth < rightColumn.x
+
+ y: leftColumn.y
+ topPadding: VLCStyle.margin_xxsmall
+ leftPadding: VLCStyle.margin_small
+ rightPadding: VLCStyle.margin_small
+ text: topFocusScope.title
+ color: topFocusScope.colors.playerFg
+ font.pixelSize: VLCStyle.dp(13, VLCStyle.scale)
+ font.weight: Font.DemiBold
+ elide: Text.ElideRight
+ width: Math.min(centerTitleText._availableWidth, centerTitleText.implicitWidth)
+
+ on_AlignHCenterChanged: _layout()
+ Component.onCompleted: _layout()
+
+ function _layout() {
+ if (_alignHCenter) {
+ centerTitleText.x = 0
+ centerTitleText.anchors.horizontalCenter = topcontrollerMouseArea.horizontalCenter
+ } else {
+ centerTitleText.anchors.horizontalCenter = undefined
+ centerTitleText.x = Qt.binding(function() { return leftColumn.x + leftColumn.width; })
}
}
}
}
+
+ Component {
+ id: leftTitleTextComponent
+
+ Label {
+ text: topFocusScope.title
+ horizontalAlignment: Text.AlignLeft
+ topPadding: VLCStyle.margin_large
+ leftPadding: logo.x
+ color: topFocusScope.colors.playerFg
+ font.weight: Font.DemiBold
+ font.pixelSize: VLCStyle.dp(18, VLCStyle.scale)
+ elide: Text.ElideRight
+
+ Layout.fillWidth: true
+ }
+ }
+
+ Loader {
+ id: csdDecorations
+
+ focus: false
+ height: VLCStyle.icon_normal
+ active: mainInterface.clientSideDecoration
+ enabled: mainInterface.clientSideDecoration
+ visible: mainInterface.clientSideDecoration
+ source: "qrc:///widgets/CSDWindowButtonSet.qml"
+ onLoaded: {
+ item.color = Qt.binding(function() { return topFocusScope.colors.playerFg })
+ item.hoverColor = Qt.binding(function() { return topFocusScope.colors.windowCSDButtonDarkBg })
+ }
+ }
+
+ Row {
+ id: playlistGroup
+
+ focus: true
+ spacing: VLCStyle.margin_xxsmall
+ topPadding: VLCStyle.margin_xxsmall
+ rightPadding: VLCStyle.margin_xxsmall
+
+ Widgets.IconToolButton {
+ id: menuSelector
+
+ focus: true
+ size: VLCStyle.banner_icon_size
+ iconText: VLCIcons.ellipsis
+ text: i18n.qtr("Menu")
+ color: rootPlayer.colors.playerFg
+ property bool acceptFocus: true
+
+ onClicked: contextMenu.popup(this.mapToGlobal(0, height))
+
+ KeyNavigation.left: backBtn
+ KeyNavigation.right: playlistButton
+
+ QmlGlobalMenu {
+ id: contextMenu
+ ctx: mainctx
+ }
+ }
+
+ Widgets.IconToolButton {
+ id: playlistButton
+
+ objectName: PlayerControlBarModel.PLAYLIST_BUTTON
+ size: VLCStyle.banner_icon_size
+ iconText: VLCIcons.playlist
+ text: i18n.qtr("Playlist")
+ color: rootPlayer.colors.playerFg
+ focus: false
+
+ property bool acceptFocus: true
+
+ KeyNavigation.left: menuSelector
+ onClicked: tooglePlaylistVisibility()
+ }
+ }
}
--
2.25.1
More information about the vlc-devel
mailing list