Repository: zeppelin Updated Branches: refs/heads/master 5deb53f97 -> 018ab3ac1
[ZEPPELIN-2428] Improve `create new note` dialog style ### What is this PR for? Improve `create new notebook` dialog style. See the attached screenshots. ### What type of PR is it? [Improvement] ### Todos DONE ### What is the Jira issue? [ZEPPELIN-2428](https://issues.apache.org/jira/browse/ZEPPELIN-2428) ### How should this be tested? 1. Build: `mvn clean package -DskipTests; ./bin/zeppelin-daemon.sh restart` 2. Run Zeppelin and open browser: `localhost:8080` 3. `create new notebook` functionality should work as like before. ### Screenshots (if appropriate) #### Before   #### After   ### Questions: * Does the licenses files need update? - NO * Is there breaking changes for older versions? - NO * Does this needs documentation? - NO Author: 1ambda <[email protected]> Closes #2358 from 1ambda/improve-create-note-dialog and squashes the following commits: c4981a9 [1ambda] fix: RAT issue 71ed709 [1ambda] feat: Style note name dialog modal-body 21fa982 [1ambda] feat: Style panel desc d6f78d9 [1ambda] feat: label style for note name dialog c97d68f [1ambda] refactor: format note-name-dialog 774c99e [1ambda] feat: style modal-footer for note name dialog abe90c6 [1ambda] feat: Style modal-header dddb5d9 [1ambda] style: Reformat note-name-dialog.html Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/018ab3ac Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/018ab3ac Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/018ab3ac Branch: refs/heads/master Commit: 018ab3ac1b5728f2de1b589dcc16de92a67ada7c Parents: 5deb53f Author: 1ambda <[email protected]> Authored: Sun May 21 16:42:32 2017 +0900 Committer: Lee moon soo <[email protected]> Committed: Thu May 25 15:45:31 2017 +0900 ---------------------------------------------------------------------- .../noteName-create/note-name-dialog.css | 49 ++++++++++++ .../noteName-create/note-name-dialog.html | 80 ++++++++++++-------- .../noteName-create/notename.controller.js | 2 + 3 files changed, 98 insertions(+), 33 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/018ab3ac/zeppelin-web/src/components/noteName-create/note-name-dialog.css ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/noteName-create/note-name-dialog.css b/zeppelin-web/src/components/noteName-create/note-name-dialog.css new file mode 100644 index 0000000..22249ad --- /dev/null +++ b/zeppelin-web/src/components/noteName-create/note-name-dialog.css @@ -0,0 +1,49 @@ +/* + * 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 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.modal-header-note-name { + background-color: #3071a9; + border: 2px solid #3071a9; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.modal-header-note-name > .modal-title { + font-weight: 300; + font-size: 20px; + color: white; +} + +.modal-header-note-name > .close { + color: #cfcfcf; + opacity: 1; +} + +.modal-body-note-name label { + font-size: 17px; + font-weight: 400; +} + +.note-name-create-input { + margin-top: 5px; +} + +.note-name-desc-panel { + margin-top: 20px; + margin-bottom: 4px; +} + +.default-interpreter-select { + margin-top: 12px; +} http://git-wip-us.apache.org/repos/asf/zeppelin/blob/018ab3ac/zeppelin-web/src/components/noteName-create/note-name-dialog.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/noteName-create/note-name-dialog.html b/zeppelin-web/src/components/noteName-create/note-name-dialog.html index 44d1c01..6b20d3a 100644 --- a/zeppelin-web/src/components/noteName-create/note-name-dialog.html +++ b/zeppelin-web/src/components/noteName-create/note-name-dialog.html @@ -11,42 +11,56 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - <div id="noteNameModal" class="modal fade" role="dialog" modalvisible previsiblecallback="notenamectrl.preVisible" - targetinput="noteName" tabindex="-1"> - <div class="modal-dialog"> +<div id="noteNameModal" class="modal fade" role="dialog" + modalvisible previsiblecallback="notenamectrl.preVisible" + targetinput="noteName" tabindex="-1"> + <div class="modal-dialog"> - <!-- Modal content--> - <div class="modal-content" id="NotenameCtrl"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal">×</button> - <h4 class="modal-title" ng-show="!notenamectrl.clone">Create new note</h4> - <h4 class="modal-title" ng-show="notenamectrl.clone">Clone note</h4> - </div> - <div class="modal-body"> - <div class="form-group"> - <label for="noteName">Note Name</label> <input - placeholder="Note name" type="text" class="form-control" - id="noteName" ng-model="note.notename" ng-enter="notenamectrl.handleNameEnter()"/><br/> - <div ng-show="!notenamectrl.clone"> - <label for="defaultInterpreter">Default Interpreter </label> - <select ng-model="note.defaultInterpreter" - class="selectpicker" - name="defaultInterpreter" - id="defaultInterpreter" - ng-options="option.name for option in interpreterSettings"> - </select> - </div> + <!-- modal content--> + <div class="modal-content" id="NotenameCtrl"> + <!-- modal header --> + <div class="modal-header modal-header-note-name"> + <button type="button" class="close" data-dismiss="modal">×</button> + <h4 class="modal-title" ng-show="!notenamectrl.clone">Create New Note</h4> + <h4 class="modal-title" ng-show="notenamectrl.clone">Clone Note</h4> + </div> + + <!-- modal body--> + <div class="modal-body modal-body-note-name"> + <div class="form-group"> + <!-- note name --> + <div> + <label for="noteName">Note Name</label> + <input placeholder="Insert Note Name" type="text" + class="form-control note-name-create-input" + id="noteName" ng-model="note.notename" + ng-enter="notenamectrl.handleNameEnter()" /> + </div> + <!-- default interpreter --> + <div class="btn-group default-interpreter-select" ng-show="!notenamectrl.clone"> + <label for="defaultInterpreter">Default Interpreter</label> + <select id="defaultInterpreter" + name="defaultInterpreter" + class="form-control" + ng-model="note.defaultInterpreter" + ng-options="option.name for option in interpreterSettings"> + </select> + </div> + </div> <!-- end: form-group --> + <div class="panel panel-default note-name-desc-panel"> + <div class="panel-heading"> + Use '/' to create folders. Example: /NoteDirA/Note1 </div> - Use '/' to create folders. Example: /NoteDirA/Note1 - </div> - <div class="modal-footer"> - <button type="button" id="createNoteButton" - class="btn btn-default" - data-dismiss="modal" ng-click="notenamectrl.createNote()"> - <span ng-show="!notenamectrl.clone">Create Note</span> - <span ng-show="notenamectrl.clone">Clone Note</span> - </button> </div> </div> + <div class="modal-footer"> + <button type="button" id="createNoteButton" + class="btn btn-primary" + data-dismiss="modal" ng-click="notenamectrl.createNote()"> + <span ng-show="!notenamectrl.clone">Create</span> + <span ng-show="notenamectrl.clone">Clone</span> + </button> + </div> </div> </div> +</div> http://git-wip-us.apache.org/repos/asf/zeppelin/blob/018ab3ac/zeppelin-web/src/components/noteName-create/notename.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/noteName-create/notename.controller.js b/zeppelin-web/src/components/noteName-create/notename.controller.js index 815e9d5..80bceb8 100644 --- a/zeppelin-web/src/components/noteName-create/notename.controller.js +++ b/zeppelin-web/src/components/noteName-create/notename.controller.js @@ -12,6 +12,8 @@ * limitations under the License. */ +import './note-name-dialog.css' + angular.module('zeppelinWebApp').controller('NotenameCtrl', NotenameCtrl) function NotenameCtrl ($scope, noteListDataFactory, $routeParams, websocketMsgSrv) {
