From dfac0d88a25abd56cde17679dc3f08df379790a6 Mon Sep 17 00:00:00 2001 From: Roxanne Skelly Date: Fri, 25 Jan 2019 16:41:13 -0800 Subject: [PATCH] QmlMarketplace - Add 'logged out' behavior, fix issue with search scope display --- .../hifi/commerce/marketplace/Marketplace.qml | 178 ++++++++++++++++-- .../commerce/marketplace/MarketplaceItem.qml | 21 ++- .../marketplace/MarketplaceListItem.qml | 9 +- interface/src/Application.cpp | 1 + scripts/system/marketplaces/marketplaces.js | 2 +- 5 files changed, 184 insertions(+), 27 deletions(-) diff --git a/interface/resources/qml/hifi/commerce/marketplace/Marketplace.qml b/interface/resources/qml/hifi/commerce/marketplace/Marketplace.qml index 77820ccaca..10b59ac83b 100644 --- a/interface/resources/qml/hifi/commerce/marketplace/Marketplace.qml +++ b/interface/resources/qml/hifi/commerce/marketplace/Marketplace.qml @@ -37,18 +37,42 @@ Rectangle { property string searchString: "" property bool keyboardEnabled: HMD.active property bool keyboardRaised: false + property string searchScopeString: "Featured" + property bool isLoggedIn: false; anchors.fill: (typeof parent === undefined) ? undefined : parent function getMarketplaceItems() { marketplaceItemView.visible = false; - itemsList.visible = true; + itemsList.visible = true; marketBrowseModel.getFirstPage(); + { + if(root.searchString !== undefined && root.searchString !== "") { + root.searchScopeString = "Search Results: \"" + root.searchString + "\""; + } else if (root.categoryString !== "") { + root.searchScopeString = root.categoryString; + } else { + root.searchScopeString = "Featured"; + } + } } - + + Component.onCompleted: { + Commerce.getLoginStatus(); + } + Component.onDestruction: { keyboard.raised = false; } + + Connections { + target: GlobalServices + + onMyUsernameChanged: { + console.log("LOGIN STATUS CHANGING"); + Commerce.getLoginStatus(); + } + } Connections { target: MarketplaceScriptingInterface @@ -61,7 +85,7 @@ Rectangle { categoriesModel.append({ id: -1, name: "Everything" - }); + }); result.data.items.forEach(function(category) { categoriesModel.append({ id: category.id, @@ -84,14 +108,16 @@ Rectangle { marketplaceItem.image_url = result.data.thumbnail_url; marketplaceItem.name = result.data.title; marketplaceItem.likes = result.data.likes; - marketplaceItem.liked = result.data.has_liked; + if(result.data.has_liked !== undefined) { + marketplaceItem.liked = result.data.has_liked; + } marketplaceItem.creator = result.data.creator; marketplaceItem.categories = result.data.categories; marketplaceItem.price = result.data.cost; marketplaceItem.description = result.data.description; marketplaceItem.attributions = result.data.attributions; marketplaceItem.license = result.data.license; - marketplaceItem.available = result.data.availability == "available"; + marketplaceItem.available = result.data.availability === "available"; marketplaceItem.created_at = result.data.created_at; marketplaceItemScrollView.contentHeight = marketplaceItemContent.height; itemsList.visible = false; @@ -100,6 +126,15 @@ Rectangle { } } + Connections { + target: Commerce + + onLoginStatusResult: { + root.isLoggedIn = isLoggedIn; + itemsLoginStatus.visible = !isLoggedIn; + } + } + HifiCommerceCommon.CommerceLightbox { id: lightboxPopup visible: false @@ -423,7 +458,6 @@ Rectangle { getMarketplaceItems(); } } - } ScrollBar.vertical: ScrollBar { @@ -452,12 +486,12 @@ Rectangle { anchors { fill: parent - topMargin: 100 + topMargin: 120 bottomMargin: 50 } - + visible: true; - + HifiModels.PSFListModel { id: marketBrowseModel @@ -467,7 +501,7 @@ Rectangle { getPage: function () { MarketplaceScriptingInterface.getMarketplaceItems( - root.searchString == "" ? undefined : root.searchString, + root.searchString === "" ? undefined : root.searchString, "", root.categoryString.toLowerCase(), "", @@ -503,11 +537,12 @@ Rectangle { image_url:model.thumbnail_url name: model.title likes: model.likes - liked: model.has_liked + liked: model.has_liked ? model.has_liked : false creator: model.creator category: model.primary_category price: model.cost - available: model.availability == "available" + available: model.availability === "available" + isLoggedIn: root.isLoggedIn; onShowItem: { MarketplaceScriptingInterface.getMarketplaceItem(item_id); @@ -546,9 +581,65 @@ Rectangle { height: childrenRect.height width: parent.width + Rectangle { + id: itemsLoginStatus; + anchors { + left: parent.left + right: parent.right + leftMargin: 15 + rightMargin: 15 + } + height: root.isLoggedIn ? 0 : 80 + + visible: !root.isLoggedIn + color: hifi.colors.greenHighlight + border.color: hifi.colors.greenShadow + border.width: 1 + radius: 4 + z: 10000 + + HifiControlsUit.Button { + id: loginButton; + anchors { + left: parent.left + top: parent.top + bottom: parent.bottom + leftMargin: 15 + topMargin:10 + bottomMargin: 10 + } + width: 80; + + text: root.price ? root.price : "LOG IN" + + onClicked: { + sendToScript({method: 'needsLogIn_loginClicked'}); + } + } + + RalewayRegular { + id: itemsLoginText + + anchors { + leftMargin: 15 + top: parent.top; + bottom: parent.bottom; + right: parent.right; + left: loginButton.right + } + + text: "to get items from the Marketplace." + color: hifi.colors.baseGray + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + size: 18 + } + } + Item { id: breadcrumbs + anchors.top: itemsLoginStatus.bottom; anchors.left: parent.left anchors.right: parent.right height: 34 @@ -598,7 +689,7 @@ Rectangle { topMargin: 10 } - text: "Featured"; + text: searchScopeString color: hifi.colors.baseGray horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter @@ -751,8 +842,64 @@ Rectangle { contentWidth: parent.width Rectangle { - id: marketplaceItemContent + id: itemLoginStatus; + anchors { + left: parent.left + right: parent.right + leftMargin: 15 + rightMargin: 15 + } + height: root.isLoggedIn ? 0 : 80 + visible: !root.isLoggedIn + color: hifi.colors.greenHighlight + border.color: hifi.colors.greenShadow + border.width: 1 + radius: 4 + z: 10000 + + HifiControlsUit.Button { + id: loginButton; + anchors { + left: parent.left + top: parent.top + bottom: parent.bottom + leftMargin: 15 + topMargin:10 + bottomMargin: 10 + } + width: 80; + + text: root.price ? root.price : "LOG IN" + + onClicked: { + sendToScript({method: 'needsLogIn_loginClicked'}); + } + } + + RalewayRegular { + id: itemsLoginText + + anchors { + leftMargin: 15 + top: parent.top; + bottom: parent.bottom; + right: parent.right; + left: loginButton.right + } + + text: "to get items from the Marketplace." + color: hifi.colors.baseGray + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + size: 18 + } + } + + + Rectangle { + id: marketplaceItemContent + anchors.top: itemLoginStatus.bottom; width: parent.width height: childrenRect.height + 100 @@ -785,11 +932,14 @@ Rectangle { MarketplaceItem { id: marketplaceItem + anchors.topMargin: 15 anchors.top: backText.bottom width: parent.width height: childrenRect.height + isLoggedIn: root.isLoggedIn; + onBuy: { sendToScript({method: 'marketplace_checkout', itemId: item_id}); } diff --git a/interface/resources/qml/hifi/commerce/marketplace/MarketplaceItem.qml b/interface/resources/qml/hifi/commerce/marketplace/MarketplaceItem.qml index 9b95b36918..5795d0d67d 100644 --- a/interface/resources/qml/hifi/commerce/marketplace/MarketplaceItem.qml +++ b/interface/resources/qml/hifi/commerce/marketplace/MarketplaceItem.qml @@ -40,6 +40,7 @@ Rectangle { property string posted: "" property bool available: false property string created_at: "" + property bool isLoggedIn: false; onCategoriesChanged: { categoriesListModel.clear(); @@ -184,7 +185,9 @@ Rectangle { } onClicked: { - MarketplaceScriptingInterface.marketplaceItemLike(root.item_id, !root.liked); + if (isLoggedIn) { + MarketplaceScriptingInterface.marketplaceItemLike(root.item_id, !root.liked); + } } } } @@ -382,21 +385,21 @@ Rectangle { onClicked: { licenseInfo.visible = true; var url; - if (root.license == "No Rights Reserved (CC0)") { + if (root.license === "No Rights Reserved (CC0)") { url = "https://creativecommons.org/publicdomain/zero/1.0/" - } else if (root.license == "Attribution (CC BY)") { + } else if (root.license === "Attribution (CC BY)") { url = "https://creativecommons.org/licenses/by/4.0/" - } else if (root.license == "Attribution-ShareAlike (CC BY-SA)") { + } else if (root.license === "Attribution-ShareAlike (CC BY-SA)") { url = "https://creativecommons.org/licenses/by-sa/4.0/" - } else if (root.license == "Attribution-NoDerivs (CC BY-ND)") { + } else if (root.license === "Attribution-NoDerivs (CC BY-ND)") { url = "https://creativecommons.org/licenses/by-nd/4.0/" - } else if (root.license == "Attribution-NonCommercial (CC BY-NC)") { + } else if (root.license === "Attribution-NonCommercial (CC BY-NC)") { url = "https://creativecommons.org/licenses/by-nc/4.0/" - } else if (root.license == "Attribution-NonCommercial-ShareAlike (CC BY-NC-SA)") { + } else if (root.license === "Attribution-NonCommercial-ShareAlike (CC BY-NC-SA)") { url = "https://creativecommons.org/licenses/by-nc-sa/4.0/" - } else if (root.license == "Attribution-NonCommercial-NoDerivs (CC BY-NC-ND)") { + } else if (root.license === "Attribution-NonCommercial-NoDerivs (CC BY-NC-ND)") { url = "https://creativecommons.org/licenses/by-nc-nd/4.0/" - } else if (root.license == "Proof of Provenance License (PoP License)") { + } else if (root.license === "Proof of Provenance License (PoP License)") { url = "https://digitalassetregistry.com/PoP-License/v1/" } if(url) { diff --git a/interface/resources/qml/hifi/commerce/marketplace/MarketplaceListItem.qml b/interface/resources/qml/hifi/commerce/marketplace/MarketplaceListItem.qml index 46e6a9d920..eb99106cf4 100644 --- a/interface/resources/qml/hifi/commerce/marketplace/MarketplaceListItem.qml +++ b/interface/resources/qml/hifi/commerce/marketplace/MarketplaceListItem.qml @@ -35,6 +35,7 @@ Rectangle { property string category: "" property int price: 0 property bool available: false + property bool isLoggedIn: false; signal buy() signal showItem() @@ -184,9 +185,11 @@ Rectangle { bottom: parent.bottom } onClicked: { - root.liked = !root.liked; - root.likes = root.liked ? root.likes + 1 : root.likes - 1; - MarketplaceScriptingInterface.marketplaceItemLike(root.item_id, root.liked); + if(isLoggedIn) { + root.liked = !root.liked; + root.likes = root.liked ? root.likes + 1 : root.likes - 1; + MarketplaceScriptingInterface.marketplaceItemLike(root.item_id, root.liked); + } } } } diff --git a/interface/src/Application.cpp b/interface/src/Application.cpp index 2f0ca7ea2e..7ae7ebf65c 100644 --- a/interface/src/Application.cpp +++ b/interface/src/Application.cpp @@ -2990,6 +2990,7 @@ void Application::initializeUi() { QUrl{ "hifi/dialogs/security/SecurityImageModel.qml" }, QUrl{ "hifi/dialogs/security/SecurityImageSelection.qml" }, QUrl{ "hifi/tablet/TabletMenu.qml" }, + QUrl{ "hifi/commerce/marketplace/Marketplace.qml" }, }, commerceCallback); QmlContextCallback marketplaceCallback = [](QQmlContext* context) { diff --git a/scripts/system/marketplaces/marketplaces.js b/scripts/system/marketplaces/marketplaces.js index 2ca79b49f0..655d286049 100644 --- a/scripts/system/marketplaces/marketplaces.js +++ b/scripts/system/marketplaces/marketplaces.js @@ -613,7 +613,7 @@ var onQmlMessageReceived = function onQmlMessageReceived(message) { case 'passphrasePopup_cancelClicked': case 'needsLogIn_cancelClicked': // Should/must NOT check for wallet setup. - ui.open(MARKETPLACE_URL_INITIAL, MARKETPLACES_INJECT_SCRIPT_URL); + openMarketplace(); break; case 'needsLogIn_loginClicked': openLoginWindow();