Repository: zeppelin Updated Branches: refs/heads/master 555231937 -> 384d031c6
[ZEPPELIN-1796] Add 'copy to clipboard' next to the paragraph id ### What is this PR for? There are lots of use cases that need to know each `Paragraph Id` in Zeppelin. e.g. [run paragraph using rest api](https://zeppelin.apache.org/docs/0.7.0-SNAPSHOT/rest-api/rest-notebook.html#run-a-paragraph-asynchronously) / [`z.angularBind`](https://zeppelin.apache.org/docs/0.7.0-SNAPSHOT/displaysystem/front-end-angular.html#basic-usage) / [export paragraphs using iframe](https://zeppelin.apache.org/docs/0.7.0-SNAPSHOT/manual/publish.html) ... So I added `Copy to clipboard` btn next the each `Paragraph Id` under paragraph setting menu using [angular-zeroclipboard](https://github.com/lisposter/angular-zeroclipboard). It'll be useful even if it's small feature :) ### What type of PR is it? Improvement | Feature ### What is the Jira issue? [ZEPPELIN-1796](https://issues.apache.org/jira/browse/ZEPPELIN-1796) ### How should this be tested? 1. `npm run build` under `zeppelin-web/` 2. `npm run start` to start dev mode and browse `http://localhost:9000` 3. click gear icon placed top of the each paragraph -> hover the mouse on the paragraph id 4. click it and paste the paragraph id to anywhere to check it's copied well or not ### Screenshots (if appropriate)  ### 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 #1750 from AhyoungRyu/add/copyToClipboard and squashes the following commits: 0e3bef4 [AhyoungRyu] Remove clippy.svg and make pid text to button 8ea78e0 [AhyoungRyu] Change clipboard library not depending on flash 1c702bf [AhyoungRyu] Add license header to top of clippy.svg file cf827a4 [AhyoungRyu] Fix ZeroClipboard.swf loading issue 6e102d0 [AhyoungRyu] Specify angular-zeroclipboard license 390574c [AhyoungRyu] Add 'copy to clipboard' next to the paragraph id Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/384d031c Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/384d031c Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/384d031c Branch: refs/heads/master Commit: 384d031c6bbce79230fc929fe88ca0d1ce840886 Parents: 5552319 Author: AhyoungRyu <fbdkdu...@hanmail.net> Authored: Thu Dec 15 14:47:48 2016 +0900 Committer: ahyoungryu <ahyoung...@apache.org> Committed: Tue Dec 20 11:13:43 2016 +0900 ---------------------------------------------------------------------- zeppelin-distribution/src/bin_license/LICENSE | 1 + zeppelin-web/Gruntfile.js | 10 ++++++ zeppelin-web/bower.json | 3 +- zeppelin-web/src/app/app.js | 3 +- .../notebook/paragraph/paragraph-control.html | 11 ++++-- .../src/app/notebook/paragraph/paragraph.css | 3 +- .../clipboard/clipboard.controller.js | 36 ++++++++++++++++++++ zeppelin-web/src/index.html | 3 ++ zeppelin-web/test/karma.conf.js | 2 ++ 9 files changed, 67 insertions(+), 5 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/384d031c/zeppelin-distribution/src/bin_license/LICENSE ---------------------------------------------------------------------- diff --git a/zeppelin-distribution/src/bin_license/LICENSE b/zeppelin-distribution/src/bin_license/LICENSE index 8b79486..de3c817 100644 --- a/zeppelin-distribution/src/bin_license/LICENSE +++ b/zeppelin-distribution/src/bin_license/LICENSE @@ -266,6 +266,7 @@ The text of each license is also included at licenses/LICENSE-[project]-[version (The MIT License) Java String Similarity 0.12 (info.debatty:java-string-similarity:0.12 - https://github.com/tdebatty/java-string-similarity) (The MIT License) Java LSH 0.10 (info.debatty:java-lsh:0.10 - https://github.com/tdebatty/java-LSH) (The MIT License) JSoup 1.6.1 (org.jsoup:jsoup:1.6.1 - https://github.com/jhy/jsoup/) + (The MIT License) ngclipboard v1.1.1 (https://github.com/sachinchoolur/ngclipboard) - https://github.com/sachinchoolur/ngclipboard/blob/1.1.1/LICENSE) ======================================================================== BSD-style licenses http://git-wip-us.apache.org/repos/asf/zeppelin/blob/384d031c/zeppelin-web/Gruntfile.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/Gruntfile.js b/zeppelin-web/Gruntfile.js index 8a8f694..40e681a 100644 --- a/zeppelin-web/Gruntfile.js +++ b/zeppelin-web/Gruntfile.js @@ -477,6 +477,11 @@ module.exports = function(grunt) { dest: '.tmp/styles/images' }, { expand: true, + cwd: 'bower_components/ngclipboard', + src: 'dist/**', + dest: '.tmp' + }, { + expand: true, cwd: 'bower_components/MathJax', src: [ 'extensions/**', 'jax/**', 'fonts/**'], @@ -530,6 +535,11 @@ module.exports = function(grunt) { dest: '<%= yeoman.dist %>/styles/images' }, { expand: true, + cwd: 'bower_components/ngclipboard', + src: 'dist/**', + dest: '<%= yeoman.dist %>' + }, { + expand: true, cwd: 'bower_components/MathJax', src: [ 'extensions/**', 'jax/**', 'fonts/**'], http://git-wip-us.apache.org/repos/asf/zeppelin/blob/384d031c/zeppelin-web/bower.json ---------------------------------------------------------------------- diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json index 06d0145..7c70110 100644 --- a/zeppelin-web/bower.json +++ b/zeppelin-web/bower.json @@ -34,7 +34,8 @@ "moment-duration-format": "^1.3.0", "select2": "^4.0.3", "github-markdown-css": "^2.4.0", - "MathJax": "2.7.0" + "MathJax": "2.7.0", + "ngclipboard": "^1.1.1" }, "devDependencies": { "angular-mocks": "1.5.0" http://git-wip-us.apache.org/repos/asf/zeppelin/blob/384d031c/zeppelin-web/src/app/app.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js index c1a73c7..11456fd 100644 --- a/zeppelin-web/src/app/app.js +++ b/zeppelin-web/src/app/app.js @@ -33,7 +33,8 @@ 'xeditable', 'ngToast', 'focus-if', - 'ngResource' + 'ngResource', + 'ngclipboard' ]) .filter('breakFilter', function() { return function(text) { http://git-wip-us.apache.org/repos/asf/zeppelin/blob/384d031c/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 699ef4c..40fe006 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html @@ -39,8 +39,15 @@ limitations under the License. type="button"> </span> <ul class="dropdown-menu" role="menu" style="width:200px;z-index:1002"> - <li ng-click="$event.stopPropagation()" style="text-align:center;margin-top:4px;"> - {{paragraph.id}} + <li ng-controller="clipboardCtrl" ng-click="$event.stopPropagation()" style="text-align:center;margin-top:4px;"> + <a ngclipboard + ngclipboard-success="complete($event)" + ngclipboard-error="clipError($event)" + data-clipboard-text="{{paragraph.id}}" + tooltip-placement="top" + tooltip="{{tooltip}}"> + <span>{{paragraph.id}}</span> + </a> </li> <li role="separator" class="divider"></li> <li> http://git-wip-us.apache.org/repos/asf/zeppelin/blob/384d031c/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 430aad9..038a4a9 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css @@ -165,7 +165,8 @@ table.dataTable.table-condensed .sorting_desc:after { } .paragraph .control span { - margin-left: 4px; + margin-left: 4px; + margin-right: 4px; } .paragraph .control { http://git-wip-us.apache.org/repos/asf/zeppelin/blob/384d031c/zeppelin-web/src/components/clipboard/clipboard.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/clipboard/clipboard.controller.js b/zeppelin-web/src/components/clipboard/clipboard.controller.js new file mode 100644 index 0000000..a34e2d1 --- /dev/null +++ b/zeppelin-web/src/components/clipboard/clipboard.controller.js @@ -0,0 +1,36 @@ +/* + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +'use strict'; +(function() { + angular.module('zeppelinWebApp').controller('clipboardCtrl', clipboardCtrl); + clipboardCtrl.$inject = ['$scope']; + + function clipboardCtrl($scope) { + $scope.complete = function(e) { + $scope.copied = true; + $scope.tooltip = 'Copied!'; + setTimeout(function() { + $scope.tooltip = 'Copy to clipboard'; + }, 400); + }; + $scope.$watch('input', function() { + $scope.copied = false; + $scope.tooltip = 'Copy to clipboard'; + }); + $scope.clipError = function(e) { + console.log('Error: ' + e.name + ' - ' + e.message); + $scope.tooltip = 'Not supported browser'; + }; + } +})(); http://git-wip-us.apache.org/repos/asf/zeppelin/blob/384d031c/zeppelin-web/src/index.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html index eaa9b44..16d18eb 100644 --- a/zeppelin-web/src/index.html +++ b/zeppelin-web/src/index.html @@ -163,6 +163,8 @@ limitations under the License. <script src="bower_components/moment-duration-format/lib/moment-duration-format.js"></script> <script src="bower_components/select2/dist/js/select2.js"></script> <script src="bower_components/MathJax/MathJax.js"></script> + <script src="bower_components/clipboard/dist/clipboard.js"></script> + <script src="bower_components/ngclipboard/dist/ngclipboard.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp,src}) scripts/scripts.js --> @@ -196,6 +198,7 @@ limitations under the License. <script src="app/search/result-list.controller.js"></script> <script src="app/notebookRepos/notebookRepos.controller.js"></script> <script src="components/arrayOrderingSrv/arrayOrdering.service.js"></script> + <script src="components/clipboard/clipboard.controller.js"></script> <script src="components/navbar/navbar.controller.js"></script> <script src="components/ngescape/ngescape.directive.js"></script> <script src="components/interpreter/interpreter.directive.js"></script> http://git-wip-us.apache.org/repos/asf/zeppelin/blob/384d031c/zeppelin-web/test/karma.conf.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/test/karma.conf.js b/zeppelin-web/test/karma.conf.js index 86cb2f3..223f2db 100644 --- a/zeppelin-web/test/karma.conf.js +++ b/zeppelin-web/test/karma.conf.js @@ -66,6 +66,8 @@ module.exports = function(config) { 'bower_components/moment-duration-format/lib/moment-duration-format.js', 'bower_components/select2/dist/js/select2.js', 'bower_components/MathJax/MathJax.js', + 'bower_components/clipboard/dist/clipboard.js', + 'bower_components/ngclipboard/dist/ngclipboard.js', 'bower_components/angular-mocks/angular-mocks.js', // endbower '.tmp/app/app.js',
