浏览代码

HUE-5906 [autocomplete] Fix issues with the autocomplete dropdown in IE 11

This takes care of a bunch of issues in IE 11 and Firefox.
Johan Ahlen 8 年之前
父节点
当前提交
94748e3

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 24 - 0
desktop/core/src/desktop/static/desktop/less/hue-attributes.less

@@ -58,3 +58,27 @@
   -moz-box-shadow: @left @top 8px rgba(0,0,0,.18);
   box-shadow: @left @top 6px 0 rgba(0, 0, 0, 0.18), @left @top 8px 0 rgba(0, 0, 0, 0.13);
 }
+
+// Flexbox mixins
+
+.display-flex() {
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+}
+
+.flex(@flex: initial) {
+  -webkit-box-flex: @flex;
+  -moz-box-flex: @flex;
+  -ms-flex: @flex;
+  -webkit-flex: @flex;
+  flex: @flex;
+}
+
+.flex-direction(@direction: row) {
+  -webkit-flex-direction: @direction;
+  -ms-flex-direction: @direction;
+  flex-direction: @direction;
+}

+ 46 - 55
desktop/core/src/desktop/static/desktop/less/hue-autocomplete.less

@@ -20,71 +20,45 @@
 
 .hue-ace-autocompleter {
   position: fixed;
-  display: flex;
+  .display-flex();
   z-index: 1000;
   max-height: 250px;
   align-items: flex-start;
 }
 
-.autocompleter-suggestions {
-  flex: 0 0 300px;
-  z-index: 1002;
-  display: flex;
-  flex-direction: column;
+.autocompleter-suggestions,
+.autocompleter-details {
+  .flex(0 0 300px);
+  .display-flex();
+  .flex-direction(column);
   width: 300px;
   max-height: 250px;
+  overflow: hidden;
 
   border: 1px solid #DDD;
   border-radius: 2px;
   background-color: @cui-white;
-  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.18);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
+  .hue-box-shadow-bottom();
+}
+
+.autocompleter-suggestions {
+  z-index: 1002;
 }
 
 .autocompleter-details {
-  flex: 0 0 300px;
   z-index: 1001;
-  display: flex;
-  flex-direction: column;
-  width: 300px;
   margin-left: 5px;
-  max-height: 250px;
-
-  border: 1px solid #DDD;
-  border-radius: 2px;
-  background-color: @cui-white;
-  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.18);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
 }
 
 .autocompleter-header {
-  flex: 0 0 20px;
+  .flex(0 0 20px);
   padding: 5px;
   background-color: #F9F9F9;
   line-height: 20px;
   font-size: 14px;
-}
-
-.autocompleter-list {
-  flex: 0 0 300px;
-  width: 300px;
-  overflow-y: auto;
-}
-
-.autocompleter-list > div {
-  height: 19px;
-  clear: both;
-  background-color: @cui-white;
-  padding:3px;
-  cursor: pointer;
-}
-
-.autocompleter-list > div:hover {
-  background-color: @hue-primary-color-light;
-}
-
-.autocompleter-list > div.selected {
-  background-color: @hue-primary-color-light;
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .autocompleter-spinner {
@@ -94,13 +68,6 @@
   margin-top: 1px;
 }
 
-.autocompleter-entries {
-  display: flex;
-  position: relative;
-  flex: 1 1 100%;
-  overflow: hidden;
-}
-
 .autocompleter-categories {
   display: inline-block;
 }
@@ -118,15 +85,30 @@
   cursor: default;
 }
 
+.autocompleter-entries {
+  max-height: 225px;
+  position: relative;
+  overflow-y: auto;
+}
+
 .autocompleter-suggestion {
-  display: flex;
-  flex-direction: row;
+  height: 19px;
+  clear: both;
+  background-color: @cui-white;
+  padding:3px;
+  cursor: pointer;
+  position: relative;
   font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;
   line-height: 18px;
 }
 
+.autocompleter-suggestion:hover,
+.autocompleter-suggestion.selected {
+  background-color: @hue-primary-color-light;
+}
+
 .autocompleter-suggestion-value {
-  flex: 1 1 100%;
+  width: 85%;
   margin-left: 3px;
   margin-right: 6px;
   overflow-x: hidden;
@@ -139,10 +121,14 @@
 }
 
 .autocompleter-suggestion-meta {
-  flex: 1;
+  position: absolute;
+  background-color: inherit;
+  z-index: 1;
+  right: 0;
+  top: 3px;
+  padding-right: 3px;
   color: #737373;
   white-space: nowrap;
-  margin-right: 3px;
 }
 
 .autocompleter-dot {
@@ -154,8 +140,13 @@
 }
 
 .autocompleter-details-contents {
-  flex: 1 1 100%;
+  max-height: 225px;
+  position: relative;
   overflow-y: auto;
+}
+
+// IE 11 fix to prevent overflow
+.autocompleter-details-contents-inner {
   padding: 7px;
 }
 

