Merge pull request #12223 from zfox23/commerce_sendMoney2

Commerce: Pixel-perfect "Send Money" UI
This commit is contained in:
John Conklin II 2018-01-22 09:39:23 -08:00 committed by GitHub
commit 8b461b960f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 620 additions and 426 deletions

View file

@ -24,10 +24,13 @@ TextField {
property bool isSearchField: false
property string label: ""
property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height + 1 : 0)
property bool hasDefocusedBorder: true;
property bool hasRoundedBorder: false
property int roundedBorderRadius: 4
property bool error: false;
property bool hasClearButton: false;
property string leftPlaceholderGlyph: "";
property string leftPermanentGlyph: "";
property string centerPlaceholderGlyph: "";
placeholderText: textField.placeholderText
@ -101,12 +104,12 @@ TextField {
}
}
border.color: textField.error ? hifi.colors.redHighlight :
(textField.activeFocus ? hifi.colors.primaryHighlight : (isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray))
(textField.activeFocus ? hifi.colors.primaryHighlight : (hasDefocusedBorder ? (isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray) : color))
border.width: textField.activeFocus || hasRoundedBorder || textField.error ? 1 : 0
radius: isSearchField ? textField.height / 2 : (hasRoundedBorder ? 4 : 0)
radius: isSearchField ? textField.height / 2 : (hasRoundedBorder ? roundedBorderRadius : 0)
HiFiGlyphs {
text: textField.leftPlaceholderGlyph;
text: textField.leftPermanentGlyph;
color: textColor;
size: hifi.fontSizes.textFieldSearchIcon;
anchors.left: parent.left;
@ -115,6 +118,15 @@ TextField {
visible: text;
}
HiFiGlyphs {
text: textField.centerPlaceholderGlyph;
color: textColor;
size: parent.height;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.verticalCenter: parent.verticalCenter;
visible: text && !textField.focus && textField.text === "";
}
HiFiGlyphs {
text: hifi.glyphs.search
color: textColor
@ -145,7 +157,7 @@ TextField {
placeholderTextColor: isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray
selectedTextColor: hifi.colors.black
selectionColor: hifi.colors.primaryHighlight
padding.left: ((isSearchField || textField.leftPlaceholderGlyph !== "") ? textField.height - 2 : 0) + hifi.dimensions.textPadding
padding.left: hasRoundedBorder ? textField.height / 2 : ((isSearchField || textField.leftPermanentGlyph !== "") ? textField.height - 2 : 0) + hifi.dimensions.textPadding
padding.right: (hasClearButton ? textField.height - 2 : 0) + hifi.dimensions.textPadding
}

View file

@ -389,7 +389,7 @@ Rectangle {
//
Item {
id: tabButtonsContainer;
visible: !needsLogIn.visible && root.activeView !== "passphraseChange" && root.activeView !== "securityImageChange";
visible: !needsLogIn.visible && root.activeView !== "passphraseChange" && root.activeView !== "securityImageChange" && sendMoney.currentActiveView !== "sendMoneyStep";
property int numTabs: 5;
// Size
width: root.width;

View file

@ -29,13 +29,13 @@ Item {
property string userName;
property string profilePicUrl;
height: 65;
height: 75;
width: parent.width;
Rectangle {
id: mainContainer;
// Style
color: root.isSelected ? hifi.colors.faintGray : hifi.colors.white;
color: root.isSelected ? hifi.colors.faintGray80 : hifi.colors.white;
// Size
anchors.left: parent.left;
anchors.right: parent.right;
@ -49,7 +49,7 @@ Item {
anchors.verticalCenter: parent.verticalCenter;
anchors.left: parent.left;
anchors.leftMargin: 36;
height: root.height - 15;
height: 50;
width: visible ? height : 0;
clip: true;
Image {
@ -83,15 +83,15 @@ Item {
RalewaySemiBold {
id: userName;
anchors.left: avatarImage.right;
anchors.leftMargin: 16;
anchors.leftMargin: 12;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
anchors.right: chooseButton.visible ? chooseButton.left : parent.right;
anchors.rightMargin: chooseButton.visible ? 10 : 0;
// Text size
size: 20;
size: 18;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.blueAccent;
text: root.userName;
elide: Text.ElideRight;
// Alignment
@ -107,9 +107,9 @@ Item {
colorScheme: hifi.colorSchemes.dark;
anchors.verticalCenter: parent.verticalCenter;
anchors.right: parent.right;
anchors.rightMargin: 24;
height: root.height - 20;
width: 110;
anchors.rightMargin: 28;
height: 35;
width: 100;
text: "CHOOSE";
onClicked: {
var msg = { method: 'chooseConnection', userName: root.userName, profilePicUrl: root.profilePicUrl };

View file

@ -29,6 +29,7 @@ Item {
property string displayName;
property string userName;
property string profilePic;
property string textColor: hifi.colors.white;
Item {
visible: root.isDisplayingNearby;
@ -46,7 +47,7 @@ Item {
// Text size
size: 18;
// Style
color: hifi.colors.baseGray;
color: root.textColor;
verticalAlignment: Text.AlignBottom;
elide: Text.ElideRight;
}
@ -63,7 +64,7 @@ Item {
// Text size
size: 16;
// Style
color: hifi.colors.baseGray;
color: root.textColor;
verticalAlignment: Text.AlignTop;
elide: Text.ElideRight;
}
@ -108,7 +109,7 @@ Item {
// Text size
size: 16;
// Style
color: hifi.colors.baseGray;
color: root.textColor;
verticalAlignment: Text.AlignVCenter;
elide: Text.ElideRight;
}

View file

@ -29,8 +29,9 @@ Item {
property int parentAppNavBarHeight;
property string currentActiveView: "sendMoneyHome";
property string nextActiveView: "";
property bool isCurrentlyFullScreen: chooseRecipientConnection.visible ||
chooseRecipientNearby.visible || sendMoneyStep.visible || paymentSuccess.visible || paymentFailure.visible;
property bool shouldShowTopAndBottomOfWallet: chooseRecipientConnection.visible ||
chooseRecipientNearby.visible || paymentSuccess.visible || paymentFailure.visible;
property bool shouldShowTopOfWallet: sendMoneyStep.visible;
property bool isCurrentlySendingMoney: false;
// This object is always used in a popup or full-screen Wallet section.
@ -38,9 +39,9 @@ Item {
// able to click on a button/mouseArea underneath the popup/section.
MouseArea {
x: 0;
y: root.isCurrentlyFullScreen ? 0 : root.parentAppTitleBarHeight;
y: (root.shouldShowTopAndBottomOfWallet && !root.shouldShowTopOfWallet) ? 0 : root.parentAppTitleBarHeight;
width: parent.width;
height: root.isCurrentlyFullScreen ? parent.height : parent.height - root.parentAppTitleBarHeight - root.parentAppNavBarHeight;
height: (root.shouldShowTopAndBottomOfWallet || root.shouldShowTopOfWallet) ? parent.height : parent.height - root.parentAppTitleBarHeight - root.parentAppNavBarHeight;
propagateComposedEvents: false;
}
@ -105,7 +106,8 @@ Item {
// Send Money Home BEGIN
Item {
id: sendMoneyHome;
visible: root.currentActiveView === "sendMoneyHome";
z: 996;
visible: root.currentActiveView === "sendMoneyHome" || root.currentActiveView === "chooseRecipientConnection" || root.currentActiveView === "chooseRecipientNearby";
anchors.fill: parent;
anchors.topMargin: root.parentAppTitleBarHeight;
anchors.bottomMargin: root.parentAppNavBarHeight;
@ -195,6 +197,17 @@ Item {
anchors.bottom: parent.bottom;
height: 440;
LinearGradient {
anchors.fill: parent;
start: Qt.point(0, 0);
end: Qt.point(0, height);
gradient: Gradient {
GradientStop { position: 0.0; color: hifi.colors.white }
GradientStop { position: 1.0; color: hifi.colors.faintGray }
}
}
RalewaySemiBold {
id: sendMoneyText;
text: "Send Money To:";
@ -223,12 +236,13 @@ Item {
Image {
anchors.top: parent.top;
source: "../images/wallet-bg.jpg";
height: 60;
source: "./images/connection.svg";
height: 70;
width: parent.width;
fillMode: Image.PreserveAspectFit;
horizontalAlignment: Image.AlignHCenter;
verticalAlignment: Image.AlignTop;
mipmap: true;
}
RalewaySemiBold {
@ -248,6 +262,7 @@ Item {
anchors.fill: parent;
onClicked: {
root.nextActiveView = "chooseRecipientConnection";
filterBar.text = "";
}
}
}
@ -264,12 +279,13 @@ Item {
Image {
anchors.top: parent.top;
source: "../images/wallet-bg.jpg";
height: 60;
source: "./images/nearby.svg";
height: 70;
width: parent.width;
fillMode: Image.PreserveAspectFit;
horizontalAlignment: Image.AlignHCenter;
verticalAlignment: Image.AlignTop;
mipmap: true;
}
RalewaySemiBold {
@ -299,9 +315,18 @@ Item {
// Choose Recipient Connection BEGIN
Rectangle {
id: chooseRecipientConnection;
z: 997;
visible: root.currentActiveView === "chooseRecipientConnection";
anchors.fill: parent;
color: "#AAAAAA";
color: "#80000000";
// This object is always used in a popup or full-screen Wallet section.
// This MouseArea is used to prevent a user from being
// able to click on a button/mouseArea underneath the popup/section.
MouseArea {
anchors.fill: parent;
propagateComposedEvents: false;
}
ListModel {
id: connectionsModel;
@ -314,6 +339,8 @@ Item {
anchors.centerIn: parent;
width: parent.width - 30;
height: parent.height - 30;
color: "#FFFFFF";
radius: 8;
RalewaySemiBold {
id: chooseRecipientText_connections;
@ -322,11 +349,11 @@ Item {
anchors.top: parent.top;
anchors.topMargin: 26;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.leftMargin: 36;
width: paintedWidth;
height: 30;
// Text size
size: 22;
size: 18;
// Style
color: hifi.colors.baseGray;
}
@ -334,6 +361,7 @@ Item {
HiFiGlyphs {
id: closeGlyphButton_connections;
text: hifi.glyphs.close;
color: hifi.colors.lightGrayText;
size: 26;
anchors.top: parent.top;
anchors.topMargin: 10;
@ -363,7 +391,7 @@ Item {
height: 40;
// Anchors
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.leftMargin: 36;
anchors.right: parent.right;
anchors.rightMargin: 16;
anchors.top: chooseRecipientText_connections.bottom;
@ -374,8 +402,10 @@ Item {
colorScheme: hifi.colorSchemes.faintGray;
hasClearButton: true;
hasRoundedBorder: true;
hasDefocusedBorder: false;
roundedBorderRadius: filterBar.height/2;
anchors.fill: parent;
placeholderText: "filter recipients";
centerPlaceholderGlyph: hifi.glyphs.search;
onTextChanged: {
buildFilteredConnectionsModel();
@ -461,17 +491,28 @@ Item {
// Choose Recipient Nearby BEGIN
Rectangle {
id: chooseRecipientNearby;
z: 997;
color: "#80000000";
property string selectedRecipient;
visible: root.currentActiveView === "chooseRecipientNearby";
anchors.fill: parent;
color: "#AAAAAA";
// This object is always used in a popup or full-screen Wallet section.
// This MouseArea is used to prevent a user from being
// able to click on a button/mouseArea underneath the popup/section.
MouseArea {
anchors.fill: parent;
propagateComposedEvents: false;
}
Rectangle {
anchors.centerIn: parent;
width: parent.width - 30;
height: parent.height - 30;
color: "#FFFFFF";
radius: 8;
RalewaySemiBold {
text: "Choose Recipient:";
@ -483,7 +524,7 @@ Item {
width: paintedWidth;
height: 30;
// Text size
size: 22;
size: 18;
// Style
color: hifi.colors.baseGray;
}
@ -491,6 +532,7 @@ Item {
HiFiGlyphs {
id: closeGlyphButton_nearby;
text: hifi.glyphs.close;
color: hifi.colors.lightGrayText;
size: 26;
anchors.top: parent.top;
anchors.topMargin: 10;
@ -512,19 +554,15 @@ Item {
}
}
Item {
id: selectionInstructionsContainer;
visible: chooseRecipientNearby.selectedRecipient === "";
anchors.fill: parent;
RalewaySemiBold {
id: selectionInstructions_deselected;
text: "Click/trigger on an avatar nearby to select them...";
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.bottom: parent.bottom;
anchors.bottomMargin: 200;
anchors.top: parent.top;
anchors.topMargin: 100;
anchors.left: parent.left;
anchors.leftMargin: 58;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: anchors.leftMargin;
height: paintedHeight;
@ -535,134 +573,116 @@ Item {
horizontalAlignment: Text.AlignHCenter;
wrapMode: Text.Wrap;
}
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;
}
Item {
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;
// 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
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;
size: 18;
// Style
color: hifi.colors.baseGray;
horizontalAlignment: Text.AlignHCenter;
wrapMode: Text.Wrap;
}
}
// "Cancel" button
// "CHOOSE" 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 !== "";
id: chooseButton;
color: hifi.buttons.blue;
colorScheme: hifi.colorSchemes.dark;
anchors.right: parent.right;
anchors.rightMargin: 60;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 80;
height: 50;
width: 120;
text: "Next";
anchors.bottomMargin: 20;
height: 40;
width: 110;
text: "CHOOSE";
onClicked: {
sendMoneyStep.referrer = "nearby";
sendMoneyStep.selectedRecipientNodeID = chooseRecipientNearby.selectedRecipient;
@ -673,12 +693,13 @@ Item {
}
}
}
}
// Choose Recipient Nearby END
// Send Money Screen BEGIN
Rectangle {
Item {
id: sendMoneyStep;
z: 997;
z: 996;
property string referrer; // either "connections" or "nearby"
property string selectedRecipientNodeID;
@ -688,16 +709,11 @@ Item {
visible: root.currentActiveView === "sendMoneyStep";
anchors.fill: parent;
color: "#AAAAAA";
Rectangle {
anchors.centerIn: parent;
width: parent.width - 30;
height: parent.height - 30;
anchors.topMargin: root.parentAppTitleBarHeight;
RalewaySemiBold {
id: sendMoneyText_sendMoneyStep;
text: "Send Money To:";
text: "Send Money";
// Anchors
anchors.top: parent.top;
anchors.topMargin: 26;
@ -708,7 +724,7 @@ Item {
// Text size
size: 22;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.white;
}
Item {
@ -723,7 +739,7 @@ Item {
RalewaySemiBold {
id: sendToText_sendMoneyStep;
text: "Send To:";
text: "Send to:";
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
@ -732,7 +748,7 @@ Item {
// Text size
size: 18;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.white;
verticalAlignment: Text.AlignVCenter;
}
@ -753,12 +769,12 @@ Item {
// "CHANGE" button
HifiControlsUit.Button {
id: changeButton;
color: hifi.buttons.black;
color: hifi.buttons.none;
colorScheme: hifi.colorSchemes.dark;
anchors.right: parent.right;
anchors.verticalCenter: parent.verticalCenter;
height: 35;
width: 120;
width: 100;
text: "CHANGE";
onClicked: {
if (sendMoneyStep.referrer === "connections") {
@ -792,13 +808,13 @@ Item {
// Text size
size: 18;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.white;
verticalAlignment: Text.AlignVCenter;
}
HifiControlsUit.TextField {
id: amountTextField;
colorScheme: hifi.colorSchemes.light;
colorScheme: hifi.colorSchemes.dark;
inputMethodHints: Qt.ImhDigitsOnly;
// Anchors
anchors.verticalCenter: parent.verticalCenter;
@ -806,7 +822,7 @@ Item {
anchors.right: parent.right;
height: 50;
// Style
leftPlaceholderGlyph: hifi.glyphs.hfc;
leftPermanentGlyph: hifi.glyphs.hfc;
activeFocusOnPress: true;
activeFocusOnTab: true;
@ -817,6 +833,58 @@ Item {
}
}
FiraSansSemiBold {
visible: amountTextFieldError.text === "";
text: "Balance: ";
// Anchors
anchors.top: amountTextField.bottom;
anchors.topMargin: 2;
anchors.left: amountTextField.left;
anchors.right: sendMoneyBalanceText_HFC.left;
width: paintedWidth;
height: 40;
// Text size
size: 16;
// Style
color: hifi.colors.lightGrayText;
verticalAlignment: Text.AlignTop;
horizontalAlignment: Text.AlignRight;
}
HiFiGlyphs {
id: sendMoneyBalanceText_HFC;
visible: amountTextFieldError.text === "";
text: hifi.glyphs.hfc;
// Size
size: 16;
// Anchors
anchors.top: amountTextField.bottom;
anchors.topMargin: 2;
anchors.right: sendMoneyBalanceText.left;
width: paintedWidth;
height: 40;
// Style
color: hifi.colors.lightGrayText;
verticalAlignment: Text.AlignTop;
horizontalAlignment: Text.AlignRight;
}
FiraSansSemiBold {
id: sendMoneyBalanceText;
visible: amountTextFieldError.text === "";
text: balanceText.text;
// Anchors
anchors.top: amountTextField.bottom;
anchors.topMargin: 2;
anchors.right: amountTextField.right;
width: paintedWidth;
height: 40;
// Text size
size: 16;
// Style
color: hifi.colors.lightGrayText;
verticalAlignment: Text.AlignTop;
horizontalAlignment: Text.AlignRight;
}
RalewaySemiBold {
id: amountTextFieldError;
// Anchors
@ -828,7 +896,7 @@ Item {
// Text size
size: 16;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.white;
verticalAlignment: Text.AlignTop;
horizontalAlignment: Text.AlignRight;
}
@ -847,9 +915,9 @@ Item {
FontLoader { id: firaSansSemiBold; source: "../../../../../fonts/FiraSans-SemiBold.ttf"; }
TextArea {
id: optionalMessage;
property int maximumLength: 70;
property int maximumLength: 72;
property string previousText: text;
placeholderText: "Optional Message";
placeholderText: "<i>Optional Message (" + maximumLength + " character limit)</i>";
font.family: firaSansSemiBold.name;
font.pixelSize: 20;
// Anchors
@ -857,11 +925,11 @@ Item {
// Style
background: Rectangle {
anchors.fill: parent;
color: optionalMessage.activeFocus ? hifi.colors.white : hifi.colors.textFieldLightBackground;
color: optionalMessage.activeFocus ? hifi.colors.black : hifi.colors.baseGrayShadow;
border.width: optionalMessage.activeFocus ? 1 : 0;
border.color: optionalMessage.activeFocus ? hifi.colors.primaryHighlight : hifi.colors.textFieldLightBackground;
}
color: hifi.colors.black;
color: hifi.colors.white;
textFormat: TextEdit.PlainText;
wrapMode: TextEdit.Wrap;
activeFocusOnPress: true;
@ -880,55 +948,57 @@ Item {
previousText = text;
}
}
RalewaySemiBold {
FiraSansSemiBold {
id: optionalMessageCharacterCount;
text: optionalMessage.text.length + "/" + optionalMessage.maximumLength;
// Anchors
anchors.top: optionalMessage.bottom;
anchors.topMargin: 2;
anchors.topMargin: 4;
anchors.right: optionalMessage.right;
height: paintedHeight;
// Text size
size: 16;
// Style
color: hifi.colors.baseGray;
color: optionalMessage.text.length === optionalMessage.maximumLength ? "#ea89a5" : hifi.colors.lightGrayText;
verticalAlignment: Text.AlignTop;
horizontalAlignment: Text.AlignRight;
}
}
Item {
id: bottomBarContainer;
anchors.top: messageContainer.bottom;
anchors.topMargin: 30;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: 20;
height: 80;
HifiControlsUit.CheckBox {
id: sendPubliclyCheckbox;
visible: false; // FIXME ONCE PARTICLE EFFECTS ARE IN
text: "Send Publicly"
// Anchors
anchors.verticalCenter: parent.verticalCenter;
anchors.top: messageContainer.bottom;
anchors.topMargin: 16;
anchors.left: parent.left;
anchors.right: cancelButton_sendMoneyStep.left;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: 16;
boxSize: 24;
}
Item {
id: bottomBarContainer;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: 20;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 20;
height: 60;
// "CANCEL" button
HifiControlsUit.Button {
id: cancelButton_sendMoneyStep;
color: hifi.buttons.noneBorderless;
color: hifi.buttons.noneBorderlessWhite;
colorScheme: hifi.colorSchemes.dark;
anchors.right: sendButton.left;
anchors.rightMargin: 16;
anchors.left: parent.left;
anchors.leftMargin: 24;
anchors.verticalCenter: parent.verticalCenter;
height: 35;
width: 100;
height: 40;
width: 150;
text: "CANCEL";
onClicked: {
resetSendMoneyData();
@ -942,10 +1012,11 @@ Item {
color: hifi.buttons.blue;
colorScheme: hifi.colorSchemes.dark;
anchors.right: parent.right;
anchors.rightMargin: 24;
anchors.verticalCenter: parent.verticalCenter;
height: 35;
width: 100;
text: "SEND";
height: 40;
width: 150;
text: "SUBMIT";
onClicked: {
if (parseInt(amountTextField.text) > parseInt(balanceText.text)) {
amountTextField.focus = true;
@ -971,7 +1042,6 @@ Item {
}
}
}
}
// Send Money Screen END
// Sending Money Overlay START
@ -981,7 +1051,7 @@ Item {
visible: root.isCurrentlySendingMoney;
anchors.fill: parent;
color: Qt.rgba(0.0, 0.0, 0.0, 0.5);
color: Qt.rgba(0.0, 0.0, 0.0, 0.8);
// This object is always used in a popup or full-screen Wallet section.
// This MouseArea is used to prevent a user from being
@ -993,11 +1063,10 @@ Item {
AnimatedImage {
id: sendingMoneyImage;
source: "../../../../../icons/profilePicLoading.gif"
width: 160;
source: "./images/loader.gif"
width: 96;
height: width;
anchors.top: parent.top;
anchors.topMargin: 185;
anchors.verticalCenter: parent.verticalCenter;
anchors.horizontalCenter: parent.horizontalCenter;
}
@ -1005,11 +1074,11 @@ Item {
text: "Sending";
// Anchors
anchors.top: sendingMoneyImage.bottom;
anchors.topMargin: 22;
anchors.topMargin: 4;
anchors.horizontalCenter: parent.horizontalCenter;
width: paintedWidth;
// Text size
size: 24;
size: 26;
// Style
color: hifi.colors.white;
verticalAlignment: Text.AlignVCenter;
@ -1018,17 +1087,17 @@ Item {
// Sending Money Overlay END
// Payment Success BEGIN
Rectangle {
Item {
id: paymentSuccess;
visible: root.currentActiveView === "paymentSuccess";
anchors.fill: parent;
color: "#AAAAAA";
Rectangle {
anchors.centerIn: parent;
width: parent.width - 30;
height: parent.height - 30;
color: "#FFFFFF";
RalewaySemiBold {
id: paymentSentText;
@ -1049,6 +1118,7 @@ Item {
HiFiGlyphs {
id: closeGlyphButton_paymentSuccess;
text: hifi.glyphs.close;
color: hifi.colors.lightGrayText;
size: 26;
anchors.top: parent.top;
anchors.topMargin: 10;
@ -1100,6 +1170,7 @@ Item {
anchors.left: sendToText_paymentSuccess.right;
anchors.right: parent.right;
height: parent.height;
textColor: hifi.colors.blueAccent;
displayName: sendMoneyStep.selectedRecipientDisplayName;
userName: sendMoneyStep.selectedRecipientUserName;
@ -1145,10 +1216,10 @@ Item {
anchors.verticalCenter: parent.verticalCenter;
height: 50;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.blueAccent;
}
RalewaySemiBold {
FiraSansSemiBold {
id: amountSentText;
text: amountTextField.text;
// Anchors
@ -1159,7 +1230,7 @@ Item {
height: 50;
// Style
size: 22;
color: hifi.colors.baseGray;
color: hifi.colors.blueAccent;
}
}
@ -1177,7 +1248,7 @@ Item {
// Text size
size: 22;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.blueAccent;
wrapMode: Text.Wrap;
verticalAlignment: Text.AlignTop;
}
@ -1203,17 +1274,17 @@ Item {
// Payment Success END
// Payment Failure BEGIN
Rectangle {
Item {
id: paymentFailure;
visible: root.currentActiveView === "paymentFailure";
anchors.fill: parent;
color: "#AAAAAA";
Rectangle {
anchors.centerIn: parent;
width: parent.width - 30;
height: parent.height - 30;
color: "#FFFFFF";
RalewaySemiBold {
id: paymentFailureText;
@ -1234,6 +1305,7 @@ Item {
HiFiGlyphs {
id: closeGlyphButton_paymentFailure;
text: hifi.glyphs.close;
color: hifi.colors.lightGrayText;
size: 26;
anchors.top: parent.top;
anchors.topMargin: 10;
@ -1303,6 +1375,7 @@ Item {
anchors.left: sentToText_paymentFailure.right;
anchors.right: parent.right;
height: parent.height;
textColor: hifi.colors.baseGray;
displayName: sendMoneyStep.selectedRecipientDisplayName;
userName: sendMoneyStep.selectedRecipientUserName;
@ -1351,7 +1424,7 @@ Item {
color: hifi.colors.baseGray;
}
RalewaySemiBold {
FiraSansSemiBold {
id: amountSentText_paymentFailure;
text: amountTextField.text;
// Anchors

View file

@ -0,0 +1,14 @@
<?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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1398BB;}
</style>
<path class="st0" d="M256.8,42C138.5,42,42.2,138.3,42.2,256.6s96.3,214.6,214.6,214.6c118.3,0,214.6-96.3,214.6-214.6
S375.1,42,256.8,42z M256.8,444.4C153.2,444.4,69,360.1,69,256.6C69,153,153.2,68.7,256.8,68.7c103.6,0,187.8,84.3,187.8,187.8
C444.6,360.1,360.4,444.4,256.8,444.4z"/>
<circle class="st0" cx="260.6" cy="189.4" r="60.6"/>
<path class="st0" d="M306.4,282.6h-87.6c-36.5,0-66.4,30.2-66.4,66.7v33.9c29.3,22.6,65.4,36.1,105,36.1c44.4,0,84.7-17,115.2-44.7
v-25.3C372.7,312.7,342.9,282.6,306.4,282.6z"/>
</svg>

After

Width:  |  Height:  |  Size: 921 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1398BB;}
</style>
<path class="st0" d="M144.3,155c-8.7-8.8-16.7-17.1-25.2-25.7c-22.4,25.4-36.6,53.9-43.6,86.2c-26.9,125.7,81.2,241.5,208.6,223.4
C385.9,424.4,458,329.2,443.5,228.2c-4.4-30.6-15.4-58.9-34.1-83.9c-1.6-2.2-3.3-4.3-4.7-6.6c-4.4-7.4-3.1-14.9,3-19.5
c6-4.5,14.2-3.6,19.2,3.5c8.2,11.7,16.6,23.4,22.9,36.1c41.9,84.9,25.7,181.7-41,248.7c-67,67.4-175.1,81.3-257.1,33.3
c-35.3-20.7-63.1-48.6-82.7-84.5c-41-75-31.5-172.5,23.4-237.9c2.2-2.7,4.4-5.4,7.1-8.7c-8.1-8.5-16.1-16.9-24-25.3
c-7.2-7.7-7.9-16.1-1.9-22.1c5.9-5.9,15-5.1,22.1,2.4c56.8,59.5,113.6,119,170.4,178.6c7.2,7.6,7.8,15.4,1.9,21.4
c-6.1,6.2-14.7,5.5-22-2c-10.2-10.4-20.2-21-30.3-31.5c-17.4,24.7-3.3,62,27.2,72.5c23,7.9,48.8-2,60.7-23.1
c1.2-2.1,2.3-4.3,3.7-6.3c4.5-6.6,11.7-8.6,18.3-5c6.6,3.5,8.9,10.5,5.9,18.1c-12.4,31.6-47.9,52.2-82.3,47.7
c-36.1-4.8-64.3-32.6-68.4-67.7c-2.4-20.7,2.4-39.7,14.9-57.5c-10.4-10.9-20.8-21.6-31.7-33c-9.7,10.8-16.2,22.7-20.9,35.7
c-31.3,86.4,38.9,175.1,130.1,164.3c74-8.7,122.3-80.9,103.3-154.3c-3.4-13.1-1-20.2,7.8-22.7c9.5-2.8,15.2,1.8,19.2,15.4
c20.1,67.4-16,144.8-79.8,175.3c-67.5,32.2-147.5,9.7-188.8-49c-37.8-53.8-36.1-127.7,4.7-179.1C141.2,159.4,142.5,157.4,144.3,155z
"/>
<path class="st0" d="M236.2,262.2c-4.2-13.6,3.4-28.2,16.8-32.4c13.5-4.2,28.1,3.3,32.5,16.8c4.5,13.9-3.1,28.4-17.2,32.7
C254.6,283.5,240.4,275.9,236.2,262.2z"/>
<path class="st0" d="M319.6,101.9c-3.7-11,1.8-22.3,12.7-26c11.3-3.9,22.8,1.9,26.4,13.2c3.5,11-2.3,22.2-13.2,25.8
C334.5,118.5,323.3,112.9,319.6,101.9z"/>
<path class="st0" d="M214.9,66.2c3.2,10.2-2.2,20.5-12.5,23.6c-9.8,3-20-2.3-23.3-12c-3.3-9.9,2.2-20.8,12-24
C201.1,50.5,211.8,56.2,214.9,66.2z"/>
<path class="st0" d="M230.8,164.6c-3.7-11,1.8-22.3,12.7-26c11.3-3.9,22.8,1.9,26.4,13.2c3.5,11-2.3,22.2-13.2,25.8
C245.7,181.2,234.5,175.6,230.8,164.6z"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

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>

After

Width:  |  Height:  |  Size: 2.3 KiB

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>

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -593,10 +593,16 @@
getConnectionData(false);
break;
case 'enable_ChooseRecipientNearbyMode':
if (!isUpdateOverlaysWired) {
Script.update.connect(updateOverlays);
isUpdateOverlaysWired = true;
}
break;
case 'disable_ChooseRecipientNearbyMode':
if (isUpdateOverlaysWired) {
Script.update.disconnect(updateOverlays);
isUpdateOverlaysWired = false;
}
removeOverlays();
break;
default:
@ -681,14 +687,18 @@
}
}
var isWired = false;
var isUpdateOverlaysWired = false;
function off() {
if (isWired) { // It is not ok to disconnect these twice, hence guard.
Users.usernameFromIDReply.disconnect(usernameFromIDReply);
Script.update.disconnect(updateOverlays);
Controller.mousePressEvent.disconnect(handleMouseEvent);
Controller.mouseMoveEvent.disconnect(handleMouseMoveEvent);
isWired = false;
}
if (isUpdateOverlaysWired) {
Script.update.disconnect(updateOverlays);
isUpdateOverlaysWired = false;
}
triggerMapping.disable(); // It's ok if we disable twice.
triggerPressMapping.disable(); // see above
removeOverlays();