glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

added little link icon next to metacode to indicate a link within a topic

Browse source
This commit is contained in:
Connor Turland 2014-11-05 11:01:18 -05:00
parent 3b2e23b1e0
commit 0b7702062f
3 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/javascripts/src/Metamaps.JIT.js
View file

@ -21,6 +21,12 @@ Metamaps.JIT = {
$(".zoomIn").click(self.zoomIn); $(".zoomIn").click(self.zoomIn);
$(".zoomOut").click(self.zoomOut); $(".zoomOut").click(self.zoomOut);
$(".zoomExtents").click(self.zoomExtents); $(".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 * convert our topic JSON into something JIT can use
@ -446,6 +452,16 @@ Metamaps.JIT = {
} else { } else {
ctx.drawImage(metacode.get('image'), pos.x - dim, pos.y - dim, dim * 2, dim * 2); 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) { 'contains': function (node, pos) {
var npos = node.pos.getc(true), var npos = node.pos.getc(true),

6
app/assets/javascripts/src/Metamaps.js
View file

@ -2070,7 +2070,8 @@ Metamaps.Realtime = {
mapperListItem += '" class="rtMapper littleRt'; mapperListItem += '" class="rtMapper littleRt';
mapperListItem += onOff; mapperListItem += onOff;
mapperListItem += '">'; 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 += data.username;
mapperListItem += '<div class="littleJuntoIcon"></div>'; mapperListItem += '<div class="littleJuntoIcon"></div>';
mapperListItem += '</li>'; mapperListItem += '</li>';
@ -2106,7 +2107,8 @@ Metamaps.Realtime = {
// create an item for them in the realtime box // create an item for them in the realtime box
if (data.userid !== Metamaps.Active.Mapper.id && self.status) { if (data.userid !== Metamaps.Active.Mapper.id && self.status) {
var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOn">'; 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 += data.username;
mapperListItem += '<div class="littleJuntoIcon"></div>'; mapperListItem += '<div class="littleJuntoIcon"></div>';
mapperListItem += '</li>'; mapperListItem += '</li>';

9
app/assets/stylesheets/application.css
View file

@ -1118,7 +1118,7 @@ h3.realtimeBoxTitle {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 9px 32px; padding: 10px 34px;
display: block; display: block;
height: 14px; height: 14px;
font-family: 'din-regular', helvetica, sans-serif; font-family: 'din-regular', helvetica, sans-serif;
@ -1126,11 +1126,16 @@ h3.realtimeBoxTitle {
line-height: 14px; line-height: 14px;
position: relative; position: relative;
} }
.rtMapperSelf img {
border: 2px solid #424242;
}
.rtUserImage { .rtUserImage {
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 0; left: 0;
border-radius: 12px; border-radius: 14px;
} }
.littleJuntoIcon { .littleJuntoIcon {
width: 24px; width: 24px;