Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-23 09:33:29 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Almost-working change pages

Browse source
This commit is contained in:
Zach Fox 2017-08-18 16:06:39 -07:00
parent f28544e405
commit c42a658bde
7 changed files with 440 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml
View file

@ -27,6 +27,9 @@ Item {
Hifi.QmlCommerce {
id: commerce;
onSecurityImageResult: {
passphrasePageSecurityImage.source = gridModel.getImagePathFromImageID(imageID);
}
}
onVisibleChanged: {
@ -35,6 +38,10 @@ Item {
}
}
SecurityImageModel {
id: gridModel;
}
HifiControlsUit.TextField {
id: passphraseField;
anchors.top: parent.top;
@ -73,6 +80,10 @@ Item {
width: height;
fillMode: Image.PreserveAspectFit;
mipmap: true;
onVisibleChanged: {
commerce.getSecurityImage();
}
}
// "Security picture" text below pic
RalewayRegular {
@ -175,19 +186,24 @@ Item {
function validateAndSubmitPassphrase() {
if (passphraseField.text.length < 4) {
errorText.text = "Passphrase too short."
setErrorText("Passphrase too short.");
return false;
} else if (passphraseField.text !== passphraseFieldAgain.text) {
errorText.text = "Passphrases don't match."
setErrorText("Passphrases don't match.");
return false;
} else {
errorText.text = "";
setErrorText("");
commerce.setPassphrase(passphraseField.text);
return true;
}
}
function setSecurityImage(imageSource) {
passphrasePageSecurityImage.source = imageSource;
function setErrorText(text) {
errorText.text = text;
}
function clearText() {
passphraseField.text = "";
passphraseFieldAgain.text = "";
}
}

165
interface/resources/qml/hifi/commerce/wallet/PassphraseSelectionLightbox.qml Normal file
View file

@ -0,0 +1,165 @@
//
// PassphraseSelectionLightbox.qml
// qml/hifi/commerce/wallet
//
// PassphraseSelectionLightbox
//
// 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
Rectangle {
HifiConstants { id: hifi; }
id: root;
// Style
color: hifi.colors.baseGray;
Hifi.QmlCommerce {
id: commerce;
onPassphraseSetupStatusResult: {
console.log("ZRF HERE " + passphraseIsSetup);
if (passphraseIsSetup) {
// Success submitting new passphrase
passphraseSubmitButton.enabled = true;
root.visible = false;
} else {
// Error submitting new passphrase
passphraseSubmitButton.enabled = true;
passphraseSelection.setErrorText("Backend error");
}
}
}
//
// SECURE PASSPHRASE SELECTION START
//
Item {
id: choosePassphraseContainer;
// Anchors
anchors.fill: parent;
Item {
id: passphraseTitle;
// Size
width: parent.width;
height: 50;
// Anchors
anchors.left: parent.left;
anchors.top: parent.top;
// Title Bar text
RalewaySemiBold {
text: "CHANGE PASSPHRASE";
// Text size
size: hifi.fontSizes.overlayTitle;
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.bottom: parent.bottom;
width: paintedWidth;
// Style
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
}
// Text below title bar
RalewaySemiBold {
id: passphraseTitleHelper;
text: "Choose a Secure Passphrase";
// Text size
size: 24;
// Anchors
anchors.top: passphraseTitle.bottom;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 50;
// Style
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
PassphraseSelection {
id: passphraseSelection;
anchors.top: passphraseTitleHelper.bottom;
anchors.topMargin: 30;
anchors.left: parent.left;
anchors.right: parent.right;
anchors.bottom: passphraseNavBar.top;
}
// Navigation Bar
Item {
id: passphraseNavBar;
// Size
width: parent.width;
height: 100;
// Anchors:
anchors.left: parent.left;
anchors.bottom: parent.bottom;
// "Cancel" button
HifiControlsUit.Button {
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: 100;
text: "Cancel"
onClicked: {
passphraseSelection.clearText();
root.visible = false;
}
}
// "Submit" button
HifiControlsUit.Button {
id: passphraseSubmitButton;
color: hifi.buttons.black;
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: 100;
text: "Submit";
onClicked: {
if (passphraseSelection.validateAndSubmitPassphrase()) {
passphraseSubmitButton.text = "Submitting...";
passphraseSubmitButton.enabled = false;
}
}
}
}
}
//
// SECURE PASSPHRASE SELECTION END
//
}

32
interface/resources/qml/hifi/commerce/wallet/Security.qml
View file

@ -105,7 +105,7 @@ Item {
}
Item {
id: resetPassphraseContainer;
id: changePassphraseContainer;
anchors.top: securityText.bottom;
anchors.topMargin: 16;
anchors.left: parent.left;
@ -113,7 +113,7 @@ Item {
height: 75;
Image {
id: resetPassphraseImage;
id: changePassphraseImage;
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
@ -122,33 +122,33 @@ Item {
fillMode: Image.PreserveAspectFit;
mipmap: true;
}
// "Reset Passphrase" button
// "Change Passphrase" button
HifiControlsUit.Button {
id: resetPassphraseButton;
id: changePassphraseButton;
color: hifi.buttons.black;
colorScheme: hifi.colorSchemes.dark;
anchors.verticalCenter: parent.verticalCenter;
anchors.left: resetPassphraseImage.right;
anchors.left: changePassphraseImage.right;
anchors.leftMargin: 16;
width: 250;
height: 50;
text: "Reset My Passphrase";
text: "Change My Passphrase";
onClicked: {
sendSignalToWallet({method: 'walletSecurity_changePassphrase'});
}
}
}
Item {
id: resetSecurityImageContainer;
anchors.top: resetPassphraseContainer.bottom;
id: changeSecurityImageContainer;
anchors.top: changePassphraseContainer.bottom;
anchors.topMargin: 8;
anchors.left: parent.left;
anchors.right: parent.right;
height: 75;
Image {
id: resetSecurityImageImage;
id: changeSecurityImageImage;
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
@ -157,19 +157,19 @@ Item {
fillMode: Image.PreserveAspectFit;
mipmap: true;
}
// "Reset Security Image" button
// "Change Security Image" button
HifiControlsUit.Button {
id: resetSecurityImageButton;
id: changeSecurityImageButton;
color: hifi.buttons.black;
colorScheme: hifi.colorSchemes.dark;
anchors.verticalCenter: parent.verticalCenter;
anchors.left: resetSecurityImageImage.right;
anchors.left: changeSecurityImageImage.right;
anchors.leftMargin: 16;
width: 250;
height: 50;
text: "Reset My Security Image";
text: "Change My Security Image";
onClicked: {
sendSignalToWallet({method: 'walletSecurity_changeSecurityImage'});
}
}
}
@ -225,7 +225,7 @@ Item {
//
function setSecurityImages(imagePath) {
topSecurityImage.source = imagePath;
resetSecurityImageImage.source = imagePath;
changeSecurityImageImage.source = imagePath;
}
//
// Function Name: fromScript()

186
interface/resources/qml/hifi/commerce/wallet/SecurityImageSelectionLightbox.qml Normal file
View file

@ -0,0 +1,186 @@
//
// SecurityImageSelectionLightbox.qml
// qml/hifi/commerce/wallet
//
// SecurityImageSelectionLightbox
//
// 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
Rectangle {
HifiConstants { id: hifi; }
id: root;
property bool justSubmitted: false;
// Style
color: hifi.colors.baseGray;
Hifi.QmlCommerce {
id: commerce;
onSecurityImageResult: {
if (imageID !== 0) { // Success submitting new security image
if (root.justSubmitted) {
securityImageSubmitButton.enabled = true;
root.visible = false;
}
} else if (root.lastPage === "securityImage") {
// Error submitting new security image.
securityImageSubmitButton.enabled = true;
root.justSubmitted = false;
}
}
}
//
// SECURITY IMAGE SELECTION START
//
Item {
id: securityImageContainer;
// Anchors
anchors.fill: parent;
Item {
id: securityImageTitle;
// Size
width: parent.width;
height: 50;
// Anchors
anchors.left: parent.left;
anchors.top: parent.top;
// Title Bar text
RalewaySemiBold {
text: "CHANGE SECURITY IMAGE";
// Text size
size: hifi.fontSizes.overlayTitle;
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.bottom: parent.bottom;
width: paintedWidth;
// Style
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
}
// Text below title bar
RalewaySemiBold {
id: securityImageTitleHelper;
text: "Choose a Security Picture:";
// Text size
size: 24;
// Anchors
anchors.top: securityImageTitle.bottom;
anchors.left: parent.left;
anchors.leftMargin: 16;
height: 50;
width: paintedWidth;
// Style
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
SecurityImageSelection {
id: securityImageSelection;
// Anchors
anchors.top: securityImageTitleHelper.bottom;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 280;
}
// Text below security images
RalewayRegular {
text: "<b>Your security picture shows you that the service asking for your passphrase is authorized.</b> You can change your secure picture at any time.";
// Text size
size: 18;
// Anchors
anchors.top: securityImageSelection.bottom;
anchors.topMargin: 40;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: paintedHeight;
// Style
color: hifi.colors.faintGray;
wrapMode: Text.WordWrap;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
// Navigation Bar
Item {
id: securityImageNavBar;
// Size
width: parent.width;
height: 100;
// Anchors:
anchors.left: parent.left;
anchors.bottom: parent.bottom;
// "Cancel" button
HifiControlsUit.Button {
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: 100;
text: "Cancel"
onClicked: {
root.visible = false;
}
}
// "Submit" button
HifiControlsUit.Button {
id: securityImageSubmitButton;
color: hifi.buttons.black;
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: 100;
text: "Submit";
onClicked: {
root.justSubmitted = true;
securityImageSubmitButton.text = "Submitting...";
securityImageSubmitButton.enabled = false;
}
}
}
}
//
// SECURITY IMAGE SELECTION END
//
}

72
interface/resources/qml/hifi/commerce/wallet/Wallet.qml
View file

@ -31,18 +31,15 @@ Rectangle {
color: hifi.colors.baseGray;
Hifi.QmlCommerce {
id: commerce;
onBalanceResult: {
if (failureMessage.length) {
console.log("Failed to get balance", failureMessage);
} else {
hfcBalanceText.text = balance;
}
}
onSecurityImageResult: {
if (imageID !== 0) { // "If security image is set up"
accountHome.setSecurityImage(securityImageModel.getImagePathFromImageID(imageID));
security.setSecurityImages(securityImageModel.getImagePathFromImageID(imageID));
if (walletHome) {
walletHome.setSecurityImage(securityImageModel.getImagePathFromImageID(imageID));
}
if (security) {
security.setSecurityImages(securityImageModel.getImagePathFromImageID(imageID));
}
} else if (root.lastPage === "securityImage") {
// ERROR! Invalid security image.
securityImageContainer.visible = true;
@ -61,7 +58,7 @@ Rectangle {
if (msg.method === 'walletSetup_cancelClicked') {
walletSetupLightbox.visible = false;
} else if (msg.method === 'walletSetup_finished') {
root.activeView = "accountHome";
root.activeView = "walletHome";
} else {
sendToScript(msg);
}
@ -78,7 +75,7 @@ Rectangle {
Rectangle {
id: walletSetupLightboxContainer;
visible: walletSetupLightbox.visible;
visible: walletSetupLightbox.visible || passphraseSelectionLightbox.visible || securityImageSelectionLightbox.visible;
z: 998;
anchors.fill: parent;
color: "black";
@ -92,6 +89,23 @@ Rectangle {
width: walletSetupLightboxContainer.width - 50;
height: walletSetupLightboxContainer.height - 50;
}
PassphraseSelectionLightbox {
id: passphraseSelectionLightbox;
visible: false;
z: 999;
anchors.centerIn: walletSetupLightboxContainer;
width: walletSetupLightboxContainer.width - 50;
height: walletSetupLightboxContainer.height - 50;
}
SecurityImageSelectionLightbox {
id: securityImageSelectionLightbox;
visible: false;
z: 999;
anchors.centerIn: walletSetupLightboxContainer;
width: walletSetupLightboxContainer.width - 50;
height: walletSetupLightboxContainer.height - 50;
}
//
// TITLE BAR START
@ -147,9 +161,9 @@ Rectangle {
anchors.right: parent.right;
}
AccountHome {
id: accountHome;
visible: root.activeView === "accountHome";
WalletHome {
id: walletHome;
visible: root.activeView === "walletHome";
anchors.top: titleBarContainer.bottom;
anchors.topMargin: 16;
anchors.bottom: tabButtonsContainer.top;
@ -185,6 +199,16 @@ Rectangle {
anchors.right: parent.right;
anchors.rightMargin: 16;
}
Connections {
target: security;
onSendSignalToWallet: {
if (msg.method === 'walletSecurity_changePassphrase') {
passphraseSelectionLightbox.visible = true;
} else if (msg.method === 'walletSecurity_changeSecurityImage') {
securityImageSelectionLightbox.visible = true;
}
}
}
Help {
id: help;
@ -224,18 +248,18 @@ Rectangle {
anchors.top: parent.top;
}
// "ACCOUNT HOME" tab button
// "WALLET HOME" tab button
Rectangle {
id: accountHomeButtonContainer;
id: walletHomeButtonContainer;
visible: !notSetUp.visible;
color: root.activeView === "accountHome" ? hifi.colors.blueAccent : hifi.colors.black;
color: root.activeView === "walletHome" ? hifi.colors.blueAccent : hifi.colors.black;
anchors.top: parent.top;
anchors.left: parent.left;
anchors.bottom: parent.bottom;
width: parent.width / tabButtonsContainer.numTabs;
RalewaySemiBold {
text: "ACCOUNT HOME";
text: "WALLET HOME";
// Text size
size: hifi.fontSizes.overlayTitle;
// Anchors
@ -254,11 +278,11 @@ Rectangle {
anchors.fill: parent;
hoverEnabled: enabled;
onClicked: {
root.activeView = "accountHome";
root.activeView = "walletHome";
tabButtonsContainer.resetTabButtonColors();
}
onEntered: parent.color = hifi.colors.blueHighlight;
onExited: parent.color = root.activeView === "accountHome" ? hifi.colors.blueAccent : hifi.colors.black;
onExited: parent.color = root.activeView === "walletHome" ? hifi.colors.blueAccent : hifi.colors.black;
}
}
@ -268,7 +292,7 @@ Rectangle {
visible: !notSetUp.visible;
color: hifi.colors.black;
anchors.top: parent.top;
anchors.left: accountHomeButtonContainer.right;
anchors.left: walletHomeButtonContainer.right;
anchors.bottom: parent.bottom;
width: parent.width / tabButtonsContainer.numTabs;
@ -393,12 +417,12 @@ Rectangle {
}
function resetTabButtonColors() {
accountHomeButtonContainer.color = hifi.colors.black;
walletHomeButtonContainer.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;
if (root.activeView === "walletHome") {
walletHomeButtonContainer.color = hifi.colors.blueAccent;
} else if (root.activeView === "sendMoney") {
sendMoneyButtonContainer.color = hifi.colors.blueAccent;
} else if (root.activeView === "security") {

6
interface/resources/qml/hifi/commerce/wallet/AccountHome.qml → interface/resources/qml/hifi/commerce/wallet/WalletHome.qml
View file

@ -142,7 +142,7 @@ Item {
width: 75;
height: childrenRect.height;
Image {
id: passphrasePageSecurityImage;
id: securityImage;
// Anchors
anchors.top: parent.top;
anchors.horizontalCenter: parent.horizontalCenter;
@ -157,7 +157,7 @@ Item {
// Text size
size: 12;
// Anchors
anchors.top: passphrasePageSecurityImage.bottom;
anchors.top: securityImage.bottom;
anchors.topMargin: 4;
anchors.left: securityImageContainer.left;
anchors.right: securityImageContainer.right;
@ -309,7 +309,7 @@ Item {
// FUNCTION DEFINITIONS START
//
function setSecurityImage(imagePath) {
passphrasePageSecurityImage.source = imagePath;
securityImage.source = imagePath;
}
//
// Function Name: fromScript()

4
interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml
View file

@ -40,9 +40,7 @@ Rectangle {
}
onSecurityImageResult: {
if (imageID !== 0) { // "If security image is set up"
passphraseSelection.setSecurityImage(securityImageSelection.getImagePathFromImageID(imageID));
} else if (root.lastPage === "securityImage") {
if (imageID === 0 && root.lastPage === "securityImage") {
// ERROR! Invalid security image.
securityImageContainer.visible = true;
choosePassphraseContainer.visible = false;