Repository: zeppelin Updated Branches: refs/heads/master 018ab3ac1 -> 116005659
[ZEPPELIN-2429] Improve `import notebook` dialog style ### What is this PR for? Improve `import notebook` dialog style. See the attached screenshots. ### What type of PR is it? [Improvement] ### Todos DONE ### What is the Jira issue? [ZEPPELIN-2429](https://issues.apache.org/jira/browse/ZEPPELIN-2429) ### 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. `import 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 #2357 from 1ambda/improve-import-dialog and squashes the following commits: 8b966af [1ambda] fix: Set padding, border radius 95666b4 [1ambda] fix: RAT issue 8425113 [1ambda] fix: Use uppercase for placeholder df702c4 [1ambda] feat: Style import dialog body 2c868c7 [1ambda] feat: Style note import dialog header 85ecc10 [1ambda] style: Reformat note import dialog html c46516b [1ambda] feat: Use note-import-dialog.css Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/11600565 Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/11600565 Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/11600565 Branch: refs/heads/master Commit: 11600565975fbc8791e41b3febece6585860a07e Parents: 018ab3a Author: 1ambda <[email protected]> Authored: Mon May 22 18:29:16 2017 +0900 Committer: Lee moon soo <[email protected]> Committed: Thu May 25 15:46:52 2017 +0900 ---------------------------------------------------------------------- zeppelin-web/src/app/home/home.css | 34 ------- .../noteName-import/note-import-dialog.css | 91 +++++++++++++++++ .../noteName-import/note-import-dialog.html | 101 +++++++++---------- .../notenameImport.controller.js | 2 + 4 files changed, 143 insertions(+), 85 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/11600565/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 3be17af..6c82253 100644 --- a/zeppelin-web/src/app/home/home.css +++ b/zeppelin-web/src/app/home/home.css @@ -455,40 +455,6 @@ This part should be removed when new version of bootstrap handles this issue. z-index: 10003 !important; } -#noteImportModal .modal-body { - min-height: 420px; - overflow: hidden; -} - -#noteImportModal .modal-footer { - min-height: 65px; -} - -#noteImportModal .display-inline a { - background: #fff; - border: 1px solid #ddd; - border-radius: 5px; - color: #999; - cursor: pointer; - display: block; - float: left; - font-size: 98px; - height: 240px; - margin: 0 10px 16px; - padding-top: 60px; - text-align: center; - text-decoration: none; - width: 264px; -} - -#noteImportModal .display-inline a:hover { - background: #eee; -} - -#noteImportModal .display-inline a p { - font-size: 14px; -} - /* ------------------------------------------- */ /* Slide Top /* ------------------------------------------- */ http://git-wip-us.apache.org/repos/asf/zeppelin/blob/11600565/zeppelin-web/src/components/noteName-import/note-import-dialog.css ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/noteName-import/note-import-dialog.css b/zeppelin-web/src/components/noteName-import/note-import-dialog.css new file mode 100644 index 0000000..81e276a --- /dev/null +++ b/zeppelin-web/src/components/noteName-import/note-import-dialog.css @@ -0,0 +1,91 @@ +/* + * 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-import { + background-color: #3071a9; + border: 2px solid #3071a9; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.modal-header-import .close { + color: #cfcfcf; + opacity: 1; +} + +.modal-header-import .modal-title { + color: white; + font-size: 20px; + font-weight: 300; +} + +.modal-body-import .note-name-input { + margin-left: 7px; + margin-right: 7px; +} + +.modal-body-import label { + font-size: 15px; + font-weight: 400; + margin-bottom: 10px; + margin-top: 15px; +} + +.modal-body-import { + min-height: 420px; + overflow: hidden; +} + +.modal-body-import .import-btn-image-group { + margin-top: 4px; +} + +.modal-body-import .import-btn-image { + display: inline-block; + margin-left: 8px; +} + +.modal-body-import .import-btn-image a { + background: #fff; + border: 1px solid #e6e6e6; + /*border-radius: 20px;*/ + border-radius: 20%; + color: #7c828e; + cursor: pointer; + display: block; + float: left; + font-size: 98px; + text-align: center; + text-decoration: none; + height: 240px; + padding-top: 60px; + margin: 0 10px 0px 10px; + width: 250px; +} + +.modal-body-import .import-btn-image a:hover { + background: #eee; +} + +.modal-body-import .modal-body-import-desc { + font-size: 15px; + font-weight: 400; + margin-top: 30px; + color: black; + font-family: 'Roboto', sans-serif; +} + +.modal-footer-import { + min-height: 65px; +} http://git-wip-us.apache.org/repos/asf/zeppelin/blob/11600565/zeppelin-web/src/components/noteName-import/note-import-dialog.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/noteName-import/note-import-dialog.html b/zeppelin-web/src/components/noteName-import/note-import-dialog.html index 96d21ce..c640ca1 100644 --- a/zeppelin-web/src/components/noteName-import/note-import-dialog.html +++ b/zeppelin-web/src/components/noteName-import/note-import-dialog.html @@ -11,71 +11,70 @@ 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="noteImportModal" class="modal fade" role="dialog" tabindex="-1" + data-backdrop="static" data-keyboard="false"> - <div id="noteImportModal" class="modal fade" role="dialog" - tabindex="-1" data-backdrop="static" data-keyboard="false"> - <div class="modal-dialog" > + <div class="modal-dialog"> + <div class="modal-content" id="NoteImportCtrl" ng-init="NoteImportInit"> - <!-- Modal content--> - <div class="modal-content" id="NoteImportCtrl" ng-init="NoteImportInit"> - <div class="modal-header"> - <!-- close button --> - <button type="button" class="close" data-dismiss="modal" ng-click="noteimportctrl.resetFlags()">×</button> + <!-- modal-header --> + <div class="modal-header modal-header-import"> + <button type="button" class="close" data-dismiss="modal" + ng-click="noteimportctrl.resetFlags()">×</button> + <h4 class="modal-title">Import New Note</h4> + </div> - <h4 class="modal-title">Import new note</h4> + <!-- modal-body --> + <div class="modal-body modal-body-import"> + <div class="form-group"> + <label for="noteImportName">Import As</label> + <input class="form-control note-name-input" id="noteImportName" + placeholder="Insert Note Name" type="text" + ng-model="note.noteImportName" /> </div> - <div class="modal-body"> - <div class="form-group"> - <label for="noteImportName">Import AS</label> - <input placeholder="Note name" type="text" class="form-control" id="noteImportName" - ng-model="note.noteImportName" /> - </div> - <div class="form-group"> - <label for="fileSizeLimit">JSON file size cannot exceed {{maxLimit}} MB</label> - </div> + <div class="form-group" ng-show="note.errorText"> + <div class="alert alert-danger">{{note.errorText}}</div> + </div> - <div class="form-group" ng-show="note.errorText"> - <div class="alert alert-danger">{{note.errorText}}</div> - </div> + <label>JSON file size cannot exceed {{maxLimit}} MB</label> - <div class="form-group slide-left" ng-show="note.step1"> - <div class="display-inline"> - <a class="fa fa-cloud-upload import-file-upload" ng-click="uploadFile()"> - <p>Choose a JSON here</p> - </a> - </div> + <div class="form-group slide-left import-btn-image-group" ng-show="note.step1"> + <div class="import-btn-image"> + <a class="fa fa-cloud-upload import-file-upload" ng-click="uploadFile()"> + <p class="modal-body-import-desc">Select JSON File </p> + </a> <div style="display: none"> - <input placeholder="Note name" type="file" class="form-control" id="noteImportFile" + <input class="form-control note-name-input" id="noteImportFile" + placeholder="Note name" type="file" ng-model="note.importFile" onchange="angular.element(this).scope().importFile(this)" /> </div> - <div class="display-inline"> - <a href="javascript:void(0);" ng-click="uploadURL()" class="fa fa-link"> - <p>Add from URL</p> - </a> - </div> </div> - - <div class="form-group slide-right" ng-show="note.step2"> - - <label for="noteImportUrl">URL</label> - <input placeholder="Note url" type="text" class="form-control" id="noteImportUrl" - ng-model="note.importUrl" /> + <div class="import-btn-image"> + <a href="javascript:void(0);" ng-click="uploadURL()" class="fa fa-link"> + <p class="modal-body-import-desc">Add from URL</p> + </a> </div> - </div> - <div class="modal-footer"> - <div ng-show="note.step2"> - <button type="button" id="importBackButton" - class="btn btn-default" - ng-click="noteimportctrl.importBack()">Back - </button> - <button type="button" id="importNoteButton" - class="btn btn-default" - ng-click="noteimportctrl.importNote()">Import Note - </button> - </div> + + <div class="form-group slide-right" ng-show="note.step2"> + + <label for="noteImportUrl">URL</label> + <input placeholder="Note URL" type="text" class="form-control" id="noteImportUrl" + ng-model="note.importUrl" /> </div> + + </div> + <div class="modal-footer modal-footer-import" ng-show="note.step2"> + <button type="button" id="importBackButton" + class="btn btn-default" + ng-click="noteimportctrl.importBack()">Back + </button> + <button type="button" id="importNoteButton" + class="btn btn-default" + ng-click="noteimportctrl.importNote()">Import Note + </button> </div> </div> </div> +</div> http://git-wip-us.apache.org/repos/asf/zeppelin/blob/11600565/zeppelin-web/src/components/noteName-import/notenameImport.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/noteName-import/notenameImport.controller.js b/zeppelin-web/src/components/noteName-import/notenameImport.controller.js index b42e8d8..0959244 100644 --- a/zeppelin-web/src/components/noteName-import/notenameImport.controller.js +++ b/zeppelin-web/src/components/noteName-import/notenameImport.controller.js @@ -12,6 +12,8 @@ * limitations under the License. */ +import './note-import-dialog.css' + angular.module('zeppelinWebApp').controller('NoteImportCtrl', NoteImportCtrl) function NoteImportCtrl ($scope, $timeout, websocketMsgSrv) {
