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

cheatsheet and menu and upper right menu

Browse source
This commit is contained in:
Connor Turland 2014-02-09 10:05:32 -05:00
parent 1c49a805bd
commit bfdf706f15
8 changed files with 150 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/MMCCicon_filter2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

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

@ -453,11 +453,10 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
// initialize scroll bar for filter by metacode, then hide it and position it correctly again // initialize scroll bar for filter by metacode, then hide it and position it correctly again
$("#filter_by_metacode").mCustomScrollbar(); $("#filter_by_metacode").mCustomScrollbar();
var filterPosition = userid ? '-72px' : '-36px';
$('.sidebarFilterBox').hide().css({ $('.sidebarFilterBox').hide().css({
position:'absolute', position:'absolute',
top: '35px', top: '35px',
right: filterPosition right: '-36px'
}); });
// initialize metacode spinner and then hide it // initialize metacode spinner and then hide it

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

@ -512,7 +512,7 @@ position:absolute;
width: 35px; width: 35px;
height: 35px; height: 35px;
background: #0F1519 url('MMCCicon_mapper.png') no-repeat center center; background: #0F1519 url('MMCCicon_mapper.png') no-repeat center center;
background-size: 28px 28px; background-size: 24px 24px;
cursor:pointer; cursor:pointer;
} }
.sidebarAccountBox { .sidebarAccountBox {
@ -622,27 +622,27 @@ text-align: start;
margin-top:5px; margin-top:5px;
} }
/* wand */ /* Save To New Map */
.sidebarWand { .sidebarFork {
position:absolute; position:absolute;
top:5px; top:5px;
right:35px; right:71px;
z-index:200; z-index:200;
width: 35px; width: 35px;
height:35px; height:35px;
border-right:1px solid black; border-right:1px solid black;
} }
.sidebarWandIcon { .sidebarForkIcon {
position:absolute; position:absolute;
width: 35px; width: 35px;
height: 35px; height: 35px;
background: #0F1519 url('MMCCicon_wand.png') no-repeat center center; background: #0F1519 url('MMCCicon_save_new_map.png') no-repeat center center;
background-size: 28px 28px; background-size: 28px 28px;
cursor:pointer; cursor:pointer;
} }
.sidebarWandBox { .sidebarForkBox {
position:absolute; position:absolute;
display:none; display:none;
height:auto; height:auto;
@ -654,40 +654,48 @@ cursor:pointer;
border: 1px solid black; border: 1px solid black;
font-family: 'LatoLight', helvetica, sans-serif; font-family: 'LatoLight', helvetica, sans-serif;
} }
.sidebarWandBox ul {
list-style:none; /* end Save To New Map */
/* Save Layout */
.sidebarSave{
position:absolute;
top:5px;
right:107px;
z-index:200;
width: 35px;
height:35px;
border-right:1px solid black;
} }
.sidebarWandBox li.wandIcon {
padding: 6px 0 6px 25px; .sidebarSaveIcon {
background-size: 18px 18px; position:absolute;
background-repeat: no-repeat; width: 35px;
background-position: 0px 6px; height: 35px;
font-size: 18px; background: #0F1519 url('MMCCicon_save_layout.png') no-repeat center center;
line-height: 20px; background-size: 22px 22px;
color:white;
cursor:pointer; cursor:pointer;
} }
li.wandIcon:hover { .sidebarSaveBox {
background-position: 4px 6px; position:absolute;
} display:none;
li.wandSaveLayout { height:auto;
background-image: url('MMCCicon_save_layout.png'); width:182px;
} background: #000;
li.wandForkMap { top: 35px;
background-image: url('MMCCicon_save_new_map.png'); right:-36px;
} padding: 10px;
li.wandChangeMetacodes { border: 1px solid black;
background-image: url('MMCCicon_metacode_set.png'); font-family: 'LatoLight', helvetica, sans-serif;
} }
/* end wand */ /* Filter */
/* wand */
.sidebarFilter { .sidebarFilter {
position:absolute; position:absolute;
top:5px; top:5px;
right:71px; right:35px;
z-index:200; z-index:200;
width: 35px; width: 35px;
height:35px; height:35px;
@ -701,7 +709,7 @@ border-right:1px solid black;
position:absolute; position:absolute;
width: 35px; width: 35px;
height: 35px; height: 35px;
background: #0F1519 url('MMCCicon_filter.png') no-repeat center center; background: #0F1519 url('MMCCicon_filter2.png') no-repeat center center;
background-size: 28px 28px; background-size: 28px 28px;
cursor:pointer; cursor:pointer;
} }
@ -780,7 +788,7 @@ background-color: rgba(255,255,255,0.1);
.sidebarCollaborate { .sidebarCollaborate {
position:absolute; position:absolute;
top:5px; top:5px;
right:107px; right:143px;
z-index:200; z-index:200;
width: 35px; width: 35px;
height:35px; height:35px;
@ -791,13 +799,13 @@ border-right:1px solid black;
position:absolute; position:absolute;
width: 35px; width: 35px;
height: 35px; height: 35px;
background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat -3px -1px; background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat 0px 1px;
background-size: 40px 40px; background-size: 36px 36px;
cursor:pointer; cursor:pointer;
} }
.sidebarCollaborateIcon.blue { .sidebarCollaborateIcon.blue {
background: #0F1519 url('MMCCicon_realtime_blue.png') no-repeat center center; background: #0F1519 url('MMCCicon_realtime_blue.png') no-repeat center center;
background-size: 29px 29px; background-size: 26px 25px;
} }
.sidebarCollaborateBox { .sidebarCollaborateBox {
position:absolute; position:absolute;
@ -1762,6 +1770,38 @@ font-family:arial;
box-shadow: none; box-shadow: none;
} }
/* Cheatsheet */
.cheatsheetColumn {
float:left;
width:245px;
line-height: 17px;
font-size: 12px;
font-family: arial;
}
.cheatsheetColumn.cOne {
margin-right:10px;
}
#cheatsheet h4 {
text-decoration: underline;
font-size: 20px;
font-family: 'vinyl';
margin-top: 15px;
font-style: italic;
}
#cheatsheet .csItem {
margin: 5px 0;
}
#cheatsheet .csTitle {
font-weight: bold;
}
/* FAQ */ /* FAQ */
#wrapper > div.FAQ { #wrapper > div.FAQ {
@ -1917,20 +1957,14 @@ background-size: 22px 20px;
left:-1px; left:-1px;
height:124px; height:124px;
z-index:12; z-index:12;
width:151px; width:121px;
color: white; color: white;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0 0 0 30px;
margin: 0; margin: 0;
/*border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
-webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
-moz-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;*/
background: #0F1519;/*url('black_bg.png'); */ background: #0F1519;/*url('black_bg.png'); */
border-left:1px solid #000; border-left:1px solid #000;
border-right:1px solid #000; border-right:1px solid #000;
@ -1944,53 +1978,22 @@ background-size: 22px 20px;
display:block; display:block;
padding:0; padding:0;
text-align:center; text-align:center;
} font-family:'vinyl';
font-style:italic;
li.beta {
border-top: 1px solid black;
border-bottom: 1px solid black;
position: relative;
height: 30px;
}
.inBeta {
background: rgba(0,0,0,0.6);
display: inline-block;
color: white;
height: 30px;
padding: 0 5px;
font-family: 'LatoLight';
font-size: 30px;
position: absolute;
top: 0;
left: 0;
line-height: 30px;
}
li.beta button {
position: absolute;
top: 0;
right: 0;
width: 84px;
border-radius: 0;
font-size: 12px;
margin: 0;
cursor:pointer;
}
li.beta button:hover {
background: #6FA9AA;
}
li.meta, li.tutorial, li.exploreMaps {
height:30px; height:30px;
line-height:30px; line-height:34px;
font-size:20px; font-size:17px;
cursor:pointer;
}
.footer ul li:hover {
background:black;
} }
li.meta a, li.tutorial a, li.exploreMaps a { li.meta a, li.tutorial a, li.exploreMaps a {
display:block; display:block;
} }
li.tutorial, li.exploreMaps { li.meta, li.tutorial, li.exploreMaps {
border-top:1px solid white; border-top:1px solid white;
} }

