You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mo...@apache.org on 2017/05/25 06:46:56 UTC
zeppelin git commit: [ZEPPELIN-2429] Improve `import notebook` dialog
style
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 <1a...@gmail.com>
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 <1a...@gmail.com>
Authored: Mon May 22 18:29:16 2017 +0900
Committer: Lee moon soo <mo...@apache.org>
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) {