From 17428d7ecbf11a953d893b7703ad08b4c2602658 Mon Sep 17 00:00:00 2001
From: Howard Stearns <howard@highfidelity.io>
Date: Sat, 12 Nov 2016 15:23:11 -0800
Subject: [PATCH] tab-like filtering of suggestions by type

---
 interface/resources/qml/AddressBarDialog.qml | 61 +++++++++++++++-----
 interface/resources/qml/hifi/TextButton.qml  | 43 ++++++++++++++
 2 files changed, 90 insertions(+), 14 deletions(-)
 create mode 100644 interface/resources/qml/hifi/TextButton.qml

diff --git a/interface/resources/qml/AddressBarDialog.qml b/interface/resources/qml/AddressBarDialog.qml
index c341a9ec32..96492c2cec 100644
--- a/interface/resources/qml/AddressBarDialog.qml
+++ b/interface/resources/qml/AddressBarDialog.qml
@@ -24,7 +24,7 @@ Window {
     HifiStyles.HifiConstants { id: hifiStyleConstants }
 
     objectName: "AddressBarDialog"
-    title: "Go To"
+    title: "Go To:"
 
     shown: false
     destroyOnHidden: false
@@ -131,6 +131,38 @@ Window {
             }
         }
 
+        Row {
+            spacing: 2 * hifi.layout.spacing;
+            anchors {
+                top: parent.top;
+                left: parent.left;
+                leftMargin: 75;
+                topMargin: -35;
+            }
+            property var selected: allTab;
+            TextButton {
+                id: allTab;
+                text: "All";
+                property string includeActions: 'snapshot,concurrency';
+                selected: allTab === selectedTab;
+                action: tabSelect;
+            }
+            TextButton {
+                id: placeTab;
+                text: "Places";
+                property string includeActions: 'concurrency';
+                selected: placeTab === selectedTab;
+                action: tabSelect;
+            }
+            TextButton {
+                id: snapsTab;
+                text: "Snaps";
+                property string includeActions: 'snapshot';
+                selected: snapsTab === selectedTab;
+                action: tabSelect;
+            }
+        }
+
         Image {
             id: backgroundImage
             source: "../images/address-bar.svg"
@@ -369,11 +401,15 @@ Window {
             return true;
         }
         return (place.place_name !== AddressManager.hostname); // Not our entry, but do show other entry points to current domain.
-        // could also require right protocolVersion
+    }
+    property var selectedTab: allTab;
+    function tabSelect(textButton) {
+        selectedTab = textButton;
+        fillDestinations();
     }
     function getUserStoryPage(pageNumber, cb) { // cb(error) after all pages of domain data have been added to model
         var options = [
-            'include_actions=snapshot,concurrency',
+            'include_actions=' + selectedTab.includeActions,
             'protocol=' + encodeURIComponent(AddressManager.protocolVersion()),
             'page=' + pageNumber
         ];
@@ -386,21 +422,14 @@ Window {
                 return makeModelData(story, url);
             });
             allStories = allStories.concat(stories);
-            if (!addressLine.text) { // Don't add if the user is already filtering
-                stories.forEach(function (story) {
-                    if (suggestable(story)) {
-                        suggestions.append(story);
-                    }
-                });
-            }
+            stories.forEach(makeFilteredPlaceProcessor());
             if ((data.current_page < data.total_pages) && (data.current_page <=  10)) { // just 10 pages = 100 stories for now
                 return getUserStoryPage(pageNumber + 1, cb);
             }
             cb();
         });
     }
-    function filterChoicesByText() {
-        suggestions.clear();
+    function makeFilteredPlaceProcessor() { // answer a function(placeData) that adds it to suggestions if it matches
         var words = addressLine.text.toUpperCase().split(/\s+/).filter(identity),
             data = allStories;
         function matches(place) {
@@ -411,11 +440,15 @@ Window {
                 return place.searchText.indexOf(word) >= 0;
             });
         }
-        data.forEach(function (place) {
+        return function (place) {
             if (matches(place)) {
                 suggestions.append(place);
             }
-        });
+        };
+    }
+    function filterChoicesByText() {
+        suggestions.clear();
+        allStories.forEach(makeFilteredPlaceProcessor());
     }
 
     function fillDestinations() {
diff --git a/interface/resources/qml/hifi/TextButton.qml b/interface/resources/qml/hifi/TextButton.qml
new file mode 100644
index 0000000000..99fcffa8f7
--- /dev/null
+++ b/interface/resources/qml/hifi/TextButton.qml
@@ -0,0 +1,43 @@
+//
+//  TextButton.qml
+//
+//  Created by Howard Stearns 11/12/16
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+import Hifi 1.0
+import QtQuick 2.4
+import "../styles-uit"
+
+Rectangle {
+    property alias text: label.text;
+    property alias pixelSize: label.font.pixelSize;
+    property bool selected: false;
+    property int spacing: 2;
+    property var action: function () { };
+    width: label.width + (4 * spacing);
+    height: label.height + spacing;
+    radius: 2 * spacing;
+    color: selected ? "grey" : "transparent";
+    HifiConstants { id: hifi; }
+    RalewaySemiBold {
+        id: label;
+        color: hifi.colors.white;
+        font.pixelSize: 25;
+        anchors {
+            horizontalCenter: parent.horizontalCenter;
+            verticalCenter: parent.verticalCenter;
+        }
+    }
+    MouseArea {
+        anchors.fill: parent;
+        acceptedButtons: Qt.LeftButton;
+        onClicked: action(parent);
+        hoverEnabled: true;
+        onEntered: label.color = "#1DB5ED";
+        onExited: label.color = hifi.colors.white;
+    }
+
+}