[vlc-devel] [PATCH 17/49] qml: refactorize navigation and layouting of BannerSource
Pierre Lamot
pierre at videolabs.io
Fri Oct 11 15:17:41 CEST 2019
---
modules/gui/qt/qml/BannerSources.qml | 454 +++++++++------------------
1 file changed, 147 insertions(+), 307 deletions(-)
diff --git a/modules/gui/qt/qml/BannerSources.qml b/modules/gui/qt/qml/BannerSources.qml
index 0f0597f7c6..e68c0941f7 100644
--- a/modules/gui/qt/qml/BannerSources.qml
+++ b/modules/gui/qt/qml/BannerSources.qml
@@ -20,7 +20,7 @@ import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
import org.videolan.vlc 0.1
-
+import QtQml.Models 2.11
import "qrc:///style/"
import "qrc:///utils/" as Utils
@@ -30,7 +30,7 @@ import "qrc:///menus/" as Menus
Utils.NavigableFocusScope {
id: root
- height: pLBannerSources.height
+ height: (VLCStyle.icon_normal + VLCStyle.margin_xxsmall) * 2
property int selectedIndex: 0
property int subSelectedIndex: 0
@@ -42,7 +42,7 @@ Utils.NavigableFocusScope {
property var contentModel
property alias model: pLBannerSources.model
- property alias subTabModel: model_music_id.model
+ property alias subTabModel: localMenuGroup.model
signal toogleMenu()
@@ -56,318 +56,205 @@ Utils.NavigableFocusScope {
Rectangle {
id: pLBannerSources
- anchors {
- left: parent.left
- right: parent.right
- }
- height: col.height
+ anchors.fill: parent
color: VLCStyle.colors.banner
- property alias model: buttonView.model
+ property alias model: globalMenuGroup.model
+
+ Column {
- Column
- {
id: col
- anchors {
- left: parent.left
- right: parent.right
- }
+ anchors.fill: parent
spacing: VLCStyle.margin_xxsmall
- RowLayout {
+ Item {
+ id: globalToolbar
width: parent.width
- spacing: 0
+ height: VLCStyle.icon_normal
+ Utils.NavigableRow {
+ id: historyGroup
- Image {
- Layout.preferredWidth: VLCStyle.icon_normal
- Layout.preferredHeight: VLCStyle.icon_normal
- Layout.alignment: Qt.AlignLeft
-
- sourceSize.width: VLCStyle.icon_normal
- sourceSize.height: VLCStyle.icon_normal
-
- source: "qrc:///logo/cone.svg"
- }
-
- /* Button for the sources */
- TabBar {
- id: buttonView
-
- Layout.preferredHeight: VLCStyle.icon_normal
- Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
- spacing: VLCStyle.margin_small
-
- focus: true
+ anchors {
+ top: parent.top
+ left: parent.left
+ bottom: parent.bottom
+ }
- // KeyNavigation states
- states: [
- State {
- name: "no_history"
- when: history.nextEmpty && history.previousEmpty
- PropertyChanges {
- target: buttonView
- KeyNavigation.left: menu_selector
- KeyNavigation.down: menu_selector
+ model: ObjectModel {
+ Image {
+ sourceSize.width: VLCStyle.icon_normal
+ sourceSize.height: VLCStyle.icon_normal
+ source: "qrc:///logo/cone.svg"
+ enabled: false
}
- },
- State {
- name: "has_previous_history"
- when: !history.previousEmpty
- PropertyChanges {
- target: buttonView
- KeyNavigation.left: history_back
- KeyNavigation.down: history_back
+
+ Utils.IconToolButton {
+ id: history_back
+ size: VLCStyle.icon_normal
+ text: VLCIcons.topbar_previous
+ onClicked: history.previous(History.Go)
+ enabled: !history.previousEmpty
}
- },
- State {
- name: "has_only_next_history"
- when: !history.nextEmpty && history.previousEmpty
- PropertyChanges {
- target: buttonView
- KeyNavigation.left: history_next
- KeyNavigation.down: history_next
+
+ Utils.IconToolButton {
+ id: history_next
+ size: VLCStyle.icon_normal
+ text: VLCIcons.topbar_next
+ onClicked: history.next(History.Go)
+ enabled: !history.nextEmpty
}
}
- ]
-
- Component.onCompleted: {
- buttonView.contentItem.focus = true
- }
- background: Rectangle {
- color: "transparent"
+ navigationParent: root
+ navigationRightItem: globalMenuGroup
+ navigationDownItem: localContextGroup
}
- property alias model: sourcesButtons.model
- /* Repeater to display each button */
- Repeater {
- id: sourcesButtons
-
- TabButton {
- id: control
- text: model.displayText
-
- padding: 0
- width: contentItem.implicitWidth
-
- onClicked: {
- root.itemClicked(model.index)
- }
+ /* Button for the sources */
+ Utils.NavigableRow {
+ id: globalMenuGroup
- font.pixelSize: VLCStyle.fontSize_normal
+ anchors {
+ top: parent.top
+ bottom: parent.bottom
+ horizontalCenter: parent.horizontalCenter
+ }
- background: Rectangle {
- height: parent.height
- width: parent.contentItem.width
- //color: (control.hovered || control.activeFocus) ? VLCStyle.colors.bgHover : VLCStyle.colors.banner
- color: VLCStyle.colors.banner
- }
+ focus: true
- contentItem: Item {
- implicitWidth: tabRow.width
- implicitHeight: tabRow.height
+ navigationParent: root
+ navigationLeftItem: historyGroup
+ navigationRightItem: globalCtxGroup
+ navigationDownItem: localMenuGroup.visible ? localMenuGroup : playlistGroup
- Rectangle {
- anchors.fill: tabRow
- visible: control.activeFocus || control.hovered
- color: VLCStyle.colors.accent
- }
+ delegate: Utils.TabButtonExt {
+ iconTxt: model.icon
+ selected: model.index === selectedIndex
+ onClicked: root.itemClicked(model.index)
+ }
+ }
- Row {
- id: tabRow
- padding: VLCStyle.margin_xxsmall
- spacing: VLCStyle.margin_xxsmall
+ Utils.NavigableRow {
+ id: globalCtxGroup
- Label {
- id: icon
- anchors.verticalCenter: parent.verticalCenter
- color: VLCStyle.colors.buttonText
+ anchors {
+ top: parent.top
+ right: parent.right
+ bottom: parent.bottom
+ }
- font.pixelSize: VLCStyle.icon_topbar
- font.family: VLCIcons.fontFamily
- horizontalAlignment: Text.AlignHCenter
- rightPadding: VLCStyle.margin_xsmall
+ model: ObjectModel {
+ Utils.SearchBox {
+ id: searchBox
+ contentModel: root.contentModel
+ visible: root.contentModel !== undefined
+ enabled: visible
+ }
- text: model.icon
- }
+ Utils.IconToolButton {
+ id: menu_selector
- Label {
- text: control.text
- font: control.font
- color: VLCStyle.colors.text
- padding: VLCStyle.margin_xxsmall
+ size: VLCStyle.icon_normal
+ text: VLCIcons.menu
- anchors.verticalCenter: parent.verticalCenter
- }
- }
+ onClicked: mainMenu.openBelow(this)
- Rectangle {
- anchors {
- left: tabRow.left
- right: tabRow.right
- bottom: tabRow.bottom
+ Menus.MainDropdownMenu {
+ id: mainMenu
+ onClosed: {
+ if (mainMenu.activeFocus)
+ menu_selector.forceActiveFocus()
}
- height: 2
- visible: root.selectedIndex === model.index
- color: "transparent"
- border.color: VLCStyle.colors.accent
}
}
}
- }
- }
-
+ navigationParent: root
+ navigationLeftItem: globalMenuGroup
+ navigationDownItem: playlistGroup
+ }
}
- RowLayout {
+ Item {
+ id: localToolbar
width: parent.width
- spacing: 0
-
- Utils.IconToolButton {
- id: history_back
- size: VLCStyle.icon_normal
- Layout.minimumWidth: width
- text: VLCIcons.topbar_previous
- KeyNavigation.right: history_next
- onClicked: history.previous(History.Go)
- enabled: !history.previousEmpty
- }
-
- Utils.IconToolButton {
- id: history_next
- size: VLCStyle.icon_normal
- Layout.minimumWidth: width
- text: VLCIcons.topbar_next
- KeyNavigation.right: list_grid_btn
- KeyNavigation.up: buttonView
- onClicked: history.next(History.Go)
- enabled: !history.nextEmpty
- }
-
- Utils.IconToolButton {
- id: list_grid_btn
- size: VLCStyle.icon_normal
- text: medialib.gridView ? VLCIcons.list : VLCIcons.grid
- onClicked: medialib.gridView = !medialib.gridView
- KeyNavigation.right: bar
- KeyNavigation.up: buttonView
- }
-
- TabBar {
- id: bar
-
- visible: model_music_id.model !== undefined
- enabled: model_music_id.model !== undefined
-
- Component.onCompleted: {
- bar.contentItem.focus= true
+ height: VLCStyle.icon_normal
+
+ Utils.NavigableRow {
+ id: localContextGroup
+ anchors {
+ top: parent.top
+ left: parent.left
+ bottom: parent.bottom
}
- background: Rectangle {
- color: "transparent"
- }
+ model: ObjectModel {
+ Utils.IconToolButton {
+ id: list_grid_btn
+ size: VLCStyle.icon_normal
+ text: medialib.gridView ? VLCIcons.list : VLCIcons.grid
+ onClicked: medialib.gridView = !medialib.gridView
+ }
- /* List of sub-sources for Music */
- Repeater {
- id: model_music_id
-
- //Column {
- TabButton {
- id: control
- text: model.displayText
- font.pixelSize: VLCStyle.fontSize_normal
- background: Rectangle {
- color: VLCStyle.colors.banner
- }
- contentItem: Item {
- implicitWidth: subSectionName.width
- implicitHeight: subSectionName.height
-
- Rectangle {
- anchors.fill: subSectionName
- visible: control.activeFocus || control.hovered
- color: VLCStyle.colors.accent
- }
+ Utils.SortControl {
+ id: sortControl
- Label {
- id: subSectionName
- padding: VLCStyle.margin_xxsmall
- text: control.text
- font: control.font
- color: VLCStyle.colors.text
- }
+ textRole: "text"
+ listWidth: VLCStyle.widthSortBox
+
+ popupAlignment: Qt.AlignLeft
- Rectangle {
- anchors {
- left: subSectionName.left
- right: subSectionName.right
- bottom: subSectionName.bottom
- }
- height: 2
- visible: root.subSelectedIndex === model.index
+ visible: !!root.contentModel
+ enabled: visible
- color: VLCStyle.colors.accent
+ onCurrentIndexChanged: {
+ if (model !== undefined && contentModel !== undefined) {
+ var sorting = model.get(currentIndex);
+ contentModel.sortCriteria = sorting.criteria
}
}
- onClicked: {
- root.subItemClicked(model.index)
- }
- activeFocusOnTab: true
}
}
- KeyNavigation.right: searchBox
- KeyNavigation.up: buttonView
- }
-
- /* Spacer */
- Item {
- Layout.fillWidth: true
+ navigationParent: root
+ navigationRightItem: localMenuGroup
+ navigationUpItem: historyGroup.navigable ? historyGroup : globalMenuGroup
}
- Utils.SearchBox {
- id: searchBox
- Layout.minimumWidth: width
- Layout.preferredHeight: VLCStyle.icon_normal
- contentModel: root.contentModel
-
- KeyNavigation.right: sortControl
- KeyNavigation.up: buttonView
- }
-
- Utils.SortControl {
- id: sortControl
+ Utils.NavigableRow {
+ id: localMenuGroup
+ anchors {
+ top: parent.top
+ bottom: parent.bottom
+ horizontalCenter: parent.horizontalCenter
+ }
- textRole: "text"
- listWidth: VLCStyle.widthSortBox
+ visible: !!model
+ enabled: !!model
- onCurrentIndexChanged: {
- if (model !== undefined && contentModel !== undefined) {
- var sorting = model.get(currentIndex);
- contentModel.sortCriteria = sorting.criteria
- }
+ delegate: Utils.TabButtonExt {
+ text: model.displayText
+ selected: model.index === subSelectedIndex
+ onClicked: root.subItemClicked(model.index)
}
- KeyNavigation.right: playlist_btn
- KeyNavigation.up: buttonView
+ navigationParent: root
+ navigationLeftItem: localContextGroup.enabled ? localContextGroup : undefined
+ navigationRightItem: playlistGroup.enabled ? playlistGroup : undefined
+ navigationUpItem: globalMenuGroup
}
- ToolBar {
- id: tools
- Layout.minimumWidth: width
- Layout.preferredHeight: VLCStyle.icon_normal
- //Layout.preferredWidth: VLCStyle.icon_normal * 3
- Layout.alignment: Qt.AlignRight
- background: Item {
- width: parent.implicitWidth
- height: parent.implicitHeight
+ Utils.NavigableRow {
+ id: playlistGroup
+ anchors {
+ top: parent.top
+ right: parent.right
+ bottom: parent.bottom
}
- Row {
+ model: ObjectModel {
Utils.IconToolButton {
id: playlist_btn
@@ -380,59 +267,12 @@ Utils.NavigableFocusScope {
playlistWidget.gainFocus(playlist_btn)
}
-
- KeyNavigation.right: menu_selector
- KeyNavigation.up: buttonView
- }
-
- Utils.IconToolButton {
- id: menu_selector
-
- size: VLCStyle.icon_normal
- text: VLCIcons.menu
-
- KeyNavigation.left: playlist_btn
- KeyNavigation.right: playlist
-
- onClicked: mainMenu.openBelow(this)
-
- Menus.MainDropdownMenu {
- id: mainMenu
- onClosed: {
- if (mainMenu.activeFocus)
- menu_selector.forceActiveFocus()
- }
- }
}
}
- // Content model states
- states: [
- State {
- name: "contentModel"
- when: root.contentModel !== undefined
- PropertyChanges {
- target: searchBox
- visible: true
- }
- PropertyChanges {
- target: sortControl
- visible: true
- }
- },
- State {
- name: "noContentModel"
- when: root.contentModel === undefined
- PropertyChanges {
- target: searchBox
- visible: false
- }
- PropertyChanges {
- target: sortControl
- visible: false
- }
- }
- ]
+ navigationParent: root
+ navigationLeftItem: localMenuGroup
+ navigationUpItem: globalCtxGroup.navigable ? globalCtxGroup : globalMenuGroup
}
}
}
--
2.20.1
More information about the vlc-devel
mailing list