Procházet zdrojové kódy

HUE-3208 [editor] Add keyboard shortcuts map

Enrico Berti před 9 roky
rodič
revize
ea9b4a3

+ 13 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -968,3 +968,16 @@ h4.header {
 .table-results table > thead > tr > td:first-child, .table-results table > tbody > tr > td:first-child {
   background-color: #f9f9f9;
 }
+
+#helpModal th:first-child {
+  width: 25%;
+}
+
+#helpModal th:last-child {
+  width: 50%;
+}
+
+#helpModal .tab-content {
+  min-height: 355px;
+  max-height: 355px;
+}

+ 503 - 0
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -323,6 +323,502 @@ ${ hueIcons.symbols() }
 
 <%def name="commonHTML()">
 
+<div id="helpModal" class="modal transparent-modal hide" data-backdrop="true" style="width:980px;margin-left:-510px!important">
+  <div class="modal-header">
+    <a href="javascript: void(0)" data-dismiss="modal" class="pull-right"><i class="fa fa-times"></i></a>
+    <h3>${_('Editor keyboard shortcuts')}</h3>
+  </div>
+  <div class="modal-body">
+
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#helpLineOperations" data-toggle="tab">${ _('Line Operations')}</a></li>
+        <li><a href="#helpSelection" data-toggle="tab">${ _('Selection')}</a></li>
+        <li><a href="#helpMulticursor" data-toggle="tab">${ _('Multicursor')}</a></li>
+        <li><a href="#helpGoTo" data-toggle="tab">${ _('Go to')}</a></li>
+        <li><a href="#helpFindReplace" data-toggle="tab">${ _('Find/Replace')}</a></li>
+        <li><a href="#helpFolding" data-toggle="tab">${ _('Folding')}</a></li>
+        <li><a href="#helpOther" data-toggle="tab">${ _('Other')}</a></li>
+      </ul>
+
+      <div class="tab-content">
+        <div class="tab-pane active" id="helpLineOperations">
+          <table class="table">
+        <thead>
+        <tr>
+          <th>Windows/Linux</th>
+          <th>Mac</th>
+          <th>${ _('Action')}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>Ctrl-D</td>
+          <td>Command-D</td>
+          <td>${ _('Remove line')}</td>
+        </tr>
+        <tr>
+          <td>Alt-Shift-Down</td>
+          <td>Command-Option-Down</td>
+          <td>${ _('Copy lines down')}</td>
+        </tr>
+        <tr>
+          <td>Alt-Shift-Up</td>
+          <td>Command-Option-Up</td>
+          <td>${ _('Copy lines up')}</td>
+        </tr>
+        <tr>
+          <td>Alt-Down</td>
+          <td>Option-Down</td>
+          <td>${ _('Move lines down')}</td>
+        </tr>
+        <tr>
+          <td>Alt-Up</td>
+          <td>Option-Up</td>
+          <td>${ _('Move lines up')}</td>
+        </tr>
+        <tr>
+          <td>Alt-Delete</td>
+          <td>Ctrl-K</td>
+          <td>${ _('Remove to line end')}</td>
+        </tr>
+        <tr>
+          <td>Alt-Backspace</td>
+          <td>Command-Backspace</td>
+          <td>${ _('Remove to line start')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Backspace</td>
+          <td>Option-Backspace, Ctrl-Option-Backspace</td>
+          <td>${ _('Remove word left')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Delete</td>
+          <td>Option-Delete</td>
+          <td>${ _('Remove word right')}</td>
+        </tr>
+        <tr>
+          <td>---</td>
+          <td>Ctrl-O</td>
+          <td>${ _('Split line')}</td>
+        </tr>
+        </tbody>
+      </table>
+        </div>
+        <div class="tab-pane" id="helpSelection">
+          <table class="table">
+        <thead>
+        <tr>
+          <th>Windows/Linux</th>
+          <th>Mac</th>
+          <th>${ _('Action')}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>Ctrl-A</td>
+          <td>Command-A</td>
+          <td>${ _('Select all')}</td>
+        </tr>
+        <tr>
+          <td>Shift-Left</td>
+          <td>Shift-Left</td>
+          <td>${ _('Select left')}</td>
+        </tr>
+        <tr>
+          <td>Shift-Right</td>
+          <td>Shift-Right</td>
+          <td>${ _('Select right')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Shift-Left</td>
+          <td>Option-Shift-Left</td>
+          <td>${ _('Select word left')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Shift-Right</td>
+          <td>Option-Shift-Right</td>
+          <td>${ _('Select word right')}</td>
+        </tr>
+        <tr>
+          <td>Shift-Home</td>
+          <td>Shift-Home</td>
+          <td>${ _('Select line start')}</td>
+        </tr>
+        <tr>
+          <td>Shift-End</td>
+          <td>Shift-End</td>
+          <td>${ _('Select line end')}</td>
+        </tr>
+        <tr>
+          <td>Alt-Shift-Right</td>
+          <td>Command-Shift-Right</td>
+          <td>${ _('Select to line end')}</td>
+        </tr>
+        <tr>
+          <td>Alt-Shift-Left</td>
+          <td>Command-Shift-Left</td>
+          <td>${ _('Select to line start')}</td>
+        </tr>
+        <tr>
+          <td>Shift-Up</td>
+          <td>Shift-Up</td>
+          <td>${ _('Select up')}</td>
+        </tr>
+        <tr>
+          <td>Shift-Down</td>
+          <td>Shift-Down</td>
+          <td>${ _('Select down')}</td>
+        </tr>
+        <tr>
+          <td>Shift-PageUp</td>
+          <td>Shift-PageUp</td>
+          <td>${ _('Select page up')}</td>
+        </tr>
+        <tr>
+          <td>Shift-PageDown</td>
+          <td>Shift-PageDown</td>
+          <td>${ _('Select page down')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Shift-Home</td>
+          <td>Command-Shift-Up</td>
+          <td>${ _('Select to start')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Shift-End</td>
+          <td>Command-Shift-Down</td>
+          <td>${ _('Select to end')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Shift-D</td>
+          <td>Command-Shift-D</td>
+          <td>${ _('Duplicate selection')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Shift-P</td>
+          <td>---</td>
+          <td>${ _('Select to matching bracket')}</td>
+        </tr>
+        </tbody>
+      </table>
+        </div>
+        <div class="tab-pane" id="helpMulticursor">
+          <table class="table">
+        <thead>
+        <tr>
+          <th>Windows/Linux</th>
+          <th>Mac</th>
+          <th>${ _('Action')}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>Ctrl-Alt-Up</td>
+          <td>Ctrl-Option-Up</td>
+          <td>${ _('Add multi-cursor above')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Alt-Down</td>
+          <td>Ctrl-Option-Down</td>
+          <td>${ _('Add multi-cursor below')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Alt-Right</td>
+          <td>Ctrl-Option-Right</td>
+          <td>${ _('Add next occurrence to multi-selection')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Alt-Left</td>
+          <td>Ctrl-Option-Left</td>
+          <td>${ _('Add previous occurrence to multi-selection')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Alt-Shift-Up</td>
+          <td>Ctrl-Option-Shift-Up</td>
+          <td>${ _('Move multicursor from current line to the line above')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Alt-Shift-Down</td>
+          <td>Ctrl-Option-Shift-Down</td>
+          <td>${ _('Move multicursor from current line to the line below')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Alt-Shift-Right</td>
+          <td>Ctrl-Option-Shift-Right</td>
+          <td>${ _('Remove current occurrence from multi-selection and move to next')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Alt-Shift-Left</td>
+          <td>Ctrl-Option-Shift-Left</td>
+          <td>${ _('Remove current occurrence from multi-selection and move to previous')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Shift-L</td>
+          <td>Ctrl-Shift-L</td>
+          <td>${ _('Select all from multi-selection')}</td>
+        </tr>
+        </tbody>
+      </table>
+        </div>
+        <div class="tab-pane" id="helpGoTo">
+          <table class="table">
+      <thead>
+      <tr>
+        <th>Windows/Linux</th>
+        <th>Mac</th>
+        <th>${ _('Action')}</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td>Left</td>
+        <td>Left, Ctrl-B</td>
+        <td>${ _('Go to left')}</td>
+      </tr>
+      <tr>
+        <td>Right</td>
+        <td>Right, Ctrl-F</td>
+        <td>${ _('Go to right')}</td>
+      </tr>
+      <tr>
+        <td>Ctrl-Left</td>
+        <td>Option-Left</td>
+        <td>${ _('Go to word left')}</td>
+      </tr>
+      <tr>
+        <td>Ctrl-Right</td>
+        <td>Option-Right</td>
+        <td>${ _('Go to word right')}</td>
+      </tr>
+      <tr>
+        <td>Up</td>
+        <td>Up, Ctrl-P</td>
+        <td>${ _('Go line up')}</td>
+      </tr>
+      <tr>
+        <td>Down</td>
+        <td>Down, Ctrl-N</td>
+        <td>${ _('Go line down')}</td>
+      </tr>
+      <tr>
+        <td>Alt-Left, Home</td>
+        <td>Command-Left, Home, Ctrl-A</td>
+        <td>${ _('Go to line start')}</td>
+      </tr>
+      <tr>
+        <td>Alt-Right, End</td>
+        <td>Command-Right, End, Ctrl-E</td>
+        <td>${ _('Go to line end')}</td>
+      </tr>
+      <tr>
+        <td>PageUp</td>
+        <td>Option-PageUp</td>
+        <td>${ _('Go to page up')}</td>
+      </tr>
+      <tr>
+        <td>PageDown</td>
+        <td>Option-PageDown, Ctrl-V</td>
+        <td>${ _('Go to page down')}</td>
+      </tr>
+      <tr>
+        <td>Ctrl-Home</td>
+        <td>Command-Home, Command-Up</td>
+        <td>${ _('Go to start')}</td>
+      </tr>
+      <tr>
+        <td>Ctrl-End</td>
+        <td>Command-End, Command-Down</td>
+        <td>${ _('Go to end')}</td>
+      </tr>
+      <tr>
+        <td>Ctrl-L</td>
+        <td>Command-L</td>
+        <td>${ _('Go to line')}</td>
+      </tr>
+      <tr>
+        <td>Ctrl-Down</td>
+        <td>Command-Down</td>
+        <td>${ _('Scroll line down')}</td>
+      </tr>
+      <tr>
+        <td>Ctrl-Up</td>
+        <td>---</td>
+        <td>${ _('Scroll line up')}</td>
+      </tr>
+      <tr>
+        <td>Ctrl-P</td>
+        <td>---</td>
+        <td>${ _('Go to matching bracket')}</td>
+      </tr>
+      <tr>
+        <td>---</td>
+        <td>Option-PageDown</td>
+        <td>${ _('Scroll page down')}</td>
+      </tr>
+      <tr>
+        <td>---</td>
+        <td>Option-PageUp</td>
+        <td>${ _('Scroll page up')}</td>
+      </tr>
+      </tbody>
+    </table>
+        </div>
+        <div class="tab-pane" id="helpFindReplace">
+          <table class="table">
+        <thead>
+        <tr>
+          <th>Windows/Linux</th>
+          <th>Mac</th>
+          <th>${ _('Action')}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>Ctrl-F</td>
+          <td>Command-F</td>
+          <td>${ _('Find')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-H</td>
+          <td>Command-Option-F</td>
+          <td>${ _('Replace')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-K</td>
+          <td>Command-G</td>
+          <td>${ _('Find next')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Shift-K</td>
+          <td>Command-Shift-G</td>
+          <td>${ _('Find previous')}</td>
+        </tr>
+        </tbody>
+      </table>
+        </div>
+        <div class="tab-pane" id="helpFolding">
+          <table class="table">
+        <thead>
+        <tr>
+          <th>Windows/Linux</th>
+          <th>Mac</th>
+          <th>${ _('Action')}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>Alt-L, Ctrl-F1</td>
+          <td>Command-Option-L, Command-F1</td>
+          <td>${ _('Fold selection')}</td>
+        </tr>
+        <tr>
+          <td>Alt-Shift-L, Ctrl-Shift-F1</td>
+          <td>Command-Option-Shift-L, Command-Shift-F1</td>
+          <td>${ _('Unfold')}</td>
+        </tr>
+        <tr>
+          <td>Alt-0</td>
+          <td>Command-Option-0</td>
+          <td>${ _('Fold all')}</td>
+        </tr>
+        <tr>
+          <td>Alt-Shift-0</td>
+          <td>Command-Option-Shift-0</td>
+          <td>${ _('Unfold all')}</td>
+        </tr>
+        </tbody>
+      </table>
+        </div>
+        <div class="tab-pane" id="helpOther">
+          <table class="table">
+        <thead>
+        <tr>
+          <th>Windows/Linux</th>
+          <th>Mac</th>
+          <th>${ _('Action')}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>Tab</td>
+          <td>Tab</td>
+          <td>${ _('Indent')}</td>
+        </tr>
+        <tr>
+          <td>Shift-Tab</td>
+          <td>Shift-Tab</td>
+          <td>${ _('Outdent')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Z</td>
+          <td>Command-Z</td>
+          <td>${ _('Undo')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Shift-Z, Ctrl-Y</td>
+          <td>Command-Shift-Z, Command-Y</td>
+          <td>${ _('Redo')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-,</td>
+          <td>Command-,</td>
+          <td>${ _('Show the settings menu')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-/</td>
+          <td>Command-/</td>
+          <td>${ _('Toggle comment')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-T</td>
+          <td>Ctrl-T</td>
+          <td>${ _('Transpose letters')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Shift-U</td>
+          <td>Ctrl-Shift-U</td>
+          <td>${ _('Change to lower case')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-U</td>
+          <td>Ctrl-U</td>
+          <td>${ _('Change to upper case')}</td>
+        </tr>
+        <tr>
+          <td>Insert</td>
+          <td>Insert</td>
+          <td>${ _('Overwrite')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Shift-E</td>
+          <td>Command-Shift-E</td>
+          <td>${ _('Macros replay')}</td>
+        </tr>
+        <tr>
+          <td>Ctrl-Alt-E</td>
+          <td>---</td>
+          <td>${ _('Macros recording')}</td>
+        </tr>
+        <tr>
+          <td>Delete</td>
+          <td>---</td>
+          <td>${ _('Delete')}</td>
+        </tr>
+        <tr>
+          <td>---</td>
+          <td>Ctrl-L</td>
+          <td>${ _('Center selection')}</td>
+        </tr>
+        </tbody>
+      </table>
+        </div>
+      </div>
+  </div>
+  <div class="modal-footer">
+    <a href="#" class="btn" data-dismiss="modal">${_('Close')}</a>
+  </div>
+</div>
+
 <div id="combinedContentModal" class="modal hide" data-backdrop="true" style="width:780px;margin-left:-410px!important">
   <div class="modal-header">
     <a href="javascript: void(0)" data-dismiss="modal" class="pull-right"><i class="fa fa-times"></i></a>
@@ -650,6 +1146,7 @@ ${ hueIcons.symbols() }
     <!-- /ko -->
     <a class="inactive-action margin-left-10" href="javascript:void(0)" data-bind="visible: status() != 'ready' && status() != 'loading' && errors().length == 0, click: function() { hideFixedHeaders(); $data.showLogs(!$data.showLogs());}, css: {'blue': $data.showLogs}" title="${ _('Show Logs') }"><i class="fa fa-file-text-o"></i></a>
     <a class="inactive-action margin-left-10" href="javascript:void(0)" data-bind="toggle: settingsVisible, visible: hasProperties, css: { 'blue' : settingsVisible }" title="${ _('Settings and properties') }"><i class="fa fa-cog"></i></a>
+    <a class="inactive-action margin-left-10" href="javascript:void(0)" title="${ _('Show editor shortcuts') }" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question"></i></a>
   </div>
 </script>
 
@@ -2443,6 +2940,12 @@ ${ hueIcons.symbols() }
         return false;
       });
 
+      $(document).bind('keyup', function (e) {
+        if (e.keyCode == 191 && !$(e.target).is('input') && !$(e.target).is('textarea')) {
+          $('#helpModal').modal('show');
+        }
+      });
+
       if (!viewModel.editorMode) {
         $(window).bind("keydown", "ctrl+n alt+n meta+n", function (e) {
           e.preventDefault();