zeppelin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ahyoung...@apache.org
Subject zeppelin git commit: [branch-0.7] Minor styling for Helium menu
Date Fri, 31 Mar 2017 01:50:18 GMT
Repository: zeppelin
Updated Branches:
  refs/heads/branch-0.7 341944462 -> 54886464a


[branch-0.7] Minor styling for Helium menu

### What is this PR for?
Since Helium online registry is available in develop version(0.8.0-SNAPSHOT) for now, people
only can use their local registry(e.g. `ZEPPELIN_HOME/helium`) in 0.7.X. So they will see
below empty screen when open Helium menu at the first time.

<img width="930" alt="screen shot 2017-03-25 at 11 03 20 pm" src="https://cloud.githubusercontent.com/assets/10060731/24322858/4f9c21c6-11af-11e7-93fc-8975dbfcaddf.png">

It's hard to recognize what Helium is and not that attractive actually.

So I added
 - initial sentence "Currently there is no available package to be listed" when there is no
package under local registry
 - question icon to header -> link to https://zeppelin.apache.org/helium_packages.html
to give some hint(?) about Helium :)

And also fixed `VISUALIZATION` button group as I did in #2185.
Please see below screenshot images for the details.

### What type of PR is it?
Improvement

### What is the Jira issue?
N/A

### How should this be tested?
1. Run
```
$ yarn run dev
```
under `zeppelin-web/`

2. Go to Helium menu

### Screenshots (if appropriate)
  - when the package size is 0 & question mark icon (link to
![record](https://cloud.githubusercontent.com/assets/10060731/24322921/4f094e40-11b0-11e7-9e8f-0321e0586e57.gif)

 - fixed viz type icon ordering button group
    - before
<img width="126" alt="screen shot 2017-03-25 at 6 46 13 pm" src="https://cloud.githubusercontent.com/assets/10060731/24322931/6dd2e728-11b0-11e7-9b7b-111b751c1dfb.png">

    - after (round border in rightmost icon)
<img width="134" alt="screen shot 2017-03-25 at 6 42 24 pm" src="https://cloud.githubusercontent.com/assets/10060731/24322932/6f8c3538-11b0-11e7-8198-a221376f9f44.png">

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

Author: AhyoungRyu <fbdkdud93@hanmail.net>

Closes #2189 from AhyoungRyu/add/initialMsgToHeliumMenu and squashes the following commits:

b658fcf [AhyoungRyu] Remove underline when icon btn activated
84c59b5 [AhyoungRyu] Change initial sentence
baf4a77 [AhyoungRyu] Remove useless console log
39a0775 [AhyoungRyu] Minor styling for Heliu menu


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

Branch: refs/heads/branch-0.7
Commit: 54886464a5ae590028b8a908ec5f9d5fb6a45db3
Parents: 3419444
Author: AhyoungRyu <fbdkdud93@hanmail.net>
Authored: Mon Mar 27 23:51:44 2017 +0900
Committer: ahyoungryu <ahyoungryu@apache.org>
Committed: Fri Mar 31 10:50:12 2017 +0900

----------------------------------------------------------------------
 .../src/app/helium/helium.controller.js         |  4 ++
 zeppelin-web/src/app/helium/helium.css          | 26 ++++++++++
 zeppelin-web/src/app/helium/helium.html         | 53 ++++++++++++++------
 3 files changed, 69 insertions(+), 14 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/zeppelin/blob/54886464/zeppelin-web/src/app/helium/helium.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/helium/helium.controller.js b/zeppelin-web/src/app/helium/helium.controller.js
index a344e80..1488b52 100644
--- a/zeppelin-web/src/app/helium/helium.controller.js
+++ b/zeppelin-web/src/app/helium/helium.controller.js
@@ -215,5 +215,9 @@
         $scope.showVersions[pkgName] = true;
       }
     };
+  
+    $scope.getPackageSize = function(pkgSearchResult) {
+      return _.size(pkgSearchResult)
+    };
   }
 })();

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/54886464/zeppelin-web/src/app/helium/helium.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/helium/helium.css b/zeppelin-web/src/app/helium/helium.css
index f17d6bd..1d1a056 100644
--- a/zeppelin-web/src/app/helium/helium.css
+++ b/zeppelin-web/src/app/helium/helium.css
@@ -17,6 +17,16 @@
   margin-bottom: 0px;
 }
 
