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

synapse form styling and positioning

Browse source
This commit is contained in:
Connor Turland 2014-09-21 01:02:21 -04:00
parent 90e974164d
commit ff6eef7807
10 changed files with 200 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/mCSB_buttons.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.4 KiB

10
app/assets/javascripts/lib/cloudcarousel.js
View file

@ -177,10 +177,20 @@ jQuery.browser = browser;
// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
if (options.mouseWheel)
{
// START METAMAPS CODE
$('body').bind('mousewheel',this,function(event, delta) {
if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.isSwitchingSet) {
event.data.rotate(delta);
return false;
}
});
// END METAMAPS CODE
/* ORIGINAL CODE
$(container).bind('mousewheel',this,function(event, delta) {
event.data.rotate(delta);
return false;
});
*/
}
$(container).bind('mouseover click',this,function(event){

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

@ -2450,9 +2450,13 @@ Extras.Classes.Navigation = new Class({
// START METAMAPS CODE
if (e.target.id != 'infovis-canvas') return;
if (Metamaps.Create.newTopic.beingCreated) return;
// END METAMAPS CODE
$.event.stop($.event.get(e, win));
//$.event.stop($.event.get(e, win));
// END METAMAPS CODE
// ORIGINAL CODE $.event.stop($.event.get(e, win));
var val = this.config.zooming / 1000,
ans = 1 + scroll * val;

11
app/assets/javascripts/src/Metamaps.GlobalUI.js
View file

@ -107,16 +107,7 @@ Metamaps.GlobalUI = {
$('#lightbox_screen').animate({
'opacity': '0.42'
}, 200);
if (Metamaps.Create && !Metamaps.Create.metacodeScrollerInit) {
$('.customMetacodeList, .metacodeSetList').mCustomScrollbar({
mouseWheelPixels: 200,
advanced: {
updateOnContentResize: true
}
});
Metamaps.Create.metacodeScrollerInit = true;
}
if (which == "switchMetacodes") {
Metamaps.Create.isSwitchingSet = true;
}

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

@ -11,7 +11,6 @@ Metamaps.JIT = {
$(".zoomIn").click(self.zoomIn);
$(".zoomOut").click(self.zoomOut);
$(".centerMap").click(self.centerMap);
$(".zoomExtents").click(self.zoomExtents);
},
/**
@ -690,8 +689,6 @@ Metamaps.JIT = {
var self = Metamaps.JIT;
if (node && !node.nodeFrom) {
Metamaps.Create.newTopic.hide();
Metamaps.Create.newSynapse.hide();
var pos = eventInfo.getPos();
// if it's a left click, or a touch, move the node
if (e.touches || (e.button == 0 && !e.altKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) {
@ -738,6 +735,8 @@ Metamaps.JIT = {
tempNode = node;
tempInit = true;
Metamaps.Create.newTopic.hide();
Metamaps.Create.newSynapse.hide();
// set the draw synapse start positions
var l = Metamaps.Selected.Nodes.length;
if (l > 0) {
@ -763,8 +762,7 @@ Metamaps.JIT = {
temp = eventInfo.getNode();
if (temp != false && temp.id != node.id && Metamaps.Selected.Nodes.indexOf(temp) == -1) { // this means a Node has been returned
tempNode2 = temp;
Metamaps.Visualize.mGraph.plot();
Metamaps.Mouse.synapseEndCoordinates = {
x: tempNode2.pos.getc().x,
y: tempNode2.pos.getc().y
@ -775,8 +773,7 @@ Metamaps.JIT = {
n.setData('dim', 25, 'current');
});
temp.setData('dim', 35, 'current');
Metamaps.Visualize.mGraph.fx.plotNode(tempNode, Metamaps.Visualize.mGraph.canvas);
Metamaps.Visualize.mGraph.fx.plotNode(temp, Metamaps.Visualize.mGraph.canvas);
Metamaps.Visualize.mGraph.plot();
} else if (!temp) {
tempNode2 = null;
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
@ -787,8 +784,6 @@ Metamaps.JIT = {
var myY = e.clientY - 30;
$('#new_topic').css('left', myX + "px");
$('#new_topic').css('top', myY + "px");
$('#new_synapse').css('left', myX + "px");
$('#new_synapse').css('top', myY + "px");
Metamaps.Create.newTopic.x = eventInfo.getPos().x;
Metamaps.Create.newTopic.y = eventInfo.getPos().y;
Metamaps.Visualize.mGraph.plot();
@ -803,6 +798,7 @@ Metamaps.JIT = {
}, // onDragMoveTopicHandler
onDragCancelHandler: function (node, eventInfo, e) {
tempNode = null;
if (tempNode2) tempNode2.setData('dim', 25, 'current');
tempNode2 = null;
tempInit = false;
// reset the draw synapse positions to false
@ -811,7 +807,7 @@ Metamaps.JIT = {
Metamaps.Visualize.mGraph.plot();
}, // onDragCancelHandler
onDragEndTopicHandler: function (node, eventInfo, e) {
var mapping;
var midpoint = {}, pixelPos, mapping;
if (tempInit && tempNode2 == null) {
// this means you want to add a new topic, and then a synapse
@ -822,6 +818,13 @@ Metamaps.JIT = {
Metamaps.Create.newTopic.addSynapse = false;
Metamaps.Create.newSynapse.topic1id = tempNode.id;
Metamaps.Create.newSynapse.topic2id = tempNode2.id;
tempNode2.setData('dim', 25, 'current');
Metamaps.Visualize.mGraph.plot();
midpoint.x = tempNode.pos.getc().x + (tempNode2.pos.getc().x - tempNode.pos.getc().x) / 2;
midpoint.y = tempNode.pos.getc().y + (tempNode2.pos.getc().y - tempNode.pos.getc().y) / 2;
pixelPos = Metamaps.Util.coordsToPixels(midpoint);
$('#new_synapse').css('left', pixelPos.x + "px");
$('#new_synapse').css('top', pixelPos.y + "px");
Metamaps.Create.newSynapse.open();
tempNode = null;
tempNode2 = null;
@ -830,11 +833,22 @@ Metamaps.JIT = {
// this means you dragged an existing node, autosave that to the database
if (Metamaps.Active.Map) {
mapping = node.getData('mapping');
mapping.set({
mapping.save({
xloc: node.getPos().x,
yloc: node.getPos().y
});
mapping.save();
// also save any other selected nodes that also got dragged along
var l = Metamaps.Selected.Nodes.length;
for (var i = l - 1; i >= 0; i -= 1) {
var n = Metamaps.Selected.Nodes[i];
if (n !== node) {
mapping = n.getData('mapping');
mapping.save({
xloc: n.getPos().x,
yloc: n.getPos().y
});
}
};
}
}
}, //onDragEndTopicHandler
@ -1114,6 +1128,9 @@ Metamaps.JIT = {
if (Metamaps.Visualize.mGraph.busy) return;
// select the node
Metamaps.Control.selectNode(node, e);
// delete old right click menu
$('.rightclickmenu').remove();
// create new menu for clicked on node

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

@ -360,7 +360,6 @@ Metamaps.Backbone.init = function () {
*/
Metamaps.Create = {
isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open
metacodeScrollerInit: false, // indicates whether the scrollbar in the custom metacode set space has been init
selectedMetacodeSet: null,
selectedMetacodeSetIndex: null,
selectedMetacodeNames: [],
@ -438,7 +437,8 @@ Metamaps.Create = {
$('#metacodeImg').empty().append(newMetacodes).CloudCarousel({
titleBox: $('#metacodeImgTitle'),
yRadius: 40,
xPos: 150,
xRadius: 190,
xPos: 170,
yPos: 40,
speed: 0.3,
mouseWheel: true,
@ -522,7 +522,8 @@ Metamaps.Create = {
$("#metacodeImg").CloudCarousel({
titleBox: $('#metacodeImgTitle'),
yRadius: 40,
xPos: 150,
xRadius: 190,
xPos: 170,
yPos: 40,
speed: 0.3,
mouseWheel: true,
@ -611,6 +612,8 @@ Metamaps.Create = {
Metamaps.Create.newTopic.addSynapse = false;
Metamaps.Create.newSynapse.topic1id = 0;
Metamaps.Create.newSynapse.topic2id = 0;
Metamaps.Mouse.synapseStartCoordinates = [];
Metamaps.Visualize.mGraph.plot();
},
getSearchQuery: function () {
var self = Metamaps.Create.newSynapse;
@ -1400,6 +1403,20 @@ Metamaps.Util = {
getDistance: function (p1, p2) {
return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
},
coordsToPixels: function (coords) {
var canvas = Metamaps.Visualize.mGraph.canvas,
s = canvas.getSize(),
p = canvas.getPos(),
ox = canvas.translateOffsetX,
oy = canvas.translateOffsetY,
sx = canvas.scaleOffsetX,
sy = canvas.scaleOffsetY;
var pixels = {
x: (coords.x / (1/sx)) + p.x + s.width/2 + ox,
y: (coords.y / (1/sy)) + p.y + s.height/2 + oy
};
return pixels;
},
generateOptionsList: function (data) {
var newlist = "";
for (var i = 0; i < data.length; i++) {
@ -1727,18 +1744,7 @@ Metamaps.Realtime = {
var self = Metamaps.Realtime;
var socket = Metamaps.Realtime.socket;
var c = data.usercoords,
canvas = Metamaps.Visualize.mGraph.canvas,
s = canvas.getSize(),
p = canvas.getPos(),
ox = canvas.translateOffsetX,
oy = canvas.translateOffsetY,
sx = canvas.scaleOffsetX,
sy = canvas.scaleOffsetY;
var pixels = {
x: (c.x / (1/sx)) + p.x + s.width/2 + ox,
y: (c.y / (1/sy)) + p.y + s.height/2 + oy
};
var pixels = Metamaps.Util.coordsToPixels(data.usercoords);
$('#compass' + data.userid).css({
left: pixels.x + 'px',
top: pixels.y + 'px'
@ -3099,6 +3105,8 @@ Metamaps.Map = {
$('.rightclickmenu').remove();
Metamaps.TopicCard.hideCard();
Metamaps.SynapseCard.hideCard();
Metamaps.Create.newTopic.hide();
Metamaps.Create.newSynapse.hide();
Metamaps.Realtime.endActiveMap();
}
},

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

@ -230,46 +230,42 @@ input[type="submit"]:active {
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
#closenewtopic,
#closenewsynapse {
position: absolute;
top: 3px;
right: 3px;
}
.new_topic {
/* start it off screen while it initializes the spinner, then it will be hidden with jquery */
top: -1000px;
left: -1000px;
display: block;
position: absolute;
width: 300px;
margin: -40px 0 0 -50px;
}
.new_synapse {
display: none;
position: absolute;
width: 340px;
margin: -40px 0 0 -35px;
z-index: 1;
}
#new_topic .twitter-typeahead {
position: absolute !important;
top: 40px;
left: 50px;
left: 35px;
z-index: 9999;
width: 202px;
height: 37px;
font-family: ':atp';
width: 270px;
height: 42px;
}
.new_topic #topic_name,
.new_topic .tt-hint {
width: 190px;
background: rgba(0, 0, 0, 0.8);
height: 25px;
width: 254px;
background: #FFFFFF;
height: 14px;
margin: 0;
padding: 5px 5px;
border: 1px solid black;
padding: 14px 8px;
border: none;
border-radius: 2px;
outline: none;
font-size: 25px;
line-height: 35px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 14px;
color: #424242;
font-family: 'din-medium', helvetica, sans-serif;
}
.new_topic .tt-hint {
color: #BDBDBD;
}
.openMetacodeSwitcher {
display: block;
@ -279,7 +275,7 @@ input[type="submit"]:active {
position: absolute;
z-index: 2;
top: 20px;
left: 30px;
left: 16px;
}
.openMetacodeSwitcher:hover {
background-position: -16px 0;
@ -291,27 +287,15 @@ input[type="submit"]:active {
float: left;
width: 120px;
text-align: center;
margin-left: 90px;
margin-left: 110px;
}
/* synapse autocomplete */
.new_topic #topic_name {
color: white;
}
.new_topic .tt-hint {
color: grey;
}
.new_topic #topic_name,
.new_topic .tt-hint {
width: 190px;
background: rgba(0, 0, 0, 0.8);
height: 25px;
margin: 0;
padding: 5px 5px;
border: 1px solid black;
outline: none;
font-size: 18px;
line-height: 35px;
.new_synapse {
display: none;
position: absolute;
z-index: 1;
margin-left: -135px;
margin-top: -21px;
}
.new_synapse #synapse_desc {
color: rgba(255, 255, 255, 0.7);
@ -321,15 +305,18 @@ input[type="submit"]:active {
}
.new_synapse #synapse_desc,
.new_synapse .tt-hint {
width: 200px;
background: rgba(0, 0, 0, 0.8);
height: 18px;
width: 254px;
background: #FFFFFF;
height: 14px;
margin: 0;
padding: 5px 5px;
border: 1px solid black;
padding: 14px 8px;
border: none;
border-radius: 2px;
outline: none;
font-size: 16px;
line-height: 20px;
font-size: 14px;
line-height: 14px;
color: #424242;
font-family: 'din-medium', helvetica, sans-serif;
}
label,
select,
@ -909,35 +896,98 @@ float: left;
#new_topic .tt-suggestion.tt-is-under-cursor,
#new_topic .tt-suggestion.tt-is-under-mouse-cursor {
background: #0E161D;
background: #E0E0E0;
}
#new_topic .tt-suggestion {
padding: 5px;
background: rgba(42, 52, 60, 0.9);
;
background: #F5F5F5;
width: 270px;
position: relative;
}
#new_topic .autocompleteSection {
float: left;
}
#new_topic .topicType {
padding: 4px 0 0 4px;
}
#new_topic .topicTitle {
width: 130px;
line-height: 22px;
width: 190px;
line-height: 14px;
font-size: 14px;
padding: 9px 0 9px 4px;
}
#new_topic .expandTopicMetadata {
display:none;
width: 16px;
height: 16px;
position: absolute;
top: 8px;
right: 8px;
background-repeat: no-repeat;
background-image: url(arrowright_sprite.png);
background-position: 0 -32px;
}
#new_topic .tt-suggestion.tt-is-under-cursor .expandTopicMetadata,
#new_topic .tt-suggestion.tt-is-under-mouse-cursor .expandTopicMetadata {
display: block;
}
#new_topic .tt-suggestion.tt-is-under-cursor .topicMetadata,
#new_topic .tt-suggestion.tt-is-under-mouse-cursor .topicMetadata {
display: block;
}
#new_topic .topicMetadata {
position: absolute;
display: none;
top: -18px;
right: -100px;
width: 100px;
height: 70px;
background-color: #E0E0E0;
font-family: 'din-regular', helvetica, sans-serif;
font-size: 14px;
}
#new_topic .topicPermission {
width: 20px;
height: 20px;
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-position: center center;
background-size: 16px 16px;
background-image: url(permissions32_sprite.png);
position: absolute;
bottom: 4px;
right: 4px;
}
#new_topic .topicPermission.commons {
background-position: 0 0;
}
#new_topic .topicPermission.public {
background-position: -64px 0;
}
#new_topic .topicPermission.private {
background-position: -32px 0;
}
#new_topic .topicNumMaps {
height: 14px;
padding: 1px 0 1px 32px;
background-image: url(metamap16.png);
background-repeat: no-repeat;
background-position: 8px 0;
position: absolute;
top: 10px;
}
#new_topic .topicNumSynapses {
height: 14px;
padding: 1px 0 1px 32px;
background-image: url(synapse16.png);
background-repeat: no-repeat;
background-position: 8px 0;
position: absolute;
bottom: 10px;
}
#new_topic .topicOriginatorIcon {
position: relative;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center center;
background-size: 16px 16px;
background-image: url(MMCCicon_mapper.png);
position: absolute;
top: 8px;
right: 8px;
}
#new_topic .topicOriginatorIcon img {
border-radius: 12px;
}
#new_topic .topicOriginatorIcon:hover .tip {
display: block;
@ -1437,9 +1487,8 @@ float: left;
.customMetacodeList,
.metacodeSetList {
height: 301px;
overflow: hidden;
overflow-y: auto;
margin: 5px 0 15px 0;
/* border-bottom: 1px solid #BBB;*/
}
.customMetacodeList ul li {
cursor: pointer;
@ -1937,8 +1986,8 @@ float: left;
#wrapper .requestInvite {
width: 700px;
margin: 0 auto;
padding: 20px;
background: rgba(0, 0, 0, 0.4);
padding: 0 0 60px 0;
background: #FFFFFF;
color: white;
height: 100%;
overflow: hidden;

1
app/helpers/topics_helper.rb
View file

@ -15,6 +15,7 @@ module TopicsHelper
topic['mapCount'] = t.maps.count
topic['synapseCount'] = t.synapses.count
topic['originator'] = t.user.name
topic['originatorImage'] = t.user.image
topic['rtype'] = "topic"
temp.push topic

14
app/views/layouts/_templates.html.erb
View file

@ -167,11 +167,17 @@
</script>
<script type="text/template" id="topicAutocompleteTemplate">
<img class="autocompleteSection topicType" width="22" height="22" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
<img class="autocompleteSection topicType" width="24" height="24" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
<p class="autocompleteSection topicTitle">{{label}}</p>
<div class="autocompleteSection topicPermission {{permission}}"></div>
<div class="autocompleteSection topicOriginatorIcon hoverForTip">
<span class="tip topicOriginator">{{originator}}</span>
<div class="expandTopicMetadata"></div>
<div class="topicMetadata">
<div class="topicNumMaps">{{mapCount}}</div>
<div class="topicNumSynapses">{{synapseCount}}</div>
<div class="topicOriginatorIcon hoverForTip">
<img width="24" height="24" src="{{originatorImage}}" />
<span class="tip topicOriginator">{{originator}}</span>
</div>
<div class="topicPermission {{permission}}"></div>
</div>
<div class="clearfloat"></div>
</script>

6
app/views/main/requestinvite.html.erb
View file

@ -9,9 +9,3 @@
<div id="yield">
<iframe class="requestInvite" src="https://docs.google.com/forms/d/1lWoKPFHErsDfV5l7-SvcHxwX3vDi9nNNVW0rFMgJwgg/viewform?embedded=true" width="700" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
<script>
$(document).ready(function() {
$('.requestInvite').height( (parseInt($('body').height()) - 40) );
});
</script>