+ 80 - 62
desktop/libs/notebook/src/notebook/templates/hue_ace_autocompleter.mako

@@ -34,16 +34,14 @@ from desktop.views import _ko
           <div class="autocompleter-spinner"><!-- ko hueSpinner: { spin: suggestions.loading, size: 'small' } --><!-- /ko --></div>
         </div>
         <!-- /ko -->
-        <div class="autocompleter-entries">
-          <div class="autocompleter-list" data-bind="foreach: suggestions.filtered">
-            <div class="autocompleter-suggestion" data-bind="click: function () { $parent.selectedIndex($index()); $parent.insertSuggestion(); $parent.editor().focus(); },
-                css: { 'selected': $index() === $parent.selectedIndex() },
-                event: { 'mouseover': function () { $parent.hoveredIndex($index()); }, 'mouseout': function () { $parent.hoveredIndex(null); } }">
-              <div class="autocompleter-suggestion-value">
-                <div class="autocompleter-dot" data-bind="style: { 'background-color': category.color }"></div> <span data-bind="matchedText: { suggestion: $data, filter: $parent.suggestions.filter }"></span> <!-- ko if: details && details.primary_key === 'true' --><i class="fa fa-key"></i><!-- /ko -->
-              </div>
-              <div class="autocompleter-suggestion-meta"><!-- ko if: popular --><i class="fa fa-star-o popular-color"></i> <!-- /ko --><span data-bind="text: meta"></span></div>
+        <div class="autocompleter-entries" data-bind="foreach: suggestions.filtered">
+          <div class="autocompleter-suggestion" data-bind="click: function () { $parent.selectedIndex($index()); $parent.insertSuggestion(); $parent.editor().focus(); },
+              css: { 'selected': $index() === $parent.selectedIndex() },
+              event: { 'mouseover': function () { $parent.hoveredIndex($index()); }, 'mouseout': function () { $parent.hoveredIndex(null); } }">
+            <div class="autocompleter-suggestion-value">
+              <div class="autocompleter-dot" data-bind="style: { 'background-color': category.color }"></div> <span data-bind="matchedText: { suggestion: $data, filter: $parent.suggestions.filter }"></span> <!-- ko if: details && details.primary_key === 'true' --><i class="fa fa-key"></i><!-- /ko -->
             </div>
+            <div class="autocompleter-suggestion-meta"><!-- ko if: popular --><i class="fa fa-star-o popular-color"></i> <!-- /ko --><span data-bind="text: meta"></span></div>
           </div>
         </div>
       </div>
@@ -61,8 +59,10 @@ from desktop.views import _ko
     <div class="autocompleter-details">
       <div class="autocompleter-header"><i class="fa fa-fw fa-superscript"></i> <span data-bind="text: details.signature.substring(0, details.signature.indexOf('('));"></span></div>
       <div class="autocompleter-details-contents">
-        <div class="details-code" data-bind="text: details.signature"></div>
-        <div class="details-comment" data-bind="text: details.description"></div>
+        <div class="autocompleter-details-contents-inner">
+          <div class="details-code" data-bind="text: details.signature"></div>
+          <div class="details-comment" data-bind="text: details.description"></div>
+        </div>
       </div>
     </div>
   </script>
@@ -74,17 +74,19 @@ from desktop.views import _ko
     <div class="autocompleter-details">
       <div class="autocompleter-header"><i class="fa fa-fw" data-bind="css: { 'fa-eye': details.type.toLowerCase() !== 'table', 'fa-table': details.type.toLowerCase() === 'table' }"></i> <span data-bind="text: details.name"></span></div>
       <div class="autocompleter-details-contents">
-        <div class="details-attribute" ><i class="fa fa-database fa-fw"></i> <span data-bind="text: details.database"></span></div>
-        <!-- ko if: typeof details.popularity !== 'undefined' -->
-        <div class="details-popularity margin-left-5" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.popularity.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
-          <div class="progress">
-            <div class="bar" data-bind="style: { 'width': details.popularity.relativePopularity + '%' }"></div>
+        <div class="autocompleter-details-contents-inner">
+          <div class="details-attribute" ><i class="fa fa-database fa-fw"></i> <span data-bind="text: details.database"></span></div>
+          <!-- ko if: typeof details.popularity !== 'undefined' -->
+          <div class="details-popularity margin-left-5" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.popularity.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
+            <div class="progress">
+              <div class="bar" data-bind="style: { 'width': details.popularity.relativePopularity + '%' }"></div>
+            </div>
           </div>
