Merge pull request #7 from evolvingweb/question-mark-changes

Question mark improvements

Author: davidegiacometti

app/views/hooks/_view_layouts_base_body_bottom.html.erb

@@ -4,7 +4,9 @@
   <% elsif Setting['text_formatting'] == 'markdown' %>
     <%= javascript_include_tag 'view_layouts_base_body_bottom_markdown', :plugin => 'redmine_shortcuts' %>
   <% end %>
-  <%= javascript_include_tag 'view_layouts_base_body_bottom_questionmark', :plugin => 'redmine_shortcuts' %>
-  <%= stylesheet_link_tag 'questionmark', :plugin => 'redmine_shortcuts' %>
+  <% if User.current.id != 2 %>
+    <%= javascript_include_tag 'view_layouts_base_body_bottom_questionmark', :plugin => 'redmine_shortcuts' %>
+    <%= stylesheet_link_tag 'questionmark', :plugin => 'redmine_shortcuts', media: "all" %>
+  <% end %>
 
 <% end %>

assets/javascripts/view_layouts_base_body_bottom_questionmark.js

@@ -1,23 +1,36 @@
 // Question Mark.
-$questionMarkModal = $('<div class="question-mark-modal"><span aria-label="Close" aria-role="button" class="question-mark--close"/></div>');
+$questionMarkModalRoot = $('<div class="question-mark-modal-root"></div>');
+$questionMarkModal = $('<div class="question-mark-modal"><span aria-label="Close" aria-role="button" class="question-mark--close"/></div>')
+$questionMarkModalRoot.append($questionMarkModal);
 $questionMarkModal.append('<iframe width="500px" height="500px" src="' + window.location.origin + '/redmine_shortcuts/help"></iframe>');
-$('body').append($questionMarkModal);
+$('body').append($questionMarkModalRoot);
 $(document).on('keypress', function(e) {
   e = e || window.event;
   var charCode = e.keyCode || e.which;
   // 63 = '?' key
   if (charCode === 63 && !$(':focus').is('textarea, input')) {
-    $questionMarkModal.addClass('question-mark-modal-visible');
+    $questionMarkModalRoot.toggleClass('question-mark-modal-visible');
   }
 });
 $(document).on('keyup', function(e) {
   e = e || window.event;
   var charCode = e.keyCode || e.which;
   // 27 = 'Esc' key
   if (charCode === 27) {
-    $questionMarkModal.removeClass('question-mark-modal-visible');
+    $questionMarkModalRoot.removeClass('question-mark-modal-visible');
   }
 });
 $('.question-mark--close').click(function() {
-  $questionMarkModal.removeClass('question-mark-modal-visible');
-});
+  $questionMarkModalRoot.removeClass('question-mark-modal-visible');
+});
+
+$questionMarkModalRoot.click(function() {
+  $(this).removeClass('question-mark-modal-visible');
+});
+
+$questionMarkModal.click(function(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+  return false;
+});

assets/stylesheets/questionmark.css

@@ -1,9 +1,24 @@
-.question-mark-modal {
-  display: none;
-}
-.question-mark-modal-visible {
+
+.question-mark-modal-root {
   display: block;
-  height: auto;
+  position: fixed;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.4);
+  left : 0;
+  top: 0;
+  width: 0px;
+  height : 0px;
+  opacity: 0;
+}
+
+.question-mark-modal-root.question-mark-modal-visible {
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  transition: opacity 0.15s ease-out;
+}
+.question-mark-modal-visible .question-mark-modal {
+  height: 500px;
   width: 500px;
   position: fixed;
   left: 50%;