styled new map forms

app/assets/javascripts/application.js

@@ -500,6 +500,13 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
     openLightbox($(this).attr('data-open'));
   });
   
+  // bind permission changer events
+  $('.permIcon').click(function() {
+    $(this).siblings('#map_permission').val( $(this).attr('data-permission') );
+    $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
+    $(this).find('.mapPermIcon').addClass('selected');
+  });
+  
   // bind keyboard handlers
   $('body').bind('keyup', function(e) {
     switch(e.which) {
@@ -702,3 +709,23 @@ function openLightbox(which) {
   $('#lightbox_overlay').show();
   $('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px' );
 }
+
+function cancelMapCreate(id) {
+
+ $('#lightbox_overlay').hide();
+ 
+ var form = $('#' + id);
+
+ form.find('#map_name').val('');
+ form.find('#map_desc').val('');
+ form.find('#map_permission').val('commons');
+
+ if (id == "fork_map") {
+  form.find('#map_topicsToMap').val('0');
+  form.find('#map_synapsesToMap').val('0');
+ }
+ form.find('.mapPermIcon').removeClass('selected');
+ form.find('.mapCommonsIcon').addClass('selected');
+ 
+ return false;
+}

app/assets/stylesheets/application.css

@@ -609,6 +609,14 @@ display: inline-block;
 text-align: start;
 }
 
+.sidebarAccountBox input[type="email"]:hover, .sidebarAccountBox input[type="password"]:hover {
+  border: 1px solid #b9b9b9;
+  border-top: 1px solid #a0a0a0;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -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);
+}
+
 .sidebarAccountBox .links a {
   display:block;
   margin-top:5px;
@@ -1536,6 +1544,9 @@ border: solid 2px #000;
  line-height:35px;
  color:black;
 }
+.lightboxContent h3.forCreateMap {
+  text-align:center;
+}
 
 .lightboxContent {
   display:none;
@@ -1567,9 +1578,162 @@ border: solid 2px #000;
 .new_map {
   color:black;
 }
-.onConsole .new_map button, .onConsole .new_map input.add {
+
+.new_map .inputGroup {
+  margin: 15px 0 5px;
+}
+
+.new_map label {
   float:left;
-  margin-top:5px;	
+  width: 100px;
+  text-align: right;
+  margin-right: 15px;
+}
+
+.new_map input[type="text"] {
+width: 336px;
+height: 32px;
+font-size: 15px;
+direction: ltr;
+-webkit-appearance: none;
+appearance: none;
+display: inline-block;
+margin: 0;
+padding: 0 8px;
+background: #fff;
+border: 1px solid #d9d9d9;
+border-top: 1px solid #c0c0c0;
+-webkit-box-sizing: border-box;
+-moz-box-sizing: border-box;
+box-sizing: border-box;
+-webkit-border-radius: 1px;
+-moz-border-radius: 1px;
+border-radius: 1px;
+font: -webkit-small-control;
+color: initial;
+letter-spacing: normal;
+word-spacing: normal;
+text-transform: none;
+text-indent: 0px;
+text-shadow: none;
+display: inline-block;
+text-align: start;
+font-family:arial;
+}
+.new_map input[type="text"]:hover, .new_map textarea:hover {
+  border: 1px solid #b9b9b9;
+  border-top: 1px solid #a0a0a0;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -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);
+}
+
+.new_map textarea {
+  padding:8px;
+  border: 1px solid #d9d9d9;
+  border-top: 1px solid #c0c0c0;
+  resize:none;
+  font: -webkit-small-control;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0px;
+  text-shadow: none;
+  text-align: start;
+  font-family:arial;
+  font-size:15px;
+  line-height:17px;
+}
+
+.new_map .permIcon {
+  float:left;
+  width:92px;
+  height: 85px;
+  position:relative;
+}
+.new_map .mapPermIcon {
+  width:60px;
+  height:60px;
+  background-size: 48px 48px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  margin:0 auto;
+  cursor:pointer;
+}
+.new_map .mapCommonsIcon {
+  background-image: url(MMCCicon_commons.png);
+}
+.new_map .mapPublicIcon {
+  background-image: url(MMCCicon_public.png);
+}
+.new_map .mapPrivateIcon {
+  background-image: url(MMCCicon_private.png);
+}
+.new_map .mapCommonsIcon.selected, .new_map .mapCommonsIcon:hover {
+  background-image: url(MMCCicon_commons_black.png);
+}
+.new_map .mapPublicIcon.selected, .new_map .mapPublicIcon:hover {
+  background-image: url(MMCCicon_public_black.png);
+}
+.new_map .mapPrivateIcon.selected, .new_map .mapPrivateIcon:hover {
+  background-image: url(MMCCicon_private_black.png);
+}
+
+.new_map .permIcon h4 {
+  font-style:italic;
+  font-family: 'Vinyl';
+  text-transform:uppercase;
+  font-size:18px;
+  line-height:20px;
+  color:black;
+  text-align:center;
+}
+
+.new_map .tip {
+  display:none;
+   position: absolute;
+ background: white;
+ width: 150px;
+ top: 85px;
+ left: -32px;
+ color: black;
+ border-radius: 4px;
+ font-size:15px !important;
+ font-family:'LatoLight';
+ line-height:17px;
+ padding: 3px 5px 2px;
+ border: 1px solid black;
+ z-index:100;
+}
+.new_map .hoverForTip:hover .tip {
+  display:block;
+}
+
+.permText {
+  width: 360px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.buttonWrapper {
+  margin: 10px auto 0;
+  width: 252px;
+}
+
+.onConsole .new_map button {
+  margin-right: 20px;
+}
+
+.onConsole .new_map button, .onConsole .new_map input.add {
+  float: left;
+  margin-top: 5px;
+  background: #15bad4;
+  height: 40px;
+  font-family: 'LatoLight';
+  font-size: 16px;
+  font-style: italic;
+  width: auto;
+  padding: 0 30px;
 }
 
 /* --- styling the logo button ---*/

app/views/layouts/_lightboxes.html.erb

@@ -6,20 +6,23 @@
 
 <div id="lightbox_overlay">
   <div id="lightbox_main">
-    <a id="lightbox_close" onclick="$('#lightbox_overlay').hide();return false" href="#"></a>
+    <a id="lightbox_close" onclick="cancelMapCreate('fork_map');cancelMapCreate('new_map');return false;" href="#"></a>
     <div id="lightbox_content">
       
       <div class="lightboxContent" id="about">
         <h3>About Metamaps.cc</h3>
         
         <p>
-         Metamaps is an online interface for communities to build and visualize their shared knowledge. It is a tool to connect people, resources, and ideas in 'big picture' views without losing context or detail. 
+         Metamaps is an online interface for communities to build and visualize their shared knowledge. 
+         It is a tool to connect people, resources, and ideas in 'big picture' views without losing context or detail. 
         </p>
         <p>
-        Metamaps provide a natural window into complex systems, sparking insights, creative opportunities, and social synergy. The platform is evolving to meet a growing range of application scenarios.
+        Metamaps provide a natural window into complex systems, sparking insights, creative opportunities, and social synergy. 
+        The platform is evolving to meet a growing range of application scenarios.
         </p>
         <p>
-        The Metamaps project is a collaborative venture powered by a passionate network of peers, dedicated to the wealth of knowledge we find in common.
+        The Metamaps project is a collaborative venture powered by a passionate network of peers, 
+        dedicated to the wealth of knowledge we find in common.
         </p>
         
         <ul>
@@ -76,6 +79,6 @@
       
     </div>
   </div>
-  <div id="lightbox_screen" onclick="$('#lightbox_overlay').hide();return false" style="height: 100%;"></div>
+  <div id="lightbox_screen" onclick="cancelMapCreate('fork_map');cancelMapCreate('new_map');return false;" style="height: 100%;"></div>
 </div>
 

app/views/maps/_fork.html.erb

@@ -6,23 +6,61 @@
 <%= form_for Map.new, url: maps_url, remote: true, html: { class: "new_map", id: "fork_map" } do |form|%>
   
   <% if controller_name == "maps" %>
-    <h3>Save To New Map</h3>
+    <h3 class="forCreateMap">Save To New Map</h3>
   <% elsif controller_name == "topics" %>
-    <h3>Save As New Map</h3>
+    <h3 class="forCreateMap">Save As New Map</h3>
   <% end %>
   
-  <label for="map_name">Name</label>
+  <div class="inputGroup">
-  <%= form.text_field :name %>
+    <label for="map_name">Name: </label>
-  <label for="map_desc">Description</label>
+    <%= form.text_field :name %>
-  <%= form.text_area :desc, class: "description", :rows => 5 %>
+    <div class="clearfloat"></div>
-  <label for="map_permission">Permission</label>     
+  </div>
+  
+  <div class="inputGroup">
+    <label for="map_desc">Description: </label>
+    <%= form.text_area :desc, class: "description", :rows => 5, :cols => 43 %>
+    <div class="clearfloat"></div>
+  </div>
+  
+  <div class="inputGroup">
+    <label for="map_permission">Permission: </label>    
+    
+    <div class="permIcon hoverForTip" data-permission="commons">
+      <div class="mapCommonsIcon mapPermIcon selected"></div>
+      <h4>COMMONS</h4>
+      <div class="tip">
+        Collaborate with other mappers on editing this map. Those without accounts can view this map.
+      </div>
+    </div>
+    <div class="permIcon hoverForTip" data-permission="public">
+      <div class="mapPublicIcon mapPermIcon"></div>
+      <h4>PUBLIC</h4>
+      <div class="tip">
+        Anyone, with or without an account, can view this map but not edit anything.
+      </div>
+    </div>
+    <div class="permIcon hoverForTip" data-permission="private">
+      <div class="mapPrivateIcon mapPermIcon"></div>
+      <h4>PRIVATE</h4>
+      <div class="tip">
+        Only you can view or edit this map.
+      </div>
+    </div>
+    
+    <%= form.hidden_field :permission, :value => "commons" %>
+    <div class="clearfloat"></div>
+  </div>
+  
+  <p class="permText">*topics and synapses you create newly on this map will be set by default to the permissions of your map</p>
+  
+  <div class="buttonWrapper">
+    <button class="button" onclick="cancelMapCreate('fork_map'); return false;">Cancel</button>
+    <%= form.submit "Create!", class: "add" %>
+  </div>
   
-  <%= form.hidden_field :permission, :value => "commons" %>
-  <p>Topics and synapses you create newly on this map will be set by default to the permissions of your map.</p>
   <%= form.hidden_field :topicsToMap, :value => 0 %>
   <%= form.hidden_field :synapsesToMap, :value => 0 %>
-  <%= form.submit "Save", class: "add" %>
-  <button class="button" onclick="$('#lightbox_overlay').hide();return false">Cancel</button>
   <div class="clearfloat"></div>
 <% end %>
 </div>

app/views/maps/_new.html.erb

@@ -4,17 +4,56 @@
   #%>
 <div class="onConsole">
 <%= form_for Map.new, url: maps_url, remote: true, html: { class: "new_map", id: "new_map" } do |form|%>
-  <h3>Create A New Map</h3>
+  <h3 class="forCreateMap">Create A New Map</h3>
-  <label for="map_name">Name</label>
+  
-  <%= form.text_field :name %>
+  <div class="inputGroup">
-  <label for="map_desc">Description</label>
+    <label for="map_name">Name: </label>
-  <%= form.text_area :desc, class: "description", :rows => 5 %>
+    <%= form.text_field :name %>
-  <label for="map_permission">Permission</label>    
+    <div class="clearfloat"></div>
+  </div>
+  
+  <div class="inputGroup">
+    <label for="map_desc">Description: </label>
+    <%= form.text_area :desc, class: "description", :rows => 5, :cols => 43 %>
+    <div class="clearfloat"></div>
+  </div>
+  
+  <div class="inputGroup">
+    <label for="map_permission">Permission: </label>    
     
-  <%= form.hidden_field :permission, :value => "commons" %>
+    <div class="permIcon hoverForTip" data-permission="commons">
-  <p>Topics and synapses you create newly on this map will be set by default to the permissions of your map.</p>
+      <div class="mapCommonsIcon mapPermIcon selected"></div>
-  <%= form.submit "Save", class: "add" %>
+      <h4>COMMONS</h4>
-  <button class="button" onclick="$('#lightbox_overlay').hide();return false">Cancel</button>
+      <div class="tip">
+        Collaborate with other mappers on editing this map. Those without accounts can view this map.
+      </div>
+    </div>
+    <div class="permIcon hoverForTip" data-permission="public">
+      <div class="mapPublicIcon mapPermIcon"></div>
+      <h4>PUBLIC</h4>
+      <div class="tip">
+        Anyone, with or without an account, can view this map but not edit anything.
+      </div>
+    </div>
+    <div class="permIcon hoverForTip" data-permission="private">
+      <div class="mapPrivateIcon mapPermIcon"></div>
+      <h4>PRIVATE</h4>
+      <div class="tip">
+        Only you can view or edit this map.
+      </div>
+    </div>
+    
+    <%= form.hidden_field :permission, :value => "commons" %>
+    <div class="clearfloat"></div>
+  </div>
+  
+  <p class="permText">*topics and synapses you create newly on this map will be set by default to the permissions of your map</p>
+  
+  <div class="buttonWrapper">
+    <button class="button" onclick="cancelMapCreate('new_map'); return false;">Cancel</button>
+    <%= form.submit "Create!", class: "add" %>
+  </div>
+  
   <div class="clearfloat"></div>
 <% end %>
 </div>

app/views/maps/create.js.erb

@@ -16,18 +16,26 @@ $('#map_permission').val('commons');
 <% else %>
   var form = $('#new_map');
 <% end %>
+form.find('.mapPermIcon').removeClass('selected');
+form.find('.mapCommonsIcon').addClass('selected');
 
 
 var tempForm = form.html();
 if (mapid == null) {
-  form.html("Success! Do you want to <br> <a href='/maps/" + '<%= @map.id %>' + "'>Go to your new map?</a><br>or<br><a href='javascript:closeIt(); event.preventDefault();'>Stay on this page?</a>");
+  form.html("Success! Do you want to <br> <a href='/maps/" + '<%= @map.id %>' + "'>Go to your new map?</a><br>or<br><a href='javascript:closeIt(); return false;'>Stay on this page?</a>");
 }
 else if (mapid != null) {
-  form.html("Success! Do you want to <br> <a href='/maps/" + '<%= @map.id %>' + "'>Go to your new map?</a><br>or<br><a href='javascript:closeIt(); event.preventDefault();'>Stay on this map?</a>");
+  form.html("Success! Do you want to <br> <a href='/maps/" + '<%= @map.id %>' + "'>Go to your new map?</a><br>or<br><a href='javascript:closeIt(); return false;'>Stay on this map?</a>");
 }
+$('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px' );
 
 function closeIt() {
-  form.fadeOut('fast', function(){
+  $('#lightbox_overlay').hide();
-    form.html(tempForm);
+  form.html(tempForm);
-  }); 
+  // bind permission changer events
+  form.find('.permIcon').click(function() {
+    $(this).siblings('#map_permission').val( $(this).attr('data-permission') );
+    $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
+    $(this).find('.mapPermIcon').addClass('selected');
+  });
 }