zeppelin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From m...@apache.org
Subject zeppelin git commit: [ZEPPELIN-1757] Menu of paragraph includes keyboard shortcut
Date Thu, 29 Dec 2016 15:09:19 GMT
Repository: zeppelin
Updated Branches:
  refs/heads/master 3f2886591 -> e3cc8ea1b


[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


Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/e3cc8ea1
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/e3cc8ea1
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/e3cc8ea1

Branch: refs/heads/master
Commit: e3cc8ea1bebbfbac4126994df9e3bd23213ee78c
Parents: 3f28865
Author: soralee <sora0728@nflabs.com>
Authored: Tue Dec 27 15:07:59 2016 +0900
Committer: Lee moon soo <moon@apache.org>
Committed: Thu Dec 29 07:09:14 2016 -0800

----------------------------------------------------------------------
 .../integration/ParagraphActionsIT.java         | 25 ++++++---
 .../notebook/paragraph/paragraph-control.html   | 54 +++++++++++++-------
 .../src/app/notebook/paragraph/paragraph.css    | 10 ++++
 3 files changed, 64 insertions(+), 25 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/zeppelin/blob/e3cc8ea1/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ParagraphActionsIT.java
----------------------------------------------------------------------
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
index 0fc29c0..fd0682e 100644
--- 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 class ParagraphActionsIT extends AbstractZeppelinIT {
       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 class ParagraphActionsIT extends AbstractZeppelinIT {
       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 class ParagraphActionsIT extends AbstractZeppelinIT {
       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 class ParagraphActionsIT extends AbstractZeppelinIT {
       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(),

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/e3cc8ea1/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
index 6df21c6..0bfaf74 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
@@ -26,19 +26,23 @@ limitations under the License.
   <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 @@ limitations under the License.
       </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 @@ limitations under the License.
         </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>

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/e3cc8ea1/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 038a4a9..70013fe 100644
--- 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
 */


Mime
View raw message