mirror of
https://github.com/overte-org/overte.git
synced 2025-08-06 18:50:00 +02:00
QML Marketplace
Add keyboard while in search General cleanup
This commit is contained in:
parent
cfaf01b22a
commit
ff2d51701e
3 changed files with 1058 additions and 891 deletions
File diff suppressed because it is too large
Load diff
|
@ -25,37 +25,39 @@ import "../.." as HifiCommon
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: root;
|
id: root;
|
||||||
property string item_id: "";
|
|
||||||
property string image_url: "";
|
property string item_id: ""
|
||||||
property string name: "";
|
property string image_url: ""
|
||||||
property int likes: 0;
|
property string name: ""
|
||||||
property bool liked: false;
|
property int likes: 0
|
||||||
property string creator: "";
|
property bool liked: false
|
||||||
property var categories: [];
|
property string creator: ""
|
||||||
property int price: 0;
|
property var categories: []
|
||||||
property var attributions: [];
|
property int price: 0
|
||||||
property string description: "";
|
property var attributions: []
|
||||||
property string license: "";
|
property string description: ""
|
||||||
property string posted: "";
|
property string license: ""
|
||||||
property bool available: false;
|
property string posted: ""
|
||||||
property string created_at: "";
|
property bool available: false
|
||||||
|
property string created_at: ""
|
||||||
|
|
||||||
onCategoriesChanged: {
|
onCategoriesChanged: {
|
||||||
categoriesListModel.clear();
|
categoriesListModel.clear();
|
||||||
categories.forEach(function(category) {
|
categories.forEach(function(category) {
|
||||||
console.log("category is " + category);
|
|
||||||
categoriesListModel.append({"category":category});
|
categoriesListModel.append({"category":category});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
signal buy();
|
signal buy()
|
||||||
signal categoryClicked(string category);
|
signal categoryClicked(string category)
|
||||||
signal showLicense(string url);
|
signal showLicense(string url)
|
||||||
|
|
||||||
HifiConstants { id: hifi; }
|
HifiConstants {
|
||||||
|
id: hifi
|
||||||
|
}
|
||||||
|
|
||||||
Connections {
|
Connections {
|
||||||
target: MarketplaceScriptingInterface;
|
target: MarketplaceScriptingInterface
|
||||||
|
|
||||||
onMarketplaceItemLikeResult: {
|
onMarketplaceItemLikeResult: {
|
||||||
if (result.status !== 'success') {
|
if (result.status !== 'success') {
|
||||||
|
@ -95,80 +97,91 @@ Rectangle {
|
||||||
return a.toDateString() + " " + drawnHour + ':' + min + amOrPm;
|
return a.toDateString() + " " + drawnHour + ':' + min + amOrPm;
|
||||||
}
|
}
|
||||||
|
|
||||||
anchors.left: parent.left;
|
anchors {
|
||||||
anchors.right: parent.right;
|
left: parent.left;
|
||||||
anchors.leftMargin: 15;
|
right: parent.right;
|
||||||
anchors.rightMargin: 15;
|
leftMargin: 15;
|
||||||
|
rightMargin: 15;
|
||||||
|
}
|
||||||
height: childrenRect.height;
|
height: childrenRect.height;
|
||||||
|
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: header;
|
id: header
|
||||||
anchors.left: parent.left;
|
|
||||||
anchors.right: parent.right;
|
|
||||||
anchors.top: parent.top;
|
|
||||||
|
|
||||||
|
anchors {
|
||||||
|
left: parent.left;
|
||||||
|
right: parent.right;
|
||||||
|
top: parent.top;
|
||||||
|
}
|
||||||
height: 50;
|
height: 50;
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: nameText;
|
id: nameText
|
||||||
text: root.name;
|
|
||||||
// Text size
|
anchors {
|
||||||
size: 24;
|
top: parent.top
|
||||||
// Anchors
|
left: parent.left
|
||||||
anchors.top: parent.top;
|
bottom: parent.bottom
|
||||||
anchors.left: parent.left;
|
}
|
||||||
anchors.bottom: parent.bottom;
|
width: paintedWidth
|
||||||
width: paintedWidth;
|
|
||||||
// Style
|
text: root.name
|
||||||
color: hifi.colors.baseGray;
|
size: 24
|
||||||
// Alignment
|
color: hifi.colors.baseGray
|
||||||
verticalAlignment: Text.AlignVCenter;
|
verticalAlignment: Text.AlignVCenter
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: likes;
|
id: likes
|
||||||
anchors.top: parent.top;
|
|
||||||
anchors.right: parent.right;
|
anchors {
|
||||||
anchors.bottom: parent.bottom;
|
top: parent.top;
|
||||||
anchors.rightMargin: 5;
|
right: parent.right;
|
||||||
|
bottom: parent.bottom;
|
||||||
|
rightMargin: 5;
|
||||||
|
}
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: heart;
|
id: heart
|
||||||
text: "\u2665";
|
|
||||||
// Size
|
anchors {
|
||||||
size: 20;
|
top: parent.top
|
||||||
// Anchors
|
right: parent.right
|
||||||
anchors.top: parent.top;
|
rightMargin: 0
|
||||||
anchors.right: parent.right;
|
verticalCenter: parent.verticalCenter
|
||||||
anchors.rightMargin: 0;
|
}
|
||||||
anchors.verticalCenter: parent.verticalCenter;
|
|
||||||
horizontalAlignment: Text.AlignHCenter;
|
text: "\u2665"
|
||||||
// Style
|
size: 20
|
||||||
color: root.liked ? hifi.colors.redAccent : hifi.colors.lightGrayText;
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
color: root.liked ? hifi.colors.redAccent : hifi.colors.lightGrayText
|
||||||
}
|
}
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: likesText;
|
id: likesText
|
||||||
text: root.likes;
|
|
||||||
// Text size
|
anchors {
|
||||||
size: hifi.fontSizes.overlayTitle;
|
top: parent.top
|
||||||
// Anchors
|
right: heart.left
|
||||||
anchors.top: parent.top;
|
rightMargin: 5
|
||||||
anchors.right: heart.left;
|
leftMargin: 15
|
||||||
anchors.rightMargin: 5;
|
bottom: parent.bottom
|
||||||
anchors.leftMargin: 15;
|
}
|
||||||
anchors.bottom: parent.bottom;
|
width: paintedWidth
|
||||||
width: paintedWidth;
|
|
||||||
// Style
|
text: root.likes
|
||||||
color: hifi.colors.baseGray;
|
size: hifi.fontSizes.overlayTitle
|
||||||
// Alignment
|
color: hifi.colors.baseGray
|
||||||
verticalAlignment: Text.AlignVCenter;
|
verticalAlignment: Text.AlignVCenter
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.left: likesText.left;
|
anchors {
|
||||||
anchors.right: heart.right;
|
left: likesText.left
|
||||||
anchors.top: likesText.top;
|
right: heart.right
|
||||||
anchors.bottom: likesText.bottom;
|
top: likesText.top
|
||||||
|
bottom: likesText.bottom
|
||||||
|
}
|
||||||
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
MarketplaceScriptingInterface.marketplaceItemLike(root.item_id, !root.liked);
|
MarketplaceScriptingInterface.marketplaceItemLike(root.item_id, !root.liked);
|
||||||
|
@ -176,178 +189,195 @@ Rectangle {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
id: itemImage;
|
id: itemImage
|
||||||
source: root.image_url;
|
|
||||||
anchors.top: header.bottom;
|
anchors {
|
||||||
anchors.left: parent.left;
|
top: header.bottom
|
||||||
anchors.right: parent.right;
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
height: width*0.5625
|
height: width*0.5625
|
||||||
|
|
||||||
|
source: root.image_url
|
||||||
fillMode: Image.PreserveAspectCrop;
|
fillMode: Image.PreserveAspectCrop;
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: footer;
|
id: footer
|
||||||
anchors.left: parent.left;
|
|
||||||
anchors.right: parent.right;
|
anchors {
|
||||||
anchors.top: itemImage.bottom;
|
left: parent.left;
|
||||||
height: childrenRect.height;
|
right: parent.right;
|
||||||
|
top: itemImage.bottom;
|
||||||
|
}
|
||||||
|
height: childrenRect.height
|
||||||
|
|
||||||
HifiControlsUit.Button {
|
HifiControlsUit.Button {
|
||||||
id: buyButton;
|
id: buyButton
|
||||||
text: root.available ? (root.price ? root.price : "FREE") : "UNAVAILABLE (not for sale)";
|
|
||||||
enabled: root.available;
|
anchors {
|
||||||
buttonGlyph: root.available ? (root.price ? hifi.glyphs.hfc : "") : "";
|
right: parent.right
|
||||||
anchors.right: parent.right;
|
top: parent.top
|
||||||
anchors.top: parent.top;
|
left: parent.left
|
||||||
anchors.left: parent.left;
|
topMargin: 15
|
||||||
anchors.topMargin: 15;
|
}
|
||||||
height: 50;
|
height: 50
|
||||||
color: hifi.buttons.blue;
|
|
||||||
|
text: root.available ? (root.price ? root.price : "FREE") : "UNAVAILABLE (not for sale)"
|
||||||
|
enabled: root.available
|
||||||
|
buttonGlyph: root.available ? (root.price ? hifi.glyphs.hfc : "") : ""
|
||||||
|
color: hifi.buttons.blue
|
||||||
|
|
||||||
onClicked: root.buy();
|
onClicked: root.buy();
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: creatorItem;
|
id: creatorItem
|
||||||
anchors.top: buyButton.bottom;
|
|
||||||
anchors.leftMargin: 15;
|
anchors {
|
||||||
anchors.topMargin: 15;
|
top: buyButton.bottom
|
||||||
width: parent.width;
|
leftMargin: 15
|
||||||
height: childrenRect.height;
|
topMargin: 15
|
||||||
|
}
|
||||||
|
width: parent.width
|
||||||
|
height: childrenRect.height
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: creatorLabel;
|
id: creatorLabel
|
||||||
text: "CREATOR:";
|
|
||||||
// Text size
|
anchors.top: parent.top
|
||||||
size: 14;
|
anchors.left: parent.left
|
||||||
// Anchors
|
width: paintedWidth
|
||||||
anchors.top: parent.top;
|
|
||||||
anchors.left: parent.left;
|
text: "CREATOR:"
|
||||||
width: paintedWidth;
|
size: 14
|
||||||
// Style
|
color: hifi.colors.lightGrayText
|
||||||
color: hifi.colors.lightGrayText;
|
verticalAlignment: Text.AlignVCenter
|
||||||
// Alignment
|
|
||||||
verticalAlignment: Text.AlignVCenter;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: creatorText;
|
id: creatorText
|
||||||
text: root.creator;
|
|
||||||
// Text size
|
anchors {
|
||||||
size: 18;
|
top: creatorLabel.bottom
|
||||||
// Anchors
|
left: parent.left
|
||||||
anchors.top: creatorLabel.bottom;
|
topMargin: 10
|
||||||
anchors.left: parent.left;
|
}
|
||||||
anchors.topMargin: 10;
|
width: paintedWidth
|
||||||
width: paintedWidth;
|
text: root.creator
|
||||||
// Style
|
|
||||||
color: hifi.colors.blueHighlight;
|
size: 18
|
||||||
// Alignment
|
color: hifi.colors.blueHighlight
|
||||||
verticalAlignment: Text.AlignVCenter;
|
verticalAlignment: Text.AlignVCenter
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: posted;
|
id: posted
|
||||||
anchors.top: creatorItem.bottom;
|
|
||||||
anchors.leftMargin: 15;
|
anchors {
|
||||||
anchors.topMargin: 15;
|
top: creatorItem.bottom
|
||||||
width: parent.width;
|
leftMargin: 15
|
||||||
height: childrenRect.height;
|
topMargin: 15
|
||||||
RalewaySemiBold {
|
}
|
||||||
id: postedLabel;
|
width: parent.width
|
||||||
text: "POSTED:";
|
height: childrenRect.height
|
||||||
// Text size
|
|
||||||
size: 14;
|
|
||||||
// Anchors
|
|
||||||
anchors.top: parent.top;
|
|
||||||
anchors.left: parent.left;
|
|
||||||
|
|
||||||
width: paintedWidth;
|
RalewaySemiBold {
|
||||||
// Style
|
id: postedLabel
|
||||||
color: hifi.colors.lightGrayText;
|
|
||||||
// Alignment
|
anchors.top: parent.top
|
||||||
verticalAlignment: Text.AlignVCenter;
|
anchors.left: parent.left
|
||||||
|
width: paintedWidth
|
||||||
|
|
||||||
|
text: "POSTED:"
|
||||||
|
size: 14
|
||||||
|
color: hifi.colors.lightGrayText
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
}
|
}
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: created_at;
|
id: created_at
|
||||||
|
|
||||||
|
anchors {
|
||||||
|
top: postedLabel.bottom
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
topMargin: 10
|
||||||
|
}
|
||||||
|
|
||||||
text: { getFormattedDate(root.created_at); }
|
text: { getFormattedDate(root.created_at); }
|
||||||
// Text size
|
size: 14
|
||||||
size: 14;
|
color: hifi.colors.lightGray
|
||||||
// Anchors
|
verticalAlignment: Text.AlignVCenter
|
||||||
anchors.top: postedLabel.bottom;
|
|
||||||
anchors.left: parent.left;
|
|
||||||
anchors.right: parent.right;
|
|
||||||
anchors.topMargin: 10;
|
|
||||||
// Style
|
|
||||||
color: hifi.colors.lightGray;
|
|
||||||
// Alignment
|
|
||||||
verticalAlignment: Text.AlignVCenter;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
anchors.top: posted.bottom;
|
anchors {
|
||||||
anchors.leftMargin: 15;
|
top: posted.bottom;
|
||||||
anchors.topMargin: 15;
|
leftMargin: 15;
|
||||||
|
topMargin: 15;
|
||||||
|
}
|
||||||
width: parent.width;
|
width: parent.width;
|
||||||
height: 1;
|
height: 1;
|
||||||
|
|
||||||
color: hifi.colors.lightGray;
|
color: hifi.colors.lightGray;
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: licenseItem;
|
id: licenseItem;
|
||||||
anchors.top: posted.bottom;
|
|
||||||
anchors.left: parent.left;
|
anchors {
|
||||||
anchors.topMargin: 30;
|
top: posted.bottom
|
||||||
width: parent.width;
|
left: parent.left
|
||||||
height: childrenRect.height;
|
topMargin: 30
|
||||||
|
}
|
||||||
|
width: parent.width
|
||||||
|
height: childrenRect.height
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: licenseLabel;
|
id: licenseLabel
|
||||||
text: "SHARED UNDER:";
|
|
||||||
// Text size
|
|
||||||
size: 14;
|
|
||||||
// Anchors
|
|
||||||
anchors.top: parent.top;
|
anchors.top: parent.top;
|
||||||
anchors.left: parent.left;
|
anchors.left: parent.left;
|
||||||
width: paintedWidth;
|
width: paintedWidth;
|
||||||
// Style
|
|
||||||
|
text: "SHARED UNDER:";
|
||||||
|
size: 14;
|
||||||
color: hifi.colors.lightGrayText;
|
color: hifi.colors.lightGrayText;
|
||||||
// Alignment
|
|
||||||
verticalAlignment: Text.AlignVCenter;
|
verticalAlignment: Text.AlignVCenter;
|
||||||
}
|
}
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: licenseText;
|
id: licenseText
|
||||||
text: root.license;
|
|
||||||
// Text size
|
anchors.top: licenseLabel.bottom
|
||||||
size: 14;
|
anchors.left: parent.left
|
||||||
// Anchors
|
width: paintedWidth
|
||||||
anchors.top: licenseLabel.bottom;
|
|
||||||
anchors.left: parent.left;
|
text: root.license
|
||||||
width: paintedWidth;
|
size: 14
|
||||||
// Style
|
color: hifi.colors.lightGray
|
||||||
color: hifi.colors.lightGray;
|
verticalAlignment: Text.AlignVCenter
|
||||||
// Alignment
|
|
||||||
verticalAlignment: Text.AlignVCenter;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: licenseHelp;
|
id: licenseHelp
|
||||||
text: "More about this license";
|
|
||||||
// Text size
|
|
||||||
size: 14;
|
|
||||||
// Anchors
|
|
||||||
anchors.top: licenseText.bottom;
|
anchors.top: licenseText.bottom;
|
||||||
anchors.left: parent.left;
|
anchors.left: parent.left;
|
||||||
width: paintedWidth;
|
width: paintedWidth;
|
||||||
// Style
|
|
||||||
color: hifi.colors.blueHighlight;
|
text: "More about this license"
|
||||||
// Alignment
|
size: 14
|
||||||
verticalAlignment: Text.AlignVCenter;
|
color: hifi.colors.blueHighlight
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.fill: parent;
|
anchors.fill: parent
|
||||||
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
licenseInfo.visible = true;
|
licenseInfo.visible = true;
|
||||||
|
@ -371,7 +401,6 @@ Rectangle {
|
||||||
}
|
}
|
||||||
if(url) {
|
if(url) {
|
||||||
licenseInfoWebView.url = url;
|
licenseInfoWebView.url = url;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -379,91 +408,97 @@ Rectangle {
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: descriptionItem;
|
id: descriptionItem
|
||||||
anchors.top: licenseItem.bottom;
|
|
||||||
anchors.topMargin: 15;
|
anchors {
|
||||||
anchors.left: parent.left;
|
top: licenseItem.bottom
|
||||||
anchors.right: parent.right;
|
topMargin: 15
|
||||||
height: childrenRect.height;
|
left: parent.left
|
||||||
RalewaySemiBold {
|
right: parent.right
|
||||||
id: descriptionLabel;
|
|
||||||
text: "DESCRIPTION:";
|
|
||||||
// Text size
|
|
||||||
size: 14;
|
|
||||||
// Anchors
|
|
||||||
anchors.top: parent.top;
|
|
||||||
anchors.left: parent.left;
|
|
||||||
width: paintedWidth;
|
|
||||||
// Style
|
|
||||||
color: hifi.colors.lightGrayText;
|
|
||||||
// Alignment
|
|
||||||
verticalAlignment: Text.AlignVCenter;
|
|
||||||
}
|
}
|
||||||
|
height: childrenRect.height
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: descriptionText;
|
id: descriptionLabel
|
||||||
text: root.description;
|
|
||||||
// Text size
|
anchors.top: parent.top
|
||||||
size: 14;
|
anchors.left: parent.left
|
||||||
// Anchors
|
width: paintedWidth
|
||||||
anchors.top: descriptionLabel.bottom;
|
|
||||||
anchors.left: parent.left;
|
text: "DESCRIPTION:"
|
||||||
width: parent.width;
|
size: 14
|
||||||
// Style
|
color: hifi.colors.lightGrayText
|
||||||
color: hifi.colors.lightGray;
|
verticalAlignment: Text.AlignVCenter
|
||||||
// Alignment
|
}
|
||||||
verticalAlignment: Text.AlignVCenter;
|
|
||||||
wrapMode: Text.Wrap;
|
RalewaySemiBold {
|
||||||
|
id: descriptionText
|
||||||
|
|
||||||
|
anchors.top: descriptionLabel.bottom
|
||||||
|
anchors.left: parent.left
|
||||||
|
width: parent.width
|
||||||
|
|
||||||
|
text: root.description
|
||||||
|
size: 14
|
||||||
|
color: hifi.colors.lightGray
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
wrapMode: Text.Wrap
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: categoriesList;
|
id: categoriesList
|
||||||
anchors.top: descriptionItem.bottom;
|
|
||||||
anchors.topMargin: 15;
|
anchors {
|
||||||
anchors.left: parent.left;
|
top: descriptionItem.bottom
|
||||||
anchors.right: parent.right;
|
topMargin: 15
|
||||||
width: parent.width;
|
left: parent.left
|
||||||
height: childrenRect.height;
|
right: parent.right
|
||||||
|
}
|
||||||
|
width: parent.width
|
||||||
|
height: childrenRect.height
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: categoryLabel;
|
id: categoryLabel
|
||||||
text: "IN:";
|
|
||||||
// Text size
|
anchors.top: parent.top
|
||||||
size: 14;
|
anchors.left: parent.left
|
||||||
// Anchors
|
width: paintedWidth
|
||||||
anchors.top: parent.top;
|
|
||||||
anchors.left: parent.left;
|
text: "IN:"
|
||||||
width: paintedWidth;
|
size: 14
|
||||||
// Style
|
color: hifi.colors.lightGrayText
|
||||||
color: hifi.colors.lightGrayText;
|
verticalAlignment: Text.AlignVCenter
|
||||||
// Alignment
|
|
||||||
verticalAlignment: Text.AlignVCenter;
|
|
||||||
}
|
}
|
||||||
ListModel {
|
ListModel {
|
||||||
id: categoriesListModel;
|
id: categoriesListModel
|
||||||
}
|
}
|
||||||
|
|
||||||
ListView {
|
ListView {
|
||||||
anchors.left: parent.left;
|
anchors {
|
||||||
anchors.right: parent.right;
|
left: parent.left;
|
||||||
anchors.top: categoryLabel.bottom;
|
right: parent.right;
|
||||||
model: categoriesListModel;
|
top: categoryLabel.bottom;
|
||||||
height: 20*model.count;
|
}
|
||||||
|
|
||||||
|
height: 20*model.count
|
||||||
|
|
||||||
|
model: categoriesListModel
|
||||||
delegate: RalewaySemiBold {
|
delegate: RalewaySemiBold {
|
||||||
id: categoryText;
|
id: categoryText
|
||||||
text: model.category;
|
|
||||||
// Text size
|
anchors.leftMargin: 15
|
||||||
size: 14;
|
width: paintedWidth
|
||||||
// Anchors
|
|
||||||
anchors.leftMargin: 15;
|
text: model.category
|
||||||
width: paintedWidth;
|
size: 14
|
||||||
height: 20;
|
height: 20
|
||||||
// Style
|
color: hifi.colors.blueHighlight
|
||||||
color: hifi.colors.blueHighlight;
|
verticalAlignment: Text.AlignVCenter
|
||||||
// Alignment
|
|
||||||
verticalAlignment: Text.AlignVCenter;
|
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.fill: categoryText;
|
anchors.fill: categoryText
|
||||||
|
|
||||||
onClicked: root.categoryClicked(model.category);
|
onClicked: root.categoryClicked(model.category);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,98 +24,115 @@ import "../common/sendAsset"
|
||||||
import "../.." as HifiCommon
|
import "../.." as HifiCommon
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: root;
|
id: root
|
||||||
property string item_id: "";
|
|
||||||
property string image_url: "";
|
|
||||||
property string name: "";
|
|
||||||
property int likes: 0;
|
|
||||||
property bool liked: false;
|
|
||||||
property string creator: "";
|
|
||||||
property string category: "";
|
|
||||||
property int price: 0;
|
|
||||||
property bool available: false;
|
|
||||||
|
|
||||||
signal buy();
|
property string item_id: ""
|
||||||
signal showItem();
|
property string image_url: ""
|
||||||
signal categoryClicked(string category);
|
property string name: ""
|
||||||
signal requestReload();
|
property int likes: 0
|
||||||
|
property bool liked: false
|
||||||
|
property string creator: ""
|
||||||
|
property string category: ""
|
||||||
|
property int price: 0
|
||||||
|
property bool available: false
|
||||||
|
|
||||||
|
signal buy()
|
||||||
|
signal showItem()
|
||||||
|
signal categoryClicked(string category)
|
||||||
|
signal requestReload()
|
||||||
|
|
||||||
HifiConstants { id: hifi; }
|
HifiConstants { id: hifi }
|
||||||
|
|
||||||
width: parent.width;
|
width: parent.width
|
||||||
height: childrenRect.height+50;
|
height: childrenRect.height+50
|
||||||
|
|
||||||
DropShadow {
|
DropShadow {
|
||||||
anchors.fill: shadowBase;
|
anchors.fill: shadowBase
|
||||||
source: shadowBase;
|
|
||||||
verticalOffset: 4;
|
source: shadowBase
|
||||||
horizontalOffset: 4;
|
verticalOffset: 4
|
||||||
radius: 6;
|
horizontalOffset: 4
|
||||||
samples: 9;
|
radius: 6
|
||||||
color: hifi.colors.baseGrayShadow;
|
samples: 9
|
||||||
|
color: hifi.colors.baseGrayShadow
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: shadowBase;
|
id: shadowBase
|
||||||
anchors.fill: itemRect;
|
|
||||||
color: "white";
|
anchors.fill: itemRect
|
||||||
|
|
||||||
|
color: "white"
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: itemRect;
|
id: itemRect
|
||||||
height: childrenRect.height;
|
|
||||||
anchors.left: parent.left;
|
|
||||||
anchors.right: parent.right;
|
|
||||||
anchors.top: parent.top;
|
|
||||||
anchors.topMargin: 20;
|
|
||||||
anchors.bottomMargin: 10;
|
|
||||||
anchors.leftMargin: 15;
|
|
||||||
anchors.rightMargin: 15;
|
|
||||||
|
|
||||||
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
top: parent.top
|
||||||
|
topMargin: 20
|
||||||
|
bottomMargin: 10
|
||||||
|
leftMargin: 15
|
||||||
|
rightMargin: 15
|
||||||
|
}
|
||||||
|
height: childrenRect.height
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.fill: parent;
|
anchors.fill: parent
|
||||||
|
|
||||||
|
hoverEnabled: true
|
||||||
|
|
||||||
onClicked: root.showItem();
|
onClicked: root.showItem();
|
||||||
onEntered: { hoverRect.visible = true; console.log("entered"); }
|
onEntered: hoverRect.visible = true;
|
||||||
onExited: { hoverRect.visible = false; console.log("exited"); }
|
onExited: hoverRect.visible = false;
|
||||||
hoverEnabled: true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: header;
|
id: header
|
||||||
anchors.left: parent.left;
|
|
||||||
anchors.right: parent.right;
|
anchors {
|
||||||
anchors.top: parent.top;
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
height: 50;
|
top: parent.top
|
||||||
|
}
|
||||||
|
height: 50
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: nameText;
|
id: nameText
|
||||||
text: root.name;
|
|
||||||
// Text size
|
anchors {
|
||||||
size: hifi.fontSizes.overlayTitle;
|
top: parent.top
|
||||||
// Anchors
|
left: parent.left
|
||||||
anchors.top: parent.top;
|
right: parent.right
|
||||||
anchors.left: parent.left;
|
rightMargin: 50
|
||||||
anchors.right: parent.right;
|
leftMargin: 15
|
||||||
anchors.rightMargin: 50;
|
bottom: parent.bottom
|
||||||
anchors.leftMargin: 15;
|
}
|
||||||
anchors.bottom: parent.bottom;
|
width: paintedWidth
|
||||||
elide: Text.ElideRight;
|
|
||||||
width: paintedWidth;
|
text: root.name
|
||||||
// Style
|
size: hifi.fontSizes.overlayTitle
|
||||||
color: hifi.colors.blueHighlight;
|
elide: Text.ElideRight
|
||||||
// Alignment
|
color: hifi.colors.blueHighlight
|
||||||
verticalAlignment: Text.AlignVCenter;
|
verticalAlignment: Text.AlignVCenter
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: likes;
|
id: likes
|
||||||
anchors.top: parent.top;
|
|
||||||
anchors.right: parent.right;
|
anchors {
|
||||||
anchors.rightMargin: 15;
|
top: parent.top
|
||||||
anchors.bottom: parent.bottom;
|
right: parent.right
|
||||||
width: childrenRect.width;
|
rightMargin: 15
|
||||||
|
bottom: parent.bottom
|
||||||
|
}
|
||||||
|
width: heart.width + likesText.width
|
||||||
|
|
||||||
Connections {
|
Connections {
|
||||||
target: MarketplaceScriptingInterface;
|
target: MarketplaceScriptingInterface
|
||||||
|
|
||||||
onMarketplaceItemLikeResult: {
|
onMarketplaceItemLikeResult: {
|
||||||
if (result.status !== 'success') {
|
if (result.status !== 'success') {
|
||||||
|
@ -126,41 +143,47 @@ Rectangle {
|
||||||
}
|
}
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: heart;
|
id: heart
|
||||||
text: "\u2665";
|
|
||||||
// Size
|
anchors {
|
||||||
size: 20;
|
top: parent.top
|
||||||
// Anchors
|
right: parent.right
|
||||||
anchors.top: parent.top;
|
rightMargin: 0
|
||||||
anchors.right: parent.right;
|
verticalCenter: parent.verticalCenter
|
||||||
anchors.rightMargin: 0;
|
}
|
||||||
anchors.verticalCenter: parent.verticalCenter;
|
|
||||||
|
text: "\u2665"
|
||||||
|
size: 20
|
||||||
horizontalAlignment: Text.AlignHCenter;
|
horizontalAlignment: Text.AlignHCenter;
|
||||||
// Style
|
color: root.liked ? hifi.colors.redAccent : hifi.colors.lightGrayText
|
||||||
color: root.liked ? hifi.colors.redAccent : hifi.colors.lightGrayText;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: likesText;
|
id: likesText
|
||||||
text: root.likes;
|
|
||||||
// Text size
|
anchors {
|
||||||
size: hifi.fontSizes.overlayTitle;
|
top: parent.top
|
||||||
// Anchors
|
right: heart.left
|
||||||
anchors.top: parent.top;
|
rightMargin: 5
|
||||||
anchors.right: heart.left;
|
leftMargin: 15
|
||||||
anchors.rightMargin: 5;
|
bottom: parent.bottom
|
||||||
anchors.leftMargin: 15;
|
}
|
||||||
anchors.bottom: parent.bottom;
|
width: paintedWidth
|
||||||
width: paintedWidth;
|
|
||||||
// Style
|
text: root.likes
|
||||||
color: hifi.colors.baseGray;
|
size: hifi.fontSizes.overlayTitle
|
||||||
// Alignment
|
color: hifi.colors.baseGray
|
||||||
verticalAlignment: Text.AlignVCenter;
|
verticalAlignment: Text.AlignVCenter
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.fill: parent;
|
anchors {
|
||||||
|
left: likesText.left
|
||||||
|
right: heart.right
|
||||||
|
top: parent.top
|
||||||
|
bottom: parent.bottom
|
||||||
|
}
|
||||||
onClicked: {
|
onClicked: {
|
||||||
console.log("like " + root.item_id);
|
|
||||||
root.liked = !root.liked;
|
root.liked = !root.liked;
|
||||||
root.likes = root.liked ? root.likes + 1 : root.likes - 1;
|
root.likes = root.liked ? root.likes + 1 : root.likes - 1;
|
||||||
MarketplaceScriptingInterface.marketplaceItemLike(root.item_id, root.liked);
|
MarketplaceScriptingInterface.marketplaceItemLike(root.item_id, root.liked);
|
||||||
|
@ -168,111 +191,128 @@ Rectangle {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
id: itemImage;
|
id: itemImage
|
||||||
source: root.image_url;
|
|
||||||
anchors.top: header.bottom;
|
anchors {
|
||||||
anchors.left: parent.left;
|
top: header.bottom
|
||||||
anchors.right: parent.right;
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
height: width*0.5625
|
height: width*0.5625
|
||||||
fillMode: Image.PreserveAspectCrop;
|
|
||||||
|
source: root.image_url
|
||||||
|
fillMode: Image.PreserveAspectCrop
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: footer;
|
id: footer
|
||||||
anchors.left: parent.left;
|
|
||||||
anchors.right: parent.right;
|
anchors {
|
||||||
anchors.top: itemImage.bottom;
|
left: parent.left
|
||||||
height: 60;
|
right: parent.right
|
||||||
|
top: itemImage.bottom
|
||||||
|
}
|
||||||
|
height: 60
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: creatorLabel;
|
id: creatorLabel
|
||||||
text: "CREATOR:";
|
|
||||||
// Text size
|
anchors {
|
||||||
size: 14;
|
top: parent.top
|
||||||
// Anchors
|
left: parent.left
|
||||||
anchors.top: parent.top;
|
leftMargin: 15
|
||||||
anchors.left: parent.left;
|
}
|
||||||
anchors.leftMargin: 15;
|
width: paintedWidth
|
||||||
width: paintedWidth;
|
|
||||||
// Style
|
text: "CREATOR:"
|
||||||
color: hifi.colors.lightGrayText;
|
size: 14
|
||||||
// Alignment
|
color: hifi.colors.lightGrayText
|
||||||
verticalAlignment: Text.AlignVCenter;
|
verticalAlignment: Text.AlignVCenter
|
||||||
}
|
}
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: creatorText;
|
id: creatorText
|
||||||
|
|
||||||
|
anchors {
|
||||||
|
top: creatorLabel.top;
|
||||||
|
left: creatorLabel.right;
|
||||||
|
leftMargin: 15;
|
||||||
|
}
|
||||||
|
width: paintedWidth;
|
||||||
|
|
||||||
text: root.creator;
|
text: root.creator;
|
||||||
// Text size
|
|
||||||
size: 14;
|
size: 14;
|
||||||
// Anchors
|
|
||||||
anchors.top: creatorLabel.top;
|
|
||||||
anchors.left: creatorLabel.right;
|
|
||||||
anchors.leftMargin: 15;
|
|
||||||
width: paintedWidth;
|
|
||||||
// Style
|
|
||||||
color: hifi.colors.lightGray;
|
color: hifi.colors.lightGray;
|
||||||
// Alignment
|
|
||||||
verticalAlignment: Text.AlignVCenter;
|
verticalAlignment: Text.AlignVCenter;
|
||||||
}
|
}
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: categoryLabel;
|
id: categoryLabel
|
||||||
|
|
||||||
|
anchors {
|
||||||
|
top: creatorLabel.bottom
|
||||||
|
left: parent.left
|
||||||
|
leftMargin: 15
|
||||||
|
}
|
||||||
|
width: paintedWidth;
|
||||||
|
|
||||||
text: "IN:";
|
text: "IN:";
|
||||||
// Text size
|
|
||||||
size: 14;
|
size: 14;
|
||||||
// Anchors
|
|
||||||
anchors.top: creatorLabel.bottom;
|
|
||||||
anchors.left: parent.left;
|
|
||||||
anchors.leftMargin: 15;
|
|
||||||
width: paintedWidth;
|
|
||||||
// Style
|
|
||||||
color: hifi.colors.lightGrayText;
|
color: hifi.colors.lightGrayText;
|
||||||
// Alignment
|
|
||||||
verticalAlignment: Text.AlignVCenter;
|
verticalAlignment: Text.AlignVCenter;
|
||||||
}
|
}
|
||||||
|
|
||||||
RalewaySemiBold {
|
RalewaySemiBold {
|
||||||
id: categoryText;
|
id: categoryText
|
||||||
text: root.category;
|
|
||||||
// Text size
|
anchors {
|
||||||
size: 14;
|
top: categoryLabel.top
|
||||||
// Anchors
|
left: categoryLabel.right
|
||||||
anchors.top: categoryLabel.top;
|
leftMargin: 15
|
||||||
anchors.left: categoryLabel.right;
|
}
|
||||||
anchors.leftMargin: 15;
|
width: paintedWidth
|
||||||
width: paintedWidth;
|
|
||||||
// Style
|
text: root.category
|
||||||
|
size: 14
|
||||||
color: hifi.colors.blueHighlight;
|
color: hifi.colors.blueHighlight;
|
||||||
// Alignment
|
|
||||||
verticalAlignment: Text.AlignVCenter;
|
verticalAlignment: Text.AlignVCenter;
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.fill: parent;
|
anchors.fill: parent
|
||||||
|
|
||||||
onClicked: root.categoryClicked(root.category);
|
onClicked: root.categoryClicked(root.category);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
HifiControlsUit.Button {
|
HifiControlsUit.Button {
|
||||||
text: root.price ? root.price : "FREE";
|
anchors {
|
||||||
buttonGlyph: root.price ? hifi.glyphs.hfc : "";
|
right: parent.right
|
||||||
anchors.right: parent.right;
|
top: parent.top
|
||||||
anchors.top: parent.top;
|
bottom: parent.bottom
|
||||||
anchors.bottom: parent.bottom;
|
rightMargin: 15
|
||||||
anchors.rightMargin: 15;
|
topMargin:10
|
||||||
anchors.topMargin:10;
|
bottomMargin: 10
|
||||||
anchors.bottomMargin: 10;
|
}
|
||||||
|
|
||||||
|
text: root.price ? root.price : "FREE"
|
||||||
|
buttonGlyph: root.price ? hifi.glyphs.hfc : ""
|
||||||
color: hifi.buttons.blue;
|
color: hifi.buttons.blue;
|
||||||
|
|
||||||
onClicked: root.buy();
|
onClicked: root.buy();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: hoverRect;
|
id: hoverRect
|
||||||
anchors.fill: parent;
|
|
||||||
border.color: hifi.colors.blueHighlight;
|
anchors.fill: parent
|
||||||
border.width: 2;
|
|
||||||
color: "#00000000";
|
border.color: hifi.colors.blueHighlight
|
||||||
visible: false;
|
border.width: 2
|
||||||
|
color: "#00000000"
|
||||||
|
visible: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue