From a497047666a676f21c3d2b8ad1d3714c4e2f0024 Mon Sep 17 00:00:00 2001 From: vladest Date: Sat, 23 Dec 2017 17:44:26 +0100 Subject: [PATCH] Refactored using new GridView approach --- .../resources/qml/hifi/tablet/TabletHome.qml | 216 ++++++++---------- .../ui/src/ui/TabletScriptingInterface.cpp | 22 +- .../ui/src/ui/TabletScriptingInterface.h | 18 +- 3 files changed, 123 insertions(+), 133 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/TabletHome.qml b/interface/resources/qml/hifi/tablet/TabletHome.qml index 4bacf078e7..382e1f3f1e 100644 --- a/interface/resources/qml/hifi/tablet/TabletHome.qml +++ b/interface/resources/qml/hifi/tablet/TabletHome.qml @@ -3,6 +3,8 @@ import QtQuick.Controls 2.2 import QtGraphicalEffects 1.0 import QtQuick.Layouts 1.3 +import TabletScriptingInterface 1.0 + import "." import "../../styles-uit" import "../audio" as HifiAudio @@ -14,12 +16,10 @@ Item { property int rowIndex: 6 // by default property int columnIndex: 1 // point to 'go to location' - readonly property int buttonsOnPage: 12 - readonly property int buttonsRowsOnPage: 4 - readonly property int buttonsColumnsOnPage: 3 property var currentGridItems: null - property var gridPages: []; + + focus: true Rectangle { id: bgTopBar @@ -116,20 +116,21 @@ Item { clip: false currentIndex: -1 property int previousIndex: -1 - Repeater { id: pageRepeater - model: Math.ceil(tabletProxy.buttons.rowCount() / buttonsOnPage) - onCountChanged: console.warn("repeat count", count, tabletProxy.buttons.rowCount()) + model: Math.ceil(tabletProxy.buttons.rowCount() / TabletEnums.ButtonsOnPage) onItemAdded: { - item.pageIndex = index + item.proxyModel.sourceModel = tabletProxy.buttons; + item.proxyModel.pageIndex = index; } delegate: Item { id: page - property int pageIndex - onPageIndexChanged: console.warn("page index", pageIndex) - Grid { + property TabletButtonsProxyModel proxyModel: TabletButtonsProxyModel {} + + GridView { + id: flickable + keyNavigationEnabled: false anchors { fill: parent topMargin: 20 @@ -137,71 +138,57 @@ Item { rightMargin: 30 bottomMargin: 0 } - rows: 4; columns: 3; rowSpacing: 16; columnSpacing: 16; - Repeater { - id: buttonsRepeater - model: tabletProxy.buttons.rowCount() - (((page.pageIndex + 1) * buttonsOnPage) % buttonsOnPage) - delegate: Item { - id: wrapper - width: 129 - height: 129 - property var proxy: modelData + cellWidth: width/3 + cellHeight: cellWidth + flow: GridView.LeftToRight + model: page.proxyModel - TabletButton { - id: tabletButton - anchors.centerIn: parent - onClicked: modelData.clicked() - state: wrapper.GridView.isCurrentItem ? "hover state" : "base state" - } + delegate: Item { + id: wrapper + width: flickable.cellWidth + height: flickable.cellHeight - Connections { - target: modelData; - onPropertiesChanged: { - updateProperties(); - } - } + property var proxy: modelData - Component.onCompleted: updateProperties() + TabletButton { + id: tabletButton + anchors.centerIn: parent + onClicked: modelData.clicked() + state: wrapper.GridView.isCurrentItem ? "hover state" : "base state" + } - function updateProperties() { - var keys = Object.keys(modelData.properties).forEach(function (key) { - if (tabletButton[key] !== modelData.properties[key]) { - tabletButton[key] = modelData.properties[key]; - } - }); + Connections { + target: modelData; + onPropertiesChanged: { + updateProperties(); } } - } - Component.onCompleted: { -// tabletProxy.buttonsOnPage.setCurrentPage(page.index); -// buttonsRepeater.model = tabletProxy.buttonsOnPage; -// console.warn("buttons on page:", page.index, tabletProxy.buttonsOnPage.rowCount()) + + Component.onCompleted: updateProperties() + + function updateProperties() { + var keys = Object.keys(modelData.properties).forEach(function (key) { + if (tabletButton[key] !== modelData.properties[key]) { + tabletButton[key] = modelData.properties[key]; + } + }); + } } } } } onCurrentIndexChanged: { -// if (swipeView.currentIndex < 0 -// || swipeView.itemAt(swipeView.currentIndex) === null -// || swipeView.itemAt(swipeView.currentIndex).children[0] === null -// || swipeView.itemAt(swipeView.currentIndex).children[0].children === null) { -// return; -// } + if (swipeView.currentIndex < 0 + || swipeView.itemAt(swipeView.currentIndex) === null + || swipeView.itemAt(swipeView.currentIndex).children[0] === null) { + return; + } -// currentGridItems = swipeView.itemAt(swipeView.currentIndex).children[0].children; + currentGridItems = swipeView.itemAt(swipeView.currentIndex).children[0]; -// var row = rowIndex < 0 ? 0 : rowIndex; -// var column = previousIndex > swipeView.currentIndex ? buttonsColumnsOnPage - 1 : 0; -// var index = row * buttonsColumnsOnPage + column; -// if (index < 0 || index >= currentGridItems.length) { -// column = 0; -// row = 0; -// } -// rowIndex = row; -// columnIndex = column; -// setCurrentItemState("hover state"); -// previousIndex = currentIndex; + currentGridItems.currentIndex = (previousIndex > swipeView.currentIndex ? currentGridItems.count - 1 : 0); + previousIndex = currentIndex; } hoverEnabled: true @@ -241,70 +228,61 @@ Item { anchors.horizontalCenter: parent.horizontalCenter count: swipeView.count } -// GridView { -// id: flickable -// anchors.top: parent.top -// anchors.topMargin: 15 -// anchors.bottom: parent.bottom -// anchors.horizontalCenter: parent.horizontalCenter -// width: cellWidth * 3 -// cellHeight: 145 -// cellWidth: 145 -// flow: GridView.LeftToRight -// model: tabletProxy.buttons -// delegate: Item { -// width: flickable.cellWidth -// height: flickable.cellHeight -// property var proxy: modelData + } -// TabletButton { -// id: tabletButton -// anchors.centerIn: parent -// onClicked: modelData.clicked() -// state: wrapper.GridView.isCurrentItem ? "hover state" : "base state" -// } - -// Connections { -// target: modelData; -// onPropertiesChanged: { -// updateProperties(); -// } -// } - -// Component.onCompleted: updateProperties() - -// function updateProperties() { -// var keys = Object.keys(modelData.properties).forEach(function (key) { -// if (tabletButton[key] !== modelData.properties[key]) { -// tabletButton[key] = modelData.properties[key]; -// } -// }); -// } + function setCurrentItemState(state) { +// var buttonIndex = rowIndex * TabletEnums.ButtonsColumnsOnPage + columnIndex; +// if (currentGridItems !== null && buttonIndex >= 0 && buttonIndex < currentGridItems.length) { +// if (currentGridItems[buttonIndex].isActive) { +// currentGridItems[buttonIndex].state = "active state"; +// } else { +// currentGridItems[buttonIndex].state = state; // } // } } - function setCurrentItemState(state) { - var buttonIndex = rowIndex * buttonsColumnsOnPage + columnIndex; - if (currentGridItems !== null && buttonIndex >= 0 && buttonIndex < currentGridItems.length) { - if (currentGridItems[buttonIndex].isActive) { - currentGridItems[buttonIndex].state = "active state"; - } else { - currentGridItems[buttonIndex].state = state; + Component.onCompleted: { + focus = true; + forceActiveFocus(); + } + + Keys.onRightPressed: { + if (!currentGridItems) { + return; + } + + var index = currentGridItems.currentIndex; + currentGridItems.moveCurrentIndexRight(); + console.warn("onRightPressed", index, currentGridItems.currentIndex, currentGridItems.count) + if (index === currentGridItems.count - 1 && index === currentGridItems.currentIndex) { + if (swipeView.currentIndex < swipeView.count - 1) { + swipeView.incrementCurrentIndex(); } } } -// Keys.onRightPressed: flickable.moveCurrentIndexRight(); -// Keys.onLeftPressed: flickable.moveCurrentIndexLeft(); -// Keys.onDownPressed: flickable.moveCurrentIndexDown(); -// Keys.onUpPressed: flickable.moveCurrentIndexUp(); -// Keys.onReturnPressed: { -// if (flickable.currentItem) { -// flickable.currentItem.proxy.clicked(); -// if (tabletRoot) { -// tabletRoot.playButtonClickSound(); -// } -// } -// } + Keys.onLeftPressed: { + if (!currentGridItems) { + return; + } + + var index = currentGridItems.currentIndex; + currentGridItems.moveCurrentIndexLeft(); + console.warn("onLeftPressed", index, currentGridItems.currentIndex, currentGridItems.count) + if (index === 0 && index === currentGridItems.currentIndex) { + if (swipeView.currentIndex > 0) { + swipeView.decrementCurrentIndex(); + } + } + } + Keys.onDownPressed: currentGridItems.moveCurrentIndexDown(); + Keys.onUpPressed: currentGridItems.moveCurrentIndexUp(); + Keys.onReturnPressed: { + if (currentGridItems.currentItem) { + currentGridItems.currentItem.proxy.clicked(); + if (tabletRoot) { + tabletRoot.playButtonClickSound(); + } + } + } } diff --git a/libraries/ui/src/ui/TabletScriptingInterface.cpp b/libraries/ui/src/ui/TabletScriptingInterface.cpp index d192f4a7bc..5e5b3f83ea 100644 --- a/libraries/ui/src/ui/TabletScriptingInterface.cpp +++ b/libraries/ui/src/ui/TabletScriptingInterface.cpp @@ -93,21 +93,28 @@ void TabletButtonListModel::removeButton(TabletButtonProxy* button) { } TabletButtonsProxyModel::TabletButtonsProxyModel(QObject *parent) - : QSortFilterProxyModel(parent){ + : QSortFilterProxyModel(parent), _pageIndex(-1) { } -int TabletButtonsProxyModel::currentPage() const { - return _currentPage; +int TabletButtonsProxyModel::pageIndex() const { + return _pageIndex; } -void TabletButtonsProxyModel::setCurrentPage(int currentPage) { - _currentPage = currentPage; +void TabletButtonsProxyModel::setPageIndex(int pageIndex) +{ + if (_pageIndex == pageIndex) + return; + + _pageIndex = pageIndex; invalidateFilter(); + emit pageIndexChanged(_pageIndex); } bool TabletButtonsProxyModel::filterAcceptsRow(int sourceRow, - const QModelIndex &sourceParent) const { - return (sourceRow >= _currentPage*12 && sourceRow < _currentPage*12); + const QModelIndex &sourceParent) const { + Q_UNUSED(sourceParent); + return (sourceRow >= _pageIndex*TabletScriptingInterface::ButtonsOnPage + && sourceRow < (_pageIndex + 1)*TabletScriptingInterface::ButtonsOnPage); } bool TabletButtonsProxyModel::lessThan(const QModelIndex &left, @@ -300,7 +307,6 @@ TabletProxy::TabletProxy(QObject* parent, const QString& name) : QObject(parent) qCWarning(uiLogging) << "Creating tablet proxy on wrong thread " << _name; } connect(this, &TabletProxy::tabletShownChanged, this, &TabletProxy::onTabletShown); - _buttonsProxy.setSourceModel(&_buttons); } TabletProxy::~TabletProxy() { diff --git a/libraries/ui/src/ui/TabletScriptingInterface.h b/libraries/ui/src/ui/TabletScriptingInterface.h index 1fa1165a02..a69bcd2f75 100644 --- a/libraries/ui/src/ui/TabletScriptingInterface.h +++ b/libraries/ui/src/ui/TabletScriptingInterface.h @@ -47,6 +47,10 @@ public: enum TabletAudioEvents { ButtonClick, ButtonHover, TabletOpen, TabletHandsIn, TabletHandsOut, Last}; Q_ENUM(TabletAudioEvents) + //Different useful constants + enum TabletConstants { ButtonsColumnsOnPage = 3, ButtonsRowsOnPage = 4, ButtonsOnPage = 12 }; + Q_ENUM(TabletConstants) + TabletScriptingInterface(); virtual ~TabletScriptingInterface(); static const QString QML; @@ -123,18 +127,23 @@ class TabletButtonsProxyModel : public QSortFilterProxyModel { Q_OBJECT + Q_PROPERTY(int pageIndex READ pageIndex WRITE setPageIndex NOTIFY pageIndexChanged) public: TabletButtonsProxyModel(QObject *parent = 0); + int pageIndex() const; - int currentPage() const; - Q_INVOKABLE void setCurrentPage(int currentPage); +public slots: + void setPageIndex(int pageIndex); + +signals: + void pageIndexChanged(int pageIndex); protected: bool filterAcceptsRow(int sourceRow, const QModelIndex &sourceParent) const override; bool lessThan(const QModelIndex &left, const QModelIndex &right) const override; private: - int _currentPage; + int _pageIndex; }; Q_DECLARE_METATYPE(TabletButtonsProxyModel*); @@ -152,7 +161,6 @@ class TabletProxy : public QObject { Q_PROPERTY(bool landscape READ getLandscape WRITE setLandscape) Q_PROPERTY(bool tabletShown MEMBER _tabletShown NOTIFY tabletShownChanged) Q_PROPERTY(TabletButtonListModel* buttons READ getButtons CONSTANT) - Q_PROPERTY(TabletButtonsProxyModel* buttonsOnPage READ getButtonsOnPage CONSTANT) public: TabletProxy(QObject* parent, const QString& name); ~TabletProxy(); @@ -256,7 +264,6 @@ public: QQuickItem* getQmlMenu() const; TabletButtonListModel* getButtons() { return &_buttons; } - TabletButtonsProxyModel* getButtonsOnPage() { return &_buttonsProxy; } signals: /**jsdoc @@ -317,7 +324,6 @@ protected: bool _showRunningScripts { false }; TabletButtonListModel _buttons; - TabletButtonsProxyModel _buttonsProxy; }; Q_DECLARE_METATYPE(TabletProxy*);