40
app/views/layouts/_cheatsheet.html.erb Normal file
View file

@ -0,0 +1,40 @@
<%#
# @file
# The inner HTML of the cheatsheet
#%>
<h3>Quick Reference Guide</h3>
<div class="cheatsheetColumn cOne">
<h4>Topics</h4>
<div class="csItem"><span class="csTitle">Add New Topic:</span> Double-click on canvas</div>
<div class="csItem"><span class="csTitle">Select Metacode:</span> Scroll on spinner, or Tab / Shift+Tab</div>
<div class="csItem"><span class="csTitle">Creating New Topic:</span> Hit Enter after typing topic name</div>
<div class="csItem"><span class="csTitle">Get Existing Topic:</span> Click on (or use Up/Down->Enter) to pick from auto-suggestions</div>
<div class="csItem"><span class="csTitle">Open Topic Card:</span> Double-click on topic icon</div>
<div class="csItem"><span class="csTitle">Edit Topic Type:</span> Click on metacode in open topic card</div>
<div class="csItem"><span class="csTitle">Open Topic View:</span> Click on 'leave page' icon in topic card (opens in new tab)</div>
<h4>Navigation</h4>
<div class="csItem"><span class="csTitle">Move (Pan) Across Canvas:</span> Click on canvas and drag</div>
<div class="csItem"><span class="csTitle">Zoom In/Out</span> Scroll mouse on canvas</div>
<div class="csItem"><span class="csTitle">Back to Center:</span> Refresh page</div>
</div>
<div class="cheatsheetColumn cTwo">
<h4>Synapses</h4>
<div class="csItem"><span class="csTitle">Create Synapse:</span> Right-click/Alt+Click on topic and drag to other topic, enter synapse name or choose suggested</div>
<div class="csItem"><span class="csTitle">Create Topic with Synapse:</span> Right-click/Alt+Click on topic and drag to empty part of canvas</div>
<div class="csItem"><span class="csTitle">View Synapse Description:</span> Hover over synapse</div>
<div class="csItem"><span class="csTitle">Open Synapse Card:</span> Double-click synapse</div>
<div class="csItem"><span class="csTitle">Edit Synapse Description:</span> Click synapse description in synapse card</div>
<div class="csItem"><span class="csTitle">Change Synapse Direction:</span> Check/Uncheck directional arrow boxes</div>
<h4>Selection</h4>
<div class="csItem"><span class="csTitle">Select Topic or Synapse:</span> Click on one</div>
<div class="csItem"><span class="csTitle">Select Multiple:</span> Shift+Click on canvas and drag around topics, or use Shift+Click to add/remove individually</div>
<div class="csItem"><span class="csTitle">Move Multiple:</span> Select desired, Click and drag on a selected topic</div>
<div class="csItem"><span class="csTitle">Hide/Remove/Delete:</span> Right-click/Alt+Click on selection</div>
<div class="csItem"><span class="csTitle">Deselect All:</span> Hit Esc, or click any topic</div>
</div>
<div class="clearfloat"></div>

