From 292ac88c961b2762acc6919749132963fba884e3 Mon Sep 17 00:00:00 2001 From: Roxanne Skelly Date: Mon, 25 Feb 2019 11:36:45 -0800 Subject: [PATCH] Update with new standalone-optimized icon --- .../resources/icons/standalone-optimized.svg | 27 ++++++++ interface/resources/qml/hifi/Card.qml | 28 ++++---- .../hifi/commerce/marketplace/Marketplace.qml | 20 +++--- .../commerce/marketplace/MarketplaceItem.qml | 38 ++++++----- .../marketplace/MarketplaceListItem.qml | 66 ++++++++++--------- .../hifi/commerce/purchases/PurchasedItem.qml | 18 +++-- 6 files changed, 123 insertions(+), 74 deletions(-) create mode 100644 interface/resources/icons/standalone-optimized.svg diff --git a/interface/resources/icons/standalone-optimized.svg b/interface/resources/icons/standalone-optimized.svg new file mode 100644 index 0000000000..f721be9ebb --- /dev/null +++ b/interface/resources/icons/standalone-optimized.svg @@ -0,0 +1,27 @@ + + + + + + diff --git a/interface/resources/qml/hifi/Card.qml b/interface/resources/qml/hifi/Card.qml index 9beb108b36..1c0424a691 100644 --- a/interface/resources/qml/hifi/Card.qml +++ b/interface/resources/qml/hifi/Card.qml @@ -273,22 +273,28 @@ Item { } } - HiFiGlyphs { + Image { id: standaloneOptomizedBadge anchors { right: actionIcon.left - bottom: parent.bottom; + top: actionIcon.top + topMargin: 2 + rightMargin: 3 } - height: (root.isConcurrency && root.standaloneOptimized) ? 34 : 0 - - visible: root.isConcurrency && root.standaloneOptimized - - text: hifi.glyphs.hmd - size: 34 - horizontalAlignment: Text.AlignHCenter - color: messageColor - } + height: root.standaloneOptimized ? 25 : 0 + width: 25 + + visible: root.standaloneOptimized && isConcurrency + fillMode: Image.PreserveAspectFit + source: "../../icons/standalone-optimized.svg" + } + ColorOverlay { + anchors.fill: standaloneOptomizedBadge + source: standaloneOptomizedBadge + color: hifi.colors.blueHighlight + visible: root.standaloneOptimized && isConcurrency + } StateImage { id: actionIcon; diff --git a/interface/resources/qml/hifi/commerce/marketplace/Marketplace.qml b/interface/resources/qml/hifi/commerce/marketplace/Marketplace.qml index 5f97e64e6c..2206dfcb99 100644 --- a/interface/resources/qml/hifi/commerce/marketplace/Marketplace.qml +++ b/interface/resources/qml/hifi/commerce/marketplace/Marketplace.qml @@ -196,16 +196,16 @@ Rectangle { visible: true Image { - id: marketplaceHeaderImage; - source: "../common/images/marketplaceHeaderImage.png"; - anchors.top: parent.top; - anchors.topMargin: 2; - anchors.bottom: parent.bottom; - anchors.bottomMargin: 0; - anchors.left: parent.left; - anchors.leftMargin: 8; - width: 140; - fillMode: Image.PreserveAspectFit; + id: marketplaceHeaderImage + source: "../common/images/marketplaceHeaderImage.png" + anchors.top: parent.top + anchors.topMargin: 2 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 8 + width: 140 + fillMode: Image.PreserveAspectFit MouseArea { anchors.fill: parent; diff --git a/interface/resources/qml/hifi/commerce/marketplace/MarketplaceItem.qml b/interface/resources/qml/hifi/commerce/marketplace/MarketplaceItem.qml index ecd0c8b422..1579d70500 100644 --- a/interface/resources/qml/hifi/commerce/marketplace/MarketplaceItem.qml +++ b/interface/resources/qml/hifi/commerce/marketplace/MarketplaceItem.qml @@ -15,6 +15,7 @@ import Hifi 1.0 as Hifi import QtQuick 2.9 import QtQuick.Controls 2.2 import stylesUit 1.0 +import QtGraphicalEffects 1.0 import controlsUit 1.0 as HifiControlsUit import "../../../controls" as HifiControls import "../common" as HifiCommerceCommon @@ -248,28 +249,33 @@ Rectangle { id: badges anchors { - left: parent.left + right: buyButton.left top: parent.top - right: parent.right + rightMargin: 10 } height: childrenRect.height - HiFiGlyphs { + Image { id: standaloneOptomizedBadge anchors { - left: parent.left - verticalCenter: parent.verticalCenter + topMargin: 15 + right: parent.right + top: parent.top } - height: root.standaloneOptimized ? 34 : 0 + height: root.standaloneOptimized ? 50 : 0 + width: 50 visible: root.standaloneOptimized - - text: hifi.glyphs.hmd - size: 34 - horizontalAlignment: Text.AlignHCenter + fillMode: Image.PreserveAspectFit + source: "../../../../icons/standalone-optimized.svg" + } + ColorOverlay { + anchors.fill: standaloneOptomizedBadge + source: standaloneOptomizedBadge color: hifi.colors.blueHighlight - } + visible: root.standaloneOptimized + } } HifiControlsUit.Button { @@ -277,11 +283,11 @@ Rectangle { anchors { right: parent.right - top: badges.bottom - left: parent.left + top: parent.top topMargin: 15 } - height: 50 + height: 50 + width: 180 property bool isNFS: availability === "not for sale" // Note: server will say "sold out" or "invalidated" before it says NFS property bool isMine: creator === Account.username @@ -301,11 +307,11 @@ Rectangle { id: creatorItem anchors { - top: buyButton.bottom + top: parent.top leftMargin: 15 topMargin: 15 } - width: parent.width + width: paintedWidth height: childrenRect.height RalewaySemiBold { diff --git a/interface/resources/qml/hifi/commerce/marketplace/MarketplaceListItem.qml b/interface/resources/qml/hifi/commerce/marketplace/MarketplaceListItem.qml index 4fbed690f6..d0632ce8c3 100644 --- a/interface/resources/qml/hifi/commerce/marketplace/MarketplaceListItem.qml +++ b/interface/resources/qml/hifi/commerce/marketplace/MarketplaceListItem.qml @@ -240,16 +240,18 @@ Rectangle { id: creatorText anchors { - top: creatorLabel.top; - left: creatorLabel.right; - leftMargin: 15; + top: creatorLabel.top + left: creatorLabel.right + leftMargin: 15 + right: badges.left } - width: paintedWidth; + width: paintedWidth - text: root.creator; - size: 14; - color: hifi.colors.lightGray; - verticalAlignment: Text.AlignVCenter; + text: root.creator + size: 14 + elide: Text.ElideRight + color: hifi.colors.lightGray + verticalAlignment: Text.AlignVCenter } RalewaySemiBold { @@ -260,12 +262,12 @@ Rectangle { left: parent.left leftMargin: 15 } - width: paintedWidth; + width: paintedWidth - text: "IN:"; - size: 14; - color: hifi.colors.lightGrayText; - verticalAlignment: Text.AlignVCenter; + text: "IN:" + size: 14 + color: hifi.colors.lightGrayText + verticalAlignment: Text.AlignVCenter } RalewaySemiBold { @@ -275,14 +277,15 @@ Rectangle { top: categoryLabel.top left: categoryLabel.right leftMargin: 15 + right: badges.left } width: paintedWidth text: root.category size: 14 - color: hifi.colors.blueHighlight; - verticalAlignment: Text.AlignVCenter; - + color: hifi.colors.blueHighlight + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight MouseArea { anchors.fill: parent @@ -293,30 +296,33 @@ Rectangle { id: badges anchors { - left: parent.left - top: categoryLabel.bottom right: buyButton.left + top: parent.top + topMargin: 10 + rightMargin: 10 } - height: childrenRect.height + height: 50 - HiFiGlyphs { + Image { id: standaloneOptomizedBadge anchors { - left: parent.left - leftMargin: 15 - verticalCenter: parent.verticalCenter - + right: parent.right + top: parent.top } - height: 24 + height: root.standaloneOptimized ? 40 : 0 + width: 40 visible: root.standaloneOptimized - - text: hifi.glyphs.hmd - size: 24 - horizontalAlignment: Text.AlignHCenter + fillMode: Image.PreserveAspectFit + source: "../../../../icons/standalone-optimized.svg" + } + ColorOverlay { + anchors.fill: standaloneOptomizedBadge + source: standaloneOptomizedBadge color: hifi.colors.blueHighlight - } + visible: root.standaloneOptimized + } } HifiControlsUit.Button { diff --git a/interface/resources/qml/hifi/commerce/purchases/PurchasedItem.qml b/interface/resources/qml/hifi/commerce/purchases/PurchasedItem.qml index 22792e5727..87bf7afbe4 100644 --- a/interface/resources/qml/hifi/commerce/purchases/PurchasedItem.qml +++ b/interface/resources/qml/hifi/commerce/purchases/PurchasedItem.qml @@ -13,6 +13,7 @@ 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 stylesUit 1.0 @@ -848,8 +849,7 @@ Item { } } } - - HiFiGlyphs { + Image { id: standaloneOptomizedBadge anchors { @@ -858,14 +858,18 @@ Item { rightMargin: 15 bottomMargin:12 } - height: root.standaloneOptimized ? 34 : 0 + height: root.standaloneOptimized ? 36 : 0 + width: 36 visible: root.standaloneOptimized - - text: hifi.glyphs.hmd - size: 34 - horizontalAlignment: Text.AlignHCenter + fillMode: Image.PreserveAspectFit + source: "../../../../icons/standalone-optimized.svg" + } + ColorOverlay { + anchors.fill: standaloneOptomizedBadge + source: standaloneOptomizedBadge color: hifi.colors.blueHighlight + visible: root.standaloneOptimized } }