Updates from wireframes

This commit is contained in:
Zach Fox 2017-08-18 13:37:06 -07:00
parent 1a62f60348
commit 9636fad679
8 changed files with 656 additions and 88 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 52 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 56 KiB

View file

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

View file

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

View file

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

View file

@ -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

View file

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

View file

@ -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);