Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-22 12:13:28 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions2

Nearby UI

Browse source
This commit is contained in:
Zach Fox 2018-01-19 14:49:28 -08:00
parent 495c4f56e2
commit 4d408a8df5
3 changed files with 156 additions and 120 deletions
interface/resources/qml/hifi/commerce/wallet/sendMoney
SendMoney.qml
images
p2p-nearby-selected.svgp2p-nearby-unselected.svg

219
interface/resources/qml/hifi/commerce/wallet/sendMoney/SendMoney.qml
View file

@ -553,163 +553,142 @@ Item {
}
}
Item {
id: selectionInstructionsContainer;
visible: chooseRecipientNearby.selectedRecipient === "";
anchors.fill: parent;
RalewaySemiBold {
id: selectionInstructions_deselected;
text: "Click/trigger on an avatar nearby to select them...";
// Anchors
anchors.bottom: parent.bottom;
anchors.bottomMargin: 200;
anchors.left: parent.left;
anchors.leftMargin: 58;
anchors.right: parent.right;
anchors.rightMargin: anchors.leftMargin;
height: paintedHeight;
// Text size
size: 20;
// Style
color: hifi.colors.baseGray;
horizontalAlignment: Text.AlignHCenter;
wrapMode: Text.Wrap;
}
RalewaySemiBold {
id: selectionInstructions;
text: chooseRecipientNearby.selectedRecipient === "" ? "Trigger or click on\nsomeone nearby to select them" :
"Trigger or click on\nsomeone else to select again";
// Anchors
anchors.top: parent.top;
anchors.topMargin: 100;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: anchors.leftMargin;
height: paintedHeight;
// Text size
size: 20;
// Style
color: hifi.colors.baseGray;
horizontalAlignment: Text.AlignHCenter;
wrapMode: Text.Wrap;
}
Item {
Image {
anchors.top: selectionInstructions.bottom;
anchors.topMargin: 20;
anchors.bottom: selectionMadeContainer.top;
anchors.bottomMargin: 30;
source: "./images/p2p-nearby-unselected.svg";
width: parent.width;
fillMode: Image.PreserveAspectFit;
horizontalAlignment: Image.AlignHCenter;
verticalAlignment: Image.AlignVCenter;
mipmap: true;
}
Rectangle {
id: selectionMadeContainer;
visible: !selectionInstructionsContainer.visible;
anchors.fill: parent;
visible: chooseRecipientNearby.selectedRecipient !== "";
anchors.bottom: parent.bottom;
anchors.left: parent.left;
anchors.right: parent.right;
height: 190;
color: "#F3F3F3";
radius: 8;
// Used to square off the top left and top right edges of this container
Rectangle {
color: "#F3F3F3";
height: selectionMadeContainer.radius;
anchors.top: selectionMadeContainer.top;
anchors.left: selectionMadeContainer.left;
anchors.right: selectionMadeContainer.right;
}
RalewaySemiBold {
id: sendToText;
text: "Send To:";
text: "Send to:";
// Anchors
anchors.top: parent.top;
anchors.topMargin: 120;
anchors.topMargin: 36;
anchors.left: parent.left;
anchors.leftMargin: 12;
anchors.leftMargin: 36;
width: paintedWidth;
height: paintedHeight;
// Text size
size: 20;
size: 18;
// Style
color: hifi.colors.baseGray;
}
Image {
id: selectedImage;
anchors.top: parent.top;
anchors.topMargin: 24;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 32;
anchors.left: sendToText.right;
anchors.leftMargin: 4;
source: "./images/p2p-nearby-selected.svg";
width: 50;
fillMode: Image.PreserveAspectFit;
horizontalAlignment: Image.AlignHCenter;
verticalAlignment: Image.AlignVCenter;
mipmap: true;
}
RalewaySemiBold {
id: avatarDisplayName;
text: '"' + AvatarList.getAvatar(chooseRecipientNearby.selectedRecipient).sessionDisplayName + '"';
// Anchors
anchors.top: sendToText.bottom;
anchors.topMargin: 60;
anchors.left: parent.left;
anchors.leftMargin: 30;
anchors.top: parent.top;
anchors.topMargin: 34;
anchors.left: selectedImage.right;
anchors.leftMargin: 10;
anchors.right: parent.right;
anchors.rightMargin: 30;
anchors.rightMargin: 10;
height: paintedHeight;
// Text size
size: 22;
size: 20;
// Style
horizontalAlignment: Text.AlignHCenter;
color: hifi.colors.baseGray;
}
RalewaySemiBold {
id: avatarNodeID;
text: chooseRecipientNearby.selectedRecipient;
// Anchors
anchors.top: avatarDisplayName.bottom;
anchors.topMargin: 6;
anchors.left: parent.left;
anchors.leftMargin: 30;
anchors.right: parent.right;
anchors.rightMargin: 30;
height: paintedHeight;
// Text size
size: 14;
// Style
horizontalAlignment: Text.AlignHCenter;
color: hifi.colors.lightGrayText;
color: hifi.colors.blueAccent;
}
RalewaySemiBold {
id: avatarUserName;
text: sendMoneyStep.selectedRecipientUserName;
// Anchors
anchors.top: avatarNodeID.bottom;
anchors.topMargin: 12;
anchors.left: parent.left;
anchors.leftMargin: 30;
anchors.top: avatarDisplayName.bottom;
anchors.topMargin: 16;
anchors.left: selectedImage.right;
anchors.leftMargin: 10;
anchors.right: parent.right;
anchors.rightMargin: 30;
anchors.rightMargin: 10;
height: paintedHeight;
// Text size
size: 22;
size: 18;
// Style
horizontalAlignment: Text.AlignHCenter;
color: hifi.colors.baseGray;
}
RalewaySemiBold {
id: selectionInstructions_selected;
text: "Click/trigger on another avatar nearby to select them...\n\nor press 'Next' to continue.";
// Anchors
// "CHOOSE" button
HifiControlsUit.Button {
id: chooseButton;
color: hifi.buttons.blue;
colorScheme: hifi.colorSchemes.dark;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 200;
anchors.left: parent.left;
anchors.leftMargin: 58;
anchors.right: parent.right;
anchors.rightMargin: anchors.leftMargin;
height: paintedHeight;
// Text size
size: 20;
// Style
color: hifi.colors.baseGray;
horizontalAlignment: Text.AlignHCenter;
wrapMode: Text.Wrap;
}
}
anchors.bottomMargin: 20;
height: 40;
width: 110;
text: "CHOOSE";
onClicked: {
sendMoneyStep.referrer = "nearby";
sendMoneyStep.selectedRecipientNodeID = chooseRecipientNearby.selectedRecipient;
chooseRecipientNearby.selectedRecipient = "";
// "Cancel" button
HifiControlsUit.Button {
id: cancelButton;
color: hifi.buttons.noneBorderless;
colorScheme: hifi.colorSchemes.dark;
anchors.left: parent.left;
anchors.leftMargin: 60;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 80;
height: 50;
width: 120;
text: "Cancel";
onClicked: {
root.nextActiveView = "sendMoneyHome";
resetSendMoneyData();
}
}
// "Next" button
HifiControlsUit.Button {
id: nextButton;
enabled: chooseRecipientNearby.selectedRecipient !== "";
color: hifi.buttons.blue;
colorScheme: hifi.colorSchemes.dark;
anchors.right: parent.right;
anchors.rightMargin: 60;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 80;
height: 50;
width: 120;
text: "Next";
onClicked: {
sendMoneyStep.referrer = "nearby";
sendMoneyStep.selectedRecipientNodeID = chooseRecipientNearby.selectedRecipient;
chooseRecipientNearby.selectedRecipient = "";
root.nextActiveView = "sendMoneyStep";
root.nextActiveView = "sendMoneyStep";
}
}
}
}
@ -790,7 +769,7 @@ Item {
HifiControlsUit.Button {
id: changeButton;
color: hifi.buttons.none;
colorScheme: hifi.colorSchemes.white;
colorScheme: hifi.colorSchemes.dark;
anchors.right: parent.right;
anchors.verticalCenter: parent.verticalCenter;
height: 35;
@ -1086,7 +1065,7 @@ Item {
HiFiGlyphs {
id: closeGlyphButton_paymentSuccess;
text: hifi.glyphs.close;
color: lightGrayText;
color: hifi.colors.lightGrayText;
size: 26;
anchors.top: parent.top;
anchors.topMargin: 10;

27
interface/resources/qml/hifi/commerce/wallet/sendMoney/images/p2p-nearby-selected.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 143.1 414.2" style="enable-background:new 0 0 143.1 414.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B9B9B9;}
.st1{fill:#EE982D;}
.st2{fill:#FF630A;}
</style>
<path class="st0" d="M78.8,7.1c3.9,4.3,7.7,8.7,11.8,12.9c3.7,3.8,5.1,7.9,4.4,12.9c-1,7.1-1.8,14-7.1,20.1
c-4.2,4.7-1.3,12,4.6,14.5c5.6,2.3,11.1,4.6,16.7,7c8.1,3.5,12.3,9.6,13.2,17.4c0.8,6.3,0.8,12.6,1.2,18.9c0.1,2.2,0.3,4.3,0.7,6.4
c0.3,2.2,1.9,4.4-1.3,6.1c-0.6,0.3-0.6,2.2-0.3,3.3c5.4,25.1-0.3,49.7-4.9,74.3c-1.2,6.3-3.1,12-5.5,17.9
c-2.3,5.5-0.9,12.4-0.4,18.7c0.6,7.8,2,15.5,3.2,23.7c-2.5,0.5-4.5,1.4-6.3,1.2c-6.1-0.5-6.8,2.6-6.4,6.7c0.7,6.6,1.1,13.3,2.4,19.8
c0.6,3.3,3.5,6.1,4.5,9.4c5,15.6,1.1,30.9-1.3,46.5c-1.7,10.6-0.6,21.5-1.5,32.2c-0.5,6.5-1.5,13.3-4,19.4c-2.2,5.4-9,3.9-14.1,4
c-2.8,0.1-5.6-0.3-8.2-1.1c-1.2-0.3-2.6-2.2-2.5-3.3c0.1-1.9,0.7-4.1,1.9-5.7c11.5-16,9.1-33.7,8.2-51.2c-0.5-9.8-1.6-19.6-2.9-29.3
c-1.2-8.8-3.1-17.5-5-26.2c-1.2-5.5-3.4-10.9-4.4-16.5c-0.8-3.9-2.4-5.3-7.4-3.8c-0.5,8.5-3.1,17.7-0.9,25.9
c2.7,10.1,4.5,20,3.3,30.2c-1,8.8-2.9,17.5-3.9,26.2c-0.7,6.6-1.1,13,1.7,19.8c2.4,5.9,0.6,13.1,0.3,19.7c0,0.9-2.1,2.3-3.4,2.5
c-4.8,0.7-9.8,0.8-14.5,1.6c-5.1,0.9-9.9,3-15,3.6c-5.7,0.6-11.5,0.1-17.3,0.1c-2.4-4,0-6.2,3.2-8.4c6.9-4.5,13.7-9,20.5-13.6
c6.4-4.4,7.5-10.2,6.6-17.1c-2.1-17.2-6.4-34.1-5.2-51.6c0.8-11.3-0.7-22.5-4.2-33.5c-1.7-5.2-3.4-9.1-10.4-7.8
c-0.4-0.8-0.9-1.2-0.9-1.7c-0.4-17.6-1.7-35.3-0.9-52.9c0.6-12.6,3.9-25,6-37.5c0.1-0.6,0.9-1.5,0.7-1.8c-5-8,2.9-15.7,0.6-23.9
c-2.2-8-3.5-16.4-3.7-24.6c-0.2-6.9,2.3-13.8,2.8-20.7c0.8-12.2,8.8-18.8,20.6-23c7.3-2.6,9.1-5.2,8.2-11.3c-0.1-1.1-0.6-2.7-1.4-3
c-10-4.1-8.9-12.3-9.9-19.9c-0.9-7.2-2.7-14.2-3.6-21.4c-0.3-2.9,0.2-5.9,3.6-8.1c6.4-4,13.1-5.3,20.7-3.4
C73.7,8.3,76.3,7.4,78.8,7.1z M107.1,130.2c-1,0-2,0.1-3.1,0.1c0,3.1-0.2,6.1,0,9.2c0.7,9.3,5.9,19-2.4,27.7
c-0.2,0.2-0.2,0.6-0.1,0.9c1.9,7.2,3.8,14.5,5.6,21.7c0.7-0.1,1.4-0.1,2.1-0.2C108.5,169.9,107.8,150,107.1,130.2z"/>
<circle class="st1" cx="70.9" cy="109.9" r="26"/>
<circle class="st2" cx="70.9" cy="109.9" r="19"/>
</svg>
Side by side

After

(image error) Size: 2.3 KiB

30
interface/resources/qml/hifi/commerce/wallet/sendMoney/images/p2p-nearby-unselected.svg Normal file
View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 143.1 414.2" style="enable-background:new 0 0 143.1 414.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B9B9B9;}
.st1{fill:#009175;}
.st2{fill:#1FC6A6;}
.st3{fill:#FFFFFF;}
</style>
<path class="st0" d="M78.8,7.1c3.9,4.3,7.7,8.7,11.8,12.9c3.7,3.8,5.1,7.9,4.4,12.9c-1,7.1-1.8,14-7.1,20.1
c-4.2,4.7-1.3,12,4.6,14.5c5.6,2.3,11.1,4.6,16.7,7c8.1,3.5,12.3,9.6,13.2,17.4c0.8,6.3,0.8,12.6,1.2,18.9c0.1,2.2,0.3,4.3,0.7,6.4
c0.3,2.2,1.9,4.4-1.3,6.1c-0.6,0.3-0.6,2.2-0.3,3.3c5.4,25.1-0.3,49.7-4.9,74.3c-1.2,6.3-3.1,12-5.5,17.9
c-2.3,5.5-0.9,12.4-0.4,18.7c0.6,7.8,2,15.5,3.2,23.7c-2.5,0.5-4.5,1.4-6.3,1.2c-6.1-0.5-6.8,2.6-6.4,6.7c0.7,6.6,1.1,13.3,2.4,19.8
c0.6,3.3,3.5,6.1,4.5,9.4c5,15.6,1.1,30.9-1.3,46.5c-1.7,10.6-0.6,21.5-1.5,32.2c-0.5,6.5-1.5,13.3-4,19.4c-2.2,5.4-9,3.9-14.1,4
c-2.8,0.1-5.6-0.3-8.2-1.1c-1.2-0.3-2.6-2.2-2.5-3.3c0.1-1.9,0.7-4.1,1.9-5.7c11.5-16,9.1-33.7,8.2-51.2c-0.5-9.8-1.6-19.6-2.9-29.3
c-1.2-8.8-3.1-17.5-5-26.2c-1.2-5.5-3.4-10.9-4.4-16.5c-0.8-3.9-2.4-5.3-7.4-3.8c-0.5,8.5-3.1,17.7-0.9,25.9
c2.7,10.1,4.5,20,3.3,30.2c-1,8.8-2.9,17.5-3.9,26.2c-0.7,6.6-1.1,13,1.7,19.8c2.4,5.9,0.6,13.1,0.3,19.7c0,0.9-2.1,2.3-3.4,2.5
c-4.8,0.7-9.8,0.8-14.5,1.6c-5.1,0.9-9.9,3-15,3.6c-5.7,0.6-11.5,0.1-17.3,0.1c-2.4-4,0-6.2,3.2-8.4c6.9-4.5,13.7-9,20.5-13.6
c6.4-4.4,7.5-10.2,6.6-17.1c-2.1-17.2-6.4-34.1-5.2-51.6c0.8-11.3-0.7-22.5-4.2-33.5c-1.7-5.2-3.4-9.1-10.4-7.8
c-0.4-0.8-0.9-1.2-0.9-1.7c-0.4-17.6-1.7-35.3-0.9-52.9c0.6-12.6,3.9-25,6-37.5c0.1-0.6,0.9-1.5,0.7-1.8c-5-8,2.9-15.7,0.6-23.9
c-2.2-8-3.5-16.4-3.7-24.6c-0.2-6.9,2.3-13.8,2.8-20.7c0.8-12.2,8.8-18.8,20.6-23c7.3-2.6,9.1-5.2,8.2-11.3c-0.1-1.1-0.6-2.7-1.4-3
c-10-4.1-8.9-12.3-9.9-19.9c-0.9-7.2-2.7-14.2-3.6-21.4c-0.3-2.9,0.2-5.9,3.6-8.1c6.4-4,13.1-5.3,20.7-3.4
C73.7,8.3,76.3,7.4,78.8,7.1z M107.1,130.2c-1,0-2,0.1-3.1,0.1c0,3.1-0.2,6.1,0,9.2c0.7,9.3,5.9,19-2.4,27.7
c-0.2,0.2-0.2,0.6-0.1,0.9c1.9,7.2,3.8,14.5,5.6,21.7c0.7-0.1,1.4-0.1,2.1-0.2C108.5,169.9,107.8,150,107.1,130.2z"/>
<circle class="st1" cx="70.9" cy="109.9" r="26"/>
<circle class="st2" cx="70.9" cy="109.9" r="23"/>
<path class="st3" d="M70.9,127.8c-9.9,0-17.9-8-17.9-17.9s8-17.9,17.9-17.9s17.9,8,17.9,17.9S80.7,127.8,70.9,127.8z M70.9,94.8
c-8.3,0-15.1,6.8-15.1,15.1s6.8,15.1,15.1,15.1S86,118.3,86,109.9S79.2,94.8,70.9,94.8z"/>
</svg>
Side by side

After

(image error) Size: 2.5 KiB