vlc | branch: master | Pierre Lamot <[email protected]> | Mon Sep 16 18:19:24 2019 +0200| [05bfa9ace96bbe859a6031961d2c6319d51cc536] | committer: Jean-Baptiste Kempf
qml: refactorize navigation and layouting of BannerSource Signed-off-by: Jean-Baptiste Kempf <[email protected]> > http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=05bfa9ace96bbe859a6031961d2c6319d51cc536 --- 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 } } } _______________________________________________ vlc-commits mailing list [email protected] https://mailman.videolan.org/listinfo/vlc-commits
