Repository: zeppelin Updated Branches: refs/heads/master 510cecd38 -> 056eee834
[ZEPPELIN-961] Longer names to the notebook make the name-text and buttons float outside the border. ### What is this PR for? To correct the styling of notebook header which has notebook name, in case when the name is longer. Feature : We should not limit the name size, but, while showing we can limit the name text to be shown. ### What type of PR is it? [Bug Fix] ### Todos ### What is the Jira issue? [ZEPPELIN-961](https://issues.apache.org/jira/browse/ZEPPELIN-961) ### How should this be tested? - Open any notebook. - Give the long name. ### Screenshots Before bug fix :  After bug fix :   ### Questions: * Does the licenses files need update? No. * Is there breaking changes for older versions? No. * Does this needs documentation? No. Author: Sagar Kulkarni <[email protected]> Closes #971 from sagarkulkarni3592/ZEPPELIN-961 and squashes the following commits: f7202c0 [Sagar Kulkarni] Merge branch 'master' of https://github.com/apache/incubator-zeppelin into ZEPPELIN-961 ff88f41 [Sagar Kulkarni] Made buttons position dynamic to size of name. a42045e [Sagar Kulkarni] Fixed the input box and button overlap. 9b29d8a [Sagar Kulkarni] Merge branch 'master' of https://github.com/apache/incubator-zeppelin into ZEPPELIN-961 37012ad [Sagar Kulkarni] Made adjustment to the name when window size is changed. 29607e5 [Sagar Kulkarni] ZEPPELIN-961 - Fixed the floating problem as well as styling of buttons. Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/056eee83 Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/056eee83 Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/056eee83 Branch: refs/heads/master Commit: 056eee8342699f93e01944c66ba0b053be4c5382 Parents: 510cecd Author: Sagar Kulkarni <[email protected]> Authored: Fri Jun 24 12:37:47 2016 +0530 Committer: Mina Lee <[email protected]> Committed: Fri Jun 24 22:44:11 2016 -0700 ---------------------------------------------------------------------- .../org/apache/zeppelin/AbstractZeppelinIT.java | 2 +- .../apache/zeppelin/integration/ZeppelinIT.java | 2 +- .../src/app/notebook/notebook-actionBar.html | 32 +++++++++++--------- zeppelin-web/src/app/notebook/notebook.css | 11 +++++-- 4 files changed, 28 insertions(+), 19 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/056eee83/zeppelin-server/src/test/java/org/apache/zeppelin/AbstractZeppelinIT.java ---------------------------------------------------------------------- diff --git a/zeppelin-server/src/test/java/org/apache/zeppelin/AbstractZeppelinIT.java b/zeppelin-server/src/test/java/org/apache/zeppelin/AbstractZeppelinIT.java index e7dba46..e78c992 100644 --- a/zeppelin-server/src/test/java/org/apache/zeppelin/AbstractZeppelinIT.java +++ b/zeppelin-server/src/test/java/org/apache/zeppelin/AbstractZeppelinIT.java @@ -145,7 +145,7 @@ abstract public class AbstractZeppelinIT { } protected void deleteTestNotebook(final WebDriver driver) { - driver.findElement(By.xpath("//*[@id='main']/div//h3/span/button[@tooltip='Remove the notebook']")) + driver.findElement(By.xpath(".//*[@id='main']//button[@ng-click='removeNote(note.id)']")) .sendKeys(Keys.ENTER); sleep(1000, true); driver.findElement(By.xpath("//div[@class='modal-dialog'][contains(.,'delete this notebook')]" + http://git-wip-us.apache.org/repos/asf/zeppelin/blob/056eee83/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java ---------------------------------------------------------------------- diff --git a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java index c3d3566..50b67b3 100644 --- a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java +++ b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java @@ -176,7 +176,7 @@ public class ZeppelinIT extends AbstractZeppelinIT { waitForText("BindingTest_1_", By.xpath(getParagraphXPath(1) + "//div[@id=\"angularTestButton\"]")); - driver.findElement(By.xpath("//*[@id='main']/div//h3/span/button[@tooltip='Remove the notebook']")) + driver.findElement(By.xpath(".//*[@id='main']//button[@ng-click='removeNote(note.id)']")) .sendKeys(Keys.ENTER); sleep(1000, true); driver.findElement(By.xpath("//div[@class='modal-dialog'][contains(.,'delete this notebook')]" + http://git-wip-us.apache.org/repos/asf/zeppelin/blob/056eee83/zeppelin-web/src/app/notebook/notebook-actionBar.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/notebook-actionBar.html b/zeppelin-web/src/app/notebook/notebook-actionBar.html index 16cb71a..4f7d984 100644 --- a/zeppelin-web/src/app/notebook/notebook-actionBar.html +++ b/zeppelin-web/src/app/notebook/notebook-actionBar.html @@ -13,10 +13,13 @@ limitations under the License. --> <div class="noteAction" ng-show="note.id && !paragraphUrl"> <h3> - <input type="text" pu-elastic-input class="form-control2" placeholder="{{noteName(note)}}" style="min-width: 200px; max-width: 600px;" + <div style="float: left; width: auto; max-width: 40%"> + <input type="text" pu-elastic-input class="form-control2" placeholder="{{noteName(note)}}" style="min-width: 0px; max-width: 95%;" ng-show="showEditor" ng-model="note.name" ng-blur="sendNewName();showEditor = false;" ng-enter="sendNewName();showEditor = false;" 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">{{noteName(note)}}</p> - <span class="labelBtn btn-group"> + <p class="form-control-static2" ng-click="showEditor = true; oldName = note.name" ng-show="!showEditor">{{noteName(note)}}</p> + </div> + <div style="float: left; padding-bottom: 10px"> + <span class="labelBtn btn-group"> <button type="button" class="btn btn-default btn-xs" ng-click="runNote()" @@ -92,17 +95,17 @@ limitations under the License. </span> <!-- put the delete action by itself for your protection --> - <span class="labelBtn" style="vertical-align:middle; display:inline-block;"> - <button type="button" - class="btn btn-default btn-xs" - ng-click="removeNote(note.id)" - ng-hide="viewOnly" - tooltip-placement="bottom" tooltip="Remove the notebook"> - <i class="icon-trash"></i> - </button> - </span> + <span class="labelBtn" style="vertical-align:middle; display:inline-block;"> + <button type="button" + class="btn btn-default btn-xs" + ng-click="removeNote(note.id)" + ng-hide="viewOnly" + tooltip-placement="bottom" tooltip="Remove the notebook"> + <i class="icon-trash"></i> + </button> + </span> - <span ng-hide="viewOnly"> + <span ng-hide="viewOnly"> <div class="labelBtn btn-group"> <div class="btn btn-default btn-xs dropdown-toggle" type="button" @@ -151,8 +154,9 @@ limitations under the License. </ul> </div> </span> + </div> - <div class="pull-right" style="margin-top:15px; margin-right:15px; font-size:15px;"> + <div class="pull-right" style="margin-top:15px; margin-right:15px; margin-left: 15px; margin-bottom: 13px; font-size:15px;"> <span class="setting-btn" type="button" data-toggle="modal" http://git-wip-us.apache.org/repos/asf/zeppelin/blob/056eee83/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 c86eb9d..01af8c6 100644 --- a/zeppelin-web/src/app/notebook/notebook.css +++ b/zeppelin-web/src/app/notebook/notebook.css @@ -23,7 +23,7 @@ } .labelBtn { - padding: .2em .6em .3em; + padding: .8em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; @@ -105,7 +105,6 @@ } .form-control2 { - width: 100%; height: 40px; font-size: 29px; line-height: 1.2; @@ -116,16 +115,22 @@ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); padding: 7px 0; - margin: 2px 0 0 14px; + margin: 2px 20px 0 14px; } .form-control-static2 { padding-top: 7px; + margin-right: 15px; font-size: 29px; margin-left: 15px; padding-bottom: 7px; margin-bottom: 0; display: inline-block; + width: auto; + max-width: 97%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .noOverflow {
