From 61b738e3cda63103c9b29b99c8c3ddac2831a192 Mon Sep 17 00:00:00 2001 From: howard-stearns Date: Mon, 1 May 2017 15:35:17 -0700 Subject: [PATCH 1/3] announcment styling --- interface/resources/qml/hifi/Card.qml | 60 ++++++++++++++++++++++----- 1 file changed, 49 insertions(+), 11 deletions(-) diff --git a/interface/resources/qml/hifi/Card.qml b/interface/resources/qml/hifi/Card.qml index 0b34a8f9ac..6b1beaec3a 100644 --- a/interface/resources/qml/hifi/Card.qml +++ b/interface/resources/qml/hifi/Card.qml @@ -31,7 +31,7 @@ Item { property bool drillDownToPlace: false; property bool showPlace: isConcurrency; - property string messageColor: hifi.colors.blueAccent; + property string messageColor: lozenge.visible ? "white" : hifi.colors.blueAccent; property string timePhrase: pastTime(timestamp); property int onlineUsers: 0; property bool isConcurrency: action === 'concurrency'; @@ -115,7 +115,7 @@ Item { id: lobby; visible: !hasGif || (animation.status !== Image.Ready); width: parent.width - (isConcurrency ? 0 : (2 * smallMargin)); - height: parent.height - messageHeight - (isConcurrency ? 0 : smallMargin); + height: parent.height -(isAnnouncement ? smallMargin : messageHeight) - (isConcurrency ? 0 : smallMargin); source: thumbnail || defaultThumbnail; fillMode: Image.PreserveAspectCrop; anchors { @@ -160,7 +160,24 @@ Item { margins: textPadding; } } + Rectangle { + id: lozenge; + visible: isAnnouncement; + color: hifi.colors.redHighlight; + anchors.fill: infoRow; + radius: lozenge.height / 2.0; + border.width: lozengeHot.containsMouse ? 4 : 0; + border.color: "white"; + } Row { + id: infoRow; + Image { + id: icon; + source: isAnnouncement ? "../../images/Announce-Blast.svg" : "../../images/snap-icon.svg"; + width: 40; + height: 40; + visible: ((action === 'snapshot') || isAnnouncement) && (messageHeight >= 40); + } FiraSansRegular { id: users; visible: isConcurrency || isAnnouncement; @@ -169,34 +186,42 @@ Item { color: messageColor; anchors.verticalCenter: message.verticalCenter; } - Image { - id: icon; - source: "../../images/snap-icon.svg" - width: 40; - height: 40; - visible: (action === 'snapshot') && (messageHeight >= 40); - } RalewayRegular { id: message; + visible: !isAnnouncement; text: isConcurrency ? ((onlineUsers === 1) ? "person" : "people") : (isAnnouncement ? "connections" : (drillDownToPlace ? "snapshots" : ("by " + userName))); size: textSizeSmall; color: messageColor; elide: Text.ElideRight; // requires a width to be specified` width: root.width - textPadding - - (users.visible ? users.width + parent.spacing : 0) - (icon.visible ? icon.width + parent.spacing : 0) + - (users.visible ? users.width + parent.spacing : 0) - (actionIcon.width + (2 * smallMargin)); anchors { bottom: parent.bottom; bottomMargin: parent.spacing; } } + Column { + visible: isAnnouncement; + RalewayRegular { + text: "connections" + " "; // fixme: pluralize + size: textSizeSmall; + color: "white"; // fixme not needed? get rid of complication in messageColor? + } + RalewayRegular { + text: "are here now"; // fixme pluralize + size: textSizeSmall * 0.7; + color: "white"; //' fixme not needed? get rid of complication in messageColor? + } + } spacing: textPadding; height: messageHeight; anchors { bottom: parent.bottom; left: parent.left; leftMargin: textPadding; + bottomMargin: isAnnouncement ? textPadding : 0; } } // These two can be supplied to provide hover behavior. @@ -214,6 +239,7 @@ Item { } StateImage { id: actionIcon; + visible: !isAnnouncement; imageURL: "../../images/info-icon-2-state.svg"; size: 30; buttonState: messageArea.containsMouse ? 1 : 0; @@ -223,13 +249,25 @@ Item { margins: smallMargin; } } + function go() { + goFunction(drillDownToPlace ? ("/places/" + placeName) : ("/user_stories/" + storyId)); + } MouseArea { id: messageArea; + visible: !isAnnouncement; width: parent.width; height: messageHeight; anchors.top: lobby.bottom; acceptedButtons: Qt.LeftButton; - onClicked: goFunction(drillDownToPlace ? ("/places/" + placeName) : ("/user_stories/" + storyId)); + onClicked: go(); + hoverEnabled: true; + } + MouseArea { + id: lozengeHot; + visible: lozenge.visible; + anchors.fill: lozenge; + acceptedButtons: Qt.LeftButton; + onClicked: go(); hoverEnabled: true; } } From 545fd1355ff8cd043c44725b227995cfef576f22 Mon Sep 17 00:00:00 2001 From: howard-stearns Date: Mon, 1 May 2017 15:45:26 -0700 Subject: [PATCH 2/3] cleanup --- interface/resources/qml/hifi/Card.qml | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/interface/resources/qml/hifi/Card.qml b/interface/resources/qml/hifi/Card.qml index 6b1beaec3a..9617b41150 100644 --- a/interface/resources/qml/hifi/Card.qml +++ b/interface/resources/qml/hifi/Card.qml @@ -31,7 +31,7 @@ Item { property bool drillDownToPlace: false; property bool showPlace: isConcurrency; - property string messageColor: lozenge.visible ? "white" : hifi.colors.blueAccent; + property string messageColor: isAnnouncement ? "white" : hifi.colors.blueAccent; property string timePhrase: pastTime(timestamp); property int onlineUsers: 0; property bool isConcurrency: action === 'concurrency'; @@ -71,6 +71,10 @@ Item { property bool hasGif: imageUrl.indexOf('.gif') === (imageUrl.length - 4); + function pluralize(count, singular, optionalPlural) { + return (count === 1) ? singular : (optionalPlural || (singular + "s")); + } + DropShadow { visible: isStacked; anchors.fill: shadow1; @@ -189,7 +193,7 @@ Item { RalewayRegular { id: message; visible: !isAnnouncement; - text: isConcurrency ? ((onlineUsers === 1) ? "person" : "people") : (isAnnouncement ? "connections" : (drillDownToPlace ? "snapshots" : ("by " + userName))); + text: isConcurrency ? pluralize(onlineUsers, "person", "people") : (drillDownToPlace ? "snapshots" : ("by " + userName)); size: textSizeSmall; color: messageColor; elide: Text.ElideRight; // requires a width to be specified` @@ -205,14 +209,14 @@ Item { Column { visible: isAnnouncement; RalewayRegular { - text: "connections" + " "; // fixme: pluralize + text: pluralize(onlineUsers, "connection") + " "; // hack padding size: textSizeSmall; - color: "white"; // fixme not needed? get rid of complication in messageColor? + color: messageColor; } RalewayRegular { - text: "are here now"; // fixme pluralize + text: pluralize(onlineUsers, "is here now", "are here now"); size: textSizeSmall * 0.7; - color: "white"; //' fixme not needed? get rid of complication in messageColor? + color: messageColor; } } spacing: textPadding; From ca5318f12176a6899685ed2cb2c8259196d6a63a Mon Sep 17 00:00:00 2001 From: howard-stearns Date: Mon, 1 May 2017 15:57:22 -0700 Subject: [PATCH 3/3] remove debugging code --- interface/resources/qml/hifi/tablet/TabletAddressDialog.qml | 1 - 1 file changed, 1 deletion(-) diff --git a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml index b7c0d24b24..7159b078ee 100644 --- a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml +++ b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml @@ -280,7 +280,6 @@ StackView { cardHeight: 163 + (2 * 4); metaverseServerUrl: addressBarDialog.metaverseServerUrl; labelText: 'HAPPENING NOW'; - //actions: 'concurrency,snapshot'; // uncomment this line instead of next to produce fake announcement data for testing. actions: 'announcement'; filter: addressLine.text; goFunction: goCard;