styled autocompletes and tooltips

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

View file

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

View file

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

View file

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

View file

@ -334,8 +334,8 @@ var nodeSettings = {
//now adjust the label placement
var ctx = canvas.getCtx();
ctx.font = '14px arial';
ctx.fillStyle = '#222222';
ctx.font = 'bold 14px arial';
ctx.fillStyle = '#FFF';
ctx.textBaseline = 'hanging';
// helper function to determine how many lines are needed
@ -370,7 +370,7 @@ var nodeSettings = {
ctx.fill();
//render text
ctx.fillStyle = '#FFF';
ctx.fillStyle = '#222222';
ctx.textAlign = 'center';
for (index = 0; index < arrayOfLabelLines.length; ++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_topic2id').val(tempNode2.id);
$('#new_synapse').fadeIn('fast');
$('#synapse_desc').focus();
$('#synapse_desc').typeahead('setQuery','').focus();
tempNode = null;
tempNode2 = null;
tempInit = false;

View file

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

View file

@ -25,7 +25,7 @@
// other options are 'graph'
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() {
@ -296,7 +296,7 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
s.css({'height':'auto','border-top':'none','overflow':'visible'});
$(this).removeClass('maximizeResults').addClass('minimizeResults');
} 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');
}
});
@ -307,7 +307,7 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
s.css({'height':'auto','border-top':'none','overflow':'visible'});
$(this).removeClass('maximizeResults').addClass('minimizeResults');
} 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');
}
});

View file

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

File diff suppressed because one or more lines are too long

View file

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

View file

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