Browse Source

HUE-8450 [editor] Various improvements for embedded mode

- Fix url update issue after execute
- Improve result header positioning
- Fix funky result header opacity
- Modal backdrop styling fixed
- Improved result header performance in IE and FF
- History query icon hidden
- Fixed alignment of inline filters in the editor tabs
- Impala header is not a link anymore
Johan Ahlen 7 years ago
parent
commit
6678c54081

File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


+ 1 - 1
desktop/core/src/desktop/static/desktop/js/hue.utils.js

@@ -239,7 +239,7 @@ window.hueUtils = window.hueUtils || (function () {
     }
 
     if (typeof IS_EMBEDDED !== 'undefined' && IS_EMBEDDED) {
-      var search = window.locations.search;
+      var search = window.location.search;
       if (extraSearch) {
         search += (search ? '&' : '?') + extraSearch
       }

+ 3 - 0
desktop/core/src/desktop/static/desktop/js/jquery.tableextender2.js

@@ -224,6 +224,9 @@
     if (typeof pos === 'function') {
       pos = pos();
     }
+    if (window.IS_EMBEDDED) {
+      pos = $('.hue-embedded-container').offset().top;
+    }
     var isFixed = false;
     if (pos > -1) {
       if (self.$element.offset().top < pos) {

+ 22 - 0
desktop/core/src/desktop/static/desktop/less/hue-embedded.less

@@ -81,10 +81,32 @@
     cursor: pointer !important;
   }
 
+  .app-header {
+    cursor: default !important;
+  }
+
   @import "hue-assist.less";
   @import "hue-autocomplete.less";
   @import "hue-cui-overrides.less";
   @import "hue-cross-version.less";
   @import "hue4.less";
   @import "home.less";
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  background-color: #000000;
+}
+.modal-backdrop.fade {
+  opacity: 0;
+}
+.modal-backdrop,
+.modal-backdrop.fade.in {
+  opacity: 0.8;
+  filter: alpha(opacity=80);
 }

+ 15 - 15
desktop/core/src/desktop/templates/hue.mako

@@ -66,9 +66,9 @@
     .hue-embedded-container {
       position: absolute !important;
       top: 60px !important;
-      left: 60px !important;
-      bottom: 60px !important;
-      right: 60px !important;
+      left: 0 !important;
+      bottom: 0 !important;
+      right: 0 !important;
     }
   </style>
 % endif
@@ -92,18 +92,22 @@
   // Bootstrap 2.3.2 relies on the hide css class presence for modals but doesn't remove it when opened for fade type
   // modals, a parent container might have it set to !important which will prevent the modal from showing. This
   // redefines all .hide definitions to exclude .modal.fade
-  for (var i = 0; i < document.styleSheets.length; i++) {
-    if (document.styleSheets[i] && document.styleSheets[i].cssRules) {
-      for (var j = document.styleSheets[i].cssRules.length - 1; j > 0; j--) {
-        if (document.styleSheets[i] && document.styleSheets[i].cssRules[j] && document.styleSheets[i].cssRules[j].selectorText === '.hide') {
-          var originalCssText = document.styleSheets[i].cssRules[j].cssText;
-          if (originalCssText.indexOf('!important') !== -1) {
-            document.styleSheets[i].deleteRule(j);
-            document.styleSheets[i].insertRule(originalCssText.replace('.hide', '.hide:not(.modal):not(.fade)'));
+  try {
+    for (var i = 0; i < document.styleSheets.length; i++) {
+      if (document.styleSheets[i] && document.styleSheets[i].cssRules) {
+        for (var j = document.styleSheets[i].cssRules.length - 1; j > 0; j--) {
+          if (document.styleSheets[i] && document.styleSheets[i].cssRules[j] && document.styleSheets[i].cssRules[j].selectorText === '.hide') {
+            var originalCssText = document.styleSheets[i].cssRules[j].cssText;
+            if (originalCssText.indexOf('!important') !== -1) {
+              document.styleSheets[i].deleteRule(j);
+              document.styleSheets[i].insertRule(originalCssText.replace('.hide', '.hide:not(.modal):not(.fade)'));
+            }
           }
         }
       }
     }
+  } catch (e) {
+    console.warn(e);
   }
 
   // Add modified URL for .clearable background
@@ -478,11 +482,7 @@ ${ commonshare() | n,unicode }
 <script src="${ static('desktop/js/jquery.horizontalscrollbar.js') }"></script>
 <script src="${ static('desktop/js/jquery.tablescroller.js') }"></script>
 <script src="${ static('desktop/js/jquery.tableextender.js') }"></script>
-% if IS_EMBEDDED.get():
-<script src="${ static('desktop/js/jquery.tableextender3.js') }"></script>
-% else:
 <script src="${ static('desktop/js/jquery.tableextender2.js') }"></script>
-% endif
 <script src="${ static('desktop/js/hue.colors.js') }"></script>
 <script src="${ static('desktop/ext/js/localforage.min.js') }"></script>
 <script src="${ static('desktop/js/dataCatalog.js') }"></script>

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


+ 1 - 1
desktop/libs/notebook/src/notebook/static/notebook/less/notebook.less

@@ -1047,7 +1047,7 @@
     border-radius: 5px !important;
     min-height: 17px !important;
     height: 17px !important;
-    margin: 0 3px 0 -2px;
+    margin: 0 3px 0 -2px !important;
     padding: 0 18px 0 5px !important;
   }
 

+ 32 - 5
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -166,7 +166,35 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
         <ul class="nav editor-nav">
           <li class="app-header">
             <!-- ko if: editorMode -->
-              <a data-bind="hueLink: '${ url('notebook:editor') }?type=' + editorType(), attr: { 'title': editorTypeTitle() + '${ _(' Editor') }'}" style="cursor: pointer">
+              % if IS_EMBEDDED.get():
+                <span>
+                  <!-- ko template: { name: 'app-icon-template', data: { icon: editorType() } } --><!-- /ko -->
+                  <!-- ko switch: editorType() -->
+                  <!-- ko case: 'impala' -->Impala<!-- /ko -->
+                  <!-- ko case: 'rdbms' -->DB Query<!-- /ko -->
+                  <!-- ko case: 'pig' -->Pig<!-- /ko -->
+                  <!-- ko case: 'java' -->Java<!-- /ko -->
+                  <!-- ko case: 'spark2' -->Spark<!-- /ko -->
+                  <!-- ko case: 'sqoop1' -->Sqoop 1<!-- /ko -->
+                  <!-- ko case: 'distcp' -->DistCp<!-- /ko -->
+                  <!-- ko case: 'shell' -->Shell<!-- /ko -->
+                  <!-- ko case: 'mapreduce' -->MapReduce<!-- /ko -->
+                  <!-- ko case: ['beeswax', 'hive'] -->Hive<!-- /ko -->
+                  <!-- ko case: 'mapreduce' -->MapReduce<!-- /ko -->
+                  <!-- ko case: 'spark' -->Scala<!-- /ko -->
+                  <!-- ko case: 'pyspark' -->PySpark<!-- /ko -->
+                  <!-- ko case: 'r' -->R<!-- /ko -->
+                  <!-- ko case: 'jar' -->Spark Submit Jar<!-- /ko -->
+                  <!-- ko case: 'py' -->Spark Submit Python<!-- /ko -->
+                  <!-- ko case: 'solr' -->Solr SQL<!-- /ko -->
+                  <!-- ko case: 'kafkasql' -->Kafka SQL<!-- /ko -->
+                  <!-- ko case: 'markdown' -->Markdown<!-- /ko -->
+                  <!-- ko case: 'text' -->Text<!-- /ko -->
+                  <!-- ko case: $default -->SQL<!-- /ko -->
+                  <!-- /ko -->
+                </span>
+              % else:
+                <a data-bind="hueLink: '${ url('notebook:editor') }?type=' + editorType(), attr: { 'title': editorTypeTitle() + '${ _(' Editor') }'}" style="cursor: pointer">
               <!-- ko template: { name: 'app-icon-template', data: { icon: editorType() } } --><!-- /ko -->
 
               <!-- ko switch: editorType() -->
@@ -192,10 +220,9 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
                 <!-- ko case: 'text' -->Text<!-- /ko -->
                 <!-- ko case: $default -->SQL<!-- /ko -->
               <!-- /ko -->
-              % if not IS_EMBEDDED.get():
               <!-- ko component: { name: 'hue-favorite-app', params: { hue4: IS_HUE_4, app: 'editor', interpreter: editorType() }} --><!-- /ko -->
-              % endif
               </a>
+              % endif
             <!-- /ko -->
             <!-- ko ifnot: editorMode -->
               <i class="fa fa-file-text-o app-icon" style="vertical-align: middle"></i>
@@ -204,6 +231,7 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
             <!-- /ko -->
           </li>
 
+          % if not IS_EMBEDDED.get():
           <!-- ko with: selectedNotebook -->
           <li class="no-horiz-padding">
             <a>&nbsp;</a>
@@ -229,7 +257,6 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
               ${ _("Scheduling on") }
             </a>
           </li>
-          % if not IS_EMBEDDED.get():
           <li class="query-name no-horiz-padding skip-width-calculation">
             <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>
@@ -240,8 +267,8 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
               <div class="notebook-name-desc" data-bind="editable: description, editableOptions: { type: 'textarea', enabled: true, placement: 'bottom', emptytext: '${_ko('Add a description...')}' }"></div>
             </a>
           </li>
-          % endif
           <!-- /ko -->
+          % endif
         </ul>
       </div>
     </div>

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