diff --git a/app/assets/images/MMCCicon_filter2.png b/app/assets/images/MMCCicon_filter2.png new file mode 100644 index 00000000..5b50ffdd Binary files /dev/null and b/app/assets/images/MMCCicon_filter2.png differ diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 5f92b1d7..c54bc662 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -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 $("#filter_by_metacode").mCustomScrollbar(); - var filterPosition = userid ? '-72px' : '-36px'; $('.sidebarFilterBox').hide().css({ position:'absolute', top: '35px', - right: filterPosition + right: '-36px' }); // initialize metacode spinner and then hide it diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 1b795335..948a449c 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -512,7 +512,7 @@ position:absolute; width: 35px; height: 35px; background: #0F1519 url('MMCCicon_mapper.png') no-repeat center center; -background-size: 28px 28px; +background-size: 24px 24px; cursor:pointer; } .sidebarAccountBox { @@ -622,27 +622,27 @@ text-align: start; margin-top:5px; } -/* wand */ +/* Save To New Map */ -.sidebarWand { +.sidebarFork { position:absolute; top:5px; -right:35px; +right:71px; z-index:200; width: 35px; height:35px; border-right:1px solid black; } -.sidebarWandIcon { +.sidebarForkIcon { position:absolute; width: 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; cursor:pointer; } -.sidebarWandBox { +.sidebarForkBox { position:absolute; display:none; height:auto; @@ -654,40 +654,48 @@ cursor:pointer; border: 1px solid black; 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; -background-size: 18px 18px; -background-repeat: no-repeat; -background-position: 0px 6px; -font-size: 18px; -line-height: 20px; -color:white; + +.sidebarSaveIcon { +position:absolute; +width: 35px; +height: 35px; +background: #0F1519 url('MMCCicon_save_layout.png') no-repeat center center; +background-size: 22px 22px; cursor:pointer; } -li.wandIcon:hover { -background-position: 4px 6px; -} -li.wandSaveLayout { - background-image: url('MMCCicon_save_layout.png'); -} -li.wandForkMap { - background-image: url('MMCCicon_save_new_map.png'); -} -li.wandChangeMetacodes { - background-image: url('MMCCicon_metacode_set.png'); +.sidebarSaveBox { + position:absolute; + display:none; + height:auto; + width:182px; + background: #000; + top: 35px; + right:-36px; + padding: 10px; + border: 1px solid black; + font-family: 'LatoLight', helvetica, sans-serif; } -/* end wand */ - -/* wand */ +/* Filter */ .sidebarFilter { position:absolute; top:5px; -right:71px; +right:35px; z-index:200; width: 35px; height:35px; @@ -701,7 +709,7 @@ border-right:1px solid black; position:absolute; width: 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; cursor:pointer; } @@ -780,7 +788,7 @@ background-color: rgba(255,255,255,0.1); .sidebarCollaborate { position:absolute; top:5px; -right:107px; +right:143px; z-index:200; width: 35px; height:35px; @@ -791,13 +799,13 @@ border-right:1px solid black; position:absolute; width: 35px; height: 35px; -background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat -3px -1px; -background-size: 40px 40px; +background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat 0px 1px; +background-size: 36px 36px; cursor:pointer; } .sidebarCollaborateIcon.blue { background: #0F1519 url('MMCCicon_realtime_blue.png') no-repeat center center; -background-size: 29px 29px; +background-size: 26px 25px; } .sidebarCollaborateBox { position:absolute; @@ -1762,6 +1770,38 @@ font-family:arial; 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 */ #wrapper > div.FAQ { @@ -1917,20 +1957,14 @@ background-size: 22px 20px; left:-1px; height:124px; z-index:12; - width:151px; + width:121px; color: white; white-space: nowrap; text-align: center; font-size: 16px; overflow: hidden; - padding: 0; + padding: 0 0 0 30px; 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'); */ border-left:1px solid #000; border-right:1px solid #000; @@ -1944,53 +1978,22 @@ background-size: 22px 20px; display:block; padding:0; text-align:center; -} - -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 { + font-family:'vinyl'; + font-style:italic; height:30px; - line-height:30px; - font-size:20px; + line-height:34px; + font-size:17px; + cursor:pointer; +} +.footer ul li:hover { + background:black; } li.meta a, li.tutorial a, li.exploreMaps a { display:block; } -li.tutorial, li.exploreMaps { +li.meta, li.tutorial, li.exploreMaps { border-top:1px solid white; } diff --git a/app/views/layouts/_cheatsheet.html.erb b/app/views/layouts/_cheatsheet.html.erb new file mode 100644 index 00000000..b7e1f18e --- /dev/null +++ b/app/views/layouts/_cheatsheet.html.erb @@ -0,0 +1,40 @@ +<%# + # @file + # The inner HTML of the cheatsheet + #%> + +

Quick Reference Guide

+ +
+

Topics

+
Add New Topic: Double-click on canvas
+
Select Metacode: Scroll on spinner, or Tab / Shift+Tab
+
Creating New Topic: Hit Enter after typing topic name
+
Get Existing Topic: Click on (or use Up/Down->Enter) to pick from auto-suggestions
+
Open Topic Card: Double-click on topic icon
+
Edit Topic Type: Click on metacode in open topic card
+
Open Topic View: Click on 'leave page' icon in topic card (opens in new tab)
+

Navigation

+
Move (Pan) Across Canvas: Click on canvas and drag
+
Zoom In/Out Scroll mouse on canvas
+
Back to Center: Refresh page
+
+ + +
+

Synapses

+
Create Synapse: Right-click/Alt+Click on topic and drag to other topic, enter synapse name or choose suggested
+
Create Topic with Synapse: Right-click/Alt+Click on topic and drag to empty part of canvas
+
View Synapse Description: Hover over synapse
+
Open Synapse Card: Double-click synapse
+
Edit Synapse Description: Click synapse description in synapse card
+
Change Synapse Direction: Check/Uncheck directional arrow boxes
+

Selection

+
Select Topic or Synapse: Click on one
+
Select Multiple: Shift+Click on canvas and drag around topics, or use Shift+Click to add/remove individually
+
Move Multiple: Select desired, Click and drag on a selected topic
+
Hide/Remove/Delete: Right-click/Alt+Click on selection
+
Deselect All: Hit Esc, or click any topic
+
+ +
\ No newline at end of file diff --git a/app/views/layouts/_lightboxes.html.erb b/app/views/layouts/_lightboxes.html.erb index d916d4b7..bcb8c549 100644 --- a/app/views/layouts/_lightboxes.html.erb +++ b/app/views/layouts/_lightboxes.html.erb @@ -43,32 +43,13 @@
-

Quick Reference Guide

- -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+ <%= render :partial => 'layouts/cheatsheet' %>
<% if authenticated? %>

Send Invites

-

You can invite others to the Metamaps platform.
Just send them the link to

+

You can invite others to the Metamaps platform. Send them this link

http://metamaps.cc/users/sign_up

and give them the access code shown below.

<% mapper = current_user %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 30116436..65cad0eb 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -65,13 +65,12 @@