+.heliumLearnMore {
+  margin-top:10px;
+}
+
+.heliumLearnMore a {
+  cursor:pointer;
+  margin-right:20px;
+  text-decoration:none;
+}
+
 .heliumPackageList {
   min-height: 25px;
   margin-bottom: 15px;
@@ -105,3 +115,19 @@
   underline;color:#3071a9;
   display: inline-block;
 }
+
+.heliumVisualizationOrder p {
+  margin:0 0 5px 15px;
+}
+
+.gray40-message a:before {
+  content: "\00a0";
+}
+
+.gray40-message a:hover {
+  text-decoration: none;
+}
+
+.gray40-message a:focus {
+  text-decoration: none;
+}

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/54886464/zeppelin-web/src/app/helium/helium.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/helium/helium.html b/zeppelin-web/src/app/helium/helium.html
index 546995c..16da087 100644
--- a/zeppelin-web/src/app/helium/helium.html
+++ b/zeppelin-web/src/app/helium/helium.html
@@ -18,32 +18,57 @@ limitations under the License.
         <h3 class="new_h3">
           Helium
         </h3>
+        <div class="pull-right heliumLearnMore">
+          <a target="_blank"
+             class="helium-repo-btn"
+             ng-href="https://zeppelin.apache.org/helium_packages.html"
+             tooltip-placement="bottom"
+             tooltip="What is Helium?">
+            <i class="icon-question" ng-style="{color: 'black'}"></i>
+          </a>
+        </div>
       </div>
     </div>
     <div ng-show="visualizationOrder.length > 1"
          class="row heliumVisualizationOrder">
-      <div style="margin:0 0 5px 15px">Visualization package display order (drag and
drop to reorder)</div>
-      <div class="col-md-12 sortable-row btn-group"
-           as-sortable="visualizationOrderListeners"
-           data-ng-model="visualizationOrder">
-        <div class="btn-group" data-ng-repeat="pkgName in visualizationOrder"
-             as-sortable-item>
-          <div class="btn btn-default btn-sm"
-               ng-bind-html='defaultVersions[pkgName].pkg.icon'
-               as-sortable-item-handle>
+      <p>Visualization package display order (drag and drop to reorder)</p>
+      <div class="col-md-12">
+        <div class="sortable-row btn-group"
+             as-sortable="visualizationOrderListeners"
+             data-ng-model="visualizationOrder">
+          <div class="btn-group" data-ng-repeat="pkgName in visualizationOrder"
+               as-sortable-item>
+            <div class="btn btn-default btn-sm"
+                 ng-bind-html='defaultVersions[pkgName].pkg.icon'
+                 as-sortable-item-handle>
+            </div>
           </div>
         </div>
-        <span class="saveLink"
-           ng-show="visualizationOrderChanged"
-           ng-click="saveVisualizationOrder()">
-          save
-        </span>
+        <div class="saveLink"
+              ng-show="visualizationOrderChanged"
+              ng-click="saveVisualizationOrder()">
+            save
+        </div>
       </div>
     </div>
   </div>
 </div>
 
 <div class="box width-full heliumPackageContainer">
+  <div class="row"
+       style="padding-bottom: 15px"
+       ng-if="getPackageSize(defaultVersions) === 0">
+    <div class="col-md-12 gray40-message">
+      <em>No package installed</em>
+      <a target="_blank"
+         class="helium-repo-btn"
+         ng-href="https://zeppelin.apache.org/docs/{{zeppelinVersion}}/development/writingzeppelinvisualization.html#how-it-works"
+         tooltip-placement="top"
+         tooltip="How to use?">
+        <i class="icon-question" ng-style="{color: 'black'}"></i>
+      </a>
+    </div>
+  </div>
   <div class="row heliumPackageList"
        ng-repeat="(pkgName, pkgInfo) in defaultVersions">
     <div class="col-md-12">


Mime
View raw message