mirror of
https://github.com/overte-org/overte.git
synced 2025-04-16 13:56:24 +02:00
Updates from wireframes
This commit is contained in:
parent
1a62f60348
commit
9636fad679
8 changed files with 656 additions and 88 deletions
180
interface/resources/icons/tablet-icons/wallet-a.svg
Normal file
180
interface/resources/icons/tablet-icons/wallet-a.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 52 KiB |
276
interface/resources/icons/tablet-icons/wallet-i.svg
Normal file
276
interface/resources/icons/tablet-icons/wallet-i.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 56 KiB |
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue