From e3b14bf4786a5671d47cefc8109418b987439dcf Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Thu, 26 Apr 2018 15:57:37 -0700 Subject: [PATCH] MS14295: Fix lingering Gifts UI Bugs --- .../commerce/common/sendAsset/SendAsset.qml | 126 +++++++++++++++--- 1 file changed, 106 insertions(+), 20 deletions(-) diff --git a/interface/resources/qml/hifi/commerce/common/sendAsset/SendAsset.qml b/interface/resources/qml/hifi/commerce/common/sendAsset/SendAsset.qml index 8bf3a22338..567ccb57f8 100644 --- a/interface/resources/qml/hifi/commerce/common/sendAsset/SendAsset.qml +++ b/interface/resources/qml/hifi/commerce/common/sendAsset/SendAsset.qml @@ -258,7 +258,9 @@ Item { anchors.topMargin: 26; anchors.left: parent.left; anchors.leftMargin: 20; - width: paintedWidth; + anchors.right: parent.right; + anchors.rightMargin: 20; + elide: Text.ElideRight; height: 30; // Text size size: 22; @@ -844,7 +846,7 @@ Item { property string selectedRecipientUserName; property string selectedRecipientProfilePic; - visible: root.currentActiveView === "sendAssetStep"; + visible: root.currentActiveView === "sendAssetStep" || paymentSuccess.visible || paymentFailure.visible; anchors.fill: parent; anchors.topMargin: root.parentAppTitleBarHeight; @@ -856,7 +858,9 @@ Item { anchors.topMargin: 26; anchors.left: parent.left; anchors.leftMargin: 20; - width: paintedWidth; + anchors.right: parent.right; + anchors.rightMargin: 20; + elide: Text.ElideRight; height: 30; // Text size size: 22; @@ -907,7 +911,7 @@ Item { // "CHANGE" button HifiControlsUit.Button { id: changeButton; - color: root.assetName === "" ? hifi.buttons.none : hifi.buttons.noneBorderlessGray; + color: root.assetName === "" ? hifi.buttons.none : hifi.buttons.white; colorScheme: hifi.colorSchemes.dark; anchors.right: parent.right; anchors.verticalCenter: parent.verticalCenter; @@ -1238,7 +1242,7 @@ Item { // Sending Asset Overlay START Rectangle { id: sendingAssetOverlay; - z: 998; + z: 999; visible: root.isCurrentlySendingAsset; anchors.fill: parent; @@ -1281,26 +1285,43 @@ Item { // Payment Success BEGIN Rectangle { id: paymentSuccess; + z: 998; visible: root.currentActiveView === "paymentSuccess"; anchors.fill: parent; 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 + // able to click on a button/mouseArea underneath the popup/section. + MouseArea { + anchors.fill: parent; + propagateComposedEvents: false; + hoverEnabled: true; + } + Rectangle { - anchors.centerIn: parent; - width: parent.width - 30; - height: parent.height - 30; + anchors.top: parent.top; + anchors.topMargin: root.assetName === "" ? 15 : 150; + anchors.left: parent.left; + anchors.leftMargin: root.assetName === "" ? 15 : 50; + anchors.right: parent.right; + anchors.rightMargin: root.assetName === "" ? 15 : 50; + anchors.bottom: parent.bottom; + anchors.bottomMargin: root.assetName === "" ? 15 : 300; color: "#FFFFFF"; RalewaySemiBold { id: paymentSentText; - text: root.assetName === "" ? "Payment Sent" : '"' + root.assetName + '"'; + text: root.assetName === "" ? "Payment Sent" : "Gift Sent"; // Anchors anchors.top: parent.top; anchors.topMargin: 26; anchors.left: parent.left; anchors.leftMargin: 20; - width: paintedWidth; + anchors.right: parent.right; + anchors.rightMargin: 20; + elide: Text.ElideRight; height: 30; // Text size size: 22; @@ -1310,6 +1331,7 @@ Item { HiFiGlyphs { id: closeGlyphButton_paymentSuccess; + visible: root.assetName === ""; text: hifi.glyphs.close; color: hifi.colors.lightGrayText; size: 26; @@ -1375,6 +1397,48 @@ Item { isDisplayingNearby: sendAssetStep.referrer === "nearby"; } } + + + Item { + id: giftContainer_paymentSuccess; + visible: root.assetName !== ""; + anchors.top: sendToContainer_paymentSuccess.bottom; + anchors.topMargin: 16; + anchors.left: parent.left; + anchors.leftMargin: 20; + anchors.right: parent.right; + anchors.rightMargin: 20; + height: 80; + + RalewaySemiBold { + id: gift_paymentSuccess; + text: "Gift:"; + // Anchors + anchors.top: parent.top; + anchors.left: parent.left; + anchors.bottom: parent.bottom; + width: 90; + // Text size + size: 18; + // Style + color: hifi.colors.baseGray; + verticalAlignment: Text.AlignVCenter; + } + + RalewaySemiBold { + text: root.assetName; + // Anchors + anchors.top: parent.top; + anchors.left: gift_paymentSuccess.right; + anchors.right: parent.right; + // Text size + size: 18; + // Style + elide: Text.ElideRight; + color: hifi.colors.baseGray; + verticalAlignment: Text.AlignVCenter; + } + } Item { id: amountContainer_paymentSuccess; @@ -1433,6 +1497,7 @@ Item { RalewaySemiBold { id: optionalMessage_paymentSuccess; + visible: root.assetName === ""; text: optionalMessage.text; // Anchors anchors.top: amountContainer_paymentSuccess.visible ? amountContainer_paymentSuccess.bottom : sendToContainer_paymentSuccess.bottom; @@ -1476,26 +1541,43 @@ Item { // Payment Failure BEGIN Rectangle { id: paymentFailure; + z: 998; visible: root.currentActiveView === "paymentFailure"; anchors.fill: parent; 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 + // able to click on a button/mouseArea underneath the popup/section. + MouseArea { + anchors.fill: parent; + propagateComposedEvents: false; + hoverEnabled: true; + } + Rectangle { - anchors.centerIn: parent; - width: parent.width - 30; - height: parent.height - 30; + anchors.top: parent.top; + anchors.topMargin: root.assetName === "" ? 15 : 150; + anchors.left: parent.left; + anchors.leftMargin: root.assetName === "" ? 15 : 50; + anchors.right: parent.right; + anchors.rightMargin: root.assetName === "" ? 15 : 50; + anchors.bottom: parent.bottom; + anchors.bottomMargin: root.assetName === "" ? 15 : 300; color: "#FFFFFF"; RalewaySemiBold { id: paymentFailureText; - text: root.assetName === "" ? "Payment Failed" : '"' + root.assetName + '"'; + text: root.assetName === "" ? "Payment Failed" : "Failed"; // Anchors anchors.top: parent.top; anchors.topMargin: 26; anchors.left: parent.left; anchors.leftMargin: 20; - width: paintedWidth; + anchors.right: parent.right; + anchors.rightMargin: 20; + elide: Text.ElideRight; height: 30; // Text size size: 22; @@ -1505,6 +1587,7 @@ Item { HiFiGlyphs { id: closeGlyphButton_paymentFailure; + visible: root.assetName === ""; text: hifi.glyphs.close; color: hifi.colors.lightGrayText; size: 26; @@ -1551,6 +1634,7 @@ Item { Item { id: sendToContainer_paymentFailure; + visible: root.assetName === ""; anchors.top: paymentFailureDetailText.bottom; anchors.topMargin: 8; anchors.left: parent.left; @@ -1645,7 +1729,8 @@ Item { } RalewaySemiBold { - id: optionalMessage_paymentFailuire; + id: optionalMessage_paymentFailure; + visible: root.assetName === ""; text: optionalMessage.text; // Anchors anchors.top: amountContainer_paymentFailure.visible ? amountContainer_paymentFailure.bottom : sendToContainer_paymentFailure.bottom; @@ -1663,14 +1748,15 @@ Item { verticalAlignment: Text.AlignTop; } - // "Close" button + // "Cancel" button HifiControlsUit.Button { id: closeButton_paymentFailure; color: hifi.buttons.noneBorderless; colorScheme: root.assetName === "" ? hifi.colorSchemes.dark : hifi.colorSchemes.light; - anchors.horizontalCenter: parent.horizontalCenter; + anchors.right: retryButton_paymentFailure.left; + anchors.rightMargin: 12; anchors.bottom: parent.bottom; - anchors.bottomMargin: 80; + anchors.bottomMargin: root.assetName === "" ? 80 : 30; height: 50; width: 120; text: "Cancel"; @@ -1691,7 +1777,7 @@ Item { anchors.right: parent.right; anchors.rightMargin: 12; anchors.bottom: parent.bottom; - anchors.bottomMargin: 80; + anchors.bottomMargin: root.assetName === "" ? 80 : 30; height: 50; width: 120; text: "Retry";