Repository: incubator-zeppelin Updated Branches: refs/heads/master b3cca395b -> 22859f659
Edit title fix for Notebook and Paragraph - enable autofocus to input field *(no need to click twice to edit title)* - fix esc key handler on edit input to revert the change *(edit and hit Esc to reset the title back to the old one)* - save title on enter and blur Before:  After:  Author: Renjith Kamath <[email protected]> Closes #512 from r-kamath/editTitleFix and squashes the following commits: bad5d49 [Renjith Kamath] Merge branch 'master' of https://github.com/apache/incubator-zeppelin into editTitleFix c8a04f9 [Renjith Kamath] Merge branch 'master' of https://github.com/apache/incubator-zeppelin into editTitleFix 90fe2e3 [Renjith Kamath] fix edit notebook title alignment & update license e310f91 [Renjith Kamath] Review updates 9bb5e16 [Renjith Kamath] Merge branch 'master' of https://github.com/apache/incubator-zeppelin into editTitleFix 690a5de [Renjith Kamath] Edit title fix for Notebook and Paragraph Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/22859f65 Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/22859f65 Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/22859f65 Branch: refs/heads/master Commit: 22859f65996f4728ada024b853373e19f3928470 Parents: b3cca39 Author: Renjith Kamath <[email protected]> Authored: Thu Dec 10 10:43:15 2015 +0530 Committer: Damien CORNEAU <[email protected]> Committed: Mon Dec 14 11:50:16 2015 +0900 ---------------------------------------------------------------------- zeppelin-distribution/src/bin_license/LICENSE | 3 ++- zeppelin-web/bower.json | 3 ++- zeppelin-web/src/app/app.js | 5 +++-- zeppelin-web/src/app/notebook/notebook.css | 17 ++++++++--------- zeppelin-web/src/app/notebook/notebook.html | 6 +++--- .../src/app/notebook/paragraph/paragraph.css | 9 +++++---- .../src/app/notebook/paragraph/paragraph.html | 12 ++++++++---- .../src/components/ngescape/ngescape.directive.js | 2 +- zeppelin-web/src/index.html | 1 + zeppelin-web/test/karma.conf.js | 1 + 10 files changed, 34 insertions(+), 25 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/22859f65/zeppelin-distribution/src/bin_license/LICENSE ---------------------------------------------------------------------- diff --git a/zeppelin-distribution/src/bin_license/LICENSE b/zeppelin-distribution/src/bin_license/LICENSE index d59f80c..76e5b23 100644 --- a/zeppelin-distribution/src/bin_license/LICENSE +++ b/zeppelin-distribution/src/bin_license/LICENSE @@ -89,7 +89,8 @@ The text of each license is also included at licenses/LICENSE-[project]-[version (The MIT License) perfect-scrollbar v0.5.4 (http://noraesae.github.io/perfect-scrollbar/) - https://github.com/noraesae/perfect-scrollbar/tree/0.5.4 (The MIT License) ng-sortable v1.1.9 (https://github.com/a5hik/ng-sortable) - https://github.com/a5hik/ng-sortable/blob/1.1.9/LICENSE (The MIT License) angular-elastic v2.4.2 (https://github.com/monospaced/angular-elastic) - https://github.com/monospaced/angular-elastic/blob/v2.4.2/LICENCE.txt - (The MIT License) angular-elastic-input v2.0.1 (https://github.com/jacek-pulit/angular-elastic-input) - https://github.com/jacek-pulit/angular-elastic-input/blob/v2.0.1/LICENSE + (The MIT License) angular-elastic-input v2.2.0 (https://github.com/jacek-pulit/angular-elastic-input) - https://github.com/jacek-pulit/angular-elastic-input/blob/v2.2.0/LICENSE + (The MIT License) ng-focus-if v1.0.2 (https://github.com/hiebj/ng-focus-if) - https://github.com/hiebj/ng-focus-if/blob/v1.0.2/LICENSE (The MIT License) angular-xeditable v0.1.8 (http://vitalets.github.io/angular-xeditable/) - https://github.com/vitalets/angular-xeditable/tree/0.1.8 (The MIT License) lodash v3.9.3 (https://lodash.com/) - https://github.com/lodash/lodash/blob/3.9.3/LICENSE.txt (The MIT License) angular-filter v0.5.4 (https://github.com/a8m/angular-filter) - https://github.com/a8m/angular-filter/blob/v0.5.4/license.md http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/22859f65/zeppelin-web/bower.json ---------------------------------------------------------------------- diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json index 37ab9cd..4e5c353 100644 --- a/zeppelin-web/bower.json +++ b/zeppelin-web/bower.json @@ -21,12 +21,13 @@ "perfect-scrollbar": "~0.5.4", "ng-sortable": "~1.1.9", "angular-elastic": "~2.4.2", - "angular-elastic-input": "~2.0.1", + "angular-elastic-input": "~2.2.0", "angular-xeditable": "0.1.8", "highlightjs": "~8.4.0", "lodash": "~3.9.3", "angular-filter": "~0.5.4", "ngtoast": "~1.5.5", + "ng-focus-if": "~1.0.2", "bootstrap3-dialog": "bootstrap-dialog#~1.34.7" }, "devDependencies": { http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/22859f65/zeppelin-web/src/app/app.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js index b4a769b..64d43bb 100644 --- a/zeppelin-web/src/app/app.js +++ b/zeppelin-web/src/app/app.js @@ -31,7 +31,8 @@ angular.module('zeppelinWebApp', [ 'monospaced.elastic', 'puElasticInput', 'xeditable', - 'ngToast' + 'ngToast', + 'focus-if' ]) .filter('breakFilter', function() { return function (text) { @@ -60,7 +61,7 @@ angular.module('zeppelinWebApp', [ .otherwise({ redirectTo: '/' }); - + ngToastProvider.configure({ dismissButton: true, dismissOnClick: false, http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/22859f65/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 454e474..c7b7a78 100644 --- a/zeppelin-web/src/app/notebook/notebook.css +++ b/zeppelin-web/src/app/notebook/notebook.css @@ -42,17 +42,17 @@ */ .new-paragraph{ - text-align: center; + text-align: center; height: 7px; margin: -7px 2px 0 2px; cursor: pointer; } -.new-paragraph:hover{ +.new-paragraph:hover{ background: #d3e5ea; } -.new-paragraph:hover .plus-sign{ +.new-paragraph:hover .plus-sign{ display: block; } @@ -106,18 +106,17 @@ .form-control2 { width: 100%; - margin-left: 15px; + height: 40px; font-size: 29px; - line-height: 1.42857143; + line-height: 1.2; color: #555; background: #fff; border: 1px solid #ccc; - border-radius: 4px; + border-radius: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); - -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + padding: 7px 0; + margin: 2px 0 0 14px; } .form-control-static2 { http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/22859f65/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 935192a..9679ac5 100644 --- a/zeppelin-web/src/app/notebook/notebook.html +++ b/zeppelin-web/src/app/notebook/notebook.html @@ -14,9 +14,9 @@ limitations under the License. <!-- Here the controller <NotebookCtrl> is not needed because explicitly set in the app.js (route) --> <div class="noteAction" ng-show="note.id && !paragraphUrl"> <h3> - <input type="text" class="form-control2" placeholder="{{note.name || 'Note ' + note.id}}" style="width:200px;" - ng-show="showEditor" ng-model="note.name" ng-enter="sendNewName()" ng-escape="showEditor = false" autofocus/> - <p class="form-control-static2" ng-click="showEditor = true" ng-show="!showEditor">{{note.name || 'Note ' + note.id}}</p> + <input type="text" pu-elastic-input class="form-control2" placeholder="{{note.name || 'Note ' + note.id}}" style="min-width: 200px; max-width: 600px;" + ng-show="showEditor" ng-model="note.name" ng-blur="sendNewName()" ng-enter="sendNewName()" ng-escape="note.name = oldName; showEditor = false" focus-if="showEditor" /> + <p class="form-control-static2" ng-click="showEditor = true; oldName = note.name" ng-show="!showEditor">{{note.name || 'Note ' + note.id}}</p> <span class="labelBtn btn-group"> <button type="button" class="btn btn-default btn-xs" http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/22859f65/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 ab08131..6e370dd 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css @@ -209,6 +209,7 @@ .paragraph .title input { width: 80%; + height: 24px; line-height: 1.42857143; color: #555; background: #fff none; @@ -216,12 +217,12 @@ border-radius: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); - -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; text-transform: capitalize; font-family: 'Roboto', sans-serif; - font-size: 14px!important; + font-size: 17px !important; + font-weight: bold; + padding: 0 2px; + margin-left: -3px; } /* http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/22859f65/zeppelin-web/src/app/notebook/paragraph/paragraph.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph.html index 7e3dbfc..cded6d8 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.html +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.html @@ -19,12 +19,16 @@ limitations under the License. id="{{paragraph.id}}_title" class="title"> <input type="text" - placeholder="Edit title" + pu-elastic-input + style="min-width: 400px; max-width: 80%;" + placeholder="Untitled" ng-model="paragraph.title" ng-show="showTitleEditor" - ng-escape="showTitleEditor = false" - ng-enter="setTitle(); showTitleEditor = false"/> - <div ng-click="showTitleEditor = !asIframe && !viewOnly" + ng-escape="showTitleEditor = false; paragraph.title = oldTitle;" + ng-blur="setTitle(); showTitleEditor = false" + ng-enter="setTitle(); showTitleEditor = false" + focus-if="showTitleEditor" /> + <div ng-click="showTitleEditor = !asIframe && !viewOnly; oldTitle = paragraph.title;" ng-show="!showTitleEditor" ng-bind-html="paragraph.title || 'Untitled'"> </div> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/22859f65/zeppelin-web/src/components/ngescape/ngescape.directive.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/ngescape/ngescape.directive.js b/zeppelin-web/src/components/ngescape/ngescape.directive.js index 415a04e..8b88b85 100644 --- a/zeppelin-web/src/components/ngescape/ngescape.directive.js +++ b/zeppelin-web/src/components/ngescape/ngescape.directive.js @@ -18,7 +18,7 @@ angular.module('zeppelinWebApp').directive('ngEscape', function() { element.bind('keydown keyup', function(event) { if (event.which === 27) { scope.$apply(function() { - scope.$eval(attrs.ngEnter); + scope.$eval(attrs.ngEscape); }); event.preventDefault(); } http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/22859f65/zeppelin-web/src/index.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html index 44186a0..4bddd98 100644 --- a/zeppelin-web/src/index.html +++ b/zeppelin-web/src/index.html @@ -120,6 +120,7 @@ limitations under the License. <script src="bower_components/lodash/lodash.js"></script> <script src="bower_components/angular-filter/dist/angular-filter.min.js"></script> <script src="bower_components/ngtoast/dist/ngToast.js"></script> + <script src="bower_components/ng-focus-if/focusIf.js"></script> <script src="bower_components/bootstrap3-dialog/dist/js/bootstrap-dialog.min.js"></script> <!-- endbower --> <!-- endbuild --> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/22859f65/zeppelin-web/test/karma.conf.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/test/karma.conf.js b/zeppelin-web/test/karma.conf.js index 82331c5..1cd2328 100644 --- a/zeppelin-web/test/karma.conf.js +++ b/zeppelin-web/test/karma.conf.js @@ -54,6 +54,7 @@ module.exports = function(config) { 'bower_components/lodash/lodash.js', 'bower_components/angular-filter/dist/angular-filter.min.js', 'bower_components/ngtoast/dist/ngToast.js', + 'bower_components/ng-focus-if/focusIf.js', 'bower_components/bootstrap3-dialog/dist/js/bootstrap-dialog.min.js', 'bower_components/angular-mocks/angular-mocks.js', // endbower
