diff --git a/interface/resources/qml/hifi/commerce/purchases/FirstUseTutorial.qml b/interface/resources/qml/hifi/commerce/purchases/FirstUseTutorial.qml index b5d7efe818..34800f1ec5 100644 --- a/interface/resources/qml/hifi/commerce/purchases/FirstUseTutorial.qml +++ b/interface/resources/qml/hifi/commerce/purchases/FirstUseTutorial.qml @@ -13,6 +13,7 @@ import Hifi 1.0 as Hifi import QtQuick 2.5 +import QtGraphicalEffects 1.0 import QtQuick.Controls 1.4 import "../../../styles-uit" import "../../../controls-uit" as HifiControlsUit @@ -24,40 +25,103 @@ Rectangle { HifiConstants { id: hifi; } id: root; - property string activeView: "step_1"; - // Style - color: hifi.colors.baseGray; + property int activeView: 1; + + Image { + anchors.fill: parent; + source: "images/Purchase-First-Run-" + root.activeView + ".jpg"; + } + + // This object is always used in a popup. + // This MouseArea is used to prevent a user from being + // able to click on a button/mouseArea underneath the popup. + MouseArea { + anchors.fill: parent; + propagateComposedEvents: false; + } + + Item { + id: header; + anchors.top: parent.top; + anchors.left: parent.left; + anchors.right: parent.right; + height: childrenRect.height; + + Image { + id: marketplaceHeaderImage; + source: "../common/images/marketplaceHeaderImage.png"; + anchors.top: parent.top; + anchors.topMargin: 2; + anchors.left: parent.left; + anchors.leftMargin: 8; + width: 140; + height: 58; + fillMode: Image.PreserveAspectFit; + visible: false; + } + ColorOverlay { + anchors.fill: marketplaceHeaderImage; + source: marketplaceHeaderImage; + color: "#FFFFFF" + } + RalewayRegular { + id: introText1; + text: "INTRODUCTION TO
My Purchases"; + // Text size + size: 28; + // Anchors + anchors.top: marketplaceHeaderImage.bottom; + anchors.topMargin: -8; + anchors.left: parent.left; + anchors.leftMargin: 12; + anchors.right: parent.right; + height: paintedHeight; + // Style + color: hifi.colors.white; + } + } // // "STEP 1" START // Item { id: step_1; - visible: root.activeView === "step_1"; - anchors.top: parent.top; + visible: root.activeView === 1; + anchors.top: header.bottom; + anchors.topMargin: 100; anchors.left: parent.left; + anchors.leftMargin: 30; anchors.right: parent.right; - anchors.bottom: tutorialActionButtonsContainer.top; + anchors.bottom: parent.bottom; RalewayRegular { id: step1text; - text: "This is the first-time Purchases tutorial.

Here is some bold text " + - "inside Step 1."; + text: "The 'REZ IT' button makes your purchase appear in front of you."; // Text size - size: 24; + size: 20; // Anchors anchors.top: parent.top; - anchors.bottom: parent.bottom; anchors.left: parent.left; - anchors.leftMargin: 16; - anchors.right: parent.right; - anchors.rightMargin: 16; + width: 180; + height: paintedHeight; // Style - color: hifi.colors.faintGray; + color: hifi.colors.white; wrapMode: Text.WordWrap; - // Alignment - horizontalAlignment: Text.AlignHCenter; - verticalAlignment: Text.AlignVCenter; + } + + // "Next" button + HifiControlsUit.Button { + color: hifi.buttons.blue; + colorScheme: hifi.colorSchemes.dark; + anchors.top: step1text.bottom; + anchors.topMargin: 16; + anchors.left: parent.left; + width: 150; + height: 40; + text: "Next"; + onClicked: { + root.activeView++; + } } } // @@ -69,127 +133,52 @@ Rectangle { // Item { id: step_2; - visible: root.activeView === "step_2"; - anchors.top: parent.top; + visible: root.activeView === 2; + anchors.top: header.bottom; + anchors.topMargin: 45; anchors.left: parent.left; + anchors.leftMargin: 30; anchors.right: parent.right; - anchors.bottom: tutorialActionButtonsContainer.top; + anchors.bottom: parent.bottom; RalewayRegular { id: step2text; - text: "STEP TWOOO!!!"; + text: "If you rez an item twice, the first one will disappear."; // Text size - size: 24; + size: 20; // Anchors anchors.top: parent.top; - anchors.bottom: parent.bottom; anchors.left: parent.left; - anchors.leftMargin: 16; - anchors.right: parent.right; - anchors.rightMargin: 16; + width: 180; + height: paintedHeight; // Style - color: hifi.colors.faintGray; + color: hifi.colors.white; wrapMode: Text.WordWrap; - // Alignment - horizontalAlignment: Text.AlignHCenter; - verticalAlignment: Text.AlignVCenter; + } + + // "GOT IT" button + HifiControlsUit.Button { + color: hifi.buttons.blue; + colorScheme: hifi.colorSchemes.dark; + anchors.top: step2text.bottom; + anchors.topMargin: 16; + anchors.left: parent.left; + width: 150; + height: 40; + text: "GOT IT"; + onClicked: { + sendSignalToParent({method: 'tutorial_finished'}); + } } } // // "STEP 2" END // - Item { - id: tutorialActionButtonsContainer; - // Size - width: root.width; - height: 70; - // Anchors - anchors.left: parent.left; - anchors.bottom: parent.bottom; - anchors.bottomMargin: 24; - - // "Skip" or "Back" button - HifiControlsUit.Button { - id: skipOrBackButton; - color: hifi.buttons.black; - colorScheme: hifi.colorSchemes.dark; - anchors.top: parent.top; - anchors.topMargin: 3; - anchors.bottom: parent.bottom; - anchors.bottomMargin: 3; - anchors.left: parent.left; - anchors.leftMargin: 20; - width: parent.width/2 - anchors.leftMargin*2; - text: root.activeView === "step_1" ? "Skip" : "Back"; - onClicked: { - if (root.activeView === "step_1") { - sendSignalToParent({method: 'tutorial_skipClicked'}); - } else { - root.activeView = "step_" + (parseInt(root.activeView.split("_")[1]) - 1); - } - } - } - - // "Next" or "Finish" button - HifiControlsUit.Button { - id: nextButton; - color: hifi.buttons.blue; - colorScheme: hifi.colorSchemes.dark; - anchors.top: parent.top; - anchors.topMargin: 3; - anchors.bottom: parent.bottom; - anchors.bottomMargin: 3; - anchors.right: parent.right; - anchors.rightMargin: 20; - width: parent.width/2 - anchors.rightMargin*2; - text: root.activeView === "step_2" ? "Finish" : "Next"; - onClicked: { - // If this is the final step... - if (root.activeView === "step_2") { - sendSignalToParent({method: 'tutorial_finished'}); - } else { - root.activeView = "step_" + (parseInt(root.activeView.split("_")[1]) + 1); - } - } - } - } - // // FUNCTION DEFINITIONS START // - // - // Function Name: fromScript() - // - // Relevant Variables: - // None - // - // Arguments: - // message: The message sent from the JavaScript, in this case the Marketplaces JavaScript. - // Messages are in format "{method, params}", like json-rpc. - // - // Description: - // Called when a message is received from a script. - // - function fromScript(message) { - switch (message.method) { - case 'updatePurchases': - referrerURL = message.referrerURL; - break; - case 'purchases_getIsFirstUseResult': - if (message.isFirstUseOfPurchases && root.activeView !== "firstUseTutorial") { - root.activeView = "firstUseTutorial"; - } else if (!message.isFirstUseOfPurchases && root.activeView === "initialize") { - root.activeView = "purchasesMain"; - commerce.inventory(); - } - break; - default: - console.log('Unrecognized message from marketplaces.js:', JSON.stringify(message)); - } - } signal sendSignalToParent(var message); - // // FUNCTION DEFINITIONS END // diff --git a/interface/resources/qml/hifi/commerce/purchases/Purchases.qml b/interface/resources/qml/hifi/commerce/purchases/Purchases.qml index ef6cfcbe6e..abb5f19732 100644 --- a/interface/resources/qml/hifi/commerce/purchases/Purchases.qml +++ b/interface/resources/qml/hifi/commerce/purchases/Purchases.qml @@ -35,6 +35,7 @@ Rectangle { property bool canRezCertifiedItems: Entities.canRezCertified || Entities.canRezTmpCertified; property bool pendingInventoryReply: true; property bool isShowingMyItems: false; + property bool isDebuggingFirstUseTutorial: false; // Style color: hifi.colors.white; Hifi.QmlCommerce { @@ -250,12 +251,9 @@ Rectangle { FirstUseTutorial { id: firstUseTutorial; + z: 999; visible: root.activeView === "firstUseTutorial"; - anchors.top: titleBarContainer.bottom; - anchors.topMargin: -titleBarContainer.additionalDropdownHeight; - anchors.bottom: parent.bottom; - anchors.left: parent.left; - anchors.right: parent.right; + anchors.fill: parent; Connections { onSendSignalToParent: { @@ -682,7 +680,7 @@ Rectangle { filterBar.text = message.filterText ? message.filterText : ""; break; case 'purchases_getIsFirstUseResult': - if (message.isFirstUseOfPurchases && root.activeView !== "firstUseTutorial") { + if ((message.isFirstUseOfPurchases || root.isDebuggingFirstUseTutorial) && root.activeView !== "firstUseTutorial") { root.activeView = "firstUseTutorial"; } else if (!message.isFirstUseOfPurchases && root.activeView === "initialize") { root.activeView = "purchasesMain"; diff --git a/interface/resources/qml/hifi/commerce/purchases/images/Purchase-First-Run-1.jpg b/interface/resources/qml/hifi/commerce/purchases/images/Purchase-First-Run-1.jpg new file mode 100644 index 0000000000..ce0d87363f Binary files /dev/null and b/interface/resources/qml/hifi/commerce/purchases/images/Purchase-First-Run-1.jpg differ diff --git a/interface/resources/qml/hifi/commerce/purchases/images/Purchase-First-Run-2.jpg b/interface/resources/qml/hifi/commerce/purchases/images/Purchase-First-Run-2.jpg new file mode 100644 index 0000000000..40bed974af Binary files /dev/null and b/interface/resources/qml/hifi/commerce/purchases/images/Purchase-First-Run-2.jpg differ diff --git a/scripts/system/commerce/wallet.js b/scripts/system/commerce/wallet.js index 0e58d1ecd3..7553ca4eeb 100644 --- a/scripts/system/commerce/wallet.js +++ b/scripts/system/commerce/wallet.js @@ -78,6 +78,7 @@ onButtonClicked(); break; case 'walletReset': + Settings.setValue("isFirstUseOfPurchases", true); onButtonClicked(); onButtonClicked(); break;