From ff6eef7807ee942e4c0788f7789e1c435778c2a0 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sun, 21 Sep 2014 01:02:21 -0400 Subject: [PATCH] synapse form styling and positioning --- app/assets/images/mCSB_buttons.png | Bin 1394 -> 0 bytes app/assets/javascripts/lib/cloudcarousel.js | 10 + app/assets/javascripts/src/JIT.js | 6 +- .../javascripts/src/Metamaps.GlobalUI.js | 11 +- app/assets/javascripts/src/Metamaps.JIT.js | 41 ++-- app/assets/javascripts/src/Metamaps.js | 38 ++-- app/assets/stylesheets/application.css | 193 +++++++++++------- app/helpers/topics_helper.rb | 1 + app/views/layouts/_templates.html.erb | 14 +- app/views/main/requestinvite.html.erb | 6 - 10 files changed, 200 insertions(+), 120 deletions(-) delete mode 100644 app/assets/images/mCSB_buttons.png diff --git a/app/assets/images/mCSB_buttons.png b/app/assets/images/mCSB_buttons.png deleted file mode 100644 index 44388680c40e583da65717dadc237a5ee9d2448f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1394 zcmbVLZA=?w9KQ}XUNYFo=H$hV^9W>Q(tB%ry_3S|T?^eP?MfAhV|w%sxWV0Z*Mk;x zfG&$OW^=MPvZqdjusT;{OoJ_3chu=MYLg!3H4!Qo)J73@ z$$Ycu6M3O?*Cnw8f|3NuU#Hi(tC)Z)8~K=yF(L;68iGp7B0)aTD(Y~f*eoeF?9*)RuN{ETrka=DP$gyh_ zf#+59RvWV5RGr%kv#KV-W+PS{z$_SS!Hqa+qA2P~n80uh#RwE9igAh|2?oR9_=f;% zn$X1fIA`1zIN6XET@NxS8V-kzVbZ8-%_vUObc}-_ih)LPs8iATNU;*iPcU#|D4h9S?Ya#Co-TwS2i@*PVkHz$6i68w;e#k{#86p|#Wk-T(tYB;ZY-%C@^=PB z)F+12b}azv(UhM6gWNsbP)rec!+10a6oqf&)Ihr|D!PlaA>hR*NCJc7982OfMUZyZ zf#W!BG1;9Mg|ifmnQ7LP;8+SvI~^91GMQMrox*VkZg&!#lb}palfz1vQ`Q95rG#`| z35W^160jS`k`Ki)tS0ihs`*v5Eztqq7FAb6Eou;EYs_%1qzGy_6f4d`temJx9irgW zR2iPnE+Z{r9pgaQEM>7%tUVUBoy1wEmE>>>f!SGtMB-TC|6~jW&Y-c@_)n`Ou0a3A z#Kp!3hsDtm6)-Ov7>t(IDEqZg^s+qi;>F1y~4!(28!;Sx) z53gP$bgwTfycicZb#n*rR&3s!xiW9)#{)e`R%zp0%E;bs+u+u;jiXrf*~zQ<9WKY( z=t=L?gmuS9@8)2}yX$U7PWSEnV&IqHmV4F${bK*Nnc%U@xwW6W8xNN}@&jADWy7*t z(M<(kLr3IH@5DHSPVTACKl9gx72A{B%-{5;f7iRa@P=!qqIXt%ZO7mhSNA=3&HbT6 z4}Kc!`SU_g=a)VA$9KMO$Q?AC&zLkZ;@b_sfpu*B=TnCLseM_G50gcQ>4sN`yrx3_ zCC_!&KH}sP&m4)4Ht%~n+rTFuxU*VXKa^DQ;&th*7oaQ0`g;ydf0F&cd2M*akUO0W zmEGDnc2=vv(? 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 diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js index 67eb5517..84700063 100644 --- a/app/assets/javascripts/src/Metamaps.js +++ b/app/assets/javascripts/src/Metamaps.js @@ -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(); } }, diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index ebb6c2b5..711d0b8f 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -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; diff --git a/app/helpers/topics_helper.rb b/app/helpers/topics_helper.rb index f6587c4c..84c0d9a7 100644 --- a/app/helpers/topics_helper.rb +++ b/app/helpers/topics_helper.rb @@ -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 diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb index ee6d5409..a8f10590 100644 --- a/app/views/layouts/_templates.html.erb +++ b/app/views/layouts/_templates.html.erb @@ -167,11 +167,17 @@ diff --git a/app/views/main/requestinvite.html.erb b/app/views/main/requestinvite.html.erb index 4f0f2b18..2b147db0 100644 --- a/app/views/main/requestinvite.html.erb +++ b/app/views/main/requestinvite.html.erb @@ -9,9 +9,3 @@
- -