Browse Source

HUE-6077 [frontend] Update bootstrap editable to 1.4.6 and fix a positioning bug

Enrico Berti 8 years ago
parent
commit
73750ea

+ 226 - 50
desktop/core/src/desktop/static/desktop/ext/css/bootstrap-editable.css

@@ -1,8 +1,8 @@
-/*! X-editable - v1.4.3 
-* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
-* http://github.com/vitalets/x-editable
-* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
-
+/*! X-editable - v1.4.6
+* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
+* http://github.com/vitalets/x-editable
+* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
+
 .editableform {
     margin-bottom: 0; /* overwrites bootstrap margin */
 }
@@ -18,41 +18,45 @@
    vertical-align: top;
    margin-left: 7px;
    /* inline-block emulation for IE7*/
-   zoom: 1; 
+   zoom: 1;
    *display: inline;
 }
 
-
+.editable-buttons.editable-buttons-bottom {
+   display: block;
+   margin-top: 7px;
+   margin-left: 0;
+}
 
 .editable-input {
-    vertical-align: top; 
+    vertical-align: top;
     display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
     width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
     white-space: normal; /* reset white-space decalred in parent*/
    /* display-inline emulation for IE7*/
-   zoom: 1; 
-   *display: inline;   
+   zoom: 1;
+   *display: inline;
 }
 
 .editable-buttons .editable-cancel {
-   margin-left: 7px; 
+   margin-left: 7px;
 }
 
 /*for jquery-ui buttons need set height to look more pretty*/
 .editable-buttons button.ui-button-icon-only {
-   height: 24px; 
+   height: 24px;
    width: 30px;
 }
 
 .editableform-loading {
-    background: url('../img/loading.gif') center center no-repeat;  
+    background: url('../img/loading.gif') center center no-repeat;
     height: 25px;
-    width: auto; 
-    min-width: 25px; 
+    width: auto;
+    min-width: 25px;
 }
 
 .editable-inline .editableform-loading {
-    background-position: left 5px;      
+    background-position: left 5px;
 }
 
  .editable-error-block {
@@ -64,35 +68,43 @@
 
 /*add padding for jquery ui*/
 .editable-error-block.ui-state-error {
-    padding: 3px;  
-}  
+    padding: 3px;
+}
 
 .editable-error {
-   color: red;  
+   color: red;
 }
 
+/* ---- For specific types ---- */
+
 .editableform .editable-date {
-    padding: 0; 
+    padding: 0;
     margin: 0;
     float: left;
 }
 
+/* move datepicker icon to center of add-on button. See https://github.com/vitalets/x-editable/issues/183 */
+.editable-inline .add-on .icon-th {
+   margin-top: 3px;
+   margin-left: 1px;
+}
+
 
 /* checklist vertical alignment */
-.editable-checklist label input[type="checkbox"], 
+.editable-checklist label input[type="checkbox"],
 .editable-checklist label span {
     vertical-align: middle;
     margin: 0;
 }
 
 .editable-checklist label {
-    white-space: nowrap; 
+    white-space: nowrap;
 }
 
 /* set exact width of textarea to fit buttons toolbar */
 .editable-wysihtml5 {
-    width: 566px; 
-    height: 250px; 
+    width: 566px;
+    height: 250px;
 }
 
 /* clear button shown as link in date inputs */
@@ -107,76 +119,92 @@
 .editable-clear-x {
    background: url('../img/clear.png') center center no-repeat;
    display: block;
-   width: 13px;    
+   width: 13px;
    height: 13px;
    position: absolute;
    opacity: 0.6;
    z-index: 100;
 
+   top: 50%;
+   right: 6px;
+   margin-top: -6px;
+
 }
 
 .editable-clear-x:hover {
    opacity: 1;
-}
-.editable-container {
+}
+
+.editable-pre-wrapped {
+   white-space: pre-wrap;
+}
+.editable-container.editable-popup {
     max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
-}  
+}
 
 .editable-container.popover {
-/*   width: 300px;*/  /* debug */
     width: auto; /* without this rule popover does not stretch */
 }
 
 .editable-container.editable-inline {
-    display: inline-block; 
+    display: inline-block;
     vertical-align: middle;
     width: auto;
     /* inline-block emulation for IE7*/
-    zoom: 1; 
-    *display: inline;    
+    zoom: 1;
+    *display: inline;
 }
 
 .editable-container.ui-widget {
    font-size: inherit;  /* jqueryui widget font 1.1em too big, overwrite it */
-}
-.editable-click, 
-a.editable-click, 
+   z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
+}
+.editable-click,
+a.editable-click,
 a.editable-click:hover {
     text-decoration: none;
     border-bottom: dashed 1px #0088cc;
 }
 
-.editable-click.editable-disabled, 
-a.editable-click.editable-disabled, 
+.editable-click.editable-disabled,
+a.editable-click.editable-disabled,
 a.editable-click.editable-disabled:hover {
-   color: #585858;  
+   color: #585858;
    cursor: default;
    border-bottom: none;
 }
 