23
app/views/layouts/_lightboxes.html.erb
View file

@ -43,32 +43,13 @@
</div> </div>
<div class="lightboxContent" id="cheatsheet"> <div class="lightboxContent" id="cheatsheet">
<h3>Quick Reference Guide</h3> <%= render :partial => 'layouts/cheatsheet' %>
<div class="cheatsheetBox">
</div>
<div class="cheatsheetBox">
</div>
<div class="cheatsheetBox">
</div>
<div class="cheatsheetBox">
</div>
<div class="cheatsheetBox">
</div>
<div class="cheatsheetBox">
</div>
</div> </div>
<% if authenticated? %> <% if authenticated? %>
<div class="lightboxContent" id="invite"> <div class="lightboxContent" id="invite">
<h3>Send Invites</h3> <h3>Send Invites</h3>
<p>You can invite others to the Metamaps platform.<br> Just send them the link to</p> <p>You can invite others to the Metamaps platform. Send them this link</p>
<p class="green">http://metamaps.cc/users/sign_up</p> <p class="green">http://metamaps.cc/users/sign_up</p>
<p>and give them the access code shown below.</p> <p>and give them the access code shown below.</p>
<% mapper = current_user %> <% mapper = current_user %>

11
app/views/layouts/application.html.erb
View file

