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  - 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 <fbdkdu...@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 <fbdkdu...@hanmail.net> Authored: Mon Mar 27 23:51:44 2017 +0900 Committer: ahyoungryu <ahyoung...@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">
![https://cloud.githubusercontent.com/assets/10060731/24322858/4f9c21c6-11af-11e7-93fc-8975dbfcaddf.png"](https://cloud.githubusercontent.com/assets/10060731/24322858/4f9c21c6-11af-11e7-93fc-8975dbfcaddf.png"){kind=link}
![https://cloud.githubusercontent.com/assets/10060731/24322931/6dd2e728-11b0-11e7-9b7b-111b751c1dfb.png"](https://cloud.githubusercontent.com/assets/10060731/24322931/6dd2e728-11b0-11e7-9b7b-111b751c1dfb.png"){kind=link}
![https://cloud.githubusercontent.com/assets/10060731/24322932/6f8c3538-11b0-11e7-8198-a221376f9f44.png"](https://cloud.githubusercontent.com/assets/10060731/24322932/6f8c3538-11b0-11e7-8198-a221376f9f44.png"){kind=link}