diff --git a/app/assets/images/MMCCicon_commons_black.png b/app/assets/images/MMCCicon_commons_black.png new file mode 100644 index 00000000..4f06fed8 Binary files /dev/null and b/app/assets/images/MMCCicon_commons_black.png differ diff --git a/app/assets/images/MMCCicon_private_black.png b/app/assets/images/MMCCicon_private_black.png new file mode 100644 index 00000000..076205f6 Binary files /dev/null and b/app/assets/images/MMCCicon_private_black.png differ diff --git a/app/assets/images/MMCCicon_public.png b/app/assets/images/MMCCicon_public.png index 37a6fd07..e8b51410 100644 Binary files a/app/assets/images/MMCCicon_public.png and b/app/assets/images/MMCCicon_public.png differ diff --git a/app/assets/images/MMCCicon_public_black.png b/app/assets/images/MMCCicon_public_black.png new file mode 100644 index 00000000..950c49e4 Binary files /dev/null and b/app/assets/images/MMCCicon_public_black.png differ diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index bee80917..2ed9d1e2 100644 --- a/app/assets/javascripts/application.js +++ b/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; +} diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 6016de2e..2ba0155c 100644 --- a/app/assets/stylesheets/application.css +++ b/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 ---*/ diff --git a/app/views/layouts/_lightboxes.html.erb b/app/views/layouts/_lightboxes.html.erb index a14f3b5a..c786c512 100644 --- a/app/views/layouts/_lightboxes.html.erb +++ b/app/views/layouts/_lightboxes.html.erb @@ -6,20 +6,23 @@ diff --git a/app/views/maps/_new.html.erb b/app/views/maps/_new.html.erb index 13c2735a..b9f6b74d 100644 --- a/app/views/maps/_new.html.erb +++ b/app/views/maps/_new.html.erb @@ -4,17 +4,56 @@ #%>
<%= form_for Map.new, url: maps_url, remote: true, html: { class: "new_map", id: "new_map" } do |form|%> -

Create A New Map

- - <%= form.text_field :name %> - - <%= form.text_area :desc, class: "description", :rows => 5 %> - +

Create A New Map

+ +
+ + <%= form.text_field :name %> +
+
+ +
+ + <%= form.text_area :desc, class: "description", :rows => 5, :cols => 43 %> +
+
+ +
+ - <%= form.hidden_field :permission, :value => "commons" %> -

Topics and synapses you create newly on this map will be set by default to the permissions of your map.

- <%= form.submit "Save", class: "add" %> - +
+
+

COMMONS

+
+ Collaborate with other mappers on editing this map. Those without accounts can view this map. +
+
+
+
+

PUBLIC

+
+ Anyone, with or without an account, can view this map but not edit anything. +
+
+
+
+

PRIVATE

+
+ Only you can view or edit this map. +
+
+ + <%= form.hidden_field :permission, :value => "commons" %> +
+
+ +

*topics and synapses you create newly on this map will be set by default to the permissions of your map

+ +
+ + <%= form.submit "Create!", class: "add" %> +
+
<% end %>
diff --git a/app/views/maps/create.js.erb b/app/views/maps/create.js.erb index c09ac7da..673dabb8 100644 --- a/app/views/maps/create.js.erb +++ b/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
' + "'>Go to your new map?
or
Stay on this page?"); + form.html("Success! Do you want to
' + "'>Go to your new map?
or
Stay on this page?"); } else if (mapid != null) { - form.html("Success! Do you want to
' + "'>Go to your new map?
or
Stay on this map?"); + form.html("Success! Do you want to
' + "'>Go to your new map?
or
Stay on this map?"); } +$('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px' ); function closeIt() { - form.fadeOut('fast', function(){ - form.html(tempForm); - }); + $('#lightbox_overlay').hide(); + 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'); + }); }