From 26d552ddf70816ff44834821140945bceafb120d Mon Sep 17 00:00:00 2001 From: Skycoder42 Date: Fri, 22 Jun 2018 17:47:00 +0200 Subject: [PATCH] added searchbar as extra qml control --- src/imports/mvvmquick/SearchBar.qml | 172 ++++++++++++++++++ src/imports/mvvmquick/SettingsView11.qml | 160 ++++++++++++++++ src/imports/mvvmquick/mvvmquick.pro | 4 +- src/imports/mvvmquick/qmldir | 3 + src/imports/mvvmquick/qqmlviewplaceholder.cpp | 2 +- src/imports/mvvmquick/settingsuibuilder.cpp | 4 +- src/mvvmdatasyncquick/ChangeRemoteView.qml | 2 +- src/mvvmdatasyncquick/DataSyncView.qml | 2 +- src/mvvmdatasyncquick/ExportSetupView.qml | 2 +- src/mvvmdatasyncquick/IdentityEditView.qml | 2 +- src/mvvmdatasyncquick/NetworkExchangeView.qml | 2 +- src/mvvmquick/SettingsView.qml | 2 +- 12 files changed, 347 insertions(+), 10 deletions(-) create mode 100644 src/imports/mvvmquick/SearchBar.qml create mode 100644 src/imports/mvvmquick/SettingsView11.qml diff --git a/src/imports/mvvmquick/SearchBar.qml b/src/imports/mvvmquick/SearchBar.qml new file mode 100644 index 0000000..c03dfef --- /dev/null +++ b/src/imports/mvvmquick/SearchBar.qml @@ -0,0 +1,172 @@ +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.3 +import QtQuick.Layouts 1.3 +import de.skycoder42.QtMvvm.Core 1.1 +import de.skycoder42.QtMvvm.Quick 1.1 + +Item { + id: _searchBar + + property alias title: _titleLabel.text + property alias allowSearch: _searchButton.visible + property alias searchToolTip: _searchButton.text + property bool inSearchMode: state == "search" + + property alias searchText: _searchField.text + + function showTitle() { + state = "title"; + } + + function showSearchBar(text) { + if(typeof text === "string") + searchText = text + state = "search"; + } + + //! @brief Can be called to toggle the state of the search bar + function toggleSearchState() { + if(!allowSearch) + return; + if(inSearchMode) + showTitle(); + else + showSearchBar(); + } + + onAllowSearchChanged: { + if(!allowSearch) + showTitle(); + } + + RowLayout { + anchors.fill: parent + spacing: 0 + + Item { + id: _labelContainer + + Layout.fillWidth: true + Layout.fillHeight: true + Layout.leftMargin: 16 + + ToolBarLabel { + id: _titleLabel + anchors.fill: parent + leftPadding: 0 + visible: !_searchField.visible + } + + TextField { + id: _searchField + horizontalAlignment: Qt.AlignLeft + verticalAlignment: Qt.AlignVCenter + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + height: Math.min(implicitHeight, parent.height) + width: parent.width + } + } + + ActionButton { + id: _searchButton + text: qsTr("Search…") + onClicked: toggleSearchState() + } + } + + states: [ + State { + name: "title" + PropertyChanges { + target: _searchButton + icon.name: "search" + icon.source: "qrc:/de/skycoder42/qtmvvm/quick/icons/ic_search.svg" + } + PropertyChanges { + target: _titleLabel + visible: true + } + PropertyChanges { + target: _searchField + visible: false + width: 0 + } + StateChangeScript { + name: "clearScript" + script: _searchField.clear(); + } + }, + State { + name: "search" + PropertyChanges { + target: _searchButton + icon.name: "gtk-close" + icon.source: "qrc:/de/skycoder42/qtmvvm/quick/icons/ic_close.svg" + } + PropertyChanges { + target: _titleLabel + visible: false + } + PropertyChanges { + target: _searchField + visible: true + width: _labelContainer.width + } + StateChangeScript { + name: "focusScript" + script: _searchField.forceActiveFocus(); + } + } + ] + + transitions: [ + Transition { + from: "title" + to: "search" + SequentialAnimation { + PropertyAnimation { + target: _searchField + property: "visible" + duration: 0 + } + PropertyAnimation { + target: _searchField + property: "width" + duration: 250 + easing.type: Easing.InOutCubic + } + PropertyAnimation { + target: _titleLabel + property: "visible" + duration: 0 + } + } + }, + Transition { + from: "search" + to: "title" + SequentialAnimation { + PropertyAnimation { + target: _titleLabel + property: "visible" + duration: 0 + } + PropertyAnimation { + target: _searchField + property: "width" + duration: 250 + easing.type: Easing.InOutCubic + } + PropertyAnimation { + target: _searchField + property: "visible" + duration: 0 + } + } + } + ] + + state: "title" +} diff --git a/src/imports/mvvmquick/SettingsView11.qml b/src/imports/mvvmquick/SettingsView11.qml new file mode 100644 index 0000000..05a90a8 --- /dev/null +++ b/src/imports/mvvmquick/SettingsView11.qml @@ -0,0 +1,160 @@ +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.3 +import QtQuick.Layouts 1.3 +import de.skycoder42.QtMvvm.Core 1.1 +import de.skycoder42.QtMvvm.Quick 1.1 + +/*! @brief The view implementation for the QtMvvm::SettingsViewModel + * + * @extends QtQuick.Controls.Page + * + * @details This is the view used to present a settings view model. You can extend the class + * if you need to extend that view. + * + * @sa QtMvvm::SettingsViewModel + */ +Page { + id: _settingsView + + /*! @brief The viewmodel to use + * + * @default{Injected} + * + * @accessors{ + * @memberAc{viewModel} + * @notifyAc{viewModelChanged()} + * } + * + * @sa QtMvvm::SettingsViewModel + */ + property SettingsViewModel viewModel: null + /*! @brief Specifiy if a back action should always close the full settings + * + * @default{`false`} + * + * The settings view consists of an internal stack view to present settings pages. By + * default only one page is closed at a time. By setting this property to true, a close + * action will always close all of them. + * + * @accessors{ + * @memberAc{fullClose} + * @notifyAc{fullCloseChanged()} + * } + */ + property bool fullClose: false + + /*! @brief Can be called to try to close a single settings page + * + * @return type:bool `true` if a page was closed, `false` if not + * + * This method is called by the presenter to close the pages of the settings view one at + * a time. + * + * @note if SettingsView::fullClose is true, this method will always return false. + * + * @sa SettingsView::fullClose, PresentingStackView::closeAction + */ + function closeAction() { + return !fullClose && _settingsStack.closeAction(); + } + + header: ContrastToolBar { + id: _toolBar + + RowLayout { + id: _toolLayout + anchors.fill: parent + spacing: 0 + + SearchBar { + id: _searchBar + + Layout.fillWidth: true + Layout.fillHeight: true + + title: qsTr("Settings") + allowSearch: _builder.allowSearch + searchToolTip: qsTr("Search in settings") + } + + ActionButton { + id: _restoreButton + visible: _builder.allowRestore + icon.source: "qrc:/de/skycoder42/qtmvvm/quick/icons/ic_settings_backup_restore.svg" + text: qsTr("Restore settings") + onClicked: _builder.restoreDefaults() + } + } + } + + PresenterProgress {} + + StackView { + id: _settingsStack + anchors.fill: parent + + function closeAction() { + if(_settingsStack.depth <= 1) + return false; + else { + _settingsStack.pop(); + return true; + } + } + } + + Component { + id: _overviewComponent + + ScrollView { + id: __ovScrollView + property alias model: __ovListView.model + property alias showSections: __ovListView.showSections + clip: true + + OverviewListView { + id: __ovListView + builder: _builder + } + + Component.onCompleted: _settingsStack.push(__ovScrollView) + } + } + + Component { + id: _sectionViewComponent + + ScrollView { + id: __secScrollView + property alias model: __secListView.model + clip: true + + SectionListView { + id: __secListView + builder: _builder + } + + Component.onCompleted: _settingsStack.push(__secScrollView) + } + } + + SettingsUiBuilder { + id: _builder + buildView: _settingsView + viewModel: _settingsView.viewModel + filterText: _searchBar.searchText + + onPresentOverview: _overviewComponent.incubateObject(_settingsStack, { + model: model, + showSections: hasSections + }, Qt.Synchronous) + onPresentSection: _sectionViewComponent.incubateObject(_settingsStack, { + model: model + }, Qt.Synchronous) + onCloseSettings: { + _settingsView.fullClose = true; + QuickPresenter.popView(); + } + } +} diff --git a/src/imports/mvvmquick/mvvmquick.pro b/src/imports/mvvmquick/mvvmquick.pro index 0f2655e..c7ca126 100644 --- a/src/imports/mvvmquick/mvvmquick.pro +++ b/src/imports/mvvmquick/mvvmquick.pro @@ -48,7 +48,9 @@ QML_FILES += \ ListSection.qml \ SectionListView.qml \ OverviewListView.qml \ - SettingsView.qml + SettingsView.qml \ + SettingsView11.qml \ + SearchBar.qml RESOURCES += \ qtmvvmquick_plugin.qrc diff --git a/src/imports/mvvmquick/qmldir b/src/imports/mvvmquick/qmldir index 5d97676..57d5d99 100644 --- a/src/imports/mvvmquick/qmldir +++ b/src/imports/mvvmquick/qmldir @@ -23,6 +23,8 @@ ActionButton 1.0 ActionButton.qml RoundActionButton 1.0 RoundActionButton.qml MenuButton 1.0 MenuButton.qml +SearchBar 1.1 SearchBar.qml + PresenterProgress 1.0 PresenterProgress.qml PresentingStackView 1.0 PresentingStackView.qml PresentingStackView 1.1 PresentingStackView11.qml @@ -33,6 +35,7 @@ DialogPresenter 1.1 DialogPresenter11.qml PresentingDrawer 1.0 PresentingDrawer.qml SettingsView 1.0 SettingsView.qml +SettingsView 1.1 SettingsView11.qml QtMvvmApp 1.0 QtMvvmApp.qml QtMvvmApp 1.1 QtMvvmApp11.qml diff --git a/src/imports/mvvmquick/qqmlviewplaceholder.cpp b/src/imports/mvvmquick/qqmlviewplaceholder.cpp index 7d14efd..9257721 100644 --- a/src/imports/mvvmquick/qqmlviewplaceholder.cpp +++ b/src/imports/mvvmquick/qqmlviewplaceholder.cpp @@ -28,7 +28,7 @@ bool QQmlViewPlaceholder::presentItem(const QVariant &item) // check if the parameter is valid auto quickItem = item.value(); if(!quickItem) { - qmlWarning(this) << "presentItem called with invalid item of type " << item.typeName(); + qmlWarning(this) << "presentItem called with invalid item of type: " << item.typeName(); return false; } diff --git a/src/imports/mvvmquick/settingsuibuilder.cpp b/src/imports/mvvmquick/settingsuibuilder.cpp index a145c7f..f318a1e 100644 --- a/src/imports/mvvmquick/settingsuibuilder.cpp +++ b/src/imports/mvvmquick/settingsuibuilder.cpp @@ -40,7 +40,7 @@ void SettingsUiBuilder::loadSection(const SettingsElements::Section §ion) auto inputFactory = QuickPresenterPrivate::currentPresenter()->inputViewFactory(); _entryModel->setup(section, _viewModel, inputFactory); #ifndef QT_NO_DEBUG - qmlDebug(this) << "Loaded section " << section.title; + qmlDebug(this) << "Loaded section: " << section.title; #endif emit presentSection(_entryFilterModel); } @@ -51,7 +51,7 @@ void SettingsUiBuilder::showDialog(const QString &key, const QString &title, con _viewModel->callAction(key, properties.value(QStringLiteral("args")).toMap()); else { #ifndef QT_NO_DEBUG - qmlDebug(this) << "Creating input dialog for settings entry " << key; + qmlDebug(this) << "Creating input dialog for settings entry: " << key; #endif getInput(title + tr(":"), QString(), qUtf8Printable(type), this, [this, key](const QVariant &value) { if(value.isValid()) diff --git a/src/mvvmdatasyncquick/ChangeRemoteView.qml b/src/mvvmdatasyncquick/ChangeRemoteView.qml index 19634f6..902206b 100644 --- a/src/mvvmdatasyncquick/ChangeRemoteView.qml +++ b/src/mvvmdatasyncquick/ChangeRemoteView.qml @@ -1,3 +1,3 @@ -import de.skycoder42.QtMvvm.DataSync.Quick 1.0 as QtMvvm +import de.skycoder42.QtMvvm.DataSync.Quick 1.1 as QtMvvm QtMvvm.ChangeRemoteView {} diff --git a/src/mvvmdatasyncquick/DataSyncView.qml b/src/mvvmdatasyncquick/DataSyncView.qml index 33f5c75..51b4413 100644 --- a/src/mvvmdatasyncquick/DataSyncView.qml +++ b/src/mvvmdatasyncquick/DataSyncView.qml @@ -1,3 +1,3 @@ -import de.skycoder42.QtMvvm.DataSync.Quick 1.0 as QtMvvm +import de.skycoder42.QtMvvm.DataSync.Quick 1.1 as QtMvvm QtMvvm.DataSyncView {} diff --git a/src/mvvmdatasyncquick/ExportSetupView.qml b/src/mvvmdatasyncquick/ExportSetupView.qml index 877953d..64a7c4d 100644 --- a/src/mvvmdatasyncquick/ExportSetupView.qml +++ b/src/mvvmdatasyncquick/ExportSetupView.qml @@ -1,3 +1,3 @@ -import de.skycoder42.QtMvvm.DataSync.Quick 1.0 as QtMvvm +import de.skycoder42.QtMvvm.DataSync.Quick 1.1 as QtMvvm QtMvvm.ExportSetupView {} diff --git a/src/mvvmdatasyncquick/IdentityEditView.qml b/src/mvvmdatasyncquick/IdentityEditView.qml index 9e3e30d..96bdee5 100644 --- a/src/mvvmdatasyncquick/IdentityEditView.qml +++ b/src/mvvmdatasyncquick/IdentityEditView.qml @@ -1,3 +1,3 @@ -import de.skycoder42.QtMvvm.DataSync.Quick 1.0 as QtMvvm +import de.skycoder42.QtMvvm.DataSync.Quick 1.1 as QtMvvm QtMvvm.IdentityEditView {} diff --git a/src/mvvmdatasyncquick/NetworkExchangeView.qml b/src/mvvmdatasyncquick/NetworkExchangeView.qml index 758e1bb..22f9b57 100644 --- a/src/mvvmdatasyncquick/NetworkExchangeView.qml +++ b/src/mvvmdatasyncquick/NetworkExchangeView.qml @@ -1,3 +1,3 @@ -import de.skycoder42.QtMvvm.DataSync.Quick 1.0 as QtMvvm +import de.skycoder42.QtMvvm.DataSync.Quick 1.1 as QtMvvm QtMvvm.NetworkExchangeView {} diff --git a/src/mvvmquick/SettingsView.qml b/src/mvvmquick/SettingsView.qml index 1a765a2..82e03f4 100644 --- a/src/mvvmquick/SettingsView.qml +++ b/src/mvvmquick/SettingsView.qml @@ -1,3 +1,3 @@ -import de.skycoder42.QtMvvm.Quick 1.0 as QtMvvm +import de.skycoder42.QtMvvm.Quick 1.1 as QtMvvm QtMvvm.SettingsView {}