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

updated cheatsheet to be tabbed

Browse source
This commit is contained in:
Connor Turland 2014-06-14 18:21:54 -04:00
parent 2bb5c7a6bd
commit bffda35686
4 changed files with 152 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/jquery/AllMappingPages.js vendored
View file

@ -91,4 +91,8 @@ $(document).ready(function () {
$('#center-container').bind('contextmenu', function (e) {
return false;
});
// tab the cheatsheet
$('#cheatSheet').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#cheatSheet .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
}); // end document.ready

4
app/assets/javascripts/jquery/AuthCanEditMappingPages.js vendored
View file

@ -158,10 +158,6 @@ $(document).ready(function () {
selected: MetamapsModel.selectedMetacodeSetIndex
}).addClass("ui-tabs-vertical ui-helper-clearfix");
$("#metacodeSwitchTabs .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
$("#metacodeSwitchTabs .ui-tabs-nav li a").click(function(){
// recenter the lightbox when you switch tabs
$('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px');
});
$('.customMetacodeList li').click(function () {
if ($(this).attr('class') != 'toggledOff') {
$(this).addClass('toggledOff');

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

@ -2032,29 +2032,32 @@ div.mapInfoStat {
box-shadow: none;
}
/* Cheatsheet */
#cheatSheet {
width: 100%;
font-family: LatoLight, Arial, Sans-Serif;
font-size: 17px;
line-height: 21px;
border: none;
}
.cheatsheetColumn {
float: left;
width: 245px;
line-height: 17px;
font-size: 12px;
font-family: arial;
#cheatSheet .sectionTitle {
font-family: Lato, Arial, sans-serif;
font-weight:bold;
}
.cheatsheetColumn.cOne {
margin-right: 10px;
}
#cheatsheet h4 {
text-decoration: underline;
font-size: 20px;
font-family: 'vinyl';
margin-top: 15px;
font-style: italic;
}
#cheatsheet .csItem {
#cheatSheet .csItem {
margin: 5px 0;
font-size:15px;
line-height:18px;
}
#cheatsheet .csTitle {
font-weight: bold;
#cheatSheet .csItem img {
display: inline-block;
margin: 0 2px;
}
#cheatSheet .csTitle {
font-family: Lato, Arial, sans-serif;
}
#cheatSheet .indented {
margin-left:15px;
}
/* Admin Pages */

155
app/views/layouts/_cheatsheet.html.erb
View file

