Repository: incubator-zeppelin Updated Branches: refs/heads/master 82c3dc039 -> a345f7684
ZEPPELIN-306 - Fix Notebook Action bar to top This PR fix the Notebook Action bar, so that it's accessible even after scroll  Because of the CSS changes, I had to change the tooltip from top to bottom  Author: Damien Corneau <[email protected]> Closes #314 from corneadoug/feat/ZEPPELIN-306 and squashes the following commits: 66f09ad [Damien Corneau] Hide execution time in Iframe mode cafa9b3 [Damien Corneau] Fix Simple and Report Style babcdc9 [Damien Corneau] Fix Notebook Action & change tooltip placement Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/a345f768 Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/a345f768 Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/a345f768 Branch: refs/heads/master Commit: a345f768471e9b8c89f4eb4d3aba6b684bff75b3 Parents: 82c3dc0 Author: Damien Corneau <[email protected]> Authored: Tue Sep 22 11:12:36 2015 +0900 Committer: Damien Corneau <[email protected]> Committed: Thu Sep 24 18:41:11 2015 +0900 ---------------------------------------------------------------------- zeppelin-web/src/app/home/home.css | 8 +- zeppelin-web/src/app/notebook/notebook.css | 14 +- zeppelin-web/src/app/notebook/notebook.html | 218 +++++++++---------- .../src/app/notebook/paragraph/paragraph.html | 3 +- .../src/assets/styles/looknfeel/default.css | 1 - 5 files changed, 123 insertions(+), 121 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/a345f768/zeppelin-web/src/app/home/home.css ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css index c42b469..41b098e 100644 --- a/zeppelin-web/src/app/home/home.css +++ b/zeppelin-web/src/app/home/home.css @@ -13,7 +13,7 @@ */ body { - padding-top: 60px; + padding-top: 50px; color: #212121; } @@ -32,7 +32,7 @@ body.asIframe { padding-top: 0px; } body .navbar { - margin-bottom: 10px; + margin-bottom: 0px; } .container { @@ -150,9 +150,7 @@ a.navbar-brand:hover { #main { - padding-left: 10px; - padding-right: 10px; - padding-bottom: 10px; + padding: 10px; height: 100%; } http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/a345f768/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 0d3de89..40d9702 100644 --- a/zeppelin-web/src/app/notebook/notebook.css +++ b/zeppelin-web/src/app/notebook/notebook.css @@ -286,8 +286,20 @@ .noteAction { margin-left: -10px; margin-right: -10px; - margin-top: -10px; font-family: 'Roboto', sans-serif; + background-color: white; + position: fixed; + top: 50px; + width: 100%; + height: 54px; + z-index: 3; +} + +.noteAction h3 { + margin-top: 0px; + margin-bottom: 0px; + padding-top: 4px; + padding-bottom: 4px; } .noteAction li{ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/a345f768/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 bfb26da..b7257fe 100644 --- a/zeppelin-web/src/app/notebook/notebook.html +++ b/zeppelin-web/src/app/notebook/notebook.html @@ -3,7 +3,7 @@ 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 +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, @@ -12,123 +12,117 @@ See the License for the specific language governing permissions and limitations under the License. --> <!-- Here the controller <NotebookCtrl> is not needed because explicitly set in the app.js (route) --> -<div> - <div class="noteAction" ng-show="note.id && !paragraphUrl"> - <h3 class="new_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> - <span class="labelBtn btn-group"> - <button type="button" - class="btn btn-default btn-xs" - ng-click="runNote()" - ng-class="{'disabled':isNoteRunning()}" - tooltip-placement="top" tooltip="Run all the notes"> - <i class="icon-control-play"></i> - </button> - <button type="button" - class="btn btn-default btn-xs" - ng-click="toggleAllEditor()" - ng-hide="viewOnly" - tooltip-placement="top" tooltip="Show/hide the code"> - <i ng-class="editorToggled ? 'fa icon-size-fullscreen' :'fa icon-size-actual'"></i></button> - <button type="button" - class="btn btn-default btn-xs" - ng-click="toggleAllTable()" - ng-hide="viewOnly" - tooltip-placement="top" tooltip="Show/hide the output"> - <i ng-class="tableToggled ? 'fa icon-notebook' : 'fa icon-book-open'"></i> - </button> - <button type="button" - class="btn btn-default btn-xs" - ng-click="removeNote(note.id)" - ng-hide="viewOnly" - tooltip-placement="top" tooltip="Remove the notebook"> - <i class="icon-trash"></i> - </button> - <button type="button" - class="btn btn-default btn-xs" - ng-hide="viewOnly" - tooltip-placement="top" tooltip="Clone the notebook" - data-toggle="modal" data-target="#noteNameModal" data-clone="true" - > - <i class="fa fa-copy"></i> - </button> - </span> +<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> + <span class="labelBtn btn-group"> + <button type="button" + class="btn btn-default btn-xs" + ng-click="runNote()" + ng-class="{'disabled':isNoteRunning()}" + tooltip-placement="bottom" tooltip="Run all the notes"> + <i class="icon-control-play"></i> + </button> + <button type="button" + class="btn btn-default btn-xs" + ng-click="toggleAllEditor()" + ng-hide="viewOnly" + tooltip-placement="bottom" tooltip="Show/hide the code"> + <i ng-class="editorToggled ? 'fa icon-size-fullscreen' :'fa icon-size-actual'"></i></button> + <button type="button" + class="btn btn-default btn-xs" + ng-click="toggleAllTable()" + ng-hide="viewOnly" + tooltip-placement="bottom" tooltip="Show/hide the output"> + <i ng-class="tableToggled ? 'fa icon-notebook' : 'fa icon-book-open'"></i> + </button> + <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> + <button type="button" + class="btn btn-default btn-xs" + ng-hide="viewOnly" + tooltip-placement="bottom" tooltip="Clone the notebook" + data-toggle="modal" data-target="#noteNameModal" data-clone="true" + > + <i class="fa fa-copy"></i> + </button> + </span> - <span ng-hide="viewOnly"> - <div class="labelBtn btn-group"> - <div class="btn btn-default btn-xs dropdown-toggle" - type="button" - data-toggle="dropdown" - ng-class="{ 'btn-info' : note.config.cron, 'btn-danger' : note.info.cron, 'btn-default' : !note.config.cron}" - tooltip-placement="top" tooltip="Run scheduler"> - <span class="fa fa-clock-o"></span> {{getCronOptionNameFromValue(note.config.cron)}} - </div> - <ul class="dropdown-menu" role="menu" style="width:300px"> - <li> - <div style="padding:10px 20px 0 20px;font-weight:normal;word-wrap:break-word"> - Run note with cron scheduler. - Either choose from<br/>preset or write your own <a href="http://www.quartz-scheduler.org/documentation/quartz-1.x/tutorials/crontrigger"; target=_blank>cron expression</a>. - <br/><br/> - <span>- Preset</span> - <a ng-repeat="cr in cronOption" - type="button" - ng-click="setCronScheduler(cr.value)" - style="cursor:pointer" - dropdown-input>{{cr.name}}</a> - <br/><br/> - <span>- Cron expression</span> - <input type="text" - ng-model="note.config.cron" - ng-change="setCronScheduler(note.config.cron)" - dropdown-input> - </input> - <p ng-show="note.info.cron" - style="color:red"> - {{note.info.cron}} - </p> - </div> - </li> - </ul> + <span ng-hide="viewOnly"> + <div class="labelBtn btn-group"> + <div class="btn btn-default btn-xs dropdown-toggle" + type="button" + data-toggle="dropdown" + ng-class="{ 'btn-info' : note.config.cron, 'btn-danger' : note.info.cron, 'btn-default' : !note.config.cron}" + tooltip-placement="bottom" tooltip="Run scheduler"> + <span class="fa fa-clock-o"></span> {{getCronOptionNameFromValue(note.config.cron)}} + </div> + <ul class="dropdown-menu" role="menu" style="width:300px"> + <li> + <div style="padding:10px 20px 0 20px;font-weight:normal;word-wrap:break-word"> + Run note with cron scheduler. + Either choose from<br/>preset or write your own <a href="http://www.quartz-scheduler.org/documentation/quartz-1.x/tutorials/crontrigger"; target=_blank>cron expression</a>. + <br/><br/> + <span>- Preset</span> + <a ng-repeat="cr in cronOption" + type="button" + ng-click="setCronScheduler(cr.value)" + style="cursor:pointer" + dropdown-input>{{cr.name}}</a> + <br/><br/> + <span>- Cron expression</span> + <input type="text" + ng-model="note.config.cron" + ng-change="setCronScheduler(note.config.cron)" + dropdown-input /> + <p ng-show="note.info.cron" + style="color:red"> + {{note.info.cron}} + </p> </div> - </span> + </li> + </ul> + </div> + </span> - <div class="pull-right" - style="margin-top:15px; margin-right:15px; font-size:15px;"> - <span style="position:relative; top:3px; margin-right:4px; cursor:pointer" - data-toggle="modal" - data-target="#shortcutModal" - tooltip-placement="top" tooltip="List of shortcut"> - <i class="icon-question"></i> - </span> - <span style="position:relative; top:2px; margin-right:4px; cursor:pointer;" - ng-click="toggleSetting()" - tooltip-placement="top" tooltip="Interpreter binding"> - <i class="fa fa-cog" - ng-style="{color: showSetting ? '#3071A9' : 'black' }"></i> - </span> + <div class="pull-right" style="margin-top:15px; margin-right:15px; font-size:15px;"> + <span style="position:relative; top:3px; margin-right:4px; cursor:pointer" + data-toggle="modal" + data-target="#shortcutModal" + tooltip-placement="bottom" tooltip="List of shortcut"> + <i class="icon-question"></i> + </span> + <span style="position:relative; top:2px; margin-right:4px; cursor:pointer;" + ng-click="toggleSetting()" + tooltip-placement="bottom" tooltip="Interpreter binding"> + <i class="fa fa-cog" ng-style="{color: showSetting ? '#3071A9' : 'black' }"></i> + </span> - <span class="btn-group"> - <button type="button" - class="btn btn-default btn-xs dropdown-toggle" - data-toggle="dropdown"> - {{note.config.looknfeel}} <span class="caret"></span> - </button> - <ul class="dropdown-menu pull-right" role="menu"> - <li ng-repeat="looknfeel in looknfeelOption"> - <a style="cursor:pointer" - ng-click="setLookAndFeel(looknfeel)">{{looknfeel}}</a> - </li> - </ul> - </span> - </div> - </h3> - </div> + <span class="btn-group"> + <button type="button" class="btn btn-default btn-xs dropdown-toggle" + data-toggle="dropdown"> + {{note.config.looknfeel}} <span class="caret"></span> + </button> + <ul class="dropdown-menu pull-right" role="menu"> + <li ng-repeat="looknfeel in looknfeelOption"> + <a style="cursor:pointer" ng-click="setLookAndFeel(looknfeel)">{{looknfeel}}</a> + </li> + </ul> + </span> + </div> + </h3> +</div> +<div style="padding-top: 36px;"> <!-- settings --> - <div ng-show="showSetting" - class="setting"> + <div ng-if="showSetting" class="setting"> <div> <h4>Settings</h4> </div> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/a345f768/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 4d0f451..94ecb8b 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.html +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.html @@ -371,8 +371,7 @@ limitations under the License. ng-bind="paragraph.errorMessage"> </div> - <div id="{{paragraph.id}}_executionTime" class="executionTime" ng-bind-html="getExecutionTime()"> - </div> + <div ng-if="!asIframe" id="{{paragraph.id}}_executionTime" class="executionTime" ng-bind-html="getExecutionTime()"></div> </div> </div> <div id="{{paragraph.id}}_control" class="control" ng-show="!asIframe"> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/a345f768/zeppelin-web/src/assets/styles/looknfeel/default.css ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/assets/styles/looknfeel/default.css b/zeppelin-web/src/assets/styles/looknfeel/default.css index 56db526..2d128e9 100644 --- a/zeppelin-web/src/assets/styles/looknfeel/default.css +++ b/zeppelin-web/src/assets/styles/looknfeel/default.css @@ -41,7 +41,6 @@ body { } .noteAction { - background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); color: #2c3e50; border-bottom: 1px solid #E5E5E5;
