From 61b738e3cda63103c9b29b99c8c3ddac2831a192 Mon Sep 17 00:00:00 2001
From: howard-stearns <howard.stearns@gmail.com>
Date: Mon, 1 May 2017 15:35:17 -0700
Subject: [PATCH] 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;
     }
 }