Repository: incubator-zeppelin Updated Branches: refs/heads/master 79059395b -> 986b0adba
ZEPPELIN-442: utilize space between paragraphs to add new paragraphs This PR relates to: https://issues.apache.org/jira/browse/ZEPPELIN-442 Quickly add new paragraphs. By utilizing the space between the paragraphs, thought it'd be a good place to add new paragraphs. Thoughts/suggestions? Current User Experience of Adding New Paragraph (no direct response if paragraph covers screen):  After Pull Request (adds above the paragraph):  Author: Michael Chen <[email protected]> Closes #447 from MikeTYChen/ZEPPELIN-442 and squashes the following commits: 67df37a [Michael Chen] revert control top spacing to 16px b9f2780 [Michael Chen] Merge branch 'master' into ZEPPELIN-442 29b222d [Michael Chen] add clearer feature and clean css 20149a3 [Michael Chen] add functionality to add below last paragraph ebd8264 [Michael Chen] Merge branch 'master' into ZEPPELIN-442 e6eae3f [Michael Chen] Merge branch 'master' into ZEPPELIN-442 a352363 [Michael Chen] ZEPPELIN-442: modify add new paragraph height ee28972 [Michael Chen] Merge remote-tracking branch 'upstream/master' into ZEPPELIN-442 423add0 [Michael Chen] ZEPPELIN-442: utilize space between paragraphs to add new para Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/986b0adb Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/986b0adb Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/986b0adb Branch: refs/heads/master Commit: 986b0adba3a7986a387c0633d15279b6b2f45c95 Parents: 7905939 Author: Michael Chen <[email protected]> Authored: Wed Dec 2 09:16:27 2015 -0600 Committer: Damien CORNEAU <[email protected]> Committed: Fri Dec 4 10:30:52 2015 +0900 ---------------------------------------------------------------------- .../src/app/notebook/notebook.controller.js | 11 +++++--- zeppelin-web/src/app/notebook/notebook.css | 28 ++++++++++++++++++++ zeppelin-web/src/app/notebook/notebook.html | 6 +++++ .../notebook/paragraph/paragraph.controller.js | 4 +-- .../src/assets/styles/looknfeel/simple.css | 2 +- 5 files changed, 45 insertions(+), 6 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/986b0adb/zeppelin-web/src/app/notebook/notebook.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/notebook.controller.js b/zeppelin-web/src/app/notebook/notebook.controller.js index c7d5347..fc9acb1 100644 --- a/zeppelin-web/src/app/notebook/notebook.controller.js +++ b/zeppelin-web/src/app/notebook/notebook.controller.js @@ -291,11 +291,16 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro }); // create new paragraph on current position - $scope.$on('insertParagraph', function(event, paragraphId) { + $scope.$on('insertParagraph', function(event, paragraphId, position) { var newIndex = -1; for (var i=0; i<$scope.note.paragraphs.length; i++) { - if ($scope.note.paragraphs[i].id === paragraphId) { - newIndex = i+1; + if ( $scope.note.paragraphs[i].id === paragraphId ) { + //determine position of where to add new paragraph; default is below + if ( position === 'above' ) { + newIndex = i; + } else { + newIndex = i+1; + } break; } } http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/986b0adb/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 eaf41d9..4b6271c 100644 --- a/zeppelin-web/src/app/notebook/notebook.css +++ b/zeppelin-web/src/app/notebook/notebook.css @@ -37,6 +37,34 @@ margin-top: 20px; } +/* + Add New Paragraph + */ + +.new-paragraph{ + text-align: center; + height: 7px; + margin: -7px 2px 0 2px; + cursor: pointer; +} + +.new-paragraph:hover{ + background: #d3e5ea; +} + +.new-paragraph:hover .plus-sign{ + display: block; +} + +.plus-sign{ + display: none; + height: 7px; + margin: 0; + color: #3071a9; + line-height: 5px; + font-size: 11.5px; +} + .noteBtnfa { margin-left: 3px; } http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/986b0adb/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 2341160..970e9e4 100644 --- a/zeppelin-web/src/app/notebook/notebook.html +++ b/zeppelin-web/src/app/notebook/notebook.html @@ -188,12 +188,18 @@ limitations under the License. ng-Init="init(currentParagraph)" ng-class="columnWidthClass(currentParagraph.config.colWidth)" class="paragraph-col"> + <div class="new-paragraph" ng-click="insertNew('above')" ng-hide="viewOnly"> + <h4 class="plus-sign">+</h4> + </div> <div id="{{currentParagraph.id}}_paragraphColumn" ng-include src="'app/notebook/paragraph/paragraph.html'" ng-class="{'paragraph-space box paragraph-margin': !asIframe, 'focused': paragraphFocused, 'lastEmptyParagraph': !paragraph.text && !paragraph.result}" ng-hide="currentParagraph.config.tableHide && viewOnly"> </div> + <div class="new-paragraph" ng-click="insertNew('below');" ng-hide="!$last || viewOnly"> + <h4 class="plus-sign">+</h4> + </div> </div> <div style="clear:both;height:10px"></div> </div> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/986b0adb/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index 8114e9e..a4e7c17 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -287,8 +287,8 @@ angular.module('zeppelinWebApp') $scope.$emit('moveParagraphDown', $scope.paragraph.id); }; - $scope.insertNew = function() { - $scope.$emit('insertParagraph', $scope.paragraph.id); + $scope.insertNew = function(position) { + $scope.$emit('insertParagraph', $scope.paragraph.id, position || 'below'); }; $scope.removeParagraph = function() { http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/986b0adb/zeppelin-web/src/assets/styles/looknfeel/simple.css ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/assets/styles/looknfeel/simple.css b/zeppelin-web/src/assets/styles/looknfeel/simple.css index c2ede61..7817da2 100644 --- a/zeppelin-web/src/assets/styles/looknfeel/simple.css +++ b/zeppelin-web/src/assets/styles/looknfeel/simple.css @@ -45,7 +45,7 @@ body { .paragraph .control { visibility: hidden; - top: 7px !important; + top: 5px !important; right: 10px !important; }
