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

styled autocompletes and tooltips

Browse source
This commit is contained in:
Connor Turland 2014-03-03 16:58:03 -08:00
parent 8c1c4e3202
commit 8c985add2c
10 changed files with 77 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Gemfile
View file

@ -14,8 +14,8 @@ gem 'formtastic'
gem 'json' gem 'json'
gem 'rails3-jquery-autocomplete' gem 'rails3-jquery-autocomplete'
gem 'best_in_place' gem 'best_in_place'
#gem 'therubyracer' #optional gem 'therubyracer' #optional
#gem 'rb-readline' gem 'rb-readline'
# Gems used only for assets and not required # Gems used only for assets and not required
# in production environments by default. # in production environments by default.

4
Gemfile~
View file

@ -14,8 +14,8 @@ gem 'formtastic'
gem 'json' gem 'json'
gem 'rails3-jquery-autocomplete' gem 'rails3-jquery-autocomplete'
gem 'best_in_place' gem 'best_in_place'
gem 'therubyracer' #optional #gem 'therubyracer' #optional
gem 'rb-readline' #gem 'rb-readline'
# Gems used only for assets and not required # Gems used only for assets and not required
# in production environments by default. # in production environments by default.

26
app/assets/javascripts/Jit/graphsettings-event-handlers.js
View file

