Go go go go gog o

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;
+    }
+}

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;
             }
         }
     }

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;
 

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:

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) {