mirror of
https://github.com/overte-org/overte.git
synced 2025-06-19 01:21:04 +02:00
442 lines
16 KiB
QML
442 lines
16 KiB
QML
//
|
|
// PurchasedItem.qml
|
|
// qml/hifi/commerce/purchases
|
|
//
|
|
// PurchasedItem
|
|
//
|
|
// Created by Zach Fox on 2017-08-25
|
|
// Copyright 2017 High Fidelity, Inc.
|
|
//
|
|
// Distributed under the Apache License, Version 2.0.
|
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
//
|
|
|
|
import Hifi 1.0 as Hifi
|
|
import QtQuick 2.5
|
|
import QtGraphicalEffects 1.0
|
|
import QtQuick.Controls 1.4
|
|
import QtQuick.Controls.Styles 1.4
|
|
import "../../../styles-uit"
|
|
import "../../../controls-uit" as HifiControlsUit
|
|
import "../../../controls" as HifiControls
|
|
import "../wallet" as HifiWallet
|
|
|
|
// references XXX from root context
|
|
|
|
Item {
|
|
HifiConstants { id: hifi; }
|
|
|
|
id: root;
|
|
property string purchaseStatus;
|
|
property bool purchaseStatusChanged;
|
|
property bool canRezCertifiedItems: false;
|
|
property string itemName;
|
|
property string itemId;
|
|
property string itemPreviewImageUrl;
|
|
property string itemHref;
|
|
property string certificateId;
|
|
property int displayedItemCount;
|
|
property int itemEdition;
|
|
property int numberSold;
|
|
property int limitedRun;
|
|
property bool isWearable;
|
|
|
|
property string originalStatusText;
|
|
property string originalStatusColor;
|
|
|
|
height: 110;
|
|
width: parent.width;
|
|
|
|
onPurchaseStatusChangedChanged: {
|
|
if (root.purchaseStatusChanged === true && root.purchaseStatus === "confirmed") {
|
|
root.originalStatusText = statusText.text;
|
|
root.originalStatusColor = statusText.color;
|
|
statusText.text = "CONFIRMED!";
|
|
statusText.color = hifi.colors.blueAccent;
|
|
confirmedTimer.start();
|
|
}
|
|
}
|
|
|
|
Timer {
|
|
id: confirmedTimer;
|
|
interval: 3000;
|
|
onTriggered: {
|
|
statusText.text = root.originalStatusText;
|
|
statusText.color = root.originalStatusColor;
|
|
root.purchaseStatusChanged = false;
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: mainContainer;
|
|
// Style
|
|
color: hifi.colors.white;
|
|
// Size
|
|
anchors.left: parent.left;
|
|
anchors.leftMargin: 8;
|
|
anchors.right: parent.right;
|
|
anchors.rightMargin: 8;
|
|
anchors.top: parent.top;
|
|
height: root.height - 10;
|
|
|
|
Image {
|
|
id: itemPreviewImage;
|
|
source: root.itemPreviewImageUrl;
|
|
anchors.left: parent.left;
|
|
anchors.top: parent.top;
|
|
anchors.bottom: parent.bottom;
|
|
width: height;
|
|
fillMode: Image.PreserveAspectCrop;
|
|
|
|
MouseArea {
|
|
anchors.fill: parent;
|
|
onClicked: {
|
|
sendToPurchases({method: 'purchases_itemInfoClicked', itemId: root.itemId});
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
RalewaySemiBold {
|
|
id: itemName;
|
|
anchors.top: itemPreviewImage.top;
|
|
anchors.topMargin: 4;
|
|
anchors.left: itemPreviewImage.right;
|
|
anchors.leftMargin: 8;
|
|
anchors.right: buttonContainer.left;
|
|
anchors.rightMargin: 8;
|
|
height: paintedHeight;
|
|
// Text size
|
|
size: 24;
|
|
// Style
|
|
color: hifi.colors.blueAccent;
|
|
text: root.itemName;
|
|
elide: Text.ElideRight;
|
|
// Alignment
|
|
horizontalAlignment: Text.AlignLeft;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
|
|
MouseArea {
|
|
anchors.fill: parent;
|
|
hoverEnabled: enabled;
|
|
onClicked: {
|
|
sendToPurchases({method: 'purchases_itemInfoClicked', itemId: root.itemId});
|
|
}
|
|
onEntered: {
|
|
itemName.color = hifi.colors.blueHighlight;
|
|
}
|
|
onExited: {
|
|
itemName.color = hifi.colors.blueAccent;
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: certificateContainer;
|
|
anchors.top: itemName.bottom;
|
|
anchors.topMargin: 4;
|
|
anchors.left: itemName.left;
|
|
anchors.right: buttonContainer.left;
|
|
anchors.rightMargin: 2;
|
|
height: 24;
|
|
|
|
HiFiGlyphs {
|
|
id: certificateIcon;
|
|
text: hifi.glyphs.scriptNew;
|
|
// Size
|
|
size: 30;
|
|
// Anchors
|
|
anchors.top: parent.top;
|
|
anchors.left: parent.left;
|
|
anchors.bottom: parent.bottom;
|
|
width: 32;
|
|
// Style
|
|
color: hifi.colors.lightGray;
|
|
}
|
|
|
|
RalewayRegular {
|
|
id: viewCertificateText;
|
|
text: "VIEW CERTIFICATE";
|
|
size: 14;
|
|
anchors.left: certificateIcon.right;
|
|
anchors.leftMargin: 4;
|
|
anchors.top: parent.top;
|
|
anchors.bottom: parent.bottom;
|
|
anchors.right: parent.right;
|
|
color: hifi.colors.lightGray;
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent;
|
|
hoverEnabled: enabled;
|
|
onClicked: {
|
|
sendToPurchases({method: 'purchases_itemCertificateClicked', itemCertificateId: root.certificateId});
|
|
}
|
|
onEntered: {
|
|
certificateIcon.color = hifi.colors.black;
|
|
viewCertificateText.color = hifi.colors.black;
|
|
}
|
|
onExited: {
|
|
certificateIcon.color = hifi.colors.lightGray;
|
|
viewCertificateText.color = hifi.colors.lightGray;
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: editionContainer;
|
|
visible: root.displayedItemCount > 1 && !statusContainer.visible;
|
|
anchors.left: itemName.left;
|
|
anchors.top: certificateContainer.bottom;
|
|
anchors.topMargin: 8;
|
|
anchors.bottom: parent.bottom;
|
|
anchors.right: buttonContainer.left;
|
|
anchors.rightMargin: 2;
|
|
|
|
FiraSansRegular {
|
|
anchors.left: parent.left;
|
|
anchors.top: parent.top;
|
|
anchors.bottom: parent.bottom;
|
|
width: paintedWidth;
|
|
text: "#" + root.itemEdition;
|
|
size: 15;
|
|
color: "#cc6a6a6a";
|
|
verticalAlignment: Text.AlignTop;
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: statusContainer;
|
|
visible: root.purchaseStatus === "pending" || root.purchaseStatus === "invalidated" || root.purchaseStatusChanged;
|
|
anchors.left: itemName.left;
|
|
anchors.top: certificateContainer.bottom;
|
|
anchors.topMargin: 8;
|
|
anchors.bottom: parent.bottom;
|
|
anchors.right: buttonContainer.left;
|
|
anchors.rightMargin: 2;
|
|
|
|
RalewaySemiBold {
|
|
id: statusText;
|
|
anchors.left: parent.left;
|
|
anchors.top: parent.top;
|
|
anchors.bottom: parent.bottom;
|
|
width: paintedWidth;
|
|
text: {
|
|
if (root.purchaseStatus === "pending") {
|
|
"PENDING..."
|
|
} else if (root.purchaseStatus === "invalidated") {
|
|
"INVALIDATED"
|
|
} else if (root.numberSold !== -1) {
|
|
("Sales: " + root.numberSold + "/" + (root.limitedRun === -1 ? "\u221e" : root.limitedRun))
|
|
} else {
|
|
""
|
|
}
|
|
}
|
|
size: 18;
|
|
color: {
|
|
if (root.purchaseStatus === "pending") {
|
|
hifi.colors.blueAccent
|
|
} else if (root.purchaseStatus === "invalidated") {
|
|
hifi.colors.redAccent
|
|
} else {
|
|
hifi.colors.baseGray
|
|
}
|
|
}
|
|
verticalAlignment: Text.AlignTop;
|
|
}
|
|
|
|
HiFiGlyphs {
|
|
id: statusIcon;
|
|
text: {
|
|
if (root.purchaseStatus === "pending") {
|
|
hifi.glyphs.question
|
|
} else if (root.purchaseStatus === "invalidated") {
|
|
hifi.glyphs.question
|
|
} else {
|
|
""
|
|
}
|
|
}
|
|
// Size
|
|
size: 36;
|
|
// Anchors
|
|
anchors.top: parent.top;
|
|
anchors.topMargin: -8;
|
|
anchors.left: statusText.right;
|
|
anchors.bottom: parent.bottom;
|
|
// Style
|
|
color: {
|
|
if (root.purchaseStatus === "pending") {
|
|
hifi.colors.blueAccent
|
|
} else if (root.purchaseStatus === "invalidated") {
|
|
hifi.colors.redAccent
|
|
} else {
|
|
hifi.colors.baseGray
|
|
}
|
|
}
|
|
verticalAlignment: Text.AlignTop;
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent;
|
|
hoverEnabled: enabled;
|
|
onClicked: {
|
|
if (root.purchaseStatus === "pending") {
|
|
sendToPurchases({method: 'showPendingLightbox'});
|
|
} else if (root.purchaseStatus === "invalidated") {
|
|
sendToPurchases({method: 'showInvalidatedLightbox'});
|
|
}
|
|
}
|
|
onEntered: {
|
|
if (root.purchaseStatus === "pending") {
|
|
statusText.color = hifi.colors.blueHighlight;
|
|
statusIcon.color = hifi.colors.blueHighlight;
|
|
} else if (root.purchaseStatus === "invalidated") {
|
|
statusText.color = hifi.colors.redAccent;
|
|
statusIcon.color = hifi.colors.redAccent;
|
|
}
|
|
}
|
|
onExited: {
|
|
if (root.purchaseStatus === "pending") {
|
|
statusText.color = hifi.colors.blueAccent;
|
|
statusIcon.color = hifi.colors.blueAccent;
|
|
} else if (root.purchaseStatus === "invalidated") {
|
|
statusText.color = hifi.colors.redHighlight;
|
|
statusIcon.color = hifi.colors.redHighlight;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: rezzedNotifContainer;
|
|
z: 998;
|
|
visible: false;
|
|
color: hifi.colors.blueHighlight;
|
|
anchors.fill: buttonContainer;
|
|
MouseArea {
|
|
anchors.fill: parent;
|
|
propagateComposedEvents: false;
|
|
}
|
|
|
|
RalewayBold {
|
|
anchors.fill: parent;
|
|
text: "REZZED";
|
|
size: 18;
|
|
color: hifi.colors.white;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
horizontalAlignment: Text.AlignHCenter;
|
|
}
|
|
|
|
Timer {
|
|
id: rezzedNotifContainerTimer;
|
|
interval: 2000;
|
|
onTriggered: rezzedNotifContainer.visible = false
|
|
}
|
|
}
|
|
|
|
Button {
|
|
id: buttonContainer;
|
|
property int color: hifi.buttons.red;
|
|
property int colorScheme: hifi.colorSchemes.light;
|
|
|
|
anchors.top: parent.top;
|
|
anchors.bottom: parent.bottom;
|
|
anchors.right: parent.right;
|
|
width: height;
|
|
enabled: (root.canRezCertifiedItems || root.isWearable) && root.purchaseStatus !== "invalidated";
|
|
|
|
onClicked: {
|
|
sendToPurchases({method: 'purchases_rezClicked', itemHref: root.itemHref, isWearable: root.isWearable});
|
|
rezzedNotifContainer.visible = true;
|
|
rezzedNotifContainerTimer.start();
|
|
UserActivityLogger.commerceEntityRezzed(root.itemId, "purchases", root.isWearable ? "rez" : "wear");
|
|
}
|
|
|
|
style: ButtonStyle {
|
|
|
|
background: Rectangle {
|
|
gradient: Gradient {
|
|
GradientStop {
|
|
position: 0.2
|
|
color: {
|
|
if (!control.enabled) {
|
|
hifi.buttons.disabledColorStart[control.colorScheme]
|
|
} else if (control.pressed) {
|
|
hifi.buttons.pressedColor[control.color]
|
|
} else if (control.hovered) {
|
|
hifi.buttons.hoveredColor[control.color]
|
|
} else {
|
|
hifi.buttons.colorStart[control.color]
|
|
}
|
|
}
|
|
}
|
|
GradientStop {
|
|
position: 1.0
|
|
color: {
|
|
if (!control.enabled) {
|
|
hifi.buttons.disabledColorFinish[control.colorScheme]
|
|
} else if (control.pressed) {
|
|
hifi.buttons.pressedColor[control.color]
|
|
} else if (control.hovered) {
|
|
hifi.buttons.hoveredColor[control.color]
|
|
} else {
|
|
hifi.buttons.colorFinish[control.color]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
label: Item {
|
|
HiFiGlyphs {
|
|
id: lightningIcon;
|
|
text: hifi.glyphs.lightning;
|
|
// Size
|
|
size: 32;
|
|
// Anchors
|
|
anchors.top: parent.top;
|
|
anchors.topMargin: 12;
|
|
anchors.left: parent.left;
|
|
anchors.right: parent.right;
|
|
horizontalAlignment: Text.AlignHCenter;
|
|
// Style
|
|
color: enabled ? hifi.buttons.textColor[control.color]
|
|
: hifi.buttons.disabledTextColor[control.colorScheme]
|
|
}
|
|
RalewayBold {
|
|
anchors.top: lightningIcon.bottom;
|
|
anchors.topMargin: -20;
|
|
anchors.right: parent.right;
|
|
anchors.left: parent.left;
|
|
anchors.bottom: parent.bottom;
|
|
font.capitalization: Font.AllUppercase
|
|
color: enabled ? hifi.buttons.textColor[control.color]
|
|
: hifi.buttons.disabledTextColor[control.colorScheme]
|
|
size: 16;
|
|
verticalAlignment: Text.AlignVCenter
|
|
horizontalAlignment: Text.AlignHCenter
|
|
text: root.isWearable ? "Wear It" : "Rez It"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
DropShadow {
|
|
anchors.fill: mainContainer;
|
|
horizontalOffset: 3;
|
|
verticalOffset: 3;
|
|
radius: 8.0;
|
|
samples: 17;
|
|
color: "#80000000";
|
|
source: mainContainer;
|
|
}
|
|
|
|
//
|
|
// FUNCTION DEFINITIONS START
|
|
//
|
|
signal sendToPurchases(var msg);
|
|
//
|
|
// FUNCTION DEFINITIONS END
|
|
//
|
|
}
|