Skip to content

Fix/fix notebook settings #423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
corneadoug wants to merge 5 commits into from
Closed

Fix/fix notebook settings #423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1fde409
Make settings as fixed position and reduce some space
corneadoug Nov 12, 2015
9e8e46a
Add scrollbar to settings if screen too small
corneadoug Nov 12, 2015
3dad905
Fix zindex for actionbar tooltips
corneadoug Nov 12, 2015
a5766c8
Add padding to always see a part of the paragraph
corneadoug Nov 13, 2015
f424421
Remove actionbar box shadow when settings are shown
corneadoug Nov 13, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 30 additions & 4 deletions zeppelin-web/src/app/notebook/notebook.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,11 @@
top: 50px;
width: 100%;
height: 54px;
z-index: 3;
z-index: 4;
}

.noBoxShadow {
box-shadow: none !important;
}

.noteAction h3 {
Expand Down Expand Up @@ -112,12 +116,34 @@

.setting {
background-color: white;
padding: 10px 15px 15px 15px;
margin-left: -10px;
margin-right: -10px;
padding: 0px 0px 15px 0px;
margin: 44px -10px 0px -10px;
font-family: 'Roboto', sans-serif;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
border-bottom: 1px solid #E5E5E5;
position: fixed;
width: 100%;
z-index: 3;
/* max-height = page - (Navbar 54px + ActionBar 49px + Style Margin 30px) */
max-height: calc(100% - 133px);
overflow: auto;
}

.setting .settings-header {
position: fixed;
background-color: white;
width: 100%;
}
.setting .settings-body {
margin-top: 55px;
}

.settings-content-padding {
padding: 0px 15px 0px 15px;
}

.setting hr {
margin: 10px 0px 10px 0px;
}

.setting .interpreterSettings {
Expand Down
53 changes: 28 additions & 25 deletions zeppelin-web/src/app/notebook/notebook.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
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">
<div class="noteAction" ng-class="{'noBoxShadow':showSetting}" 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/>
Expand Down Expand Up @@ -135,38 +135,41 @@ <h3>
</h3>
</div>

<div style="padding-top: 36px;">
<!-- settings -->
<div ng-if="showSetting" class="setting">
<!-- settings -->
<div ng-if="showSetting" class="setting">
<div class="settings-header settings-content-padding">
<div>
<h4>Settings</h4>
</div>
<hr />
<div>
<h5>Interpreter binding</h5>
<p>
Bind interpreter for this note.
Click to Bind/Unbind interpreter.
Drag and drop to reorder interpreters. <br />
The first interpreter on the list becomes default. To create/remove interpreters, go to <a href="/#/interpreter">Interpreter</a> menu.
</p>
</div>
<div class="settings-body settings-content-padding">
<h5>Interpreter binding</h5>
<p>
Bind interpreter for this note.
Click to Bind/Unbind interpreter.
Drag and drop to reorder interpreters. <br />
The first interpreter on the list becomes default. To create/remove interpreters, go to <a href="/#/interpreter">Interpreter</a> menu.
</p>

<div class="interpreterSettings"
as-sortable="interpreterSelectionListeners" data-ng-model="interpreterBindings">
<div data-ng-repeat="item in interpreterBindings" as-sortable-item>
<div as-sortable-item-handle
ng-click="item.selected = !item.selected"
class="btn"
ng-class="{'btn-info': item.selected, 'btn-default': !item.selected}"><font style="font-size:16px">{{item.name}}</font> <small><span ng-repeat="intp in item.interpreters"><span ng-show="!$first">, </span>%{{intp.name}}</span></small></div>
</div>
<div class="interpreterSettings"
as-sortable="interpreterSelectionListeners" data-ng-model="interpreterBindings">
<div data-ng-repeat="item in interpreterBindings" as-sortable-item>
<div as-sortable-item-handle
ng-click="item.selected = !item.selected"
class="btn"
ng-class="{'btn-info': item.selected, 'btn-default': !item.selected}"><font style="font-size:16px">{{item.name}}</font> <small><span ng-repeat="intp in item.interpreters"><span ng-show="!$first">, </span>%{{intp.name}}</span></small></div>
</div>
</div>
<br />
<div>
<button class="btn btn-primary" ng-click="saveSetting()">Save</button>
<button class="btn btn-default" ng-click="closeSetting()">Cancel</button>
</div>
</div>
<br />
<div class="settings-content-padding">
<button class="btn btn-primary" ng-click="saveSetting()">Save</button>
<button class="btn btn-default" ng-click="closeSetting()">Cancel</button>
</div>
</div>

<div style="padding-top: 36px;">

<div class="note-jump"></div>

Expand Down