+          <!-- /ko -->
+          <!-- ko if: typeof details.comment !== 'undefined' && details.comment !== null -->
+          <div class="details-comment" data-bind="matchedText: { suggestion: $data, filter: $parent.suggestions.filter, isComment: true }"></div>
+          <!-- /ko -->
         </div>
-        <!-- /ko -->
-        <!-- ko if: typeof details.comment !== 'undefined' && details.comment !== null -->
-        <div class="details-comment" data-bind="matchedText: { suggestion: $data, filter: $parent.suggestions.filter, isComment: true }"></div>
-        <!-- /ko -->
       </div>
     </div>
   </script>
@@ -94,22 +96,24 @@ from desktop.views import _ko
     <div class="autocompleter-details">
       <div class="autocompleter-header"><i class="fa fa-fw fa-columns"></i> <span data-bind="text: details.name"></span></div>
       <div class="autocompleter-details-contents">
-        <div class="details-attribute" ><i class="fa fa-database fa-fw"></i> <span data-bind="text: details.database"></span></div>
-        <div class="details-attribute" ><i class="fa fa-table fa-fw"></i> <span data-bind="text: details.table"></span></div>
-        <!-- ko if: typeof details.primary_key !== 'undefined' && details.primary_key === 'true' -->
-        <div class="details-attribute" ><i class="fa fa-key fa-fw"></i> ${ _('Primary key') }</div>
-        <!-- /ko -->
-        <!-- ko if: typeof details.popularity !== 'undefined' -->
-        <br/>
-        <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.popularity.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
-          <div class="progress">
-            <div class="bar" data-bind="style: { 'width': details.popularity.relativePopularity + '%' }"></div>
+        <div class="autocompleter-details-contents-inner">
+          <div class="details-attribute" ><i class="fa fa-database fa-fw"></i> <span data-bind="text: details.database"></span></div>
+          <div class="details-attribute" ><i class="fa fa-table fa-fw"></i> <span data-bind="text: details.table"></span></div>
+          <!-- ko if: typeof details.primary_key !== 'undefined' && details.primary_key === 'true' -->
+          <div class="details-attribute" ><i class="fa fa-key fa-fw"></i> ${ _('Primary key') }</div>
+          <!-- /ko -->
+          <!-- ko if: typeof details.popularity !== 'undefined' -->
+          <br/>
+          <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.popularity.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
+            <div class="progress">
+              <div class="bar" data-bind="style: { 'width': details.popularity.relativePopularity + '%' }"></div>
+            </div>
           </div>
+          <!-- /ko -->
+          <!-- ko if: typeof details.comment !== 'undefined' && details.comment !== null -->
+          <div class="details-comment" data-bind="matchedText: { suggestion: $data, filter: $parent.suggestions.filter, isComment: true }"></div>
+          <!-- /ko -->
         </div>
-        <!-- /ko -->
-        <!-- ko if: typeof details.comment !== 'undefined' && details.comment !== null -->
-        <div class="details-comment" data-bind="matchedText: { suggestion: $data, filter: $parent.suggestions.filter, isComment: true }"></div>
-        <!-- /ko -->
       </div>
     </div>
     <!-- /ko -->
@@ -120,8 +124,10 @@ from desktop.views import _ko
 
   <script type="text/html" id="autocomplete-details-hdfs">
     <div class="autocompleter-details">
-      <div class="autocompleter-header"><i class="fa fa-fw" data-bind="css: { 'fa-folder-o': details.type === 'dir', 'fa-file-o': details.type !== 'dir' }"></i> <span data-bind="text: details.name"></span></div>
-      <div class="autocompleter-details-contents" data-bind="template: { name: 'hdfs-details-content', data: { definition: details } }"></div>
+      <div class="autocompleter-details-contents-inner">
+        <div class="autocompleter-header"><i class="fa fa-fw" data-bind="css: { 'fa-folder-o': details.type === 'dir', 'fa-file-o': details.type !== 'dir' }"></i> <span data-bind="text: details.name"></span></div>
+        <div class="autocompleter-details-contents" data-bind="template: { name: 'hdfs-details-content', data: { definition: details } }"></div>
+      </div>
     </div>
   </script>
 
