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/09/29 05:24:39 UTC

zeppelin git commit: ZEPPELIN-2562 Make Add paragraph button more prominent

Repository: zeppelin
Updated Branches:
  refs/heads/master 2437c8029 -> 17fb97bf3


ZEPPELIN-2562 Make Add paragraph button more prominent

### What is this PR for?
- Earlier add paragraph button was tiny plus between two paragraphs.
- With this change, we have added `Add Paragraph` text along with `+` and increased the height without any flicker so that user will get to know about adding a paragraph easily

### What type of PR is it?
[Improvement]

### What is the Jira issue?
* https://issues.apache.org/jira/browse/ZEPPELIN-2562

### How should this be tested?
1. Build: mvn clean package -Denforcer.skip -DskipTests -Drat.skip
2. Mouse hover over the empty space between the paragraph to create a paragraph

### Screenshots (if appropriate)

Before:
![add-para-before](https://user-images.githubusercontent.com/1881135/30083847-ab93ef16-92ad-11e7-837d-833a287161ed.gif)

After:
![add-paragraph-after](https://user-images.githubusercontent.com/1881135/30083850-ae1cb600-92ad-11e7-9ad1-bf89b8979a49.gif)

### Questions:
* Does the licenses files need update? - No
* Is there breaking changes for older versions? - No
* Does this needs documentation? - No

Author: Malay Majithia <ma...@gmail.com>

Closes #2569 from malayhm/ZEPPELIN-2562 and squashes the following commits:

1b6f55b [Malay Majithia] Fixed typo
3f15079 [Malay Majithia] Merge branch 'master' into ZEPPELIN-2562
7704b1b [Malay Majithia] ZEPPELIN-2562 Make Add paragraph button more prominent


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

Branch: refs/heads/master
Commit: 17fb97bf3c051d47f08e2dd488fbf88ef83c6c7f
Parents: 2437c80
Author: Malay Majithia <ma...@gmail.com>
Authored: Thu Sep 7 13:01:29 2017 +0530
Committer: Lee moon soo <mo...@apache.org>
Committed: Thu Sep 28 22:24:31 2017 -0700

----------------------------------------------------------------------
 zeppelin-web/src/app/notebook/notebook.css  | 24 ++++++++++++++++++++++++
 zeppelin-web/src/app/notebook/notebook.html | 11 +++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/zeppelin/blob/17fb97bf/zeppelin-web/src/app/notebook/notebook.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index 3a09647..a7508bc 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -398,3 +398,27 @@
 .search-group:nth-child(even) {
   border-top-width: 0;
 }
+
+.new-paragraph:hover .plus-sign {
+    display: block;
+    background: #ECF7FD;
+    height: 30px;
+    text-align: center;
+    position: absolute;
+    width: calc(100% - 4px);
+    line-height: 30px;
+    top: -23px;
+    border: 1px solid #DDDDDD;
+    border-radius: 3px;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 2px 4px;
+}
+
+.first-paragraph:hover .plus-sign {
+    top: -14px;
+    z-index: 100000;
+}
+
+.last-paragraph:hover .plus-sign {
+    position: relative;
+    top: -16px;
+}

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/17fb97bf/zeppelin-web/src/app/notebook/notebook.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/notebook.html b/zeppelin-web/src/app/notebook/notebook.html
index 98b66fe..4b1c0b9 100644
--- a/zeppelin-web/src/app/notebook/notebook.html
+++ b/zeppelin-web/src/app/notebook/notebook.html
@@ -123,8 +123,11 @@ limitations under the License.
        <!-- see ZEPPELIN-2806
        viewport-watch>
        -->
-    <div class="new-paragraph" ng-click="insertNew('above')" ng-hide="viewOnly || asIframe || revisionView">
-      <h4 class="plus-sign">&#43;</h4>
+    <div class="new-paragraph"
+         ng-click="insertNew('above')"
+         ng-hide="viewOnly || asIframe || revisionView"
+         ng-class="{'first-paragraph': $first}">
+      <h4 class="plus-sign">&#43; Add Paragraph</h4>
     </div>
     <div id="{{currentParagraph.id}}_paragraphColumn"
          ng-include src="'app/notebook/paragraph/paragraph.html'"
@@ -133,8 +136,8 @@ limitations under the License.
          ng-hide="currentParagraph.config.tableHide && viewOnly"
          ng-dblclick="paragraphOnDoubleClick(currentParagraph.id);">
     </div>
-    <div class="new-paragraph" ng-click="insertNew('below');" ng-hide="!$last || viewOnly || asIframe || revisionView">
-      <h4 class="plus-sign">&#43;</h4>
+    <div class="new-paragraph last-paragraph" ng-click="insertNew('below');" ng-hide="!$last || viewOnly || asIframe || revisionView">
+      <h4 class="plus-sign">&#43; Add Paragraph</h4>
     </div>
   </div>
   <div style="clear:both;height:10px"></div>