diff --git a/interface/resources/qml/hifi/commerce/wallet/SecurityImageModel.qml b/interface/resources/qml/hifi/commerce/wallet/SecurityImageModel.qml new file mode 100644 index 0000000000..1be249fb45 --- /dev/null +++ b/interface/resources/qml/hifi/commerce/wallet/SecurityImageModel.qml @@ -0,0 +1,42 @@ +// +// SecurityImageModel.qml +// qml/hifi/commerce +// +// SecurityImageModel +// +// Created by Zach Fox on 2017-08-17 +// Copyright 2017 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 QtQuick 2.5 + +ListModel { + id: root; + ListElement{ + sourcePath: "images/01cat.jpg" + securityImageEnumValue: 1; + } + ListElement{ + sourcePath: "images/02car.jpg" + securityImageEnumValue: 2; + } + ListElement{ + sourcePath: "images/03dog.jpg" + securityImageEnumValue: 3; + } + ListElement{ + sourcePath: "images/04stars.jpg" + securityImageEnumValue: 4; + } + ListElement{ + sourcePath: "images/05plane.jpg" + securityImageEnumValue: 5; + } + ListElement{ + sourcePath: "images/06gingerbread.jpg" + securityImageEnumValue: 6; + } +} diff --git a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml b/interface/resources/qml/hifi/commerce/wallet/Wallet.qml index 75e2258287..b200c7467f 100644 --- a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml +++ b/interface/resources/qml/hifi/commerce/wallet/Wallet.qml @@ -35,8 +35,17 @@ Rectangle { hfcBalanceText.text = balance; } } - onSecurityImageResult: { - securityImage.source = securityImageSelection.getImagePathFromImageID(imageID); + } + + Rectangle { + anchors.fill: parent; + color: "black"; + opacity: 0.5; + WalletSetupLightbox { + id: walletSetupLightbox; + anchors.centerIn: parent; + width: parent.width - 50; + height: parent.height - 50; } } @@ -104,7 +113,6 @@ Rectangle { // Anchors anchors.left: parent.left; anchors.bottom: parent.bottom; - anchors.bottomMargin: 8; // Separator HifiControlsUit.Separator { @@ -116,52 +124,136 @@ Rectangle { // "ACCOUNT HOME" tab button Rectangle { id: accountHomeButtonContainer; - color: hifi.buttons.black; + color: hifi.colors.black; anchors.top: parent.top; anchors.left: parent.left; anchors.bottom: parent.bottom; width: parent.width / tabButtonsContainer.numTabs; - onClicked: { - // Show this tab + + RalewaySemiBold { + text: "ACCOUNT HOME"; + // Text size + size: hifi.fontSizes.overlayTitle; + // Anchors + anchors.fill: parent; + anchors.leftMargin: 4; + anchors.rightMargin: 4; + // Style + color: hifi.colors.lightGrayText; + wrapMode: Text.WordWrap; + // Alignment + horizontalAlignment: Text.AlignHCenter; + verticalAlignment: Text.AlignVCenter; + } + MouseArea { + anchors.fill: parent; + hoverEnabled: enabled; + onClicked: { + } + onEntered: parent.color = hifi.colors.blueHighlight; + onExited: parent.color = hifi.colors.black; } } // "SEND MONEY" tab button Rectangle { id: sendMoneyButtonContainer; - color: hifi.buttons.black; + color: hifi.colors.black; anchors.top: parent.top; anchors.left: accountHomeButtonContainer.right; anchors.bottom: parent.bottom; width: parent.width / tabButtonsContainer.numTabs; - onClicked: { - // Show this tab + + RalewaySemiBold { + text: "SEND MONEY"; + // Text size + size: hifi.fontSizes.overlayTitle; + // Anchors + anchors.fill: parent; + anchors.leftMargin: 4; + anchors.rightMargin: 4; + // Style + color: hifi.colors.lightGrayText; + wrapMode: Text.WordWrap; + // Alignment + horizontalAlignment: Text.AlignHCenter; + verticalAlignment: Text.AlignVCenter; + } + MouseArea { + anchors.fill: parent; + hoverEnabled: enabled; + onClicked: { + } + onEntered: parent.color = hifi.colors.blueHighlight; + onExited: parent.color = hifi.colors.black; } } // "SECURITY" tab button Rectangle { id: securityButtonContainer; - color: hifi.buttons.black; + color: hifi.colors.black; anchors.top: parent.top; anchors.left: sendMoneyButtonContainer.right; anchors.bottom: parent.bottom; width: parent.width / tabButtonsContainer.numTabs; - onClicked: { - // Show this tab + + RalewaySemiBold { + text: "SECURITY"; + // Text size + size: hifi.fontSizes.overlayTitle; + // Anchors + anchors.fill: parent; + anchors.leftMargin: 4; + anchors.rightMargin: 4; + // Style + color: hifi.colors.lightGrayText; + wrapMode: Text.WordWrap; + // Alignment + horizontalAlignment: Text.AlignHCenter; + verticalAlignment: Text.AlignVCenter; + } + MouseArea { + anchors.fill: parent; + hoverEnabled: enabled; + onClicked: { + } + onEntered: parent.color = hifi.colors.blueHighlight; + onExited: parent.color = hifi.colors.black; } } // "HELP" tab button Rectangle { id: helpButtonContainer; - color: hifi.buttons.black; + color: hifi.colors.black; anchors.top: parent.top; anchors.left: securityButtonContainer.right; anchors.bottom: parent.bottom; width: parent.width / tabButtonsContainer.numTabs; - onClicked: { - // Show this tab + + RalewaySemiBold { + text: "HELP"; + // Text size + size: hifi.fontSizes.overlayTitle; + // Anchors + anchors.fill: parent; + anchors.leftMargin: 4; + anchors.rightMargin: 4; + // Style + color: hifi.colors.lightGrayText; + wrapMode: Text.WordWrap; + // Alignment + horizontalAlignment: Text.AlignHCenter; + verticalAlignment: Text.AlignVCenter; + } + MouseArea { + anchors.fill: parent; + hoverEnabled: enabled; + onClicked: { + } + onEntered: parent.color = hifi.colors.blueHighlight; + onExited: parent.color = hifi.colors.black; } } } diff --git a/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml b/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml index a44249566a..393a6727a8 100644 --- a/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml +++ b/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml @@ -27,6 +27,8 @@ Rectangle { property int stepNumber: 0; // Style color: hifi.colors.white; + anchors.fill: parent; + Hifi.QmlCommerce { id: commerce; diff --git a/interface/resources/qml/hifi/commerce/wallet/images/01cat.jpg b/interface/resources/qml/hifi/commerce/wallet/images/01cat.jpg new file mode 100644 index 0000000000..6e7897cb82 Binary files /dev/null and b/interface/resources/qml/hifi/commerce/wallet/images/01cat.jpg differ diff --git a/interface/resources/qml/hifi/commerce/wallet/images/02car.jpg b/interface/resources/qml/hifi/commerce/wallet/images/02car.jpg new file mode 100644 index 0000000000..5dd8091e57 Binary files /dev/null and b/interface/resources/qml/hifi/commerce/wallet/images/02car.jpg differ diff --git a/interface/resources/qml/hifi/commerce/wallet/images/03dog.jpg b/interface/resources/qml/hifi/commerce/wallet/images/03dog.jpg new file mode 100644 index 0000000000..4a85b80c0c Binary files /dev/null and b/interface/resources/qml/hifi/commerce/wallet/images/03dog.jpg differ diff --git a/interface/resources/qml/hifi/commerce/wallet/images/04stars.jpg b/interface/resources/qml/hifi/commerce/wallet/images/04stars.jpg new file mode 100644 index 0000000000..8f2bf62f83 Binary files /dev/null and b/interface/resources/qml/hifi/commerce/wallet/images/04stars.jpg differ diff --git a/interface/resources/qml/hifi/commerce/wallet/images/05plane.jpg b/interface/resources/qml/hifi/commerce/wallet/images/05plane.jpg new file mode 100644 index 0000000000..6504459d8b Binary files /dev/null and b/interface/resources/qml/hifi/commerce/wallet/images/05plane.jpg differ diff --git a/interface/resources/qml/hifi/commerce/wallet/images/06gingerbread.jpg b/interface/resources/qml/hifi/commerce/wallet/images/06gingerbread.jpg new file mode 100644 index 0000000000..54c37faa2f Binary files /dev/null and b/interface/resources/qml/hifi/commerce/wallet/images/06gingerbread.jpg differ diff --git a/interface/src/commerce/QmlCommerce.h b/interface/src/commerce/QmlCommerce.h index 8eebcd3378..cf6b620bdd 100644 --- a/interface/src/commerce/QmlCommerce.h +++ b/interface/src/commerce/QmlCommerce.h @@ -31,7 +31,7 @@ signals: void balanceResult(int balance, const QString& failureMessage); void inventoryResult(QJsonObject inventory, const QString& failureMessage); void securityImageResult(uint imageID); - void loginStatusResult(bool isSetup); + void loginStatusResult(bool isLoggedIn); void passphraseSetupStatusResult(bool passphraseIsSetup); protected: diff --git a/scripts/system/commerce/wallet.js b/scripts/system/commerce/wallet.js index e65ed4ae37..866bb613a7 100644 --- a/scripts/system/commerce/wallet.js +++ b/scripts/system/commerce/wallet.js @@ -16,7 +16,7 @@ (function () { // BEGIN LOCAL_SCOPE - // Function Name: buttonClicked() + // Function Name: onButtonClicked() // // Description: // -Fired when the app button is pressed. @@ -26,7 +26,7 @@ // -onWalletScreen: true/false depending on whether we're looking at the app. var WALLET_QML_SOURCE = Script.resourcesPath() + "qml/hifi/commerce/wallet/Wallet.qml"; var onWalletScreen = false; - function buttonClicked() { + function onButtonClicked() { if (!tablet) { print("Warning in buttonClicked(): 'tablet' undefined!"); return; @@ -93,7 +93,7 @@ // -Called when the TabletScriptingInterface::screenChanged() signal is emitted. The "type" argument can be either the string // value of "Home", "Web", "Menu", "QML", or "Closed". The "url" argument is only valid for Web and QML. function onTabletScreenChanged(type, url) { - onWalletScreen = (type === "QML" && url === SPECTATOR_CAMERA_QML_SOURCE); + onWalletScreen = (type === "QML" && url === WALLET_QML_SOURCE); wireEventBridge(onWalletScreen); // Change button to active when window is first openend, false otherwise. if (button) {