@ -4,37 +4,134 @@
#%>
<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 id="cheatSheet">
<ul>
<li><a href="#csTopicView">Topic View</a></li>
<% if authenticated? && (controller_name == "maps" || controller_name == "topics" ) && action_name == "show" %>
<li><a href="#csCreatingTopics">Creating Topics</a></li>
<li><a href="#csEditingTopics">Editing Topics</a></li>
<li><a href="#csCreatingSynapses">Creating Synapses</a></li>
<li><a href="#csEditingSynapses">Editing Synapses</a></li>
<% end %>
<% if (controller_name == "maps" || controller_name == "topics" ) && action_name == "show" %>
<li><a href="#csNavigation">Navigation</a></li>
<li><a href="#csSelection">Selection</a></li>
<% end %>
<li><a href="#csSearch">Search</a></li>
<% if controller_name == "topics" && action_name == "show" %>
<% end %>
</ul>
<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>
<% if controller_name == "topics" && action_name == "show" %>
<div id="csTopicView">
<p class="sectionTitle">Topic View</p>
<div class="csItem"><span class="csTitle">Alt + click on topic icon:</span> recenter topics around chosen topic</div>
<div class="csItem"><span class="csTitle">Right-click + 'center this topic':</span> recenter topics around chosen topic</div>
</div>
<% end %>
<% if authenticated? && (controller_name == "maps" || controller_name == "topics" ) && action_name == "show" %>
<div id="csCreatingTopics">
<p class="sectionTitle">Creating Topics</p>
<div class="csItem"><span class="csTitle">Double-click on canvas:</span> Bring up the metacode spinner on the canvas.</div>
<div class="csItem indented"><span class="csTitle">Scroll:</span> change metacode spinner selection</div>
<div class="csItem indented"><span class="csTitle">Tab:</span> rotate spinner counter-clockwise</div>
<div class="csItem indented"><span class="csTitle">Shift + tab:</span> rotate spinner clockwise</div>
<div class="csItem indented"><span class="csTitle">Esc:</span> Hides auto-suggestion results</div>
<div class="csItem indented"><span class="csTitle">Enter:</span> create a new topic</div>
<div class="csItem indented"><span class="csTitle">Gear Icon:</span> open up metacode settings</div>
</div>
<div id="csEditingTopics">
<p class="sectionTitle">Editing Topics</p>
<div class="csItem">
<span class="csTitle">Open topic card:</span> double-click on topic icon
</div>
<div class="csItem indented">
<span class="csTitle">Move topic card:</span> click + drag on topic card metacode
</div>
<div class="csItem indented">
<span class="csTitle">Change/edit metacode:</span> mouse over metacode icon, then click on solid colored bar
</div>
<div class="csItem indented">
<span class="csTitle">Edit topic title, description, link:</span> click on text in respective area
</div>
<div class="csItem indented">
<span class="csTitle">Save topic title, description, link:</span> hit enter
</div>
<div class="csItem indented">
<span class="csTitle">Change topic permission:</span> click on 'permission' icon (only for topic creator)
</div>
<div class="csItem indented">
<span class="csTitle">Open topic view:</span> click on <img src="/assets/MMCCicon_pop-out_black.png" width="16" align="middle" /> icon within topic card bar
</div>
<div class="csItem indented">
<span class="csTitle">Close topic card:</span> click on canvas
</div>
<div class="csItem">
<span class="csTitle">Open context menu:</span> right-click on topic icon
</div>
<div class="csItem indented">*Hide/Remove/Delete topic within context menu</div>
</div>
<div id="csCreatingSynapses">
<p class="sectionTitle">Creating Synapses</p>
<div class="csItem"><span class="csTitle">Right-click & drag from one topic to another:</span> open create synapse prompt</div>
<div class="csItem indented"><span class="csTitle">Enter:</span> Create synapse</div>
<div class="csItem indented">*You do not have to add a description</div>
<div class="csItem"><span class="csTitle">Right-click + drag from topic to open canvas:</span> create new topic with synapse</div>
<div class="csItem indented"><span class="csTitle">Enter:</span> Create topic</div>
<div class="csItem indented"><span class="csTitle">Enter:</span> Create synapse</div>
</div>
<div id="csEditingSynapses">
<p class="sectionTitle">Editing Synapses</p>
<div class="csItem"><span class="csTitle">Double-click on synapse:</span> open synapse card</div>
<div class="csItem indented"><span class="csTitle">Edit synapse description:</span> click on current description text</div>
<div class="csItem indented"><span class="csTitle">Save synapse description:</span> hit enter</div>
<div class="csItem indented"><span class="csTitle">Edit directionality:</span> select appropriate arrow boxes</div>
<div class="csItem indented"><span class="csTitle">Change synapse permission:</span> click on 'permission' icon (only for synapse creator)</div>
<div class="csItem"><span class="csTitle">Right-click on synapse:</span> open context menu</div>
<div class="csItem indented">*Hide/Remove/Delete synapse within context menu</div>
</div>
<% end %>
<% if (controller_name == "maps" || controller_name == "topics" ) && action_name == "show" %>
<div id="csNavigation">
<p class="sectionTitle">Navigation</p>
<div class="csItem"><span class="csTitle">Click + drag:</span> move around canvas</div>
<div class="csItem"><span class="csTitle">Scroll:</span> zoom in/out</div>
<div class="csItem"><span class="csTitle">Refresh page:</span> center map</div>
</div>
<div id="csSelection">
<p class="sectionTitle">Selection</p>
<div class="csItem"><span class="csTitle">Click on topic icon:</span> select/deselect topic</div>
<div class="csItem"><span class="csTitle">Click on synapse:</span> select/deselect synapse</div>
<div class="csItem"><span class="csTitle">Shift + click:</span> select multiple topics / synapses</div>
<div class="csItem"><span class="csTitle">Shift + click + drag on canvas:</span> make selection box, select multiple topics</div>
<div class="csItem"><span class="csTitle">Click + drag on selected topic(s):</span> move all selected topics & synapses</div>
<div class="csItem"><span class="csTitle">Right-click on selected topic(s):</span> open context menu</div>
<div class="csItem indented">*Hide/Remove/Delete/Change permissions of multiple topics & synapses within context menu</div>
<div class="csItem"><span class="csTitle">Click on background:</span> deselect all topics & synapses</div>
<div class="csItem"><span class="csTitle">Esc:</span> deselect all topics & synapses</div>
</div>
<% end %>
<div id="csSearch">
<p class="sectionTitle">Search</p>
<div class="csItem"><span class="csTitle">Ctrl + /:</span> open search prompt</div>
<div class="csItem"><span class="csTitle">Esc:</span> close search prompt</div>
<div class="csItem"><span class="csTitle">Type into the search prompt:</span> search for topics, maps, & mappers</div>
<div class="csItem"><span class="csTitle">Click on search result:</span> open in new tab</div>
<% if controller_name == "maps" && action_name == "show" %>
<div class="csItem"><span class="csTitle">Click "+" on a topic result:</span> add to current map</div>
<% end %>
<div class="csItem"><span class="csTitle">Search by metacode:</span> type "[name of metacode]:", then your search query. i.e. idea:create...</div>
<div class="csItem"><span class="csTitle">Search for map:</span> type "map:", then your search query. i.e. map:exploring...</div>
<div class="csItem"><span class="csTitle">Search for mapper:</span> type "mapper:", then your search query. i.e. mapper:Robert</div>
</div>
</div>
<div class="clearfloat"></div>