zeppelin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From rkam...@apache.org
Subject zeppelin git commit: [ZEPPELIN-3285] Refine the style of Notebook title
Date Wed, 13 Jun 2018 09:09:05 GMT
Repository: zeppelin
Updated Branches:
  refs/heads/master ee06cf030 -> b7c3fec95


[ZEPPELIN-3285] Refine the style of Notebook title

Refine the style of Notebook title
(Ellipsis by character, 100% width under medium width browser, align delete button)

(Before)
![before](https://user-images.githubusercontent.com/3839771/40781776-1c420044-6518-11e8-94d6-fc7d5103771b.gif)

(After)
![after](https://user-images.githubusercontent.com/3839771/40781830-5bd25dee-6518-11e8-871f-23bbf31507e5.gif)

Improvement

https://issues.apache.org/jira/browse/ZEPPELIN-3285

**1. Run webapp**
```vi
cd zeppelin-web
yarn run dev
```
**2. Check the title have ellipsis by character, not looks cut.**
![image](https://user-images.githubusercontent.com/3839771/40782010-f1771e98-6518-11e8-9373-00fbeed75f2d.png)
(before / after)

**3. Check 'delete button' is aligned**
![image](https://user-images.githubusercontent.com/3839771/40782056-166634aa-6519-11e8-8cbe-8aa7f33f665b.png)
![image](https://user-images.githubusercontent.com/3839771/40782062-1b548f52-6519-11e8-985f-6e79084ce927.png)
(before / after)

**4. Check the title with is 100% under the window width 650px**
![image](https://user-images.githubusercontent.com/3839771/40782107-40b122e2-6519-11e8-9c01-887df47e7f26.png)
(before / after)

* First time? Setup Travis CI as described on https://zeppelin.apache.org/contribution/contributions.html#continuous-integration
* Strongly recommended: add automated unit tests for any new or changed behavior
* Outline any manual steps to test the PR here.

* Does the licenses files need update? N
* Is there breaking changes for older versions? N
* Does this needs documentation? N

Author: Jay Jin <jayjinjay@gmail.com>

Closes #2994 from milooy/master and squashes the following commits:

6049ee118 [Jay Jin] ZEPPELIN-3285 Delete left margin of title, ellipsis by word, RWD
dba654884 [Jay Jin] ZEPPELIN-3285 Align delete button in action bar

Change-Id: I09a2ac9afc4eb2f126f6fcc9a11bb0f972561b69


Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/b7c3fec9
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/b7c3fec9
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/b7c3fec9

Branch: refs/heads/master
Commit: b7c3fec95daacef66089468ca86832602275a716
Parents: ee06cf0
Author: Jay Jin <jayjinjay@gmail.com>
Authored: Thu May 31 21:08:43 2018 +0900
Committer: Renjith Kamath <rkamath@apache.org>
Committed: Wed Jun 13 14:38:58 2018 +0530

----------------------------------------------------------------------
 .../src/app/notebook/notebook-actionBar.html    | 11 ++-
 zeppelin-web/src/app/notebook/notebook.css      | 83 ++++++--------------
 .../src/assets/styles/looknfeel/report.css      |  2 +-
 .../src/assets/styles/looknfeel/simple.css      |  2 +-
 4 files changed, 31 insertions(+), 67 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/zeppelin/blob/b7c3fec9/zeppelin-web/src/app/notebook/notebook-actionBar.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/notebook-actionBar.html b/zeppelin-web/src/app/notebook/notebook-actionBar.html
index 9ae7a46..cb49786 100644
--- a/zeppelin-web/src/app/notebook/notebook-actionBar.html
+++ b/zeppelin-web/src/app/notebook/notebook-actionBar.html
@@ -14,13 +14,12 @@ limitations under the License.
 <headroom tolerance="10" offset="30" class="noteAction"
           ng-show="note.id && !paragraphUrl">
   <h3>
-    <div style="float: left; width: auto; max-width: 40%"
-      ng-controller="ElasticInputCtrl as input">
-      <input type="text" pu-elastic-input class="form-control2" placeholder="New name"
-             style="min-width: 0px; max-width: 85%;"
+    <div class="notebook-actionBar-title"
+         ng-controller="ElasticInputCtrl as input">
+      <input type="text" pu-elastic-input class="form-control-title-input" placeholder="New
name"
              ng-if="input.showEditor" ng-model="input.value" ng-escape="input.showEditor
= false" focus-if="input.showEditor"
              ng-blur="updateNoteName(input.value);input.showEditor = false;" ng-enter="updateNoteName(input.value);input.showEditor
= false;" />
-      <p class="form-control-static2"
+      <p class="form-control-title"
          ng-class="{'reverse-ellipsis ellipsis':noteName(note).length > 45}"
          tooltip-placement="bottom"
          uib-tooltip={{noteName(note)}}
@@ -226,7 +225,7 @@ limitations under the License.
     </span>
 
 <!-- put the delete action by itself for your protection -->
-      <span class="labelBtn" style="vertical-align:middle; display:inline-block;">
+      <span class="labelBtn btn-group" style="vertical-align:middle; display:inline-block;">
         <!-- if the note is in the trash, remove note permanently -->
         <button ng-if="isTrash(note)"
                 type="button"

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/b7c3fec9/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 4a85cc0..c72745b 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -73,7 +73,7 @@
 }
 
 .labelBtn {
-  padding: .8em .6em .3em;
+  padding: .8em .4em .3em;
   font-size: 75%;
   font-weight: bold;
   line-height: 1;
@@ -154,7 +154,19 @@
   color: #333333;
 }
 
-.form-control2 {
+.notebook-actionBar-title {
+  float: left;
+  width: auto;
+  max-width: 40%;
+}
+
+@media (max-width: 650px) {
+  .notebook-actionBar-title {
+    max-width: 100%;
+  }
+}
+
+.form-control-title-input {
   height: 40px;
   font-size: 29px;
   line-height: 1.2;
@@ -164,72 +176,25 @@
   border-radius: 0;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-  padding: 7px 0;
-  margin: 2px 20px 0 14px;
-}
-
-.form-control-static2 {
-  padding-top: 7px;
-  margin-right: 15px;
-  font-size: 29px;
-  margin-left: 15px;
-  padding-bottom: 7px;
-  margin-bottom: 0;
-  display: inline-block;
-  width: auto;
-  max-width: 97%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  margin-left: 1rem;
+  padding-top: 5px;
 }
 
-.ellipsis {
-  padding-left: 1em;
+.form-control-title {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+  font-size: 29px;
+  padding-top: 7px;
+  padding-left: 14px;
 }
 
-.reverse-ellipsis {
-  /* Your move. */
-  text-overflow: clip;
-  position: relative;
-  background-color: #FFF;
-}
-
-.reverse-ellipsis:before {
-  content: '\02026';
-  position: absolute;
-  z-index: 1;
-  left: -1em;
-  background-color: inherit;
-  padding-left: 1em;
-  margin-left: 0.5em;
-}
-
-.reverse-ellipsis span {
-  min-width: 100%;
-  position: relative;
-  display: inline-block;
-  float: right;
-  overflow: visible;
-  background-color: inherit;
-  text-indent: 0.5em;
-}
-
-.reverse-ellipsis span:before {
-  content: '';
-  position: absolute;
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  background-color: inherit;
-  z-index: 200;
-  left: -.5em;
+.form-control-title-input:after, .form-control-title:after {
+  content: "\200E‎";
 }
 
-
-
 .noOverflow {
     overflow: hidden !important;
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/b7c3fec9/zeppelin-web/src/assets/styles/looknfeel/report.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/assets/styles/looknfeel/report.css b/zeppelin-web/src/assets/styles/looknfeel/report.css
index 11fca67..1bd1d06 100644
--- a/zeppelin-web/src/assets/styles/looknfeel/report.css
+++ b/zeppelin-web/src/assets/styles/looknfeel/report.css
@@ -58,7 +58,7 @@ body {
   visibility: hidden;
 }
 
-.noteAction .form-control-static2 > span {
+.noteAction .form-control-title > span {
   visibility: visible;
 }
 

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/b7c3fec9/zeppelin-web/src/assets/styles/looknfeel/simple.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/assets/styles/looknfeel/simple.css b/zeppelin-web/src/assets/styles/looknfeel/simple.css
index 55a6484..a6a721d 100644
--- a/zeppelin-web/src/assets/styles/looknfeel/simple.css
+++ b/zeppelin-web/src/assets/styles/looknfeel/simple.css
@@ -89,7 +89,7 @@ body {
   visibility: hidden;
 }
 
-.noteAction .form-control-static2 > span {
+.noteAction .form-control-title > span {
   visibility: visible;
 }
 


Mime
View raw message