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

added tooltips on search results, added icon for change metacode set, did further styling of open topic card

Browse source
This commit is contained in:
Connor Turland 2014-02-03 00:35:21 -05:00
parent 6538577387
commit 4e3c9fc439
21 changed files with 247 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/assets/javascripts/Jit/onCreateLabelHandler.js
View file

@ -26,16 +26,17 @@ function generateShowcardHTML() {
data-type="input">$_name_$</span> \
</span> \
<div class="links"> \
<img alt="$_metacode_$" \
class="linkItem icon" \
title="click and drag to move card" \
height="40" \
width="40" \
src="$_imgsrc_$" /> \
<div class="linkItem contributor"></div> \
<div class="linkItem mapCount">$_map_count_$</div> \
<div class="linkItem synapseCount">$_synapse_count_$</div> \
<div class="linkItem mapPerm $_mk_permission_$"></div> \
<div \
class="linkItem icon" \
title="click and drag to move card"> \
<div class="metacodeTitle">$_metacode_$</div> \
<div class="metacodeImage" \
style="background-image:url($_imgsrc_$);"></div> \
</div> \
<div class="linkItem contributor"></div> \
<div class="linkItem mapCount">$_map_count_$</div> \
<div class="linkItem synapseCount">$_synapse_count_$</div> \
<div class="linkItem mapPerm $_mk_permission_$"></div> \
<a href="/topics/$_id_$" class="linkItem topicPopout" title="Open Topic in New Tab" target="_blank"></a>\
<div class="clearfloat"></div> \
</div> \
@ -78,7 +79,7 @@ function replaceVariables(html, node) {
}
} else {
go_link = '<a href="' + node.getData("link") + '" ' +
' class="go-link" target="_blank">[go]</a>';
' class="go-link" target="_blank"></a>';
a_tag = '';
close_a_tag = '';
}
@ -212,6 +213,17 @@ function populateShowCard(node) {
showCard.appendChild(perm);
}
// attach the listener that shows the metacode title when you hover over the image
$('.showcard .metacodeImage').hover(function(){
$('.showcard .icon').css('z-index','3');
$('.showcard .metacodeTitle').show();
},
function() {
$('.showcard .metacodeTitle').hide();
$('.showcard .icon').css('z-index','1');
});
//bind best_in_place ajax callbacks
$(showCard).find('.best_in_place_metacode').bind("ajax:success", function() {
var metacode = $(this).html();

18
app/assets/javascripts/application.js
View file

@ -150,6 +150,8 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
});
// initialize the search box autocomplete results
var mapheader = userid ? '<h3 class="search-header">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>';
var topicheader = userid ? '<h3 class="search-header">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>';
$('.sidebarSearchField').typeahead([
{
name: 'topics',
@ -175,7 +177,7 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
}
},
engine: Hogan,
header: '<h3 class="search-header">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>'
header: topicheader
},
{
name: 'maps',
@ -200,7 +202,7 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
}
},
engine: Hogan,
header: '<h3 class="search-header">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>'
header: mapheader
},
{
name: 'mappers',
@ -262,10 +264,10 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
var s = $('.tt-dataset-mappers .tt-suggestions');
console.log(s.css('height'));
if (s.css('height') == '0px') {
$('.tt-dataset-mappers .tt-suggestions').css('height','auto');
$('.tt-dataset-mappers .tt-suggestions').css({'height':'auto','overflow':'visible'});
$(this).removeClass('maximizeResults').addClass('minimizeResults');
} else {
$('.tt-dataset-mappers .tt-suggestions').css('height','0');
$('.tt-dataset-mappers .tt-suggestions').css({'height':'0','overflow':'hidden'});
$(this).removeClass('minimizeResults').addClass('maximizeResults');
}
});
@ -273,10 +275,10 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
var s = $('.tt-dataset-topics .tt-suggestions');
console.log(s.css('height'));
if (s.css('height') == '0px') {
s.css({'height':'auto','border-top':'none'});
s.css({'height':'auto','border-top':'none','overflow':'visible'});
$(this).removeClass('maximizeResults').addClass('minimizeResults');
} else {
s.css({'height':'0','border-top':'1px solid #222'});
s.css({'height':'0','border-top':'1px solid #222','overflow':'hidden'});
$(this).removeClass('minimizeResults').addClass('maximizeResults');
}
});
@ -284,10 +286,10 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
var s = $('.tt-dataset-maps .tt-suggestions');
console.log(s.css('height'));
if (s.css('height') == '0px') {
s.css({'height':'auto','border-top':'none'});
s.css({'height':'auto','border-top':'none','overflow':'visible'});
$(this).removeClass('maximizeResults').addClass('minimizeResults');
} else {
s.css({'height':'0','border-top':'1px solid #222'});
s.css({'height':'0','border-top':'1px solid #222','overflow':'hidden'});
$(this).removeClass('minimizeResults').addClass('maximizeResults');
}
});

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