@ -65,13 +65,12 @@
<div class="footer"> <div class="footer">
<div class="logo"> <div class="logo">
<ul class="menu"> <ul class="menu">
<li class="beta"> <li class="beta" onclick="BAROMETER.show();">
<div class="inBeta">beta</div> FEEDBACK!
<button class="button" onclick="BAROMETER.show();">feedback!</button>
</li> </li>
<li class="meta openLightbox" data-open="about">about</li> <li class="meta openLightbox" data-open="about">ABOUT</li>
<li class="tutorial openLightbox" data-open="tutorial">tutorial</li> <li class="tutorial openLightbox" data-open="tutorial">TUTORIAL</li>
<li class="exploreMaps"><%= link_to "explore maps", maps_url %></li> <li class="exploreMaps"><%= link_to "EXPLORE MAPS", maps_url %></li>
</ul> </ul>
<div id="mainTitle"><%= link_to "metamaps", root_url %></div><!--<div id="beta">beta</div>--> <div id="mainTitle"><%= link_to "metamaps", root_url %></div><!--<div id="beta">beta</div>-->
</div> </div>

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

@ -7,17 +7,15 @@
<% content_for :title, @map.name + " | Metamaps" %> <% content_for :title, @map.name + " | Metamaps" %>
<% if authenticated? %> <% if authenticated? %>
<div class="sidebarWand"> <% if @map.permission == "commons" || @map.user == user %>
<div class="sidebarWandIcon"></div> <div class="sidebarSave">
<div class="sidebarWandBox"> <div class="sidebarSaveIcon"></div>
<ul> <div class="sidebarSaveBox"></div>
<% if @map.permission == "commons" || @map.user == user %> </div>
<li class="wandIcon wandSaveLayout">Save Layout</li> <% end %>
<% end %> <div class="sidebarFork">
<li class="wandIcon wandForkMap">Save To New Map</li> <div class="sidebarForkIcon"></div>
<!--<li class="wandIcon wandChangeMetacodes">Switch Metacode Set</li>--> <div class="sidebarForkBox"></div>
</ul>
</div>
</div> </div>
<div class="sidebarCollaborate"> <div class="sidebarCollaborate">
<div class="sidebarCollaborateIcon"></div> <div class="sidebarCollaborateIcon"></div>
@ -251,11 +249,11 @@
initialize("chaotic", true); initialize("chaotic", true);
}); });
} }
window.realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); /*window.realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com');
window.realtime.socket.on('connect', function() { window.realtime.socket.on('connect', function() {
subscribeToRooms(); subscribeToRooms();
console.log('socket connected'); console.log('socket connected');
}); });*/
function subscribeToRooms() { function subscribeToRooms() {
window.realtime.socket.on('maps-' + mapid, function(data) { window.realtime.socket.on('maps-' + mapid, function(data) {
//as long as you weren't the origin of the changes, update your map //as long as you weren't the origin of the changes, update your map

11
app/views/topics/show.html.erb
View file

@ -17,14 +17,9 @@
<% content_for :title, @topic.name + " | Metamaps" %> <% content_for :title, @topic.name + " | Metamaps" %>
<% if authenticated? %> <% if authenticated? %>
<div class="sidebarWand topicView"> <div class="sidebarFork">
<div class="sidebarWandIcon"></div> <div class="sidebarForkIcon"></div>
<div class="sidebarWandBox"> <div class="sidebarForkBox"></div>
<ul>
<li class="wandIcon wandForkMap">Save As Map</li>
<!--<li class="wandIcon wandChangeMetacodes">Switch Metacode Set</li>-->
</ul>
</div>
</div> </div>
<% end %> <% end %>
<div class="sidebarFilter <%= authenticated? ? 'loggedin' : 'loggedout' %>"> <div class="sidebarFilter <%= authenticated? ? 'loggedin' : 'loggedout' %>">