-.editable-empty, .editable-empty:hover{
-  font-style: italic; 
-  color: #DD1144;  
-  border-bottom: none;
+.editable-empty, .editable-empty:hover, .editable-empty:focus{
+  font-style: italic;
+  color: #DD1144;
+  /* border-bottom: none; */
   text-decoration: none;
 }
 
 .editable-unsaved {
-  font-weight: bold; 
+  font-weight: bold;
 }
 
 .editable-unsaved:after {
 /*    content: '*'*/
 }
 
+.editable-bg-transition {
+  -webkit-transition: background-color 1400ms ease-out;
+  -moz-transition: background-color 1400ms ease-out;
+  -o-transition: background-color 1400ms ease-out;
+  -ms-transition: background-color 1400ms ease-out;
+  transition: background-color 1400ms ease-out;
+}
+
 /*see https://github.com/vitalets/x-editable/issues/139 */
 .form-horizontal .editable
-{ 
+{
     padding-top: 5px;
     display:inline-block;
 }
 
-
+
 /*!
  * Datepicker for Bootstrap
  *
@@ -188,7 +216,6 @@ a.editable-click.editable-disabled:hover {
  */
 .datepicker {
   padding: 4px;
-  margin-top: 1px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
@@ -291,6 +318,7 @@ a.editable-click.editable-disabled:hover {
   border-color: #fdf59a #fdf59a #fbed50;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  color: #000;
 }
 .datepicker table tr td.today:hover,
 .datepicker table tr td.today:hover:hover,
@@ -324,6 +352,124 @@ a.editable-click.editable-disabled:hover {
 .datepicker table tr td.today.disabled:hover.active {
   background-color: #fbf069 \9;
 }
+.datepicker table tr td.today:hover:hover {
+  color: #000;
+}
+.datepicker table tr td.today.active:hover {
+  color: #fff;
+}
+.datepicker table tr td.range,
+.datepicker table tr td.range:hover,
+.datepicker table tr td.range.disabled,
+.datepicker table tr td.range.disabled:hover {
+  background: #eeeeee;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.datepicker table tr td.range.today,
+.datepicker table tr td.range.today:hover,
+.datepicker table tr td.range.today.disabled,
+.datepicker table tr td.range.today.disabled:hover {
+  background-color: #f3d17a;
+  background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a);
+  background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
+  background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a);
+  background-image: -o-linear-gradient(top, #f3c17a, #f3e97a);
+  background-image: linear-gradient(top, #f3c17a, #f3e97a);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
+  border-color: #f3e97a #f3e97a #edde34;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.datepicker table tr td.range.today:hover,
+.datepicker table tr td.range.today:hover:hover,
+.datepicker table tr td.range.today.disabled:hover,
+.datepicker table tr td.range.today.disabled:hover:hover,
+.datepicker table tr td.range.today:active,
+.datepicker table tr td.range.today:hover:active,
+.datepicker table tr td.range.today.disabled:active,
+.datepicker table tr td.range.today.disabled:hover:active,
+.datepicker table tr td.range.today.active,
+.datepicker table tr td.range.today:hover.active,
+.datepicker table tr td.range.today.disabled.active,
+.datepicker table tr td.range.today.disabled:hover.active,
+.datepicker table tr td.range.today.disabled,
+.datepicker table tr td.range.today:hover.disabled,
+.datepicker table tr td.range.today.disabled.disabled,
+.datepicker table tr td.range.today.disabled:hover.disabled,
+.datepicker table tr td.range.today[disabled],
+.datepicker table tr td.range.today:hover[disabled],
+.datepicker table tr td.range.today.disabled[disabled],
+.datepicker table tr td.range.today.disabled:hover[disabled] {
+  background-color: #f3e97a;
+}
+.datepicker table tr td.range.today:active,
+.datepicker table tr td.range.today:hover:active,
+.datepicker table tr td.range.today.disabled:active,
+.datepicker table tr td.range.today.disabled:hover:active,
+.datepicker table tr td.range.today.active,
+.datepicker table tr td.range.today:hover.active,
+.datepicker table tr td.range.today.disabled.active,
+.datepicker table tr td.range.today.disabled:hover.active {
+  background-color: #efe24b \9;
+}
+.datepicker table tr td.selected,
+.datepicker table tr td.selected:hover,
+.datepicker table tr td.selected.disabled,
+.datepicker table tr td.selected.disabled:hover {
+  background-color: #9e9e9e;
+  background-image: -moz-linear-gradient(top, #b3b3b3, #808080);
+  background-image: -ms-linear-gradient(top, #b3b3b3, #808080);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
+  background-image: -webkit-linear-gradient(top, #b3b3b3, #808080);
+  background-image: -o-linear-gradient(top, #b3b3b3, #808080);
+  background-image: linear-gradient(top, #b3b3b3, #808080);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
+  border-color: #808080 #808080 #595959;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datepicker table tr td.selected:hover,
+.datepicker table tr td.selected:hover:hover,
+.datepicker table tr td.selected.disabled:hover,
+.datepicker table tr td.selected.disabled:hover:hover,
+.datepicker table tr td.selected:active,
+.datepicker table tr td.selected:hover:active,
+.datepicker table tr td.selected.disabled:active,
+.datepicker table tr td.selected.disabled:hover:active,
+.datepicker table tr td.selected.active,
+.datepicker table tr td.selected:hover.active,
+.datepicker table tr td.selected.disabled.active,
+.datepicker table tr td.selected.disabled:hover.active,
+.datepicker table tr td.selected.disabled,
+.datepicker table tr td.selected:hover.disabled,
+.datepicker table tr td.selected.disabled.disabled,
+.datepicker table tr td.selected.disabled:hover.disabled,
+.datepicker table tr td.selected[disabled],
+.datepicker table tr td.selected:hover[disabled],
+.datepicker table tr td.selected.disabled[disabled],
+.datepicker table tr td.selected.disabled:hover[disabled] {
+  background-color: #808080;
+}
+.datepicker table tr td.selected:active,
+.datepicker table tr td.selected:hover:active,
+.datepicker table tr td.selected.disabled:active,
+.datepicker table tr td.selected.disabled:hover:active,
+.datepicker table tr td.selected.active,
+.datepicker table tr td.selected:hover.active,
+.datepicker table tr td.selected.disabled.active,
+.datepicker table tr td.selected.disabled:hover.active {
+  background-color: #666666 \9;
+}
 .datepicker table tr td.active,
 .datepicker table tr td.active:hover,
 .datepicker table tr td.active.disabled,
@@ -447,18 +593,19 @@ a.editable-click.editable-disabled:hover {
 .datepicker table tr td span.active.disabled:hover.active {
   background-color: #003399 \9;
 }
-.datepicker table tr td span.old {
+.datepicker table tr td span.old,
+.datepicker table tr td span.new {
   color: #999999;
 }
-.datepicker th.switch {
+.datepicker th.datepicker-switch {
   width: 145px;
 }
 .datepicker thead tr:first-child th,
-.datepicker tfoot tr:first-child th {
+.datepicker tfoot tr th {
   cursor: pointer;
 }
 .datepicker thead tr:first-child th:hover,
-.datepicker tfoot tr:first-child th:hover {
+.datepicker tfoot tr th:hover {
   background: #eeeeee;
 }
 .datepicker .cw {
@@ -478,3 +625,32 @@ a.editable-click.editable-disabled:hover {
   width: 16px;
   height: 16px;
 }
+.input-daterange input {
+  text-align: center;
+}
+.input-daterange input:first-child {
+  -webkit-border-radius: 3px 0 0 3px;
+  -moz-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
+}
+.input-daterange input:last-child {
+  -webkit-border-radius: 0 3px 3px 0;
+  -moz-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
+}
+.input-daterange .add-on {
+  display: inline-block;
+  width: auto;
+  min-width: 16px;
+  height: 18px;
+  padding: 4px 5px;
+  font-weight: normal;
+  line-height: 18px;
+  text-align: center;
+  text-shadow: 0 1px 0 #ffffff;
+  vertical-align: middle;
+  background-color: #eeeeee;
+  border: 1px solid #ccc;
+  margin-left: -5px;
+  margin-right: -5px;
+}

File diff suppressed because it is too large
+ 1 - 6
desktop/core/src/desktop/static/desktop/ext/js/bootstrap-editable.min.js


+ 10 - 0
desktop/core/src/desktop/templates/common_header_footer_components.mako

@@ -426,6 +426,16 @@ from metadata.conf import has_optimizer, OPTIMIZER
 
 <script type="text/javascript">
   $(document).ready(function () {
+    if ($.fn.editableform) {
+      $.fn.editableform.buttons =
+          '<button type="submit" class="btn btn-primary editable-submit disable-feedback">' +
+          '<i class="fa fa-fw fa-check"></i>' +
+          '</button>' +
+          '<button type="button" class="btn btn-default editable-cancel">' +
+          '<i class="fa fa-fw fa-times"></i>' +
+          '</button>';
+    }
+
     $(document).on("info", function (e, msg) {
       $.jHueNotify.info(msg);
     });

File diff suppressed because it is too large
+ 0 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css


+ 4 - 0
desktop/libs/notebook/src/notebook/static/notebook/less/notebook.less

@@ -1305,4 +1305,8 @@
     top: 10px;
     z-index: 1000;
   }
+
+  .query-name {
+    margin-left: 28px;
+  }
 }

+ 1 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -361,7 +361,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
           <li data-bind="visible: isSaved() && ! isHistory() && ! parentSavedQueryUuid()" style="display: none" class="no-horiz-padding muted">
             <a title="${ _('This is a saved query') }"><i class="fa fa-fw fa-file-o"></i></a>
           </li>
-          <li class="query-name no-horiz-padding" style="margin-left: 6px">
+          <li class="query-name no-horiz-padding">
             <a href="javascript:void(0)">
               <div class="notebook-name-desc" data-bind="editable: name, editableOptions: { inputclass: 'notebook-name-input', enabled: true, placement: 'bottom', emptytext: '${_ko('Add a name...')}', tpl: '<input type=\'text\' maxlength=\'255\'>' }"></div>
             </a>

Some files were not shown because too many files changed in this diff