Saving

interface/resources/qml/hifi/commerce/inventory/Inventory.qml

@@ -52,7 +52,7 @@ Rectangle {
             if (result.status !== 'success') {
                 console.log("Failed to get inventory", result.message);
             } else {
-                inventoryContentsList.model = result.data.assets;
+                inventoryModel.append(result.data.assets);
             }
         }
     }
@@ -122,9 +122,9 @@ Rectangle {
         visible: root.activeView === "inventoryMain";
         // Anchors
         anchors.left: parent.left;
-        anchors.leftMargin: 16;
+        anchors.leftMargin: 4;
         anchors.right: parent.right;
-        anchors.rightMargin: 16;
+        anchors.rightMargin: 4;
         anchors.top: titleBarContainer.bottom;
         anchors.topMargin: 8;
         anchors.bottom: actionButtonsContainer.top;
@@ -153,9 +153,14 @@ Rectangle {
         // FILTER BAR END
         //
 
+        ListModel {
+            id: inventoryModel;
+        }
+
         ListView {
             id: inventoryContentsList;
             clip: true;
+            model: inventoryModel;
             // Anchors
             anchors.top: filterBarContainer.bottom;
             anchors.topMargin: 12;
@@ -163,10 +168,20 @@ Rectangle {
             anchors.bottom: parent.bottom;
             width: parent.width;
             delegate: InventoryItem {
-                width: parent.width;
+                itemName: title;
-                height: 30;
+                itemId: id;
-                itemName: modelData.title;
+                itemPreviewImageUrl: preview;
-                itemId: modelData.id;
+                anchors.topMargin: 12;
+                anchors.bottomMargin: 12;
+                
+                Connections {
+                    target: parent;
+                    onSendToInventory: {
+                        if (msg.method === 'inventory_itemInfoClicked') {
+                            sendToScript({method: 'inventory_itemInfoClicked', itemId: itemId});
+                        }
+                    }
+                }
             }
         }
     }

interface/resources/qml/hifi/commerce/inventory/InventoryItem.qml

@@ -27,58 +27,116 @@ Rectangle {
     id: root;
     property string itemName: "";
     property string itemId: "";
+    property string itemPreviewImageUrl: "";
+    property string itemHref: "";
     // Style
-    color: hifi.colors.baseGray;
+    color: hifi.colors.white;
+    // Size
+    width: parent.width;
+    height: 120;
+
+    Image {
+        id: itemPreviewImage;
+        source: root.itemPreviewImageUrl;
+        anchors.left: parent.left;
+        anchors.leftMargin: 8;
+        anchors.top: parent.top;
+        anchors.topMargin: 8;
+        anchors.bottom: parent.bottom;
+        anchors.bottomMargin: 8;
+        width: 180;
+        fillMode: Image.PreserveAspectFit;
+
+        MouseArea {
+            anchors.fill: parent;
+            onClicked: {
+                sendToInventory({method: 'inventory_itemInfoClicked', itemId: root.itemId});
+            }
+        }
+    }
 
     
     RalewayRegular {
-        id: thisItemId;
+        id: itemName;
+        anchors.top: itemPreviewImage.top;
+        anchors.left: itemPreviewImage.right;
+        anchors.leftMargin: 8;
+        anchors.right: parent.right;
+        anchors.rightMargin: 8;
+        height: 30;
         // Text size
         size: 20;
         // Style
         color: hifi.colors.blueAccent;
-        text: itemName;
+        text: root.itemName;
+        elide: Text.ElideRight;
         // Alignment
         horizontalAlignment: Text.AlignLeft;
+        verticalAlignment: Text.AlignVCenter;
+
+        MouseArea {
+            anchors.fill: parent;
+            hoverEnabled: enabled;
+            onClicked: {
+                sendToInventory({method: 'inventory_itemInfoClicked', itemId: root.itemId});
+            }
+            onEntered: {
+                itemName.color = hifi.colors.blueHighlight;
+            }
+            onExited: {
+                itemName.color = hifi.colors.blueAccent;
+            }
+        }
     }
-    MouseArea {
+
-        anchors.fill: parent;
+    Item {
-        hoverEnabled: enabled;
+        id: buttonContainer;
-        onClicked: {
+        anchors.top: itemName.bottom;
-            sendToScript({method: 'inventory_itemClicked', itemId: itemId});
+        anchors.topMargin: 8;
+        anchors.bottom: parent.bottom;
+        anchors.bottomMargin: 8;
+        anchors.left: itemPreviewImage.right;
+        anchors.leftMargin: 8;
+        anchors.right: parent.right;
+        anchors.rightMargin: 8;
+
+        // "Rez" button
+        HifiControlsUit.Button {
+            id: rezButton;
+            color: hifi.buttons.blue;
+            colorScheme: hifi.colorSchemes.dark;
+            anchors.top: parent.top;
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            height: parent.height/2 - 4;
+            text: "Rez Item"
+            onClicked: {
+                if (urlHandler.canHandleUrl(root.itemHref)) {
+                    urlHandler.handleUrl(root.itemHref);
+                }
+            }
         }
-        onEntered: {
+
-            thisItemId.color = hifi.colors.blueHighlight;
+        // "More Info" button
-        }
+        HifiControlsUit.Button {
-        onExited: {
+            id: moreInfoButton;
-            thisItemId.color = hifi.colors.blueAccent;
+            color: hifi.buttons.black;
+            colorScheme: hifi.colorSchemes.dark;
+            anchors.bottom: parent.bottom;
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            height: parent.height/2 - 4;
+            text: "More Info"
+            onClicked: {
+                sendToInventory({method: 'inventory_itemInfoClicked', itemId: root.itemId});
+            }
         }
     }
 
     //
     // FUNCTION DEFINITIONS START
     //
-    //
+    signal sendToInventory(var message);
-    // Function Name: fromScript()
-    //
-    // Relevant Variables:
-    // None
-    //
-    // Arguments:
-    // message: The message sent from the JavaScript, in this case the Marketplaces JavaScript.
-    //     Messages are in format "{method, params}", like json-rpc.
-    //
-    // Description:
-    // Called when a message is received from a script.
-    //
-    function fromScript(message) {
-        switch (message.method) {
-            default:
-                console.log('Unrecognized message from marketplaces.js:', JSON.stringify(message));
-        }
-    }
-    signal sendToScript(var message);
-
     //
     // FUNCTION DEFINITIONS END
     //

scripts/system/marketplaces/marketplaces.js

@@ -219,7 +219,7 @@
                 tablet.gotoWebScreen(MARKETPLACE_URL + '/items/' + message.itemId, MARKETPLACES_INJECT_SCRIPT_URL);
                 //tablet.popFromStack();
                 break;
-            case 'inventory_itemClicked':
+            case 'inventory_itemInfoClicked':
                 var itemId = message.itemId;
                 if (itemId && itemId !== "") {
                     tablet.gotoWebScreen(MARKETPLACE_URL + '/items/' + itemId, MARKETPLACES_INJECT_SCRIPT_URL);