Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-09 02:16:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

QML Marketplace

Browse source 
Add keyboard while in search
General cleanup
This commit is contained in:
Roxanne Skelly 2019-01-25 13:41:16 -08:00
parent cfaf01b22a
commit ff2d51701e
3 changed files with 1058 additions and 891 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

996
interface/resources/qml/hifi/commerce/marketplace/Marketplace.qml
View file

File diff suppressed because it is too large Load diff

577
interface/resources/qml/hifi/commerce/marketplace/MarketplaceItem.qml
View file

@ -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);
} }
} }

376
interface/resources/qml/hifi/commerce/marketplace/MarketplaceListItem.qml
View file

@ -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
} }
} }
} }