SONAR-14439 Make shortcut help fit in the modal

diff --git a/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx b/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx
index c5313a7a3ee2424442d576e14e57c9e5b58542aa..d961ae6dd40683e6c9dc7af2d98723188f156ce7 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx
+++ b/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx
@@ -22,56 +22,108 @@ import { Button } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 
-const CATEGORIES = [
-  {
-    category: 'global',
-    shortcuts: [
-      { keys: ['s'], action: 'search' },
-      { keys: ['?'], action: 'open_shortcuts' }
-    ]
-  },
-  {
-    category: 'code_page',
-    shortcuts: [
-      { keys: ['↑', '↓'], action: 'select_files' },
-      { keys: ['→'], action: 'open_file' },
-      { keys: ['←'], action: 'back' }
-    ]
-  },
-  {
-    category: 'issues_page',
-    shortcuts: [
-      { keys: ['↑', '↓'], action: 'navigate' },
-      { keys: ['→'], action: 'source_code' },
-      { keys: ['←'], action: 'back' },
-      { keys: ['alt', '+', '↑', '↓'], action: 'navigate_locations' },
-      { keys: ['alt', '+', '←', '→'], action: 'switch_flows' },
-      { keys: ['f'], action: 'transition' },
-      { keys: ['a'], action: 'assign' },
-      { keys: ['m'], action: 'assign_to_me' },
-      { keys: ['i'], action: 'severity' },
-      { keys: ['c'], action: 'comment' },
-      { keys: ['ctrl', '+', 'enter'], action: 'submit_comment' },
-      { keys: ['t'], action: 'tags' }
-    ]
-  },
-  {
-    category: 'measures_page',
-    shortcuts: [
-      { keys: ['↑', '↓'], action: 'select_files' },
-      { keys: ['→'], action: 'open_file' },
-      { keys: ['←'], action: 'back' }
-    ]
-  },
-  {
-    category: 'rules_page',
-    shortcuts: [
-      { keys: ['↑', '↓'], action: 'navigate' },
-      { keys: ['→'], action: 'rule_details' },
-      { keys: ['←'], action: 'back' }
-    ]
-  }
-];
+type Shortcuts = Array<{
+  category: string;
+  shortcuts: Array<{
+    keys: string[];
+    action: string;
+  }>;
+}>;
+
+const CATEGORIES: { left: Shortcuts; right: Shortcuts } = {
+  left: [
+    {
+      category: 'global',
+      shortcuts: [
+        { keys: ['s'], action: 'search' },
+        { keys: ['?'], action: 'open_shortcuts' }
+      ]
+    },
+    {
+      category: 'issues_page',
+      shortcuts: [
+        { keys: ['↑', '↓'], action: 'navigate' },
+        { keys: ['→'], action: 'source_code' },
+        { keys: ['←'], action: 'back' },
+        { keys: ['alt', '+', '↑', '↓'], action: 'navigate_locations' },
+        { keys: ['alt', '+', '←', '→'], action: 'switch_flows' },
+        { keys: ['f'], action: 'transition' },
+        { keys: ['a'], action: 'assign' },
+        { keys: ['m'], action: 'assign_to_me' },
+        { keys: ['i'], action: 'severity' },
+        { keys: ['c'], action: 'comment' },
+        { keys: ['ctrl', '+', 'enter'], action: 'submit_comment' },
+        { keys: ['t'], action: 'tags' }
+      ]
+    }
+  ],
+  right: [
+    {
+      category: 'code_page',
+      shortcuts: [
+        { keys: ['↑', '↓'], action: 'select_files' },
+        { keys: ['→'], action: 'open_file' },
+        { keys: ['←'], action: 'back' }
+      ]
+    },
+    {
+      category: 'measures_page',
+      shortcuts: [
+        { keys: ['↑', '↓'], action: 'select_files' },
+        { keys: ['→'], action: 'open_file' },
+        { keys: ['←'], action: 'back' }
+      ]
+    },
+    {
+      category: 'rules_page',
+      shortcuts: [
+        { keys: ['↑', '↓'], action: 'navigate' },
+        { keys: ['→'], action: 'rule_details' },
+        { keys: ['←'], action: 'back' }
+      ]
+    }
+  ]
+};
+
+function renderShortcuts(list: Shortcuts) {
+  return (
+    <>
+      {list.map(({ category, shortcuts }) => (
+        <div key={category} className="spacer-bottom">
+          <h3 className="null-spacer-top">{translate('keyboard_shortcuts', category, 'title')}</h3>
+          <table>
+            <thead>
+              <tr>
+                <th>{translate('keyboard_shortcuts.shortcut')}</th>
+                <th>{translate('keyboard_shortcuts.action')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {shortcuts.map(({ action, keys }) => (
+                <tr key={action}>
+                  <td>
+                    {keys.map(k =>
+                      k === '+' ? (
+                        <span key={k} className="little-spacer-right">
+                          {k}
+                        </span>
+                      ) : (
+                        <code key={k} className="little-spacer-right">
+                          {k}
+                        </code>
+                      )
+                    )}
+                  </td>
+                  <td>{translate('keyboard_shortcuts', category, action)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ))}
+    </>
+  );
+}
 
 export default function KeyboardShortcutsModal() {
   const [display, setDisplay] = React.useState(false);
@@ -108,40 +160,9 @@ export default function KeyboardShortcutsModal() {
         <h2>{title}</h2>
       </div>
 
-      <div className="modal-body modal-container markdown display-flex-wrap display-flex-space-between">
-        {CATEGORIES.map(({ category, shortcuts }) => (
-          <div key={category} className="spacer-right">
-            <h3>{translate('keyboard_shortcuts', category, 'title')}</h3>
-            <table>
-              <thead>
-                <tr>
-                  <th>{translate('keyboard_shortcuts.shortcut')}</th>
-                  <th>{translate('keyboard_shortcuts.action')}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {shortcuts.map(({ action, keys }) => (
-                  <tr key={action}>
-                    <td>
-                      {keys.map(k =>
-                        k === '+' ? (
-                          <span key={k} className="little-spacer-right">
-                            {k}
-                          </span>
-                        ) : (
-                          <code key={k} className="little-spacer-right">
-                            {k}
-                          </code>
-                        )
-                      )}
-                    </td>
-                    <td>{translate('keyboard_shortcuts', category, action)}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        ))}
+      <div className="modal-body modal-container markdown display-flex-start shortcuts-modal">
+        <div className="flex-1">{renderShortcuts(CATEGORIES.left)}</div>
+        <div className="flex-1 huge-spacer-left">{renderShortcuts(CATEGORIES.right)}</div>
       </div>
 
       <div className="modal-foot">

diff --git a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/KeyboardShortcutsModal-test.tsx.snap b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/KeyboardShortcutsModal-test.tsx.snap
index ce74b8537f1c077ad6e50c0bcd35d7bbd64bb8ec..c288017ad14f6a62e9dd312af34bf9aef8924f25 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/KeyboardShortcutsModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/KeyboardShortcutsModal-test.tsx.snap
@@ -16,534 +16,552 @@ exports[`should render correctly: visible 1`] = `
     </h2>
   </div>
   <div
-    className="modal-body modal-container markdown display-flex-wrap display-flex-space-between"
+    className="modal-body modal-container markdown display-flex-start shortcuts-modal"
   >
     <div
-      className="spacer-right"
-      key="global"
+      className="flex-1"
     >
-      <h3>
-        keyboard_shortcuts.global.title
-      </h3>
-      <table>
-        <thead>
-          <tr>
-            <th>
-              keyboard_shortcuts.shortcut
-            </th>
-            <th>
-              keyboard_shortcuts.action
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            key="search"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="s"
-              >
-                s
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.global.search
-            </td>
-          </tr>
-          <tr
-            key="open_shortcuts"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="?"
-              >
-                ?
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.global.open_shortcuts
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div
+        className="spacer-bottom"
+        key="global"
+      >
+        <h3
+          className="null-spacer-top"
+        >
+          keyboard_shortcuts.global.title
+        </h3>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                keyboard_shortcuts.shortcut
+              </th>
+              <th>
+                keyboard_shortcuts.action
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              key="search"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="s"
+                >
+                  s
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.global.search
+              </td>
+            </tr>
+            <tr
+              key="open_shortcuts"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="?"
+                >
+                  ?
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.global.open_shortcuts
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div
+        className="spacer-bottom"
+        key="issues_page"
+      >
+        <h3
+          className="null-spacer-top"
+        >
+          keyboard_shortcuts.issues_page.title
+        </h3>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                keyboard_shortcuts.shortcut
+              </th>
+              <th>
+                keyboard_shortcuts.action
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              key="navigate"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="↑"
+                >
+                  ↑
+                </code>
+                <code
+                  className="little-spacer-right"
+                  key="↓"
+                >
+                  ↓
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.navigate
+              </td>
+            </tr>
+            <tr
+              key="source_code"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="→"
+                >
+                  →
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.source_code
+              </td>
+            </tr>
+            <tr
+              key="back"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="←"
+                >
+                  ←
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.back
+              </td>
+            </tr>
+            <tr
+              key="navigate_locations"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="alt"
+                >
+                  alt
+                </code>
+                <span
+                  className="little-spacer-right"
+                  key="+"
+                >
+                  +
+                </span>
+                <code
+                  className="little-spacer-right"
+                  key="↑"
+                >
+                  ↑
+                </code>
+                <code
+                  className="little-spacer-right"
+                  key="↓"
+                >
+                  ↓
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.navigate_locations
+              </td>
+            </tr>
+            <tr
+              key="switch_flows"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="alt"
+                >
+                  alt
+                </code>
+                <span
+                  className="little-spacer-right"
+                  key="+"
+                >
+                  +
+                </span>
+                <code
+                  className="little-spacer-right"
+                  key="←"
+                >
+                  ←
+                </code>
+                <code
+                  className="little-spacer-right"
+                  key="→"
+                >
+                  →
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.switch_flows
+              </td>
+            </tr>
+            <tr
+              key="transition"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="f"
+                >
+                  f
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.transition
+              </td>
+            </tr>
+            <tr
+              key="assign"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="a"
+                >
+                  a
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.assign
+              </td>
+            </tr>
+            <tr
+              key="assign_to_me"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="m"
+                >
+                  m
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.assign_to_me
+              </td>
+            </tr>
+            <tr
+              key="severity"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="i"
+                >
+                  i
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.severity
+              </td>
+            </tr>
+            <tr
+              key="comment"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="c"
+                >
+                  c
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.comment
+              </td>
+            </tr>
+            <tr
+              key="submit_comment"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="ctrl"
+                >
+                  ctrl
+                </code>
+                <span
+                  className="little-spacer-right"
+                  key="+"
+                >
+                  +
+                </span>
+                <code
+                  className="little-spacer-right"
+                  key="enter"
+                >
+                  enter
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.submit_comment
+              </td>
+            </tr>
+            <tr
+              key="tags"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="t"
+                >
+                  t
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.issues_page.tags
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
     <div
-      className="spacer-right"
-      key="code_page"
+      className="flex-1 huge-spacer-left"
     >
-      <h3>
-        keyboard_shortcuts.code_page.title
-      </h3>
-      <table>
-        <thead>
-          <tr>
-            <th>
-              keyboard_shortcuts.shortcut
-            </th>
-            <th>
-              keyboard_shortcuts.action
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            key="select_files"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="↑"
-              >
-                ↑
-              </code>
-              <code
-                className="little-spacer-right"
-                key="↓"
-              >
-                ↓
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.code_page.select_files
-            </td>
-          </tr>
-          <tr
-            key="open_file"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="→"
-              >
-                →
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.code_page.open_file
-            </td>
-          </tr>
-          <tr
-            key="back"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="←"
-              >
-                ←
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.code_page.back
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div
-      className="spacer-right"
-      key="issues_page"
-    >
-      <h3>
-        keyboard_shortcuts.issues_page.title
-      </h3>
-      <table>
-        <thead>
-          <tr>
-            <th>
-              keyboard_shortcuts.shortcut
-            </th>
-            <th>
-              keyboard_shortcuts.action
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            key="navigate"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="↑"
-              >
-                ↑
-              </code>
-              <code
-                className="little-spacer-right"
-                key="↓"
-              >
-                ↓
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.navigate
-            </td>
-          </tr>
-          <tr
-            key="source_code"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="→"
-              >
-                →
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.source_code
-            </td>
-          </tr>
-          <tr
-            key="back"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="←"
-              >
-                ←
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.back
-            </td>
-          </tr>
-          <tr
-            key="navigate_locations"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="alt"
-              >
-                alt
-              </code>
-              <span
-                className="little-spacer-right"
-                key="+"
-              >
-                +
-              </span>
-              <code
-                className="little-spacer-right"
-                key="↑"
-              >
-                ↑
-              </code>
-              <code
-                className="little-spacer-right"
-                key="↓"
-              >
-                ↓
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.navigate_locations
-            </td>
-          </tr>
-          <tr
-            key="switch_flows"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="alt"
-              >
-                alt
-              </code>
-              <span
-                className="little-spacer-right"
-                key="+"
-              >
-                +
-              </span>
-              <code
-                className="little-spacer-right"
-                key="←"
-              >
-                ←
-              </code>
-              <code
-                className="little-spacer-right"
-                key="→"
-              >
-                →
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.switch_flows
-            </td>
-          </tr>
-          <tr
-            key="transition"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="f"
-              >
-                f
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.transition
-            </td>
-          </tr>
-          <tr
-            key="assign"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="a"
-              >
-                a
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.assign
-            </td>
-          </tr>
-          <tr
-            key="assign_to_me"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="m"
-              >
-                m
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.assign_to_me
-            </td>
-          </tr>
-          <tr
-            key="severity"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="i"
-              >
-                i
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.severity
-            </td>
-          </tr>
-          <tr
-            key="comment"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="c"
-              >
-                c
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.comment
-            </td>
-          </tr>
-          <tr
-            key="submit_comment"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="ctrl"
-              >
-                ctrl
-              </code>
-              <span
-                className="little-spacer-right"
-                key="+"
-              >
-                +
-              </span>
-              <code
-                className="little-spacer-right"
-                key="enter"
-              >
-                enter
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.submit_comment
-            </td>
-          </tr>
-          <tr
-            key="tags"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="t"
-              >
-                t
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.issues_page.tags
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div
-      className="spacer-right"
-      key="measures_page"
-    >
-      <h3>
-        keyboard_shortcuts.measures_page.title
-      </h3>
-      <table>
-        <thead>
-          <tr>
-            <th>
-              keyboard_shortcuts.shortcut
-            </th>
-            <th>
-              keyboard_shortcuts.action
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            key="select_files"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="↑"
-              >
-                ↑
-              </code>
-              <code
-                className="little-spacer-right"
-                key="↓"
-              >
-                ↓
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.measures_page.select_files
-            </td>
-          </tr>
-          <tr
-            key="open_file"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="→"
-              >
-                →
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.measures_page.open_file
-            </td>
-          </tr>
-          <tr
-            key="back"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="←"
-              >
-                ←
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.measures_page.back
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div
-      className="spacer-right"
-      key="rules_page"
-    >
-      <h3>
-        keyboard_shortcuts.rules_page.title
-      </h3>
-      <table>
-        <thead>
-          <tr>
-            <th>
-              keyboard_shortcuts.shortcut
-            </th>
-            <th>
-              keyboard_shortcuts.action
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            key="navigate"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="↑"
-              >
-                ↑
-              </code>
-              <code
-                className="little-spacer-right"
-                key="↓"
-              >
-                ↓
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.rules_page.navigate
-            </td>
-          </tr>
-          <tr
-            key="rule_details"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="→"
-              >
-                →
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.rules_page.rule_details
-            </td>
-          </tr>
-          <tr
-            key="back"
-          >
-            <td>
-              <code
-                className="little-spacer-right"
-                key="←"
-              >
-                ←
-              </code>
-            </td>
-            <td>
-              keyboard_shortcuts.rules_page.back
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div
+        className="spacer-bottom"
+        key="code_page"
+      >
+        <h3
+          className="null-spacer-top"
+        >
+          keyboard_shortcuts.code_page.title
+        </h3>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                keyboard_shortcuts.shortcut
+              </th>
+              <th>
+                keyboard_shortcuts.action
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              key="select_files"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="↑"
+                >
+                  ↑
+                </code>
+                <code
+                  className="little-spacer-right"
+                  key="↓"
+                >
+                  ↓
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.code_page.select_files
+              </td>
+            </tr>
+            <tr
+              key="open_file"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="→"
+                >
+                  →
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.code_page.open_file
+              </td>
+            </tr>
+            <tr
+              key="back"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="←"
+                >
+                  ←
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.code_page.back
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div
+        className="spacer-bottom"
+        key="measures_page"
+      >
+        <h3
+          className="null-spacer-top"
+        >
+          keyboard_shortcuts.measures_page.title
+        </h3>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                keyboard_shortcuts.shortcut
+              </th>
+              <th>
+                keyboard_shortcuts.action
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              key="select_files"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="↑"
+                >
+                  ↑
+                </code>
+                <code
+                  className="little-spacer-right"
+                  key="↓"
+                >
+                  ↓
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.measures_page.select_files
+              </td>
+            </tr>
+            <tr
+              key="open_file"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="→"
+                >
+                  →
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.measures_page.open_file
+              </td>
+            </tr>
+            <tr
+              key="back"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="←"
+                >
+                  ←
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.measures_page.back
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div
+        className="spacer-bottom"
+        key="rules_page"
+      >
+        <h3
+          className="null-spacer-top"
+        >
+          keyboard_shortcuts.rules_page.title
+        </h3>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                keyboard_shortcuts.shortcut
+              </th>
+              <th>
+                keyboard_shortcuts.action
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              key="navigate"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="↑"
+                >
+                  ↑
+                </code>
+                <code
+                  className="little-spacer-right"
+                  key="↓"
+                >
+                  ↓
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.rules_page.navigate
+              </td>
+            </tr>
+            <tr
+              key="rule_details"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="→"
+                >
+                  →
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.rules_page.rule_details
+              </td>
+            </tr>
+            <tr
+              key="back"
+            >
+              <td>
+                <code
+                  className="little-spacer-right"
+                  key="←"
+                >
+                  ←
+                </code>
+              </td>
+              <td>
+                keyboard_shortcuts.rules_page.back
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
   <div

diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index a193dda4645a93b1a1e2a627a9d78f80c2414e57..920e5ddfc267a3fa95b2c1abb0f038c61f218530 100644 (file)
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/server/sonar-web/src/main/js/app/styles/init/misc.css
@@ -56,6 +56,10 @@ th.hide-overflow {
   margin-top: 1px;
 }
 
+.null-spacer-top {
+  margin-top: 0 !important;
+}
+
 .spacer {
   margin: 8px !important;
 }

diff --git a/server/sonar-web/src/main/js/app/styles/style.css b/server/sonar-web/src/main/js/app/styles/style.css
index 929ac249851db28195f6ec2df23d97805d5f4aa3..3ce76afe13a03e953579e06f96aa53d3e8088436 100644 (file)
--- a/server/sonar-web/src/main/js/app/styles/style.css
+++ b/server/sonar-web/src/main/js/app/styles/style.css
@@ -271,3 +271,21 @@ textarea.width100 {
 .property .note {
   margin-top: 5px;
 }
+
+.shortcuts-modal h3 {
+  margin-bottom: 0;
+}
+
+.shortcuts-modal table {
+  width: 100%;
+  margin-top: 0;
+}
+
+.shortcuts-modal th {
+  padding: 3px 10px;
+  font-size: var(--verySmallFontSize);
+}
+
+.shortcuts-modal td {
+  padding: 3px 10px;
+}