@@ -129,10 +135,12 @@ from desktop.views import _ko
     <div class="autocompleter-details">
       <div class="autocompleter-header"><i class="fa fa-fw fa-star-o"></i> ${ _('Popular join')}</div>
       <div class="autocompleter-details-contents">
-        <div class="details-code" data-bind="text: value"></div>
-        <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
-          <div class="progress">
-            <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
+        <div class="autocompleter-details-contents-inner">
+          <div class="details-code" data-bind="text: value"></div>
+          <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
+            <div class="progress">
+              <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -143,10 +151,12 @@ from desktop.views import _ko
     <div class="autocompleter-details">
       <div class="autocompleter-header"><i class="fa fa-fw fa-star-o"></i> ${ _('Popular join condition')}</div>
       <div class="autocompleter-details-contents">
-        <div class="details-code" data-bind="text: value"></div>
-        <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
-          <div class="progress">
-            <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
+        <div class="autocompleter-details-contents-inner">
+          <div class="details-code" data-bind="text: value"></div>
+          <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
+            <div class="progress">
+              <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -157,13 +167,15 @@ from desktop.views import _ko
     <div class="autocompleter-details">
       <div class="autocompleter-header"><i class="fa fa-fw fa-superscript"></i> ${ _('Popular aggregate')} - <span data-bind="text: details.aggregateFunction"></span></div>
       <div class="autocompleter-details-contents">
-        <div class="details-code" data-bind="text: value"></div>
-        <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
-          <div class="progress">
-            <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
+        <div class="autocompleter-details-contents-inner">
+          <div class="details-code" data-bind="text: value"></div>
+          <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
+            <div class="progress">
+              <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
+            </div>
           </div>
+          <div class="details-comment" data-bind="text: details.function.description"></div>
         </div>
-        <div class="details-comment" data-bind="text: details.function.description"></div>
       </div>
     </div>
   </script>
@@ -181,10 +193,12 @@ from desktop.views import _ko
     <div class="autocompleter-details">
       <div class="autocompleter-header"><i class="fa fa-fw fa-star-o"></i> ${ _('Popular group by')}</div>
       <div class="autocompleter-details-contents">
-        <div class="details-code" data-bind="text: value"></div>
-        <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Workload percent') } ' + details.workloadPercent + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
-          <div class="progress">
-            <div class="bar" data-bind="style: { 'width': details.workloadPercent + '%' }"></div>
+        <div class="autocompleter-details-contents-inner">
+          <div class="details-code" data-bind="text: value"></div>
+          <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Workload percent') } ' + details.workloadPercent + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
+            <div class="progress">
+              <div class="bar" data-bind="style: { 'width': details.workloadPercent + '%' }"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -195,10 +209,12 @@ from desktop.views import _ko
     <div class="autocompleter-details">
       <div class="autocompleter-header"><i class="fa fa-fw fa-star-o"></i> ${ _('Popular order by')}</div>
       <div class="autocompleter-details-contents">
-        <div class="details-code" data-bind="text: value"></div>
-        <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Workload percent') } ' + details.workloadPercent + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
-          <div class="progress">
-            <div class="bar" data-bind="style: { 'width': details.workloadPercent + '%' }"></div>
+        <div class="autocompleter-details-contents-inner">
+          <div class="details-code" data-bind="text: value"></div>
+          <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Workload percent') } ' + details.workloadPercent + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
+            <div class="progress">
+              <div class="bar" data-bind="style: { 'width': details.workloadPercent + '%' }"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -209,10 +225,12 @@ from desktop.views import _ko
     <div class="autocompleter-details">
       <div class="autocompleter-header"><i class="fa fa-fw fa-star-o"></i> ${ _('Popular filter')}</div>
       <div class="autocompleter-details-contents">
-        <div class="details-code" data-bind="text: value"></div>
-        <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
-          <div class="progress">
-            <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
+        <div class="autocompleter-details-contents-inner">
+          <div class="details-code" data-bind="text: value"></div>
+          <div class="details-popularity margin-top-10" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-color"></i>
+            <div class="progress">
+              <div class="bar" data-bind="style: { 'width': details.relativePopularity + '%' }"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -450,7 +468,7 @@ from desktop.views import _ko
 
       HueAceAutocompleter.prototype.scrollSelectionIntoView = function () {
         var self = this;
-        var $autocompleterList = $('.autocompleter-list');
+        var $autocompleterList = $('.autocompleter-entries');
         var selected = $autocompleterList.children().eq(self.selectedIndex());
         var selectedTop = selected.position().top;
         if (selectedTop < 0) {

部分文件因为文件数量过多而无法显示