From b2b14860c7cd86c9156e62e309a0152746f34566 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Wed, 5 Nov 2014 17:07:21 +0100
Subject: [PATCH] SONAR-5718 Add a help modal for shortcuts

---
 .../src/main/coffee/common/modals.coffee      | 43 +++++++++++++++++++
 .../src/main/coffee/issues/app.coffee         |  9 ++++
 .../src/main/coffee/issues/help-view.coffee   | 26 +++++++++++
 .../src/main/hbs/issues/issues-help.hbs       | 28 ++++++++++++
 .../sonar-web/src/main/less/components.less   |  1 +
 .../src/main/less/components/modals.less      | 16 +++++++
 .../src/main/less/select2-sonar.less          |  1 +
 7 files changed, 124 insertions(+)
 create mode 100644 server/sonar-web/src/main/coffee/common/modals.coffee
 create mode 100644 server/sonar-web/src/main/coffee/issues/help-view.coffee
 create mode 100644 server/sonar-web/src/main/hbs/issues/issues-help.hbs
 create mode 100644 server/sonar-web/src/main/less/components/modals.less

diff --git a/server/sonar-web/src/main/coffee/common/modals.coffee b/server/sonar-web/src/main/coffee/common/modals.coffee
new file mode 100644
index 00000000000..3ab89171ee3
--- /dev/null
+++ b/server/sonar-web/src/main/coffee/common/modals.coffee
@@ -0,0 +1,43 @@
+define [
+  'backbone.marionette'
+], (
+  Marionette
+) ->
+
+  $ = jQuery
+  EVENT_SCOPE = 'modal'
+
+
+  class extends Marionette.ItemView
+    className: 'modal'
+    overlayClassName: 'modal-overlay'
+
+
+    events:
+      'click .js-modal-close': 'close'
+
+
+    onRender: ->
+      @$el.detach().appendTo $('body')
+      @renderOverlay()
+      key 'escape', (=> @close())
+
+
+    onClose: ->
+      @removeOverlay()
+
+
+    renderOverlay: ->
+      overlay = $(".#{@overlayClassName}")
+      if overlay.length == 0
+        overlay = $("<div class=\"#{@overlayClassName}\"></div>").appendTo $('body')
+
+
+    removeOverlay: ->
+      $('.modal-overlay').remove()
+
+
+    attachCloseEvents: ->
+      $('body').on "click.#{EVENT_SCOPE}", =>
+        $('body').off "click.#{EVENT_SCOPE}"
+        @close()
diff --git a/server/sonar-web/src/main/coffee/issues/app.coffee b/server/sonar-web/src/main/coffee/issues/app.coffee
index f4f62ef8508..e81d13af4dc 100644
--- a/server/sonar-web/src/main/coffee/issues/app.coffee
+++ b/server/sonar-web/src/main/coffee/issues/app.coffee
@@ -34,6 +34,8 @@ requirejs [
   'issues/facets-view'
   'issues/filters-view'
 
+  'issues/help-view'
+
   'common/handlebars-extensions'
 ], (
   Backbone, Marionette
@@ -52,6 +54,8 @@ requirejs [
 
   FacetsView
   FiltersView
+
+  HelpView
 ) ->
 
   $ = jQuery
@@ -104,6 +108,11 @@ requirejs [
     @layout.filtersRegion.show @filtersView
 
 
+  App.addInitializer ->
+    @helpView = new HelpView app: @
+    key '?,/', => @helpView.render()
+
+
   App.addInitializer ->
     @controller.fetchFilters().done =>
       key.setScope 'list'
diff --git a/server/sonar-web/src/main/coffee/issues/help-view.coffee b/server/sonar-web/src/main/coffee/issues/help-view.coffee
new file mode 100644
index 00000000000..2524f91da85
--- /dev/null
+++ b/server/sonar-web/src/main/coffee/issues/help-view.coffee
@@ -0,0 +1,26 @@
+#$dialog
+#.dialog({
+#      dialogClass: "no-close",
+#      width: width,
+#      draggable: false,
+#      autoOpen: false,
+#      modal: true,
+#      minHeight: 50,
+#      resizable: false,
+#      title: null,
+#      close: function () {
+#      $j('#modal').remove();
+#}
+#});
+
+define [
+  'common/modals'
+  'templates/issues'
+], (
+  ModalView
+  Templates
+) ->
+
+
+  class extends ModalView
+    template: Templates['issues-help']
diff --git a/server/sonar-web/src/main/hbs/issues/issues-help.hbs b/server/sonar-web/src/main/hbs/issues/issues-help.hbs
new file mode 100644
index 00000000000..63fb4600a7e
--- /dev/null
+++ b/server/sonar-web/src/main/hbs/issues/issues-help.hbs
@@ -0,0 +1,28 @@
+<div class="modal-head">
+  <h2>Issues Help</h2>
+</div>
+
+<div class="modal-body doc">
+  <h3>Shortcuts</h3>
+  <p>To control results</p>
+  <ul>
+    <li>&uparrow; &darr; &nbsp;&nbsp; to navigate between issues</li>
+    <li>&rarr; &nbsp;&nbsp; to go from the list of issues to the source code</li>
+    <li>&larr; &nbsp;&nbsp; to return back to the list</li>
+  </ul>
+  <p>To control selected issue</p>
+  <ul>
+    <li>c &nbsp;&nbsp; to confirm</li>
+    <li>u &nbsp;&nbsp; to unconfirm</li>
+    <li>r &nbsp;&nbsp; to resolve/reopen</li>
+    <li>f &nbsp;&nbsp; to mark as false-positive</li>
+    <li>a &nbsp;&nbsp; to assign</li>
+    <li>m &nbsp;&nbsp; to assign to the current user</li>
+    <li>p &nbsp;&nbsp; to plan</li>
+    <li>i &nbsp;&nbsp; to change severity</li>
+  </ul>
+</div>
+
+<div class="modal-foot">
+  <a class="js-modal-close">{{t 'close'}}</a>
+</div>
diff --git a/server/sonar-web/src/main/less/components.less b/server/sonar-web/src/main/less/components.less
index 68d0e96a244..4728048c2e9 100644
--- a/server/sonar-web/src/main/less/components.less
+++ b/server/sonar-web/src/main/less/components.less
@@ -1,3 +1,4 @@
 @import "components/component-issues";
 @import "components/code-source";
 @import "components/facets";
+@import "components/modals";
diff --git a/server/sonar-web/src/main/less/components/modals.less b/server/sonar-web/src/main/less/components/modals.less
new file mode 100644
index 00000000000..97059162852
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/modals.less
@@ -0,0 +1,16 @@
+.modal {
+  position: fixed;
+  z-index: 9100;
+  top: 15%;
+  left: 50%;
+  margin-left: -270px;
+  width: 540px;
+  background-color: #fff;
+}
+
+.modal-overlay {
+  position: fixed;
+  z-index: 9099;
+  top: 0; bottom: 0; left: 0; right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
diff --git a/server/sonar-web/src/main/less/select2-sonar.less b/server/sonar-web/src/main/less/select2-sonar.less
index d6b89c29cc1..5ae0e0cb893 100644
--- a/server/sonar-web/src/main/less/select2-sonar.less
+++ b/server/sonar-web/src/main/less/select2-sonar.less
@@ -55,6 +55,7 @@
 }
 
 .select2-drop {
+  z-index: 9000;
   border-color: @darkGrey;
   border-radius: 0;
 }
-- 
2.39.5