SONAR-5862 Users should have a way to easily discover that shortcuts exist and unders...

diff --git a/server/sonar-web/src/main/coffee/issues/app-context.coffee b/server/sonar-web/src/main/coffee/issues/app-context.coffee
index f12a2fa6d39b3166b9fec937a19a3ab64ed99ddd..9454f59fc7cad338bd039a31153ef4d4296f20a6 100644 (file)
--- a/server/sonar-web/src/main/coffee/issues/app-context.coffee
+++ b/server/sonar-web/src/main/coffee/issues/app-context.coffee
@@ -17,8 +17,6 @@ requirejs [
 
   'issues/facets-view'
   'issues/filters-view'
-
-  'issues/help-view'
 ], (
   State
   Layout
@@ -34,8 +32,6 @@ requirejs [
 
   FacetsView
   FiltersView
-
-  HelpView
 ) ->
 
   $ = jQuery
@@ -108,16 +104,6 @@ requirejs [
     @layout.facetsRegion.show @facetsView
 
 
-  App.addInitializer ->
-    $(window).on 'keypress', (e) =>
-      tagName = e.target.tagName
-      unless tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'
-        code = e.keyCode || e.which
-        if code == 63
-          @helpView = new HelpView app: @
-          @helpView.render()
-
-
   App.addInitializer ->
     @controller.fetchFilters().done =>
       key.setScope 'list'

diff --git a/server/sonar-web/src/main/coffee/issues/app-new.coffee b/server/sonar-web/src/main/coffee/issues/app-new.coffee
index cff9066f46a7511ec3e58516d391cf64f522d7c0..87b56ac6a46dbf0848eeeb2ab0c3c9a3199fa0be 100644 (file)
--- a/server/sonar-web/src/main/coffee/issues/app-new.coffee
+++ b/server/sonar-web/src/main/coffee/issues/app-new.coffee
@@ -17,8 +17,6 @@ requirejs [
 
   'issues/facets-view'
   'issues/filters-view'
-
-  'issues/help-view'
 ], (
   State
   Layout
@@ -34,8 +32,6 @@ requirejs [
 
   FacetsView
   FiltersView
-
-  HelpView
 ) ->
 
   $ = jQuery
@@ -87,16 +83,6 @@ requirejs [
     @layout.filtersRegion.show @filtersView
 
 
-  App.addInitializer ->
-    $(window).on 'keypress', (e) =>
-      tagName = e.target.tagName
-      unless tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'
-        code = e.keyCode || e.which
-        if code == 63
-          @helpView = new HelpView app: @
-          @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
deleted file mode 100644 (file)
index fee70a9..0000000
--- a/server/sonar-web/src/main/coffee/issues/help-view.coffee
+++ /dev/null
@@ -1,10 +0,0 @@
-define [
-  'common/modals'
-  'templates/issues'
-], (
-  ModalView
-) ->
-
-
-  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
deleted file mode 100644 (file)
index 1fc3cdc..0000000
--- a/server/sonar-web/src/main/hbs/issues/issues-help.hbs
+++ /dev/null
@@ -1,27 +0,0 @@
-<div class="modal-head">
-  <h2>Issues Help</h2>
-</div>
-
-<div class="modal-body doc">
-  <h3>Shortcuts</h3>
-  <p>To control results</p>
-  <ul>
-    <li><span class="shortcut-button">&uparrow;</span> <span class="shortcut-button">&darr;</span> &nbsp;&nbsp; to navigate between issues</li>
-    <li><span class="shortcut-button">&rarr;</span> &nbsp;&nbsp; to go from the list of issues to the source code</li>
-    <li><span class="shortcut-button">&larr;</span> &nbsp;&nbsp; to return back to the list</li>
-  </ul>
-  <p>To control selected issue</p>
-  <ul>
-    <li><span class="shortcut-button">f</span> &nbsp;&nbsp; to do a transition</li>
-    <li><span class="shortcut-button">a</span> &nbsp;&nbsp; to assign</li>
-    <li><span class="shortcut-button">m</span> &nbsp;&nbsp; to assign to the current user</li>
-    <li><span class="shortcut-button">p</span> &nbsp;&nbsp; to plan</li>
-    <li><span class="shortcut-button">i</span> &nbsp;&nbsp; to change severity</li>
-    <li><span class="shortcut-button">o</span> &nbsp;&nbsp; to comment</li>
-    <li><span class="shortcut-button">t</span> &nbsp;&nbsp; to change tags</li>
-  </ul>
-</div>
-
-<div class="modal-foot">
-  <a class="js-modal-close">{{t 'close'}}</a>
-</div>

diff --git a/server/sonar-web/src/main/hbs/nav/nav-global-navbar.hbs b/server/sonar-web/src/main/hbs/nav/nav-global-navbar.hbs
index 8692b0433be89c95a6b0e9dc498a7b05817b7ec6..0f696928574c7358062975b5d86319b8de0a63ba 100644 (file)
--- a/server/sonar-web/src/main/hbs/nav/nav-global-navbar.hbs
+++ b/server/sonar-web/src/main/hbs/nav/nav-global-navbar.hbs
@@ -88,6 +88,11 @@
 
       <div class="js-search-region dropdown-menu dropdown-menu-right"></div>
     </li>
+    <li>
+      <a class="js-shortcuts" href="#">
+        <i class="icon-help navbar-icon"></i>
+      </a>
+    </li>
   </ul>
 
 </div>

diff --git a/server/sonar-web/src/main/hbs/nav/nav-shortcuts-help.hbs b/server/sonar-web/src/main/hbs/nav/nav-shortcuts-help.hbs
new file mode 100644 (file)
index 0000000..f5c22c8
--- /dev/null
+++ b/server/sonar-web/src/main/hbs/nav/nav-shortcuts-help.hbs
@@ -0,0 +1,33 @@
+<div class="modal-head">
+  <h2>{{t 'shortcuts.modal_title'}}</h2>
+</div>
+
+<div class="modal-body">
+  <div class="shortcuts-section">
+    <h3 class="shortcuts-section-title">{{t 'shortcuts.section.global'}}</h3>
+    <ul class="shortcuts-list">
+        <li><span class="shortcut-button">s</span> &nbsp;&nbsp; {{t 'shortcuts.section.global.search'}}</li>
+        <li><span class="shortcut-button">?</span> &nbsp;&nbsp; {{t 'shortcuts.section.global.shortcuts'}}</li>
+    </ul>
+  </div>
+
+  <div class="shortcuts-section">
+    <h3 class="shortcuts-section-title">{{t 'shortcuts.section.issues'}}</h3>
+    <ul class="shortcuts-list">
+      <li><span class="shortcut-button">&uparrow;</span> <span class="shortcut-button">&darr;</span> &nbsp;&nbsp; {{t 'shortcuts.section.issues.navigate_between_issues'}}</li>
+      <li><span class="shortcut-button">&rarr;</span> &nbsp;&nbsp; {{t 'shortcuts.section.issues.open_details'}}</li>
+      <li><span class="shortcut-button">&larr;</span> &nbsp;&nbsp; {{t 'shortcuts.section.issues.return_to_list'}}</li>
+      <li><span class="shortcut-button">f</span> &nbsp;&nbsp; {{t 'shortcuts.section.issue.do_transition'}}</li>
+      <li><span class="shortcut-button">a</span> &nbsp;&nbsp; {{t 'shortcuts.section.issue.assign'}}</li>
+      <li><span class="shortcut-button">m</span> &nbsp;&nbsp; {{t 'shortcuts.section.issue.assign_to_me'}}</li>
+      <li><span class="shortcut-button">p</span> &nbsp;&nbsp; {{t 'shortcuts.section.issue.plan'}}</li>
+      <li><span class="shortcut-button">i</span> &nbsp;&nbsp; {{t 'shortcuts.section.issue.change_severity'}}</li>
+      <li><span class="shortcut-button">o</span> &nbsp;&nbsp; {{t 'shortcuts.section.issue.comment'}}</li>
+      <li><span class="shortcut-button">t</span> &nbsp;&nbsp; {{t 'shortcuts.section.issue.change_tags'}}</li>
+    </ul>
+  </div>
+</div>
+
+<div class="modal-foot">
+  <a class="js-modal-close">{{t 'close'}}</a>
+</div>

diff --git a/server/sonar-web/src/main/js/nav/app.js b/server/sonar-web/src/main/js/nav/app.js
index 12b5571bfd122d2a62a786330e9acce030f592f3..8414937c2218cf1222396743f904cbd5450df127 100644 (file)
--- a/server/sonar-web/src/main/js/nav/app.js
+++ b/server/sonar-web/src/main/js/nav/app.js
@@ -44,6 +44,19 @@ define([
     $(document.body).css('padding-top', navHeight).data('top-offset', navHeight);
   });
 
+  App.addInitializer(function () {
+    var that = this;
+    $(window).on('keypress', function (e) {
+      var tagName = e.target.tagName;
+      if (tagName !== 'INPUT' && tagName !== 'SELECT' && tagName !== 'TEXTAREA') {
+        var code = e.keyCode || e.which;
+        if (code === 63) {
+          that.navbarView.showShortcutsHelp();
+        }
+      }
+    });
+  });
+
   window.requestMessages().done(function () {
     App.start();
   });

diff --git a/server/sonar-web/src/main/js/nav/global-navbar-view.js b/server/sonar-web/src/main/js/nav/global-navbar-view.js
index 02c008d7592dcced4bcfdb935f6ce58b02c552c1..22793d21f4bf4778681a289ed873d3a04d15252a 100644 (file)
--- a/server/sonar-web/src/main/js/nav/global-navbar-view.js
+++ b/server/sonar-web/src/main/js/nav/global-navbar-view.js
@@ -1,9 +1,8 @@
 define([
   'nav/search-view',
+  'nav/shortcuts-help-view',
   'templates/nav'
-], function (SearchView) {
-
-  var $ = jQuery;
+], function (SearchView, ShortcutsHelpView) {
 
   return Marionette.Layout.extend({
     template: Templates['nav-global-navbar'],
@@ -16,7 +15,8 @@ define([
       'click .js-login': 'onLoginClick',
       'click .js-favorite': 'onFavoriteClick',
       'show.bs.dropdown .js-search-dropdown': 'onSearchDropdownShow',
-      'hidden.bs.dropdown .js-search-dropdown': 'onSearchDropdownHidden'
+      'hidden.bs.dropdown .js-search-dropdown': 'onSearchDropdownHidden',
+      'click .js-shortcuts': 'onShortcutsClick'
     },
 
     onRender: function () {
@@ -50,6 +50,14 @@ define([
       this.searchRegion.reset();
     },
 
+    onShortcutsClick: function () {
+      this.showShortcutsHelp();
+    },
+
+    showShortcutsHelp: function () {
+      new ShortcutsHelpView({ shortcuts: this.model.get('shortcuts') }).render();
+    },
+
     serializeData: function () {
       return _.extend(Marionette.Layout.prototype.serializeData.apply(this, arguments), {
         user: window.SS.user,

diff --git a/server/sonar-web/src/main/js/nav/shortcuts-help-view.js b/server/sonar-web/src/main/js/nav/shortcuts-help-view.js
new file mode 100644 (file)
index 0000000..df0bad7
--- /dev/null
+++ b/server/sonar-web/src/main/js/nav/shortcuts-help-view.js
@@ -0,0 +1,10 @@
+define([
+  'common/modals',
+  'templates/nav'
+], function (ModalView) {
+
+  return ModalView.extend({
+    template: Templates['nav-shortcuts-help']
+  });
+
+});

diff --git a/server/sonar-web/src/main/less/navbar.less b/server/sonar-web/src/main/less/navbar.less
index 03e823449473891777c742cee0526d293e954671..72eabf5189c0fa258a9db8ec58e26b1aa6ee7d41 100644 (file)
--- a/server/sonar-web/src/main/less/navbar.less
+++ b/server/sonar-web/src/main/less/navbar.less
@@ -87,6 +87,7 @@
 }
 
 .navbar-icon:before {
+  color: #fff !important;
   font-size: @iconFontSize;
 }
 

diff --git a/server/sonar-web/src/main/less/ui.less b/server/sonar-web/src/main/less/ui.less
index eec3b654e7052ac509cc9726f6890ab12dfeaf39..bb375e2946a3f01b39988cecbafd19308a14d44b 100644 (file)
--- a/server/sonar-web/src/main/less/ui.less
+++ b/server/sonar-web/src/main/less/ui.less
@@ -397,6 +397,24 @@ input[type=button] {
 
 
 
+.shortcuts-section {
+
+}
+
+.shortcuts-section + .shortcuts-section {
+  margin-top: 20px;
+}
+
+.shortcuts-section-title {
+  margin-bottom: 5px;
+}
+
+.shortcuts-list {
+  > li + li {
+    margin-top: 5px;
+  }
+}
+
 .shortcut-button {
   display: inline-block;
   .square(24px);

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 224c8b4ed75bf275bfbd13dec1d2fa49ed0c22d0..83e4efab83add6af3c4d15c60752b3d939b1cc2b 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -1039,6 +1039,31 @@ search.duration=({0} seconds)
 search.shortcut=Press S to quickly open search bar
 
 
+#------------------------------------------------------------------------------
+#
+# SHORTCUTS
+#
+#------------------------------------------------------------------------------
+shortcuts.modal_title=Shortcuts
+
+shortcuts.section.global=Global
+shortcuts.section.global.search=to quickly open search bar
+shortcuts.section.global.shortcuts=to open this window
+
+shortcuts.section.issues=Issues Page
+shortcuts.section.issues.navigate_between_issues=to navigate between issues
+shortcuts.section.issues.open_details=to go from the list of issues to the source code
+shortcuts.section.issues.return_to_list=to return back to the list
+
+shortcuts.section.issue.do_transition=to do an issue transition
+shortcuts.section.issue.assign=to assign issue
+shortcuts.section.issue.assign_to_me=to assign issue to the current user
+shortcuts.section.issue.plan=to plan issue
+shortcuts.section.issue.change_severity=to change severity of issue
+shortcuts.section.issue.comment=to comment issue
+shortcuts.section.issue.change_tags=to change tags of issue
+
+
 #------------------------------------------------------------------------------
 #
 # SELECT2.js