Added search, back button and busy indicator

1 files changed, 49 insertions, 4 deletions

diff --git a/app/qml/pages/AppStorePage.qml b/app/qml/pages/AppStorePage.qml
index defa3c5..82a8542 100644
--- a/app/qml/pages/AppStorePage.qml
+++ b/app/qml/pages/AppStorePage.qml
@@ -7,6 +7,8 @@ import org.nemomobile.configuration 1.0
 Page {
     id: page
 
+    property bool showSearch;
+
     ConfigurationGroup {
         id: settings
         path: "/org/pebbled/settings"
@@ -29,38 +31,77 @@ Page {
                     });
                 }
             }
+
+            MenuItem {
+                text: showSearch ? qsTr("Hide search") : qsTr("Show search");
+                onClicked: {
+                    showSearch = !showSearch;
+                }
+            }
         }
 
         Column {
             id: column
             width: page.width
-            spacing: Theme.paddingLarge
 
             PageHeader {
+                id: pageHeadTitle
                 title: qsTr("Pebble Appstore")
             }
 
+            SearchField {
+                width: parent.width
+                visible: webview.loggedin && showSearch
+                id: searchField
+                onTextChanged: {
+                    var q = searchField.text.trim();
+                    if (q.length >= 2) {
+                        webview.searchQuery(q);
+                    }
+                }
+            }
+
             Row {
                 anchors.horizontalCenter: parent.horizontalCenter
-                visible: webview.loggedin;
+                visible: webview.loggedin
+
+                IconButton {
+                    id: backButton
+                    enabled: webview.canGoBack
+                    icon.source: "image://theme/icon-m-back"
+                    onClicked: {
+                        webview.goBack();
+                    }
+                }
+
                 Button {
-                    text: qsTr("WatchApps")
+                    text: qsTr("Apps")
+                    width: (page.width - loadingIndicator.width - backButton.width - Theme.paddingMedium) / 2
                     onClicked: {
                         webview.gotoWatchApps();
                     }
                 }
+
                 Button {
-                    text: qsTr("WatchFaces")
+                    text: qsTr("Faces")
+                    width: (page.width - loadingIndicator.width - backButton.width - Theme.paddingMedium) / 2
                     onClicked: {
                         webview.gotoWatchFaces();
                     }
                 }
+
+                BusyIndicator {
+                    id: loadingIndicator
+                    running: webview.loading
+                    size: BusyIndicatorSize.Medium
+                }
             }
 
             Column {
                 id: download
                 visible: webview.downloadInProgress
                 width: parent.width
+                spacing: Theme.paddingLarge
 
                 Label {
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -99,6 +140,10 @@ Page {
             onDownloadPebbleApp: {
                 downloadLabel.text = qsTr("Downloading %1...").arg(downloadTitle)
             }
+
+            onTitleChanged: {
+                pageHeadTitle.title = title;
+            }
         }
     }