Hi, PFA updated patch, 1) Added Keyboard shortcuts to comment line, uncomment line and comment/uncomment block of code also added drop-down for the same. 2) Also added options for indent & unindent code in the same drop-down. 3) Updated shortcut documents accordingly.
Please review. On Mon, Jul 17, 2017 at 3:05 PM, Dave Page <dp...@pgadmin.org> wrote: > Hi > > On Mon, Jul 17, 2017 at 10:31 AM, Murtuza Zabuawala < > murtuza.zabuaw...@enterprisedb.com> wrote: > >> Hi Dave, >> >> On Mon, Jul 17, 2017 at 2:33 PM, Dave Page <dp...@pgadmin.org> wrote: >> >>> Hi >>> >>> On Wed, Jul 12, 2017 at 1:16 PM, Murtuza Zabuawala < >>> murtuza.zabuaw...@enterprisedb.com> wrote: >>> >>>> Hi, >>>> >>>> PFA patch which will add functionality to allow user to >>>> comment/uncomment code in query editor. >>>> RM#2456 >>>> >>> >>> This is cool, but I'm not sure it's right as-is: >>> >>> * I prefer SQL style commenting, e.g. >>> >>> -- This is a comment >>> >>> Should we make that a config option if CodeMirror can do it? Or a >>> different hotkey? >>> >>> >> I'll check the extension code and update you accordingly, and It will be >> good idea to keep the both the options because with large code block >> current style works the best. >> > > Right. > > >> * You've added it as an option to the Clear XXX dropdown, which really >>> isn't the right place in my opinion. Should we add a new drop down for >>> this, and include some/all of the other Editing options on there? E.g. >>> tab/shift-tab. >>> >>> I thought that is misc options dropdown for our editor, but I don't see >> any point adding new drop down for one single option, Can we add new button >> instead? >> > > I think you missed this bit: "and include some/all of the other Editing > options on there? E.g. tab/shift-tab.". Essentially, we'd be adding an Edit > menu... > > >> * I think the docs should say Ctrl+Shift+/ rather than Shift+Ctrl+/, and >>> be ordered in the table to reflect that. It seems more natural to me. >>> >>> Initially I wrote ctrl + shift + /only but when I saw all other >> shortcuts starts with Shift , then I changed it to shift + ctrl + / :) >> > > No they don't - Ctrl+Alt+Left for example. I believe it's normal to put > Ctrl first, then Shift as it's a modifier. > > >> Thoughts? >>> >>> -- >>> Dave Page >>> Blog: http://pgsnake.blogspot.com >>> Twitter: @pgsnake >>> >>> EnterpriseDB UK: http://www.enterprisedb.com >>> The Enterprise PostgreSQL Company >>> >> >> > > > -- > Dave Page > Blog: http://pgsnake.blogspot.com > Twitter: @pgsnake > > EnterpriseDB UK: http://www.enterprisedb.com > The Enterprise PostgreSQL Company >
diff --git a/docs/en_US/keyboard_shortcuts.rst b/docs/en_US/keyboard_shortcuts.rst index 2194d63..194a2c5 100644 --- a/docs/en_US/keyboard_shortcuts.rst +++ b/docs/en_US/keyboard_shortcuts.rst @@ -59,6 +59,12 @@ When using the syntax-highlighting SQL editors, the following shortcuts are avai +--------------------------+------------------+-------------------------------------+ | Shift+Tab | Shift+Tab | Un-indent selected text | +--------------------------+------------------+-------------------------------------+ +| Ctrl+Shift+, | Ctrl+Shift+, | Comment selected code (Inline) | ++--------------------------+------------------+-------------------------------------+ +| Ctrl+Shift+. | Ctrl+Shift+. | Uncomment selected code (Inline) | ++--------------------------+------------------+-------------------------------------+ +| Ctrl+Shift+/ | Ctrl+Shift+/ | Comment/Uncomment code (Block) | ++--------------------------+------------------+-------------------------------------+ **Query Tool** diff --git a/web/pgadmin/static/bundle/codemirror.js b/web/pgadmin/static/bundle/codemirror.js index 6c3525b..c8766ff 100644 --- a/web/pgadmin/static/bundle/codemirror.js +++ b/web/pgadmin/static/bundle/codemirror.js @@ -13,6 +13,7 @@ import 'codemirror/addon/search/searchcursor'; import 'codemirror/addon/search/jump-to-line'; import 'codemirror/addon/edit/matchbrackets'; import 'codemirror/addon/edit/closebrackets'; +import 'codemirror/addon/comment/comment' import 'pgadmin.sqlfoldcode'; export default CodeMirror; \ No newline at end of file diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html index 24ea742..a9038c9 100644 --- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html +++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html @@ -208,6 +208,39 @@ </button> </div> <div class="btn-group" role="group" aria-label=""> + <button id="btn-comment-code" type="button" class="btn btn-default" title="{{ _('Comment/Uncomment Selection (Block)') }}"> + <i class="fa fa-file-code-o" aria-hidden="true"></i> + </button> + <button id="btn-edit-dropdown" type="button" class="btn btn-default dropdown-toggle" + data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu dropdown-menu"> + <li> + <a id="btn-indent-code" href="#"> + <i class="fa fa-indent" aria-hidden="true"></i> + <span> {{ _('Indent Selection') }} </span> + </a> + <a id="btn-unindent-code" href="#"> + <i class="fa fa-outdent" aria-hidden="true"></i> + <span> {{ _('Unindent Selection') }} </span> + </a> + <a id="btn-comment-line" href="#"> + <i class="fa fa-code" aria-hidden="true"></i> + <span> {{ _('Comment Selection (Inline)') }} </span> + </a> + <a id="btn-uncomment-line" href="#"> + <i class="fa fa-code" aria-hidden="true"></i> + <span> {{ _('Uncomment Selection (Inline)') }} </span> + </a> + <a id="btn-toggle-comment-block" href="#"> + <i class="fa fa-code" aria-hidden="true"></i> + <span> {{ _('Comment/Uncomment Selection (Block)') }} </span> + </a> + </li> + </ul> + </div> + <div class="btn-group" role="group" aria-label=""> <button id="btn-edit" type="button" class="btn btn-default" title="{{ _('Clear query window') }}"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> </button> diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js index acbe6ff..ff98563 100644 --- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js +++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js @@ -39,7 +39,10 @@ define('tools.querytool', [ // Define key codes for shortcut keys var F5_KEY = 116, F7_KEY = 118, - F8_KEY = 119; + F8_KEY = 119, + COMMA_KEY = 188, + PERIOD_KEY = 190, + FWD_SLASH_KEY = 191; var is_query_running = false; @@ -92,7 +95,15 @@ define('tools.querytool', [ "click #btn-explain-buffers": "on_explain_buffers", "click #btn-explain-timing": "on_explain_timing", "change .limit": "on_limit_change", - "keydown": "keyAction" + "keydown": "keyAction", + // Comment options + "click #btn-comment-code": "on_toggle_comment_block_code", + "click #btn-toggle-comment-block": "on_toggle_comment_block_code", + "click #btn-comment-line": "on_comment_line_code", + "click #btn-uncomment-line": "on_uncomment_line_code", + // Indentation options + "click #btn-indent-code": "on_indent_code", + "click #btn-unindent-code": "on_unindent_code" }, // This function is used to render the template. @@ -1277,6 +1288,59 @@ define('tools.querytool', [ ); }, + // Callback function for the line comment code + on_comment_line_code: function() { + var self = this; + // Trigger the comment signal to the SqlEditorController class + self.handler.trigger( + 'pgadmin-sqleditor:comment_line_code', + self, + self.handler + ); + }, + + // Callback function for the line uncomment code + on_uncomment_line_code: function() { + var self = this; + // Trigger the comment signal to the SqlEditorController class + self.handler.trigger( + 'pgadmin-sqleditor:uncomment_line_code', + self, + self.handler + ); + }, + + // Callback function for the block comment/uncomment code + on_toggle_comment_block_code: function() { + var self = this; + // Trigger the comment signal to the SqlEditorController class + self.handler.trigger( + 'pgadmin-sqleditor:toggle_comment_block_code', + self, + self.handler + ); + }, + + on_indent_code: function() { + var self = this; + // Trigger the comment signal to the SqlEditorController class + self.handler.trigger( + 'pgadmin-sqleditor:indent_selected_code', + self, + self.handler + ); + }, + + on_unindent_code: function() { + var self = this; + // Trigger the comment signal to the SqlEditorController class + self.handler.trigger( + 'pgadmin-sqleditor:unindent_selected_code', + self, + self.handler + ); + }, + // Callback function for the clear button click. on_clear: function(ev) { var self = this, sql; @@ -1487,6 +1551,18 @@ define('tools.querytool', [ // Download query result as CSV. this.on_download(ev); ev.preventDefault(); + } else if (ev.shiftKey && ev.ctrlKey && keyCode == COMMA_KEY ) { + // Toggle comments + this.on_comment_line_code(ev); + ev.preventDefault(); + } else if (ev.shiftKey && ev.ctrlKey && keyCode == PERIOD_KEY ) { + // Toggle comments + this.on_uncomment_line_code(ev); + ev.preventDefault(); + } else if (ev.shiftKey && ev.ctrlKey && keyCode == FWD_SLASH_KEY ) { + // Toggle comments + this.on_toggle_comment_block_code(ev); + ev.preventDefault(); } } }); @@ -1576,6 +1652,13 @@ define('tools.querytool', [ self.on('pgadmin-sqleditor:button:explain-costs', self._explain_costs, self); self.on('pgadmin-sqleditor:button:explain-buffers', self._explain_buffers, self); self.on('pgadmin-sqleditor:button:explain-timing', self._explain_timing, self); + // Commenting related + self.on('pgadmin-sqleditor:comment_line_code', self._comment_line_code, self); + self.on('pgadmin-sqleditor:uncomment_line_code', self._uncomment_line_code, self); + self.on('pgadmin-sqleditor:toggle_comment_block_code', self._comment_block_code, self); + // Indentation related + self.on('pgadmin-sqleditor:indent_selected_code', self._indent_selected_code, self); + self.on('pgadmin-sqleditor:unindent_selected_code', self._unindent_selected_code, self); if (self.is_query_tool) { self.gridView.query_tool_obj.refresh(); @@ -3624,6 +3707,71 @@ define('tools.querytool', [ }, /* + * This function will comment code (Wrapper function) + */ + _comment_line_code: function() { + this._toggle_comment_code('comment_line'); + }, + + /* + * This function will uncomment code (Wrapper function) + */ + _uncomment_line_code: function() { + this._toggle_comment_code('uncomment_line'); + }, + + /* + * This function will comment/uncomment code (Wrapper function) + */ + _comment_block_code: function() { + this._toggle_comment_code('block'); + }, + + /* + * This function will comment/uncomment code (Main function) + */ + _toggle_comment_code: function(of_type) { + var self = this, editor = self.gridView.query_tool_obj, + selected_code = editor.getSelection(), + sql = selected_code.length > 0 ? selected_code : editor.getValue(); + // If it is an empty query, do nothing. + if (sql.length <= 0) return; + + // Find the code selection range + var range = { + from: editor.getCursor(true), + to: editor.getCursor(false) + }, + option = { lineComment: '--' }; + + if(of_type == 'comment_line') { + // Comment line + editor.lineComment(range.from, range.to, option); + } else if(of_type == 'uncomment_line') { + // Uncomment line + editor.uncomment(range.from, range.to, option); + } else if(of_type == 'block') { + editor.toggleComment(range.from, range.to); + } + }, + + /* + * This function will indent selected code + */ + _indent_selected_code: function() { + var self = this, editor = self.gridView.query_tool_obj; + editor.execCommand("indentMore"); + }, + + /* + * This function will unindent selected code + */ + _unindent_selected_code: function() { + var self = this, editor = self.gridView.query_tool_obj; + editor.execCommand("indentLess"); + }, + + /* * This function get explain options and auto rollback/auto commit * values from preferences */