Repository: zeppelin Updated Branches: refs/heads/master 8194a5e0a -> 8056bc9b6
[ZEPPELIN-2388] Improve the keyboard shortcuts dialog ## What is this PR for? This PR is for Improving the keyboard shortcuts dialog form and here is what i improve. - change to table shape - add scrollbar - fixed that text is misaligned when resizing windows ## What type of PR is it? [Bug fix | Improvement] ## What is the Jira issue? * [ZEPPELIN-2388; Prettify Keyboard Shortcut Dialog](https://issues.apache.org/jira/browse/ZEPPELIN-2388) ## How should this be tested? 1. Click `Keyboard Shortcuts' icon in a paragraph. 2. Check `Keyboard Shortcuts` shape. 3. Check resizing windows. ## Screenshots (if appropriate) ### [Before - 1. default]  ### [Before - 2. text is misaligned when resizing windows]  ### [Before - 3. not scrollbar]  ### [After - 1. default]  ### [After - 2. resizing windows (my image is a little broken.)]  ### Last improvement dialog shape  ### Questions: * Does the licenses files need update? No * Is there breaking changes for older versions? No * Does this needs documentation? No Author: soralee <[email protected]> Closes #2274 from soralee/ZEPPELIN-2388_shortcut_key and squashes the following commits: 2428787 [soralee] remove separator and modify tight space fdcf7f2 [soralee] modify as comments 6d0cee2 [soralee] improve the keyboard shortcuts dialog Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/8056bc9b Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/8056bc9b Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/8056bc9b Branch: refs/heads/master Commit: 8056bc9b6298634464e0a1ab6b74040acac0584c Parents: 8194a5e Author: soralee <[email protected]> Authored: Mon Apr 24 13:47:02 2017 +0900 Committer: Lee moon soo <[email protected]> Committed: Sun May 14 07:28:39 2017 -0400 ---------------------------------------------------------------------- .../src/app/notebook/paragraph/paragraph.css | 57 +- .../modal-shortcut/modal-shortcut.html | 545 ++++++++++--------- 2 files changed, 330 insertions(+), 272 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/8056bc9b/zeppelin-web/src/app/notebook/paragraph/paragraph.css ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css index 1c5e560..b176dfb 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css @@ -222,16 +222,69 @@ table.dataTable.table-condensed .sorting_desc:after { cursor: pointer; } -.dropdown-menu .shortcut-icon{ +.dropdown-menu .shortcut-icon { padding-right: 7px; float: left; } -.dropdown-menu .shortcut-keys{ +.dropdown-menu .shortcut-keys { float: right; color: #999; } +.modal-dialog .table-scroll { + max-height: 70vh; + min-width: 160px; + overflow: auto; + overflow-y: scroll; +} + +.shortcut-modal-header { + min-height: 16.428571429px; + padding: 15px; + border-bottom: 1px solid #9cb4c5; + background-color: #3071a9; + border: 2px solid #3071a9; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.shortcut-modal-header .close { + color: #cfcfcf; + opacity: 1; +} + +.shortcut-modal-title { + color: white; + margin-top: 2px; + margin-bottom: 2px; +} + +table.table-shortcut { + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} + +.table-shortcut > tbody > tr > th { + background-color: #d6dde7; + border-color: 1px solid #9cb4c5; + color: #383a3c; + font-size: 15px !important; + font-weight: 500; +} + +.table-shortcut > tbody > tr > td { + border-top: 0px; + padding: 5px; + vertical-align: middle; + font-size: 14px !important; +} + +.kbd-default { + border: 1; + font-size: 10px !important; +} + /* Paragraph Title */ http://git-wip-us.apache.org/repos/asf/zeppelin/blob/8056bc9b/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html b/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html index 209a2e0..775da4f 100644 --- a/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html +++ b/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html @@ -15,292 +15,297 @@ limitations under the License. <div class="modal fade" id="shortcutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> - <div class="modal-header"> + <div class="shortcut-modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> - <h4 class="modal-title" id="myModalLabel">Keyboard shortcuts</h4> + <h4 class="shortcut-modal-title" id="myModalLabel">Keyboard shortcuts</h4> </div> - <div class="modal-body"> - - <h4>Note Shortcuts</h4> - - <div class="row"> - <div class="col-md-4"> + <div class="table-scroll"> + <table class="table table-shortcut"> + <tr> + <th style="width:70%">Note Keyboard Shortcuts</th> + <th></th> + </tr> + + <tr> + <td> + <div class="col-md-8">Run paragraph</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Shift</kbd> + <kbd class="kbd-default">Enter</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Cancel</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">C</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Move cursor Up</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">P</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Move cursor Down</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">N</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Remove paragraph</div> + </td> + <td> <div class="keys"> - <kbd class="kbd-dark">Shift</kbd> + <kbd class="kbd-dark">Enter</kbd> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">D</kbd> </div> - </div> - <div class="col-md-8"> - Run paragraph - </div> - </div> - - <div class="row"> - <div class="col-md-4"> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Insert new paragraph above</div> + </td> + <td> <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">C</kbd> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">A</kbd> </div> - </div> - <div class="col-md-8"> - Cancel - </div> - </div> - - <div class="row"> - <div class="col-md-4"> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Insert new paragraph below</div> + </td> + <td> <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">P</kbd> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">B</kbd> </div> - </div> - <div class="col-md-8"> - Move cursor Up - </div> - </div> - - <div class="row"> - <div class="col-md-4"> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Insert copy of paragraph below</div> + </td> + <td> <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">N</kbd> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">Shift</kbd> + <kbd class="kbd-default">C</kbd> </div> - </div> - <div class="col-md-8"> - Move cursor Down - </div> - </div> - - <div class="row"> - <div class="col-md-4"> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Move paragraph Up</div> + </td> + <td> <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">D</kbd> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">K</kbd> </div> - </div> - <div class="col-md-8"> - Remove paragraph - </div> - </div> - - <div class="row"> - <div class="col-md-4"> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Move paragraph Down</div> + </td> + <td> <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">A</kbd> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">J</kbd> </div> - </div> - <div class="col-md-8"> - Insert new paragraph above - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">B</kbd> - </div> - </div> - <div class="col-md-8"> - Insert new paragraph below - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Shift</kbd> + <kbd class="kbd-dark">C</kbd> - </div> - </div> - <div class="col-md-8"> - Insert copy of paragraph below - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">K</kbd> - </div> - </div> - <div class="col-md-8"> - Move paragraph Up - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">J</kbd> - </div> - </div> - <div class="col-md-8"> - Move paragraph Down - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt' }}</kbd> + <kbd class="kbd-dark">R</kbd> - </div> - </div> - <div class="col-md-8"> - Enable/Disable run paragraph - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">O</kbd> - </div> - </div> - <div class="col-md-8"> - Toggle output - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">E</kbd> - </div> - </div> - <div class="col-md-8"> - Toggle editor - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">M</kbd> - </div> - </div> - <div class="col-md-8"> - Toggle line number - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">T</kbd> - </div> - </div> - <div class="col-md-8"> - Toggle title - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">L</kbd> - </div> - </div> - <div class="col-md-8"> - Clear output - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">W</kbd> - </div> - </div> - <div class="col-md-8"> - Link this paragraph - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Shift</kbd> + <kbd class="kbd-dark">-</kbd> - </div> - </div> - <div class="col-md-8"> - Reduce paragraph width - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Shift</kbd> + <kbd class="kbd-dark">+</kbd> - </div> - </div> - <div class="col-md-8"> - Increase paragraph width - </div> - </div> - - - <h4>Editor Shortcuts</h4> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">.</kbd> - </div> - </div> - <div class="col-md-8"> - Auto-completion - </div> - </div> - - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">K</kbd> - </div> - </div> - <div class="col-md-8"> - Cut the line - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Y</kbd> - </div> - </div> - <div class="col-md-8"> - Paste the line - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">S</kbd> - </div> - </div> - <div class="col-md-8"> - Search inside the code - </div> - </div> - - <div class="row"> - <div class="col-md-4"> - <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">A</kbd> - </div> - </div> - <div class="col-md-8"> - Move cursor to the beginning - </div> - </div> - - <div class="row"> - <div class="col-md-4"> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Enable/Disable run paragraph</div> + </td> + <td> <div class="keys"> - <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">E</kbd> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt' }}</kbd> + <kbd class="kbd-default">R</kbd> </div> - </div> - <div class="col-md-8"> - Move cursor at the end - </div> - </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Toggle output</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">O</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Toggle editor</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">E</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Toggle line number</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">M</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Toggle title</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">T</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Clear output</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">L</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Link this paragraph</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">W</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Reduce paragraph width</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">Shift</kbd> + <kbd class="kbd-default">-</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Increase paragraph width</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">Shift</kbd> + <kbd class="kbd-default">+</kbd> + </div> + </td> + </tr> + + <tr class="sub-title"> + <th style="width:70%">Editor Keyboard Shortcuts</th> + <th></th> + </tr> + + <tr> + <td> + <div class="col-md-8">Auto-completion</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">.</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Cut the line</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">K</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Paste the line</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">Y</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Search inside the code</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">S</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Move cursor to the beginning</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">A</kbd> + </div> + </td> + </tr> + + <tr> + <td> + <div class="col-md-8">Move cursor at the end</div> + </td> + <td> + <div class="keys"> + <kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">E</kbd> + </div> + </td> + </tr> + </table> </div> </div> </div>
