diff --git a/interface/resources/icons/tablet-icons/wallet-a.svg b/interface/resources/icons/tablet-icons/wallet-a.svg
new file mode 100644
index 0000000000..4a0bab4b33
--- /dev/null
+++ b/interface/resources/icons/tablet-icons/wallet-a.svg
@@ -0,0 +1,180 @@
+
+
diff --git a/interface/resources/icons/tablet-icons/wallet-i.svg b/interface/resources/icons/tablet-icons/wallet-i.svg
new file mode 100644
index 0000000000..2a16ecf973
--- /dev/null
+++ b/interface/resources/icons/tablet-icons/wallet-i.svg
@@ -0,0 +1,276 @@
+
+
+
+
diff --git a/interface/resources/qml/hifi/commerce/wallet/AccountHome.qml b/interface/resources/qml/hifi/commerce/wallet/AccountHome.qml
index 2a0effb47c..f7c67403a4 100644
--- a/interface/resources/qml/hifi/commerce/wallet/AccountHome.qml
+++ b/interface/resources/qml/hifi/commerce/wallet/AccountHome.qml
@@ -35,18 +35,6 @@ Item {
usernameText.text = Account.username;
}
}
-
- // Security Image
- Image {
- id: passphrasePageSecurityImage;
- // Anchors
- anchors.top: parent.top;
- anchors.left: parent.left;
- height: 65;
- width: height;
- fillMode: Image.PreserveAspectFit;
- mipmap: true;
- }
// Username Text
RalewayRegular {
@@ -58,19 +46,119 @@ Item {
color: hifi.colors.faintGray;
elide: Text.ElideRight;
// Anchors
- anchors.top: passphrasePageSecurityImage.top;
- anchors.bottom: passphrasePageSecurityImage.bottom;
- anchors.left: passphrasePageSecurityImage.right;
- anchors.leftMargin: 16;
+ anchors.top: securityImageContainer.top;
+ anchors.bottom: securityImageContainer.bottom;
+ anchors.left: parent.left;
anchors.right: hfcBalanceContainer.left;
}
-
- Rectangle {
+
+ // HFC Balance Container
+ Item {
id: hfcBalanceContainer;
- anchors.right: parent.right;
- anchors.verticalCenter: passphrasePageSecurityImage.verticalCenter;
+ // Anchors
+ anchors.top: securityImageContainer.top;
+ anchors.right: securityImageContainer.left;
+ anchors.rightMargin: 16;
width: 175;
- height: 45;
+ height: 60;
+ Rectangle {
+ id: hfcBalanceField;
+ anchors.right: parent.right;
+ anchors.left: parent.left;
+ anchors.bottom: parent.bottom;
+ height: parent.height - 15;
+
+ // "HFC" balance label
+ RalewayRegular {
+ id: balanceLabel;
+ text: "HFC";
+ // Text size
+ size: 20;
+ // Anchors
+ anchors.top: parent.top;
+ anchors.bottom: parent.bottom;
+ anchors.right: hfcBalanceField.right;
+ anchors.rightMargin: 4;
+ width: paintedWidth;
+ // Style
+ color: hifi.colors.darkGray;
+ // Alignment
+ horizontalAlignment: Text.AlignRight;
+ verticalAlignment: Text.AlignVCenter;
+ }
+
+ // Balance Text
+ FiraSansRegular {
+ text: "0.00";
+ // Text size
+ size: 28;
+ // Anchors
+ anchors.top: parent.top;
+ anchors.bottom: parent.bottom;
+ anchors.left: parent.left;
+ anchors.right: balanceLabel.left;
+ anchors.rightMargin: 4;
+ // Style
+ color: hifi.colors.darkGray;
+ // Alignment
+ horizontalAlignment: Text.AlignRight;
+ verticalAlignment: Text.AlignVCenter;
+ }
+ }
+ // "balance" text above field
+ RalewayRegular {
+ text: "balance";
+ // Text size
+ size: 12;
+ // Anchors
+ anchors.top: parent.top;
+ anchors.bottom: hfcBalanceField.top;
+ anchors.bottomMargin: 4;
+ anchors.left: hfcBalanceField.left;
+ anchors.right: hfcBalanceField.right;
+ // Style
+ color: hifi.colors.faintGray;
+ // Alignment
+ horizontalAlignment: Text.AlignLeft;
+ verticalAlignment: Text.AlignVCenter;
+ }
+ }
+
+ // Security Image
+ Item {
+ id: securityImageContainer;
+ // Anchors
+ anchors.top: parent.top;
+ anchors.right: parent.right;
+ width: 75;
+ height: childrenRect.height;
+ Image {
+ id: passphrasePageSecurityImage;
+ // Anchors
+ anchors.top: parent.top;
+ anchors.horizontalCenter: parent.horizontalCenter;
+ height: parent.width - 10;
+ width: height;
+ fillMode: Image.PreserveAspectFit;
+ mipmap: true;
+ }
+ // "Security picture" text below pic
+ RalewayRegular {
+ text: "security picture";
+ // Text size
+ size: 12;
+ // Anchors
+ anchors.top: passphrasePageSecurityImage.bottom;
+ anchors.topMargin: 4;
+ anchors.left: securityImageContainer.left;
+ anchors.right: securityImageContainer.right;
+ height: paintedHeight;
+ // Style
+ color: hifi.colors.faintGray;
+ // Alignment
+ horizontalAlignment: Text.AlignHCenter;
+ verticalAlignment: Text.AlignVCenter;
+ }
}
//
diff --git a/interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml b/interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml
index c323defef7..13f72b8b2c 100644
--- a/interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml
+++ b/interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml
@@ -41,8 +41,7 @@ Item {
anchors.topMargin: 30;
anchors.left: parent.left;
anchors.leftMargin: 16;
- anchors.right: parent.right;
- anchors.rightMargin: 16;
+ width: 280;
height: 50;
echoMode: TextInput.Password;
placeholderText: "passphrase";
@@ -51,14 +50,49 @@ Item {
id: passphraseFieldAgain;
anchors.top: passphraseField.bottom;
anchors.topMargin: 10;
- anchors.left: parent.left;
- anchors.leftMargin: 16;
- anchors.right: parent.right;
- anchors.rightMargin: 16;
+ anchors.left: passphraseField.left;
+ anchors.right: passphraseField.right;
height: 50;
echoMode: TextInput.Password;
placeholderText: "re-enter passphrase";
}
+
+ // Security Image
+ Item {
+ id: securityImageContainer;
+ // Anchors
+ anchors.top: passphraseField.top;
+ anchors.left: passphraseField.right;
+ anchors.leftMargin: 12;
+ anchors.right: parent.right;
+ Image {
+ id: passphrasePageSecurityImage;
+ anchors.top: parent.top;
+ anchors.horizontalCenter: parent.horizontalCenter;
+ height: 75;
+ width: height;
+ fillMode: Image.PreserveAspectFit;
+ mipmap: true;
+ }
+ // "Security picture" text below pic
+ RalewayRegular {
+ text: "security picture";
+ // Text size
+ size: 12;
+ // Anchors
+ anchors.top: passphrasePageSecurityImage.bottom;
+ anchors.topMargin: 4;
+ anchors.left: securityImageContainer.left;
+ anchors.right: securityImageContainer.right;
+ height: paintedHeight;
+ // Style
+ color: hifi.colors.faintGray;
+ // Alignment
+ horizontalAlignment: Text.AlignHCenter;
+ verticalAlignment: Text.AlignVCenter;
+ }
+ }
+
// Error text below TextFields
RalewaySemiBold {
id: errorText;
@@ -152,4 +186,8 @@ Item {
return true;
}
}
+
+ function setSecurityImage(imageSource) {
+ passphrasePageSecurityImage.source = imageSource;
+ }
}
diff --git a/interface/resources/qml/hifi/commerce/wallet/Security.qml b/interface/resources/qml/hifi/commerce/wallet/Security.qml
index 444420dcdf..1ef05f4b7a 100644
--- a/interface/resources/qml/hifi/commerce/wallet/Security.qml
+++ b/interface/resources/qml/hifi/commerce/wallet/Security.qml
@@ -28,18 +28,6 @@ Item {
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 {
@@ -51,16 +39,52 @@ Item {
color: hifi.colors.faintGray;
elide: Text.ElideRight;
// Anchors
- anchors.top: topSecurityImage.top;
- anchors.bottom: topSecurityImage.bottom;
- anchors.left: topSecurityImage.right;
- anchors.leftMargin: 16;
+ anchors.top: securityImageContainer.top;
+ anchors.bottom: securityImageContainer.bottom;
+ anchors.left: parent.left;
+ anchors.right: securityImageContainer.left;
+ }
+
+ // Security Image
+ Item {
+ id: securityImageContainer;
+ // Anchors
+ anchors.top: parent.top;
anchors.right: parent.right;
+ width: 75;
+ height: childrenRect.height;
+ Image {
+ id: topSecurityImage;
+ // Anchors
+ anchors.top: parent.top;
+ anchors.horizontalCenter: parent.horizontalCenter;
+ height: parent.width - 10;
+ width: height;
+ fillMode: Image.PreserveAspectFit;
+ mipmap: true;
+ }
+ // "Security picture" text below pic
+ RalewayRegular {
+ text: "security picture";
+ // Text size
+ size: 12;
+ // Anchors
+ anchors.top: topSecurityImage.bottom;
+ anchors.topMargin: 4;
+ anchors.left: securityImageContainer.left;
+ anchors.right: securityImageContainer.right;
+ height: paintedHeight;
+ // Style
+ color: hifi.colors.faintGray;
+ // Alignment
+ horizontalAlignment: Text.AlignHCenter;
+ verticalAlignment: Text.AlignVCenter;
+ }
}
Item {
id: securityContainer;
- anchors.top: topSecurityImage.bottom;
+ anchors.top: securityImageContainer.bottom;
anchors.topMargin: 20;
anchors.left: parent.left;
anchors.right: parent.right;
diff --git a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml b/interface/resources/qml/hifi/commerce/wallet/Wallet.qml
index 1f76d5cfa4..967d3c6608 100644
--- a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml
+++ b/interface/resources/qml/hifi/commerce/wallet/Wallet.qml
@@ -266,7 +266,7 @@ Rectangle {
Rectangle {
id: sendMoneyButtonContainer;
visible: !notSetUp.visible;
- color: root.activeView === "sendMoney" ? hifi.colors.blueAccent : hifi.colors.black;
+ color: hifi.colors.black;
anchors.top: parent.top;
anchors.left: accountHomeButtonContainer.right;
anchors.bottom: parent.bottom;
@@ -281,23 +281,12 @@ Rectangle {
anchors.leftMargin: 4;
anchors.rightMargin: 4;
// Style
- color: hifi.colors.faintGray;
+ color: hifi.colors.lightGray50;
wrapMode: Text.WordWrap;
// Alignment
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
}
- MouseArea {
- enabled: !walletSetupLightboxContainer.visible;
- anchors.fill: parent;
- hoverEnabled: enabled;
- onClicked: {
- root.activeView = "sendMoney";
- tabButtonsContainer.resetTabButtonColors();
- }
- onEntered: parent.color = hifi.colors.blueHighlight;
- onExited: parent.color = root.activeView === "sendMoney" ? hifi.colors.blueAccent : hifi.colors.black;
- }
}
// "SECURITY" tab button
diff --git a/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml b/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml
index 3f319d7a6c..bf624609c6 100644
--- a/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml
+++ b/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml
@@ -41,8 +41,7 @@ Rectangle {
onSecurityImageResult: {
if (imageID !== 0) { // "If security image is set up"
- passphrasePageSecurityImage.source = securityImageSelection.getImagePathFromImageID(imageID);
- keysReadyPageSecurityImage.source = securityImageSelection.getImagePathFromImageID(imageID);
+ passphraseSelection.setSecurityImage(securityImageSelection.getImagePathFromImageID(imageID));
} else if (root.lastPage === "securityImage") {
// ERROR! Invalid security image.
securityImageContainer.visible = true;
@@ -435,21 +434,6 @@ Rectangle {
securityImageContainer.visible = true;
}
}
-
-
- // Security Image
- Image {
- id: passphrasePageSecurityImage;
- // Anchors
- anchors.top: parent.top;
- anchors.topMargin: 3;
- anchors.right: passphrasePageNextButton.left;
- height: passphrasePageNextButton.height;
- width: height;
- anchors.verticalCenter: parent.verticalCenter;
- fillMode: Image.PreserveAspectFit;
- mipmap: true;
- }
// "Next" button
HifiControlsUit.Button {
@@ -567,19 +551,6 @@ Rectangle {
// Anchors:
anchors.left: parent.left;
anchors.bottom: parent.bottom;
- // Security Image
- Image {
- id: keysReadyPageSecurityImage;
- // Anchors
- anchors.top: parent.top;
- anchors.topMargin: 3;
- anchors.right: keysReadyPageNextButton.left;
- height: keysReadyPageNextButton.height;
- width: height;
- anchors.verticalCenter: parent.verticalCenter;
- fillMode: Image.PreserveAspectFit;
- mipmap: true;
- }
// "Next" button
HifiControlsUit.Button {
id: keysReadyPageNextButton;
diff --git a/scripts/system/commerce/wallet.js b/scripts/system/commerce/wallet.js
index 3cdb419f7c..6045bef8ef 100644
--- a/scripts/system/commerce/wallet.js
+++ b/scripts/system/commerce/wallet.js
@@ -122,7 +122,9 @@
function startup() {
tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
button = tablet.addButton({
- text: buttonName
+ text: buttonName,
+ icon: "icons/tablet-icons/wallet-i.svg",
+ activeIcon: "icons/tablet-icons/wallet-a.svg"
});
button.clicked.connect(onButtonClicked);
tablet.screenChanged.connect(onTabletScreenChanged);