@ -360,19 +360,19 @@ function canvasDoubleClickHandler(canvasLoc,e) {
} }
} }
$('#new_topic').fadeOut('fast'); if (!MetamapsModel.didPan) {
$('#new_synapse').fadeOut('fast'); $('#new_topic').fadeOut('fast');
// reset the draw synapse positions to false $('#new_synapse').fadeOut('fast');
MetamapsModel.synapseStartCoord = false; $('.rightclickmenu').remove();
MetamapsModel.synapseEndCoord = false; // reset the draw synapse positions to false
// set all node dimensions back to normal MetamapsModel.synapseStartCoord = false;
Mconsole.graph.eachNode(function (n) { MetamapsModel.synapseEndCoord = false;
n.setData('dim', 25, 'current'); deselectAllNodes();
}); tempInit = false;
tempInit = false; tempNode = null;
tempNode = null; tempNode2 = null;
tempNode2 = null; Mconsole.plot();
Mconsole.plot(); }
}//canvasDoubleClickHandler }//canvasDoubleClickHandler
function handleSelectionBeforeDragging(node, e) { function handleSelectionBeforeDragging(node, e) {

8
app/assets/javascripts/Jit/graphsettings.js
View file

@ -334,8 +334,8 @@ var nodeSettings = {
//now adjust the label placement //now adjust the label placement
var ctx = canvas.getCtx(); var ctx = canvas.getCtx();
ctx.font = '14px arial'; ctx.font = 'bold 14px arial';
ctx.fillStyle = '#222222'; ctx.fillStyle = '#FFF';
ctx.textBaseline = 'hanging'; ctx.textBaseline = 'hanging';
// helper function to determine how many lines are needed // helper function to determine how many lines are needed
@ -370,7 +370,7 @@ var nodeSettings = {
ctx.fill(); ctx.fill();
//render text //render text
ctx.fillStyle = '#FFF'; ctx.fillStyle = '#222222';
ctx.textAlign = 'center'; ctx.textAlign = 'center';
for (index = 0; index < arrayOfLabelLines.length; ++index) { for (index = 0; index < arrayOfLabelLines.length; ++index) {
ctx.fillText(arrayOfLabelLines[index], x + (width/2), y + 5 + (16*index)); ctx.fillText(arrayOfLabelLines[index], x + (width/2), y + 5 + (16*index));
@ -565,7 +565,7 @@ function onDragEndTopicHandler(node, eventInfo, e, allowRealtime) {
$('#synapse_topic1id').val(tempNode.id); $('#synapse_topic1id').val(tempNode.id);
$('#synapse_topic2id').val(tempNode2.id); $('#synapse_topic2id').val(tempNode2.id);
$('#new_synapse').fadeIn('fast'); $('#new_synapse').fadeIn('fast');
$('#synapse_desc').focus(); $('#synapse_desc').typeahead('setQuery','').focus();
tempNode = null; tempNode = null;
tempNode2 = null; tempNode2 = null;
tempInit = false; tempInit = false;

2
app/assets/javascripts/Jit/jit2.0.0.js
View file

@ -7264,7 +7264,7 @@ Graph.Label.Native = new Class({
ctx.quadraticCurveTo(x, y, x + radius, y); ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath(); ctx.closePath();
ctx.fill(); ctx.fill();
ctx.stroke(); //ctx.stroke();
ctx.fillStyle = ctx.strokeStyle = node.getLabelData('color'); ctx.fillStyle = ctx.strokeStyle = node.getLabelData('color');

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

@ -25,7 +25,7 @@
// other options are 'graph' // other options are 'graph'
var viewMode = "list"; var viewMode = "list";
var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null, gType, tempNode = null, tempInit = false, tempNode2 = null, metacodeIMGinit = false, findOpen = false, analyzeOpen = false, organizeOpen = false, goRealtime = false, mapid = null, mapperm = false, touchPos, touchDragNode, mouseIsDown = false; var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null, gType, tempNode = null, tempInit = false, tempNode2 = null, metacodeIMGinit = false, goRealtime = false, mapid = null, mapperm = false, touchPos, touchDragNode, mouseIsDown = false;
$(document).ready(function() { $(document).ready(function() {
@ -296,7 +296,7 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
s.css({'height':'auto','border-top':'none','overflow':'visible'}); s.css({'height':'auto','border-top':'none','overflow':'visible'});
$(this).removeClass('maximizeResults').addClass('minimizeResults'); $(this).removeClass('maximizeResults').addClass('minimizeResults');
} else { } else {
s.css({'height':'0','border-top':'1px solid #222','overflow':'hidden'}); s.css({'height':'0','border-top':'1px solid rgb(56, 56, 56)','overflow':'hidden'});
$(this).removeClass('minimizeResults').addClass('maximizeResults'); $(this).removeClass('minimizeResults').addClass('maximizeResults');
} }
}); });
@ -307,7 +307,7 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
s.css({'height':'auto','border-top':'none','overflow':'visible'}); s.css({'height':'auto','border-top':'none','overflow':'visible'});
$(this).removeClass('maximizeResults').addClass('minimizeResults'); $(this).removeClass('maximizeResults').addClass('minimizeResults');
} else { } else {
s.css({'height':'0','border-top':'1px solid #222','overflow':'hidden'}); s.css({'height':'0','border-top':'1px solid rgb(56, 56, 56)','overflow':'hidden'});
$(this).removeClass('minimizeResults').addClass('maximizeResults'); $(this).removeClass('minimizeResults').addClass('maximizeResults');
} }
}); });

4
app/assets/javascripts/carousel/cloud-carousel.1.0.5.js
View file

@ -240,8 +240,8 @@ jQuery.browser = browser;
if ( items[this.frontIndex] === undefined ) { return; } // Images might not have loaded yet. if ( items[this.frontIndex] === undefined ) { return; } // Images might not have loaded yet.
// METAMAPS CODE // METAMAPS CODE
$('#topic_metacode').val($(items[this.frontIndex].image).attr('title')); $('#topic_metacode').val($(items[this.frontIndex].image).attr('title'));
$('img.cloudcarousel').css({"background":"none", "width":"","height":""}); //$('img.cloudcarousel').css({"background":"none", "width":"","height":""});
$(items[this.frontIndex].image).css({"width":"45px","height":"45px"}); //$(items[this.frontIndex].image).css({"width":"45px","height":"45px"});
// NOT METAMAPS CODE // NOT METAMAPS CODE
$(options.titleBox).html( $(items[this.frontIndex].image).attr('title')); $(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
$(options.altBox).html( $(items[this.frontIndex].image).attr('alt')); $(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));

27
app/assets/jit2.0.0-yc.js
View file

File diff suppressed because one or more lines are too long

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

@ -315,11 +315,12 @@ font-family: 'LatoLight';
} }
#metacodeImgTitle { #metacodeImgTitle {
color:#000; color:#FFF;
float:left; float:left;
width:120px; width:120px;
text-align:center; text-align:center;
margin-left:90px; margin-left:90px;
font-family: 'LatoRegular';
} }
/* synapse autocomplete */ /* synapse autocomplete */
@ -332,10 +333,10 @@ margin: 0;
padding: 5px 5px; padding: 5px 5px;
border: 1px solid black; border: 1px solid black;
outline: none; outline: none;
font-size: 25px; font-size: 18px;
line-height: 35px; line-height: 35px;
color: rgba(255,255,255,0.7); color: white;
font-family: 'LatoLight'; font-family: 'LatoRegular';
} }
.new_synapse #synapse_desc, .new_synapse .tt-hint { .new_synapse #synapse_desc, .new_synapse .tt-hint {
@ -346,10 +347,10 @@ margin: 0;
padding: 5px 5px; padding: 5px 5px;
border: 1px solid black; border: 1px solid black;
outline: none; outline: none;
font-size: 18px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
font-family: 'LatoLight'; font-family: 'LatoRegular';
} }
label, select, input, textarea { label, select, input, textarea {
@ -968,18 +969,17 @@ cursor:pointer;
margin: 0; margin: 0;
border: 0; border: 0;
outline: none; outline: none;
font-size: 25px; font-size: 18px;
line-height:35px; line-height:35px;
background:#0F1519; background:#0F1519;
color: rgba(255,255,255,0.6); color: rgba(255,255,255,0.6);
font-family: 'LatoLight'; font-family: 'LatoRegular';
} }
.sidebarSearch .tt-dropdown-menu { .sidebarSearch .tt-dropdown-menu {
left:-35px !important; left:-35px !important;
background: #0F1519; background: #0F1519;
min-width: 440px; min-width: 440px;
border: 1px solid black;
} }
.sidebarSearch .tt-dropdown-menu h3 { .sidebarSearch .tt-dropdown-menu h3 {
@ -1027,12 +1027,11 @@ border: 1px solid black;
.sidebarSearch .tt-suggestion { .sidebarSearch .tt-suggestion {
background: rgba(0,0,0,0.5); background: #2A343C;
border: 1px solid black;
} }
.sidebarSearch .tt-is-under-cursor { .sidebarSearch .tt-is-under-cursor {
background:black; background:#0E161D;
} }
.sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap, .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .resulttopic { .sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap, .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .resulttopic {
@ -1079,24 +1078,25 @@ border: 1px solid black;
} }
.sidebarSearch .resultText { .sidebarSearch .resultText {
width: 240px; width: 250px;
display: block; display: block;
float: left; float: left;
} }
.sidebarSearch .resultTitle { .sidebarSearch .resultTitle {
font-weight:bold; font-weight:normal;
font-size:20px; font-family: 'LatoRegular';
font-size:18px;
line-height:22px; line-height:22px;
width:100%; width:100%;
padding-top:8px; padding-top:8px;
} }
.sidebarSearch .resultDesc { .sidebarSearch .resultDesc {
font-style:italic; font-family: 'LatoItalic';
font-size:16px; font-size:14px;
line-height:16px; line-height:16px;
width:100%; width:100%;
padding: 6px 0; padding: 3px 0 6px 0;
} }
.sidebarSearch .tip { .sidebarSearch .tip {
@ -1197,10 +1197,9 @@ line-height: 20px;
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
font-size:15px !important; font-size:15px !important;
font-family:'LatoLight'; font-family:'LatoRegular';
line-height:17px; line-height:17px;
padding: 3px 5px 2px; padding: 3px 5px 2px;
border: 1px solid black;
z-index:100; z-index:100;
} }
.sidebarSearch .mapCount .tip,.sidebarSearch .synapseCount .tip, .sidebarSearch .topicCount .tip { .sidebarSearch .mapCount .tip,.sidebarSearch .synapseCount .tip, .sidebarSearch .topicCount .tip {
@ -1369,13 +1368,13 @@ background-position: 5px 2px;
/* topic autocomplete */ /* topic autocomplete */
#new_topic .tt-suggestion.tt-is-under-cursor { #new_topic .tt-suggestion.tt-is-under-cursor {
background: black; background: #0E161D;
} }
#new_topic .tt-suggestion { #new_topic .tt-suggestion {
padding: 5px; padding: 5px;
font-family: 'LatoLight'; font-family: 'LatoLight';
background:#0F1519; background: #2A343C;
} }
#new_topic .autocompleteSection { #new_topic .autocompleteSection {
@ -1425,11 +1424,10 @@ background:#0F1519;
color: black; color: black;
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
font-size:13px !important; font-size:15px !important;
font-family:'LatoLight'; font-family:'LatoRegular';
line-height:14px; line-height:15px;
padding: 2px 5px 2px; padding: 2px 5px 2px;
border: 1px solid black;
z-index:100; z-index:100;
} }
@ -1437,7 +1435,7 @@ background:#0F1519;
#new_synapse .tt-dropdown-menu { #new_synapse .tt-dropdown-menu {
width: 212px; width: 212px;
background:#0F1519; background:#2A343C;
} }
#new_synapse .tt-dropdown-menu h3 { #new_synapse .tt-dropdown-menu h3 {
@ -1450,7 +1448,7 @@ margin: 3px;
} }
#new_synapse .tt-suggestion.tt-is-under-cursor { #new_synapse .tt-suggestion.tt-is-under-cursor {
background: black; background: #0E161D;
} }
#new_synapse .tt-suggestion { #new_synapse .tt-suggestion {
@ -1504,11 +1502,10 @@ margin: 3px;
color: black; color: black;
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
font-size:13px !important; font-size:15px !important;
font-family:'LatoLight'; font-family:'LatoRegular';
line-height:14px; line-height:15px;
padding: 2px 5px 2px; padding: 2px 5px 2px;
border: 1px solid black;
z-index:100; z-index:100;
} }
@ -1588,7 +1585,7 @@ z-index: 100;
top: 38px; top: 38px;
left: 6px; left: 6px;
} }
.mapPermission .tip { .mapInfoBox .mapPermission .tip {
top: 0; top: 0;
right: 32px; right: 32px;
} }
@ -1606,7 +1603,7 @@ background-image: url(MMCCicon_synapse.png);
background-position: 18px 6px; background-position: 18px 6px;
background-size: 27px 27px; background-size: 27px 27px;
} }
.mapPermission { .mapInfoBox .mapPermission {
background-position: 0 center; background-position: 0 center;
background-size: 30px 30px; background-size: 30px 30px;
width: 30px; width: 30px;
@ -1615,13 +1612,13 @@ padding: 0;
margin: 5px 30px 5px 10px; margin: 5px 30px 5px 10px;
position: relative; position: relative;
} }
.mapPermission.commons { .mapInfoBox .mapPermission.commons {
background-image:url(MMCCicon_commons.png); background-image:url(MMCCicon_commons.png);
} }
.mapPermission.public { .mapInfoBox .mapPermission.public {
background-image:url(MMCCicon_public.png); background-image:url(MMCCicon_public.png);
} }
.mapPermission.private { .mapInfoBox .mapPermission.private {
background-image:url(MMCCicon_private.png); background-image:url(MMCCicon_private.png);
} }
@ -1633,36 +1630,36 @@ position: relative;
background-image: url(MMCCicon_minimize_arrow.png) !important; background-image: url(MMCCicon_minimize_arrow.png) !important;
cursor: pointer; cursor: pointer;
} }
.mapPermission .permissionSelect { .mapInfoBox .mapPermission .permissionSelect {
list-style: none; list-style: none;
width: 30px; width: 30px;
height: 60px; height: 60px;
position: relative; position: relative;
top: 30px; top: 30px;
} }
.mapPermission .permissionSelect li { .mapInfoBox .mapPermission .permissionSelect li {
width: 30px; width: 30px;
height: 30px; height: 30px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: 30px 30px; background-size: 30px 30px;
} }
.mapPermission .permissionSelect .commons { .mapInfoBox .mapPermission .permissionSelect .commons {
background-image: url(MMCCicon_commons.png); background-image: url(MMCCicon_commons.png);
} }
.mapPermission .permissionSelect .public { .mapInfoBox .mapPermission .permissionSelect .public {
background-image: url(MMCCicon_public.png); background-image: url(MMCCicon_public.png);
} }
.mapPermission .permissionSelect .private { .mapInfoBox .mapPermission .permissionSelect .private {
background-image: url(MMCCicon_private.png); background-image: url(MMCCicon_private.png);
} }
.mapPermission .permissionSelect .commons:hover { .mapInfoBox .mapPermission .permissionSelect .commons:hover {
background-image: url(MMCCicon_commons_black.png); background-image: url(MMCCicon_commons_black.png);
} }
.mapPermission .permissionSelect .public:hover { .mapInfoBox .mapPermission .permissionSelect .public:hover {
background-image: url(MMCCicon_public_black.png); background-image: url(MMCCicon_public_black.png);
} }
.mapPermission .permissionSelect .private:hover { .mapInfoBox .mapPermission .permissionSelect .private:hover {
background-image: url(MMCCicon_private_black.png); background-image: url(MMCCicon_private_black.png);
} }
@ -1923,18 +1920,18 @@ font-family:arial;
.new_map .tip { .new_map .tip {
display:none; display:none;
position: absolute; position: absolute;
background: white; background: black;
width: 150px; width: 150px;
top: 85px; top: 85px;
left: -32px; left: -29px;
color: black; color: white;
border-radius: 4px; border-radius: 4px;
font-size:15px !important; font-size:15px !important;
font-family:'LatoLight'; font-family:'LatoRegular';
line-height:17px; line-height:17px;
padding: 3px 5px 2px; padding: 3px 5px 2px;
border: 1px solid black;
z-index:100; z-index:100;
text-align:center;
} }
.new_map .hoverForTip:hover .tip { .new_map .hoverForTip:hover .tip {
display:block; display:block;

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

@ -348,17 +348,15 @@ float:left;
.CardOnGraph .tip, .mapCard .tip { .CardOnGraph .tip, .mapCard .tip {
display:none; display:none;
position: absolute; position: absolute;
background: white; background: black;
width: 155px;
top: 35px; top: 35px;
left: 0; left: 0;
color: black; color: white;
border-radius: 4px; border-radius: 4px;
font-size:15px !important; font-size:15px !important;
font-family:'LatoLight'; font-family:'LatoRegular';
line-height:17px; line-height:17px;
padding: 3px 5px 2px; padding: 3px 5px 2px;
border: 1px solid black;
z-index:100; z-index:100;
} }