From 0b7702062fb4aa5d704ab0f78a419fec86301cec Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Wed, 5 Nov 2014 11:01:18 -0500
Subject: [PATCH] added little link icon next to metacode to indicate a link
 within a topic

---
 app/assets/javascripts/src/Metamaps.JIT.js | 16 ++++++++++++++++
 app/assets/javascripts/src/Metamaps.js     |  6 ++++--
 app/assets/stylesheets/application.css     |  9 +++++++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/src/Metamaps.JIT.js b/app/assets/javascripts/src/Metamaps.JIT.js
index 4baca560..eb8ebe1f 100644
--- a/app/assets/javascripts/src/Metamaps.JIT.js
+++ b/app/assets/javascripts/src/Metamaps.JIT.js
@@ -21,6 +21,12 @@ Metamaps.JIT = {
         $(".zoomIn").click(self.zoomIn);
         $(".zoomOut").click(self.zoomOut);
         $(".zoomExtents").click(self.zoomExtents);
+
+        self.synapseStarImage = new Image();
+        self.synapseStarImage.src = '/assets/synapsestar.png';
+
+        self.topicMediaImage = new Image();
+        self.topicMediaImage.src = '/assets/linkedmedia.png';
     },
     /**
      * convert our topic JSON into something JIT can use
@@ -446,6 +452,16 @@ Metamaps.JIT = {
                     } else {
                         ctx.drawImage(metacode.get('image'), pos.x - dim, pos.y - dim, dim * 2, dim * 2);
                     }
+
+                    // if the topic has a link, draw a small image to indicate that
+                    var hasLink = topic.get('link') !== "" && topic.get('link') !== null;
+                    var linkImage = Metamaps.JIT.topicMediaImage;
+                    var linkImageLoaded = linkImage.complete ||
+                        (typeof linkImage.naturalWidth !== "undefined" &&
+                            linkImage.naturalWidth !== 0)
+                    if (hasLink && linkImageLoaded) {
+                        ctx.drawImage(linkImage, pos.x + dim / 2, pos.y - dim - 8, 16, 16);
+                    }
                 },
                 'contains': function (node, pos) {
                     var npos = node.pos.getc(true),
diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js
index 105ee23f..6ba3a80f 100644
--- a/app/assets/javascripts/src/Metamaps.js
+++ b/app/assets/javascripts/src/Metamaps.js
@@ -2070,7 +2070,8 @@ Metamaps.Realtime = {
         mapperListItem += '" class="rtMapper littleRt';
         mapperListItem += onOff;
         mapperListItem += '">';
-        mapperListItem += '<img src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
+        mapperListItem += '<img style="border: 2px solid ' + self.mappersOnMap[data.userid].color + ';"';
+        mapperListItem += ' src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
         mapperListItem += data.username;
         mapperListItem += '<div class="littleJuntoIcon"></div>';
         mapperListItem += '</li>';
@@ -2106,7 +2107,8 @@ Metamaps.Realtime = {
         // create an item for them in the realtime box
         if (data.userid !== Metamaps.Active.Mapper.id && self.status) {
             var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOn">';
-            mapperListItem += '<img src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
+            mapperListItem += '<img style="border: 2px solid ' + self.mappersOnMap[data.userid].color + ';"';
+            mapperListItem += ' src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
             mapperListItem += data.username;
             mapperListItem += '<div class="littleJuntoIcon"></div>';
             mapperListItem += '</li>';
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 89d879d7..e925ad4c 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1118,7 +1118,7 @@ h3.realtimeBoxTitle {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding: 9px 32px;
+    padding: 10px 34px;
     display: block;
     height: 14px;
     font-family: 'din-regular', helvetica, sans-serif;
@@ -1126,11 +1126,16 @@ h3.realtimeBoxTitle {
     line-height: 14px;
     position: relative;
 }
+
+.rtMapperSelf img {
+    border: 2px solid #424242;
+}
+
 .rtUserImage {
     position: absolute;
     top: 4px;
     left: 0;
-    border-radius: 12px;
+    border-radius: 14px;
 }
 .littleJuntoIcon {
     width: 24px;