[ZEPPELIN-1757] Menu of paragraph includes keyboard shortcut

### What is this PR for? Currently, keyboard shortcuts can be only seen by keyboard icon. It'll be very comfortable if keyboard shortcuts are showing the menu of paragraph. ### What type of PR is it? [Improvement] ### Todos - [x] Add the keyboard shortcut of Link this paragraph - [x] Update CI(Selelium) Test case ### What is the Jira issue? * https://issues.apache.org/jira/browse/ZEPPELIN-1757 ### How should this be tested? Click to paragraph menu. I tested on Ubuntu. ### Screenshots (if appropriate) [before] ![screenshot from 2016-12-08 14-52-35](https://cloud.githubusercontent.com/assets/8110458/20999795/77b93d78-bd5a-11e6-9d15-0ea1995c2cf5.png) [after] ![image](https://cloud.githubusercontent.com/assets/8110458/21339558/a759e6e6-c6c3-11e6-920f-ebd264a60f0d.png) ![z1736](https://cloud.githubusercontent.com/assets/8110458/21339628/25222340-c6c4-11e6-824e-7ef059b90eb9.gif) ### Questions: * Does the licenses files need update? No * Is there breaking changes for older versions? No * Does this needs documentation? No Author: soralee <sora0728@nflabs.com> Closes #1736 from soralee/ZEPPELIN-1757 and squashes the following commits: 5b84f23 [soralee] for aligned shortcut key text cdd34ef [soralee] [ZEPPELIN-1757] update Selelium Test case cc84b08 [soralee] [ZEPPELIN-1757] add shortcut key to tooltip and Link this paragraph b34a5b5 [soralee] [ZEPPELIN-1757] changed selenium CI test ff96071 [soralee] [ZEPPELIN-1757] changed selenium CI test 76c75b0 [soralee] [ZEPPELIN-1757] changed selenium CI test a833288 [soralee] [ZEPPELIN-1757] changed CI test 0b54bfd [soralee] [ZEPPELIN-1757] changed CI test e5b6cc0 [soralee] [ZEPPELIN-1757] Menu of paragraph includes keyboard shortcut 9ee5cc9 [soralee] [ZEPPELIN-1757] Menu of paragraph includes keyboard shortcut
apache · Dec 29, 2016 · e3cc8ea · e3cc8ea
1 parent 3f28865
commit e3cc8ea
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 25 deletions.
diff --git a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ParagraphActionsIT.java b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ParagraphActionsIT.java
@@ -238,7 +238,7 @@ public void testDisableParagraphRunButton() throws Exception {
       driver.findElement(By.xpath(getParagraphXPath(1) + "//span[@class='icon-settings']")).click();
       clickAndWait(By.xpath(getParagraphXPath(1) + "//ul/li/a[@ng-click='toggleEnableDisable(paragraph)']"));
       collector.checkThat("The play button class was ",
-          driver.findElement(By.xpath(getParagraphXPath(1) + "//span[@class='icon-control-play']")).isDisplayed(), CoreMatchers.equalTo(false)
+          driver.findElement(By.xpath(getParagraphXPath(1) + "//span[@class='icon-control-play shortcut-icon']")).isDisplayed(), CoreMatchers.equalTo(false)
       );
 
       driver.findElement(By.xpath(".//*[@id='main']//button[@ng-click='runNote()']")).sendKeys(Keys.ENTER);
@@ -344,9 +344,11 @@ public void testTitleButton() throws Exception {
       ZeppelinITUtils.turnOnImplicitWaits(driver);
 
       clickAndWait(By.xpath(xpathToSettingIcon));
-      collector.checkThat("Before Show Title : The title option in option panel of paragraph is labeled as  ",
+      collector.checkThat("Before Show Title : The title option in option panel of paragraph is labeled as",
           driver.findElement(By.xpath(xpathToShowTitle)).getText(),
-          CoreMatchers.equalTo("Show title"));
+          CoreMatchers.allOf(CoreMatchers.startsWith("Show title"), CoreMatchers.containsString("Ctrl+"),
+              CoreMatchers.anyOf(CoreMatchers.containsString("Option"), CoreMatchers.containsString("Alt")),
+              CoreMatchers.containsString("+t")));
 
       clickAndWait(By.xpath(xpathToShowTitle));
       collector.checkThat("After Show Title : The title field contains",
@@ -356,7 +358,9 @@ public void testTitleButton() throws Exception {
       clickAndWait(By.xpath(xpathToSettingIcon));
       collector.checkThat("After Show Title : The title option in option panel of paragraph is labeled as",
           driver.findElement(By.xpath(xpathToHideTitle)).getText(),
-          CoreMatchers.equalTo("Hide title"));
+          CoreMatchers.allOf(CoreMatchers.startsWith("Hide title"), CoreMatchers.containsString("Ctrl+"),
+              CoreMatchers.anyOf(CoreMatchers.containsString("Option"), CoreMatchers.containsString("Alt")),
+              CoreMatchers.containsString("+t")));
 
       clickAndWait(By.xpath(xpathToHideTitle));
       ZeppelinITUtils.turnOffImplicitWaits(driver);
@@ -405,18 +409,27 @@ public void testShowAndHideLineNumbers() throws Exception {
       collector.checkThat("Before \"Show line number\" the Line Number is Enabled ",
           driver.findElement(By.xpath(xpathToLineNumberField)).isDisplayed(),
           CoreMatchers.equalTo(false));
+
       driver.findElement(By.xpath(getParagraphXPath(1) + "//span[@class='icon-settings']")).click();
       collector.checkThat("Before \"Show line number\" The option panel in paragraph has button labeled ",
           driver.findElement(By.xpath(xpathToShowLineNumberButton)).getText(),
-          CoreMatchers.equalTo("Show line numbers"));
+          CoreMatchers.allOf(CoreMatchers.startsWith("Show line numbers"), CoreMatchers.containsString("Ctrl+"),
+              CoreMatchers.anyOf(CoreMatchers.containsString("Option"), CoreMatchers.containsString("Alt")),
+              CoreMatchers.containsString("+m")));
+
+
       clickAndWait(By.xpath(xpathToShowLineNumberButton));
       collector.checkThat("After \"Show line number\" the Line Number is Enabled ",
           driver.findElement(By.xpath(xpathToLineNumberField)).isDisplayed(),
           CoreMatchers.equalTo(true));
+
       clickAndWait(By.xpath(getParagraphXPath(1) + "//span[@class='icon-settings']"));
       collector.checkThat("After \"Show line number\" The option panel in paragraph has button labeled ",
           driver.findElement(By.xpath(xpathToHideLineNumberButton)).getText(),
-          CoreMatchers.equalTo("Hide line numbers"));
+          CoreMatchers.allOf(CoreMatchers.startsWith("Hide line numbers"), CoreMatchers.containsString("Ctrl+"),
+              CoreMatchers.anyOf(CoreMatchers.containsString("Option"), CoreMatchers.containsString("Alt")),
+              CoreMatchers.containsString("+m")));
+
       clickAndWait(By.xpath(xpathToHideLineNumberButton));
       collector.checkThat("After \"Hide line number\" the Line Number is Enabled",
           driver.findElement(By.xpath(xpathToLineNumberField)).isDisplayed(),

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
@@ -26,19 +26,23 @@
   <span class="icon-control-play" style="cursor:pointer;color:#3071A9" tooltip-placement="top" tooltip="Run this paragraph (Shift+Enter)"
         ng-click="runParagraph(getEditorValue())"
         ng-show="paragraph.status!='RUNNING' && paragraph.status!='PENDING' && paragraph.config.enabled"></span>
-  <span class="icon-control-pause" style="cursor:pointer;color:#CD5C5C" tooltip-placement="top" tooltip="Cancel"
+  <span class="icon-control-pause" style="cursor:pointer;color:#CD5C5C" tooltip-placement="top"
+        tooltip="Cancel (Ctrl+{{ (isMac ? 'Option' : 'Alt') }}+c)"
         ng-click="cancelParagraph(paragraph)"
         ng-show="paragraph.status=='RUNNING' || paragraph.status=='PENDING'"></span>
-  <span class="{{paragraph.config.editorHide ? 'icon-size-fullscreen' : 'icon-size-actual'}}" style="cursor:pointer;" tooltip-placement="top" tooltip="{{(paragraph.config.editorHide ? 'Show' : 'Hide') + ' editor'}}"
+  <span class="{{paragraph.config.editorHide ? 'icon-size-fullscreen' : 'icon-size-actual'}}" style="cursor:pointer" tooltip-placement="top"
+        tooltip="{{(paragraph.config.editorHide ? 'Show' : 'Hide')}} editor (Ctrl+{{ (isMac ? 'Option' : 'Alt') }}+e)"
         ng-click="toggleEditor(paragraph)"></span>
-  <span class="{{paragraph.config.tableHide ? 'icon-notebook' : 'icon-book-open'}}" style="cursor:pointer;" tooltip-placement="top" tooltip="{{(paragraph.config.tableHide ? 'Show' : 'Hide') + ' output'}}"
+  <span class="{{paragraph.config.tableHide ? 'icon-notebook' : 'icon-book-open'}}" style="cursor:pointer" tooltip-placement="top"
+        tooltip="{{(paragraph.config.tableHide ? 'Show' : 'Hide')}} output (Ctrl+{{ (isMac ? 'Option' : 'Alt') }}+o)"
         ng-click="toggleOutput(paragraph)"></span>
   <span class="dropdown navbar-right">
     <span class="icon-settings" style="cursor:pointer"
           data-toggle="dropdown"
           type="button">
     </span>
-    <ul class="dropdown-menu dropdown-menu-right" role="menu" style="width:200px;z-index:1002">
+
+    <ul class="dropdown-menu dropdown-menu-right" role="menu" style="width:270px;z-index:1002">
       <li ng-controller="clipboardCtrl" ng-click="$event.stopPropagation()" style="text-align:center;margin-top:4px;">
         <a  ngclipboard
             ngclipboard-success="complete($event)"
@@ -51,8 +55,8 @@
       </li>
       <li role="separator" class="divider"></li>
       <li>
-        <a ng-click="$event.stopPropagation()" class="dropdown"><span class="fa fa-arrows-h"></span> Width
-          <form style="display:inline; margin-left:5px;">
+        <a ng-click="$event.stopPropagation()" class="dropdown"><span class="fa fa-arrows-h shortcut-icon"></span>Width
+          <form style="display:inline; margin-left:5px; float:right">
             <select ng-model="paragraph.config.colWidth"
                     class="selectpicker"
                     ng-change="changeColWidth(paragraph, paragraph.config.colWidth)"
@@ -61,43 +65,55 @@
         </a>
       </li>
       <li>
-        <a ng-click="moveUp(paragraph)" ng-hide="$first"><span class="icon-arrow-up"></span> Move Up</a>
+        <a ng-click="moveUp(paragraph)" ng-hide="$first"><span class="icon-arrow-up shortcut-icon"></span>Move Up
+          <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+k</span></a>
       </li>
       <li>
-        <a ng-click="moveDown(paragraph)" ng-hide="$last"><span class="icon-arrow-down"></span> Move Down</a>
+        <a ng-click="moveDown(paragraph)" ng-hide="$last"><span class="icon-arrow-down shortcut-icon"></span>Move Down
+          <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+j</span></a>
       </li>
       <li>
-        <a ng-click="insertNew('below')"><span class="icon-plus"></span> Insert New</a>
+        <a ng-click="insertNew('below')"><span class="icon-plus shortcut-icon"></span>Insert New
+          <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+b</span></a>
       </li>
       <li>
-        <a ng-click="copyParagraph(getEditorValue())"><span class="fa fa-copy"></span> Clone paragraph</a>
+        <a ng-click="copyParagraph(getEditorValue())"><span class="fa fa-copy shortcut-icon"></span>Clone paragraph
+          <span class="shortcut-keys">Ctrl+Shift+c</span></a>
       </li>
       <li>
         <!-- paragraph handler -->
         <a ng-click="hideTitle(paragraph)"
-           ng-show="paragraph.config.title"><span class="fa fa-font"></span> Hide title</a>
+           ng-show="paragraph.config.title"><span class="fa fa-font shortcut-icon"></span>Hide title
+          <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+t</span></a>
         <a ng-click="showTitle(paragraph)"
-           ng-show="!paragraph.config.title"><span class="fa fa-font"></span> Show title</a>
+           ng-show="!paragraph.config.title"><span class="fa fa-font shortcut-icon"></span>Show title
+          <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+t</span></a>
       </li>
       <li>
         <a ng-click="hideLineNumbers(paragraph)"
-           ng-show="paragraph.config.lineNumbers"><span class="fa fa-list-ol"></span> Hide line numbers</a>
+           ng-show="paragraph.config.lineNumbers"><span class="fa fa-list-ol shortcut-icon"></span>Hide line numbers
+          <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+m</span></a>
         <a ng-click="showLineNumbers(paragraph)"
-           ng-show="!paragraph.config.lineNumbers"><span class="fa fa-list-ol"></span> Show line numbers</a>
+           ng-show="!paragraph.config.lineNumbers"><span class="fa fa-list-ol shortcut-icon"></span>Show line numbers
+          <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+m</span></a>
       </li>
       <li>
-        <a ng-click="toggleEnableDisable(paragraph)"><span class="icon-control-play"></span>
-          {{paragraph.config.enabled ? "Disable" : "Enable"}} run</a>
+        <a ng-click="toggleEnableDisable(paragraph)"><span class="icon-control-play shortcut-icon"></span>
+          {{paragraph.config.enabled ? "Disable" : "Enable"}} run
+          <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+r</span></a>
       </li>
       <li>
-        <a ng-click="goToSingleParagraph()"><span class="icon-share-alt"></span> Link this paragraph</a>
+        <a ng-click="goToSingleParagraph()"><span class="icon-share-alt shortcut-icon"></span>Link this paragraph
+          <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+w</span></a>
       </li>
       <li>
-        <a ng-click="clearParagraphOutput(paragraph)"><span class="fa fa-eraser"></span> Clear output</a>
+        <a ng-click="clearParagraphOutput(paragraph)"><span class="fa fa-eraser shortcut-icon"></span>Clear output
+          <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+l</span></a>
       </li>
       <li>
         <!-- remove paragraph -->
-        <a ng-click="removeParagraph(paragraph)" ng-hide="$last"><span class="fa fa-times"></span> Remove</a>
+        <a ng-click="removeParagraph(paragraph)" ng-hide="$last"><span class="fa fa-times shortcut-icon"></span>Remove
+          <span class="shortcut-keys">Ctrl+{{ isMac ? 'Option' : 'Alt'}}+d</span></a>
       </li>
     </ul>
   </span>

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -202,6 +202,16 @@ table.dataTable.table-condensed .sorting_desc:after {
   cursor: pointer;
 }
 
+.dropdown-menu .shortcut-icon{
+  padding-right: 7px;
+  float: left;
+}
+
+.dropdown-menu .shortcut-keys{
+  float: right;
+  color: #999;
+}
+
 /*
   Paragraph Title
 */