@ -652,6 +652,9 @@ li.wandSaveLayout {
li.wandForkMap {
background-image: url('MMCCicon_save_new_map.png');
}
li.wandChangeMetacodes {
background-image: url('MMCCicon_metacode_set.png');
}
/* end wand */
@ -868,7 +871,7 @@ border: 1px solid black;
.sidebarSearch .tt-suggestions {
font-family:'LatoLight', helvetica, sans-serif;
overflow:hidden;
overflow:visible;
}
@ -891,6 +894,33 @@ border: 1px solid black;
height:36px;
margin-right:5px;
}
.sidebarSearch .topicMetacode {
float:left;
margin-right:5px;
max-width:70px;
}
.sidebarSearch .tt-dataset-topics .topicIcon {
width:36px;
height:36px;
}
.sidebarSearch .tt-dataset-topics .tt-is-under-cursor .topicIcon {
margin:0 auto;
padding-left:2px
}
.sidebarSearch .tt-dataset-topics .metacodeTip {
display:none;
}
.sidebarSearch .tt-dataset-topics .tt-is-under-cursor .metacodeTip {
display: block;
font-family: 'vinyl';
text-transform: uppercase;
font-style: italic;
font-size: 13px;
margin: 0 5px 0 2px;
text-align: center;
}
.sidebarSearch .tt-dataset-mappers .tt-suggestion .icon {
width:28px;
height:28px;
@ -898,7 +928,7 @@ border: 1px solid black;
}
.sidebarSearch .resultText {
width: 275px;
width: 240px;
display: block;
float: left;
}
@ -924,7 +954,7 @@ border: 1px solid black;
.sidebarSearch div.autoOptions {
width: 122px;
float: left;
float: right;
position:relative;
display:none;
}
@ -1006,6 +1036,33 @@ line-height: 20px;
top: 7px;
left: 13px;
}
.sidebarSearch .tip {
position: absolute;
background: white;
width: auto;
top: 0;
right: 23px;
color: black;
white-space: nowrap;
border-radius: 4px;
font-size:15px !important;
font-family:'LatoLight';
line-height:17px;
padding: 3px 5px 2px;
border: 1px solid black;
z-index:100;
}
.sidebarSearch .mapCount .tip,.sidebarSearch .synapseCount .tip, .sidebarSearch .topicCount .tip {
right:40px;
}
.sidebarSearch .hoverForTip:hover .tip {
display:block;
}
.sidebarSearch .mapContributorsIcon .mapContributors {
right:40px;
white-space:normal;
width:200px;
}
.sidebarSearch div.mapContributorsIcon {
height: 20px;

45
app/assets/stylesheets/base.css
View file

@ -147,12 +147,14 @@ font-family: 'LatoLight';
background-repeat: no-repeat;
background-position: center center;
background-size: 27px 27px;
z-index: 2;
position: relative;
}
.CardOnGraph .icon {
position:absolute;
left:-20px;
cursor:move;
width:100%;
z-index:1;
}
.linkItem.contributor {
background-image: url(MMCCicon_mapper_black.png);
@ -190,6 +192,32 @@ padding-left: 24px;
background-image: url(MMCCicon_pop-out_black.png);
}
.CardOnGraph .metacodeTitle {
font-style: italic;
font-family: 'vinyl';
text-transform: uppercase;
position: absolute;
line-height: 36px;
font-size: 20px;
display: none;
width: 90%;
padding-left: 10%;
padding-top: 4px;
background-color: crimson;
}
.CardOnGraph .metacodeImage {
cursor:move;
width:50px;
height:50px;
position:absolute;
left:-25px;
top:-5px;
background-size:50px 50px;
background-position:0 0;
background-repeat:no-repeat;
}
.CardOnGraph .link {
position:absolute;
bottom:5px;
@ -200,6 +228,8 @@ padding-left: 24px;
padding-top:8px;
width:100%;
height:25px;
background: url(MMCCicon_link.png) no-repeat 6px 6px;
background-size:24px 24px;
}
.CardOnGraph .best_in_place_link {
@ -209,7 +239,7 @@ padding-left: 24px;
text-overflow: ellipsis;
display: block;
float: left;
padding-left: 5px;
padding-left: 40px;
padding-top:2px;
font-size: 16px;
line-height: 16px;
@ -229,8 +259,13 @@ font-family: 'LatoLight';
}
.CardOnGraph .go-link {
float: right;
margin: 3px 5px 0 0;
position: absolute;
width: 34px;
height: 36px;
background: url(MMCCicon_go.png) no-repeat center center;
background-size: 20px 20px;
top: 0;
right: 12px;
}
.cardSettings {

13
app/helpers/maps_helper.rb
View file

@ -15,13 +15,16 @@ module MapsHelper
map['contributorCount'] = m.contributors.count
map['rtype'] = "map"
contributorList = ''
contributorList = m.user.name + ' created this map. '
if m.contributors.count > 0
contributorList += '<ul>'
m.contributors.each do |c|
contributorList += '<li>' + c.name + '</li>'
m.contributors.each_with_index do |c, index|
comma = (index+1) == m.contributors.count ? '' : ', '
contributorList += c.name + comma
end
contributorList += '</ul>'
contributorList += ' has worked on it.' if m.contributors.count == 1
contributorList += ' have worked on it.' if m.contributors.count > 1
else
contributorList += 'No one has added anything yet.'
end
map['contributorList'] = contributorList

51
app/views/layouts/_searchtemplates.html.erb
View file

@ -7,8 +7,10 @@
<div class="topicTemplate">
<div class="result{{rtype}}">
<img class="icon" src="{{typeImageURL}}">
<span class="tip metacodeTip">{{type}}</span>
<div class="topicMetacode">
<img src="{{typeImageURL}}" class="topicIcon" />
<span class="metacodeTip">{{type}}</span>
</div>
<div class="resultText">
<p class="resultTitle">{{value}}</p>
<p class="resultDesc">{{description}}</p>
@ -16,25 +18,26 @@
<div class="autoOptions">
<% if controller_name == 'maps' && action_name == 'show' && authenticated? && @map.authorize_to_edit(@current) %>
<button class="addToMap" onclick="return keepFromCommons(event, {{id}})"></button>
<span class="tip">add to map</span>
<button class="addToMap hoverForTip" onclick="return keepFromCommons(event, {{id}})">
<span class="tip">add to map</span>
</button>
<% end %>
<a href="/topics/{{id}}" target="_blank" class="goTo">
<a href="/topics/{{id}}" target="_blank" class="goTo hoverForTip">
<span class="tip">open in new tab</span>
</a>
<div class="mapCount">
<span class="tip">appears on maps</span>
<div class="mapCount hoverForTip">
<span class="tip">appears on this # of maps</span>
{{mapCount}}
</div>
<div class="synapseCount">
<span class="tip"># of synapses</span>
<div class="synapseCount hoverForTip">
<span class="tip"> has this # of synapses</span>
{{synapseCount}}
</div>
<div class="topicOriginatorIcon">
<span class="tip topicOriginator">{{originator}}</span>
<div class="topicOriginatorIcon hoverForTip">
<span class="tip topicOriginator">created by {{originator}}</span>
</div>
<div class="topicPermission {{permission}}">
<span class="tip">permission: {{permission}}</span>
<div class="topicPermission {{permission}} hoverForTip">
<span class="tip">topic is {{permission}}</span>
</div>
</div>
<div class="clearfloat"></div>
@ -49,23 +52,23 @@
<p class="resultDesc">{{description}}</p>
</div>
<div class="autoOptions">
<a href="/maps/{{id}}" target="_blank" class="goTo">
<a href="/maps/{{id}}" target="_blank" class="goTo hoverForTip">
<span class="tip">open in new tab</span>
</a>
<div class="topicCount">
<span class="tip">has topics</span>
<div class="topicCount hoverForTip">
<span class="tip">has this # of topics</span>
{{topicCount}}
</div>
<div class="synapseCount">
<span class="tip">has synapses</span>
<div class="synapseCount hoverForTip">
<span class="tip">has this # of synapses</span>
{{synapseCount}}
</div>
<div class="mapContributorsIcon">
<div class="mapContributorsIcon hoverForTip">
<span class="tip mapContributors">{{contributorList}}</span>
{{contributorCount}}
</div>
<div class="mapPermission {{permission}}">
<span class="tip">permission: {{permission}}</span>
<div class="mapPermission {{permission}} hoverForTip">
<span class="tip">map is {{permission}}</span>
</div>
</div>
<div class="clearfloat"></div>
@ -79,11 +82,11 @@
<p class="resultTitle">{{value}}</p>
</div>
<div class="autoOptions">
<a href="/maps/mappers/{{id}}" target="_blank" class="goTo">
<a href="/maps/mappers/{{id}}" target="_blank" class="goTo hoverForTip">
<span class="tip">open in new tab</span>
</a>
<div class="mapCount">
<span class="tip"># of maps</span>
<div class="mapCount hoverForTip">
<span class="tip">created this # of maps</span>
{{mapCount}}
</div>
</div>

6
app/views/maps/_newtopic.html.erb
View file

@ -6,8 +6,12 @@
<%= form_for Topic.new, url: topics_url, remote: true do |form| %>
<div id="metacodeImg">
<% @m = user.settings.metacodes %>
<% @metacodes = [] %>
<% @m.each do |m| %>
<% metacode = Metacode.find(m.to_i) %>
<% @metacodes.push(Metacode.find(m.to_i)) %>
<% end %>
<% @metacodes.sort! {|m1,m2| m2.name.downcase <=> m1.name.downcase }.rotate!(-1) %>
<% @metacodes.each do |metacode| %>
<img class="cloudcarousel" width="40" height="40" src="/assets/<%= metacode.icon %>" alt="<%= metacode.name %>" title="<%= metacode.name %>"/>
<% end %>
</div>

4
app/views/maps/show.html.erb
View file

@ -24,7 +24,7 @@
</div>
</div>
<% end %>
<div class="sidebarFilter">
<div class="sidebarFilter <%= authenticated? ? 'loggedin' : 'loggedout' %>">
<div class="sidebarFilterIcon"></div>
<div class="sidebarFilterBox">
<h3 class="filterByMetacode">Filter By Metacode</h3><span class="showAll">all</span><span class="hideAll">none</span>
@ -166,7 +166,7 @@
bindWandHover();
bindFilterHover();
$('.showcard').draggable({ handle: ".icon" });
$('.showcard').draggable({ handle: ".metacodeImage" });
$('#showcard').resizable({
maxHeight: 500,
maxWidth: 500,

6
app/views/topics/_new.html.erb
View file

@ -8,8 +8,12 @@
<%= form_for Topic.new, url: topics_url, remote: true do |form| %>
<div id="metacodeImg">
<% @m = user.settings.metacodes %>
<% @metacodes = [] %>
<% @m.each do |m| %>
<% metacode = Metacode.find(m.to_i) %>
<% @metacodes.push(Metacode.find(m.to_i)) %>
<% end %>
<% @metacodes.sort! {|m1,m2| m2.name.downcase <=> m1.name.downcase }.rotate!(-1) %>
<% @metacodes.each do |metacode| %>
<img class="cloudcarousel" width="40" height="40" src="/assets/<%= metacode.icon %>" alt="<%= metacode.name %>" title="<%= metacode.name %>"/>
<% end %>
</div>

4
public/assets/application-ec07fd82dedb30e38622a81e0cfcfc95.css → public/assets/application-5fb96b0d52830e3f6b85be97027430f4.css
View file

File diff suppressed because one or more lines are too long

BIN
public/assets/application-5fb96b0d52830e3f6b85be97027430f4.css.gz Normal file
View file

Binary file not shown.

36
public/assets/application-a33fe87eaf0cf83c341a24929992aab3.js Normal file
View file

File diff suppressed because one or more lines are too long

BIN
public/assets/application-a33fe87eaf0cf83c341a24929992aab3.js.gz Normal file
View file

Binary file not shown.

36
public/assets/application-bd7e83f7b33a139f170decf7e9714bc0.js
View file

File diff suppressed because one or more lines are too long

BIN
public/assets/application-bd7e83f7b33a139f170decf7e9714bc0.js.gz
View file

Binary file not shown.

BIN
public/assets/application-ec07fd82dedb30e38622a81e0cfcfc95.css.gz
View file

Binary file not shown.

4
public/assets/application.css
View file

File diff suppressed because one or more lines are too long

BIN
public/assets/application.css.gz
View file

Binary file not shown.

46
public/assets/application.js
View file

File diff suppressed because one or more lines are too long

BIN
public/assets/application.js.gz
View file

Binary file not shown.

8
public/assets/manifest.yml
View file

@ -209,8 +209,8 @@ WebSocketMain.swf: WebSocketMain-0de980edb45e36785bf9d862baa032bb.swf
WebSocketMain/index.swf: WebSocketMain-0de980edb45e36785bf9d862baa032bb.swf
WebSocketMainInsecure.swf: WebSocketMainInsecure-c4377647e57e58cacc692c8a51afc9f8.swf
WebSocketMainInsecure/index.swf: WebSocketMainInsecure-c4377647e57e58cacc692c8a51afc9f8.swf
application.js: application-bd7e83f7b33a139f170decf7e9714bc0.js
application/index.js: application-bd7e83f7b33a139f170decf7e9714bc0.js
application.js: application-a33fe87eaf0cf83c341a24929992aab3.js
application/index.js: application-a33fe87eaf0cf83c341a24929992aab3.js
scroll/mCSB_buttons.png: scroll/mCSB_buttons-0642ce29bb568932e832d150141614e6.png
scroll/mCSB_buttons/index.png: scroll/mCSB_buttons-0642ce29bb568932e832d150141614e6.png
Fonts/Lato-Lig-webfont.eot: Fonts/Lato-Lig-webfont-1435188a694a7d5e29cf4a3288ff3e36.eot
@ -221,5 +221,5 @@ Fonts/Lato-Lig-webfont.ttf: Fonts/Lato-Lig-webfont-4b8f0d5ac83e783eb84848ff32546
Fonts/Lato-Lig-webfont/index.ttf: Fonts/Lato-Lig-webfont-4b8f0d5ac83e783eb84848ff3254685c.ttf
Fonts/Lato-Lig-webfont.woff: Fonts/Lato-Lig-webfont-47c2912f319ae759c3b1cd558b080c33.woff
Fonts/Lato-Lig-webfont/index.woff: Fonts/Lato-Lig-webfont-47c2912f319ae759c3b1cd558b080c33.woff
application.css: application-ec07fd82dedb30e38622a81e0cfcfc95.css
application/index.css: application-ec07fd82dedb30e38622a81e0cfcfc95.css
application.css: application-5fb96b0d52830e3f6b85be97027430f4.css
application/index.css: application-5fb96b0d52830e3f6b85be97027430f4.css