You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mo...@apache.org on 2017/05/14 11:28:44 UTC
zeppelin git commit: [ZEPPELIN-2388] Improve the keyboard shortcuts
dialog
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 <so...@zepl.com>
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 <so...@zepl.com>
Authored: Mon Apr 24 13:47:02 2017 +0900
Committer: Lee moon soo <mo...@apache.org>
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>