From 1a62f60348cd46f8a647ca1e036c46b9b2f94a0f Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Fri, 18 Aug 2017 11:30:25 -0700 Subject: [PATCH] Commit early and often. --- .../qml/hifi/commerce/wallet/AccountHome.qml | 2 +- .../qml/hifi/commerce/wallet/Help.qml | 73 ++++++ .../commerce/wallet/PassphraseSelection.qml | 8 +- .../qml/hifi/commerce/wallet/Security.qml | 229 ++++++++++++++++++ .../qml/hifi/commerce/wallet/SendMoney.qml | 73 ++++++ .../qml/hifi/commerce/wallet/Wallet.qml | 78 +++++- 6 files changed, 453 insertions(+), 10 deletions(-) create mode 100644 interface/resources/qml/hifi/commerce/wallet/Help.qml create mode 100644 interface/resources/qml/hifi/commerce/wallet/Security.qml create mode 100644 interface/resources/qml/hifi/commerce/wallet/SendMoney.qml diff --git a/interface/resources/qml/hifi/commerce/wallet/AccountHome.qml b/interface/resources/qml/hifi/commerce/wallet/AccountHome.qml index 77ab48a351..2a0effb47c 100644 --- a/interface/resources/qml/hifi/commerce/wallet/AccountHome.qml +++ b/interface/resources/qml/hifi/commerce/wallet/AccountHome.qml @@ -42,7 +42,7 @@ Item { // Anchors anchors.top: parent.top; anchors.left: parent.left; - height: 75; + height: 65; width: height; fillMode: Image.PreserveAspectFit; mipmap: true; diff --git a/interface/resources/qml/hifi/commerce/wallet/Help.qml b/interface/resources/qml/hifi/commerce/wallet/Help.qml new file mode 100644 index 0000000000..2252cbfb59 --- /dev/null +++ b/interface/resources/qml/hifi/commerce/wallet/Help.qml @@ -0,0 +1,73 @@ +// +// SendMoney.qml +// qml/hifi/commerce/wallet +// +// SendMoney +// +// Created by Zach Fox on 2017-08-18 +// 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 Hifi 1.0 as Hifi +import QtQuick 2.5 +import QtQuick.Controls 1.4 +import "../../../styles-uit" +import "../../../controls-uit" as HifiControlsUit +import "../../../controls" as HifiControls + +// references XXX from root context + +Item { + HifiConstants { id: hifi; } + + id: root; + + Hifi.QmlCommerce { + id: commerce; + } + + // "Unavailable" + RalewayRegular { + text: "Help me!"; + // Anchors + anchors.fill: parent; + // Text size + size: 24; + // Style + color: hifi.colors.faintGray; + wrapMode: Text.WordWrap; + // Alignment + horizontalAlignment: Text.AlignHCenter; + verticalAlignment: Text.AlignVCenter; + } + + // + // FUNCTION DEFINITIONS START + // + // + // Function Name: fromScript() + // + // Relevant Variables: + // None + // + // Arguments: + // message: The message sent from the 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) { + default: + console.log('Unrecognized message from wallet.js:', JSON.stringify(message)); + } + } + signal sendSignalToWallet(var msg); + // + // FUNCTION DEFINITIONS END + // +} diff --git a/interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml b/interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml index 6fe1605cda..c323defef7 100644 --- a/interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml +++ b/interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml @@ -29,6 +29,12 @@ Item { id: commerce; } + onVisibleChanged: { + if (visible) { + passphraseField.focus = true; + } + } + HifiControlsUit.TextField { id: passphraseField; anchors.top: parent.top; @@ -129,7 +135,7 @@ Item { color: hifi.colors.faintGray; wrapMode: Text.WordWrap; // Alignment - horizontalAlignment: Text.AlignHLeft; + horizontalAlignment: Text.AlignLeft; verticalAlignment: Text.AlignVCenter; } diff --git a/interface/resources/qml/hifi/commerce/wallet/Security.qml b/interface/resources/qml/hifi/commerce/wallet/Security.qml new file mode 100644 index 0000000000..444420dcdf --- /dev/null +++ b/interface/resources/qml/hifi/commerce/wallet/Security.qml @@ -0,0 +1,229 @@ +// +// Security.qml +// qml/hifi/commerce/wallet +// +// Security +// +// Created by Zach Fox on 2017-08-18 +// 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 Hifi 1.0 as Hifi +import QtQuick 2.5 +import QtQuick.Controls 1.4 +import "../../../styles-uit" +import "../../../controls-uit" as HifiControlsUit +import "../../../controls" as HifiControls + +// references XXX from root context + +Item { + HifiConstants { id: hifi; } + + id: root; + + Hifi.QmlCommerce { + id: commerce; + } + + // Security Image + Image { + id: topSecurityImage; + // Anchors + anchors.top: parent.top; + anchors.left: parent.left; + height: 65; + width: height; + fillMode: Image.PreserveAspectFit; + mipmap: true; + } + + // Username Text + RalewayRegular { + id: usernameText; + text: Account.username; + // Text size + size: 24; + // Style + color: hifi.colors.faintGray; + elide: Text.ElideRight; + // Anchors + anchors.top: topSecurityImage.top; + anchors.bottom: topSecurityImage.bottom; + anchors.left: topSecurityImage.right; + anchors.leftMargin: 16; + anchors.right: parent.right; + } + + Item { + id: securityContainer; + anchors.top: topSecurityImage.bottom; + anchors.topMargin: 20; + anchors.left: parent.left; + anchors.right: parent.right; + height: childrenRect.height; + + RalewayRegular { + id: securityText; + text: "Security"; + // Anchors + anchors.top: parent.top; + anchors.left: parent.left; + anchors.right: parent.right; + height: 30; + // Text size + size: 22; + // Style + color: hifi.colors.faintGray; + } + + Item { + id: resetPassphraseContainer; + anchors.top: securityText.bottom; + anchors.topMargin: 16; + anchors.left: parent.left; + anchors.right: parent.right; + height: 75; + + Image { + id: resetPassphraseImage; + // Anchors + anchors.top: parent.top; + anchors.left: parent.left; + height: parent.height; + width: height; + fillMode: Image.PreserveAspectFit; + mipmap: true; + } + // "Reset Passphrase" button + HifiControlsUit.Button { + id: resetPassphraseButton; + color: hifi.buttons.black; + colorScheme: hifi.colorSchemes.dark; + anchors.verticalCenter: parent.verticalCenter; + anchors.left: resetPassphraseImage.right; + anchors.leftMargin: 16; + width: 250; + height: 50; + text: "Reset My Passphrase"; + onClicked: { + + } + } + } + + Item { + id: resetSecurityImageContainer; + anchors.top: resetPassphraseContainer.bottom; + anchors.topMargin: 8; + anchors.left: parent.left; + anchors.right: parent.right; + height: 75; + + Image { + id: resetSecurityImageImage; + // Anchors + anchors.top: parent.top; + anchors.left: parent.left; + height: parent.height; + width: height; + fillMode: Image.PreserveAspectFit; + mipmap: true; + } + // "Reset Security Image" button + HifiControlsUit.Button { + id: resetSecurityImageButton; + color: hifi.buttons.black; + colorScheme: hifi.colorSchemes.dark; + anchors.verticalCenter: parent.verticalCenter; + anchors.left: resetSecurityImageImage.right; + anchors.leftMargin: 16; + width: 250; + height: 50; + text: "Reset My Security Image"; + onClicked: { + + } + } + } + } + + Item { + id: yourPrivateKeysContainer; + anchors.top: securityContainer.bottom; + anchors.topMargin: 20; + anchors.left: parent.left; + anchors.right: parent.right; + height: childrenRect.height; + + RalewaySemiBold { + id: yourPrivateKeysText; + text: "Your Private Keys"; + // Anchors + anchors.top: parent.top; + anchors.left: parent.left; + anchors.right: parent.right; + height: 30; + // Text size + size: 22; + // Style + color: hifi.colors.faintGray; + } + + // Text below "your private keys" + RalewayRegular { + text: "Your money and purchases are secured with private keys that only you " + + "have access to. If they are lost, you will not be able to access your money or purchases. " + + "To ensure they are not lost, it is imperative that you back up your private keys.

" + + "To safeguard your private keys, back up this file regularly:"; + // Text size + size: 18; + // Anchors + anchors.top: yourPrivateKeysText.bottom; + anchors.topMargin: 20; + anchors.left: parent.left; + anchors.right: parent.right; + height: paintedHeight; + // Style + color: hifi.colors.faintGray; + wrapMode: Text.WordWrap; + // Alignment + horizontalAlignment: Text.AlignLeft; + verticalAlignment: Text.AlignVCenter; + } + } + + // + // FUNCTION DEFINITIONS START + // + function setSecurityImages(imagePath) { + topSecurityImage.source = imagePath; + resetSecurityImageImage.source = imagePath; + } + // + // Function Name: fromScript() + // + // Relevant Variables: + // None + // + // Arguments: + // message: The message sent from the 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) { + default: + console.log('Unrecognized message from wallet.js:', JSON.stringify(message)); + } + } + signal sendSignalToWallet(var msg); + // + // FUNCTION DEFINITIONS END + // +} diff --git a/interface/resources/qml/hifi/commerce/wallet/SendMoney.qml b/interface/resources/qml/hifi/commerce/wallet/SendMoney.qml new file mode 100644 index 0000000000..75334b1686 --- /dev/null +++ b/interface/resources/qml/hifi/commerce/wallet/SendMoney.qml @@ -0,0 +1,73 @@ +// +// SendMoney.qml +// qml/hifi/commerce/wallet +// +// SendMoney +// +// Created by Zach Fox on 2017-08-18 +// 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 Hifi 1.0 as Hifi +import QtQuick 2.5 +import QtQuick.Controls 1.4 +import "../../../styles-uit" +import "../../../controls-uit" as HifiControlsUit +import "../../../controls" as HifiControls + +// references XXX from root context + +Item { + HifiConstants { id: hifi; } + + id: root; + + Hifi.QmlCommerce { + id: commerce; + } + + // "Unavailable" + RalewayRegular { + text: "You currently cannot send money to other High Fidelity users."; + // Anchors + anchors.fill: parent; + // Text size + size: 24; + // Style + color: hifi.colors.faintGray; + wrapMode: Text.WordWrap; + // Alignment + horizontalAlignment: Text.AlignHCenter; + verticalAlignment: Text.AlignVCenter; + } + + // + // FUNCTION DEFINITIONS START + // + // + // Function Name: fromScript() + // + // Relevant Variables: + // None + // + // Arguments: + // message: The message sent from the 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) { + default: + console.log('Unrecognized message from wallet.js:', JSON.stringify(message)); + } + } + signal sendSignalToWallet(var msg); + // + // FUNCTION DEFINITIONS END + // +} diff --git a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml b/interface/resources/qml/hifi/commerce/wallet/Wallet.qml index a48b759466..1f76d5cfa4 100644 --- a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml +++ b/interface/resources/qml/hifi/commerce/wallet/Wallet.qml @@ -24,7 +24,9 @@ Rectangle { HifiConstants { id: hifi; } id: root; + property string activeView: "notSetUp"; + // Style color: hifi.colors.baseGray; Hifi.QmlCommerce { @@ -40,6 +42,7 @@ Rectangle { onSecurityImageResult: { if (imageID !== 0) { // "If security image is set up" accountHome.setSecurityImage(securityImageModel.getImagePathFromImageID(imageID)); + security.setSecurityImages(securityImageModel.getImagePathFromImageID(imageID)); } else if (root.lastPage === "securityImage") { // ERROR! Invalid security image. securityImageContainer.visible = true; @@ -157,6 +160,45 @@ Rectangle { anchors.rightMargin: 16; } + SendMoney { + id: sendMoney; + visible: root.activeView === "sendMoney"; + anchors.top: titleBarContainer.bottom; + anchors.topMargin: 16; + anchors.bottom: tabButtonsContainer.top; + anchors.bottomMargin: 16; + anchors.left: parent.left; + anchors.leftMargin: 16; + anchors.right: parent.right; + anchors.rightMargin: 16; + } + + Security { + id: security; + visible: root.activeView === "security"; + anchors.top: titleBarContainer.bottom; + anchors.topMargin: 16; + anchors.bottom: tabButtonsContainer.top; + anchors.bottomMargin: 16; + anchors.left: parent.left; + anchors.leftMargin: 16; + anchors.right: parent.right; + anchors.rightMargin: 16; + } + + Help { + id: help; + visible: root.activeView === "help"; + anchors.top: titleBarContainer.bottom; + anchors.topMargin: 16; + anchors.bottom: tabButtonsContainer.top; + anchors.bottomMargin: 16; + anchors.left: parent.left; + anchors.leftMargin: 16; + anchors.right: parent.right; + anchors.rightMargin: 16; + } + // // TAB CONTENTS END @@ -186,7 +228,7 @@ Rectangle { Rectangle { id: accountHomeButtonContainer; visible: !notSetUp.visible; - color: hifi.colors.black; + color: root.activeView === "accountHome" ? hifi.colors.blueAccent : hifi.colors.black; anchors.top: parent.top; anchors.left: parent.left; anchors.bottom: parent.bottom; @@ -213,9 +255,10 @@ Rectangle { hoverEnabled: enabled; onClicked: { root.activeView = "accountHome"; + tabButtonsContainer.resetTabButtonColors(); } onEntered: parent.color = hifi.colors.blueHighlight; - onExited: parent.color = hifi.colors.black; + onExited: parent.color = root.activeView === "accountHome" ? hifi.colors.blueAccent : hifi.colors.black; } } @@ -223,7 +266,7 @@ Rectangle { Rectangle { id: sendMoneyButtonContainer; visible: !notSetUp.visible; - color: hifi.colors.black; + color: root.activeView === "sendMoney" ? hifi.colors.blueAccent : hifi.colors.black; anchors.top: parent.top; anchors.left: accountHomeButtonContainer.right; anchors.bottom: parent.bottom; @@ -250,9 +293,10 @@ Rectangle { hoverEnabled: enabled; onClicked: { root.activeView = "sendMoney"; + tabButtonsContainer.resetTabButtonColors(); } onEntered: parent.color = hifi.colors.blueHighlight; - onExited: parent.color = hifi.colors.black; + onExited: parent.color = root.activeView === "sendMoney" ? hifi.colors.blueAccent : hifi.colors.black; } } @@ -260,7 +304,7 @@ Rectangle { Rectangle { id: securityButtonContainer; visible: !notSetUp.visible; - color: hifi.colors.black; + color: root.activeView === "security" ? hifi.colors.blueAccent : hifi.colors.black; anchors.top: parent.top; anchors.left: sendMoneyButtonContainer.right; anchors.bottom: parent.bottom; @@ -287,9 +331,10 @@ Rectangle { hoverEnabled: enabled; onClicked: { root.activeView = "security"; + tabButtonsContainer.resetTabButtonColors(); } onEntered: parent.color = hifi.colors.blueHighlight; - onExited: parent.color = hifi.colors.black; + onExited: parent.color = root.activeView === "security" ? hifi.colors.blueAccent : hifi.colors.black; } } @@ -297,7 +342,7 @@ Rectangle { Rectangle { id: helpButtonContainer; visible: !notSetUp.visible; - color: hifi.colors.black; + color: root.activeView === "help" ? hifi.colors.blueAccent : hifi.colors.black; anchors.top: parent.top; anchors.left: securityButtonContainer.right; anchors.bottom: parent.bottom; @@ -324,9 +369,26 @@ Rectangle { hoverEnabled: enabled; onClicked: { root.activeView = "help"; + tabButtonsContainer.resetTabButtonColors(); } onEntered: parent.color = hifi.colors.blueHighlight; - onExited: parent.color = hifi.colors.black; + onExited: parent.color = root.activeView === "help" ? hifi.colors.blueAccent : hifi.colors.black; + } + } + + function resetTabButtonColors() { + accountHomeButtonContainer.color = hifi.colors.black; + sendMoneyButtonContainer.color = hifi.colors.black; + securityButtonContainer.color = hifi.colors.black; + helpButtonContainer.color = hifi.colors.black; + if (root.activeView === "accountHome") { + accountHomeButtonContainer.color = hifi.colors.blueAccent; + } else if (root.activeView === "sendMoney") { + sendMoneyButtonContainer.color = hifi.colors.blueAccent; + } else if (root.activeView === "security") { + securityButtonContainer.color = hifi.colors.blueAccent; + } else if (root.activeView === "help") { + helpButtonContainer.color = hifi.colors.blueAccent; } } }