Browse Source

HUE-5674 [editor] Detach the autocomplete dropdown details panel

This offsets the details panel to prevent a jumpy feeling when shown
Johan Ahlen 8 years ago
parent
commit
763b1d3566
1 changed files with 78 additions and 52 deletions
  1. 78 52
      desktop/libs/notebook/src/notebook/templates/hue_ace_autocompleter.mako

+ 78 - 52
desktop/libs/notebook/src/notebook/templates/hue_ace_autocompleter.mako

@@ -23,12 +23,37 @@ from desktop.views import _ko
   <style>
     .hue-ace-autocompleter {
       position: fixed;
+      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;
+      width: 300px;
+      max-height: 250px;
+
       border: 1px solid #DDD;
+      border-radius: 2px;
+      background-color: #FFF;
+      -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-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: #FFF;
       -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.18);
@@ -36,9 +61,11 @@ from desktop.views import _ko
     }
 
     .autocompleter-header {
-      flex: 1 1 22px;
+      flex: 0 0 20px;
       padding: 5px;
       background-color: #F9F9F9;
+      line-height: 20px;
+      font-size: 14px;
     }
 
     .autocompleter-list {
@@ -77,24 +104,15 @@ from desktop.views import _ko
       overflow: hidden;
     }
 
-    .autocompleter-details {
-      flex: 0 0 300px;
-      width: 300px;
-      overflow-y: auto;
-      padding: 10px;
-      border-left: 1px solid #F9F9F9;
-    }
-
     .autocompleter-categories {
       display: inline-block;
     }
 
     .autocompleter-categories > div {
       display: inline-block;
-      line-height: 14px;
       border-bottom: 2px solid transparent;
       cursor: pointer;
-      padding: 0 3px;
+      padding: 0 5px;
     }
 
     .autocompleter-categories > div.active {
@@ -138,73 +156,78 @@ from desktop.views import _ko
       border-radius: 4px;
     }
 
-    .details-header {
-      margin-bottom: 10px;
-      font-size: 15px;
-      font-weight: 300;
-    }
-
-    .details-code {
-      margin-bottom: 10px;
-      font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;
-    }
-
     .popular-icon {
       color: #EDB233;
     }
 
-    .autocomplete-details-table .details-attribute,
-    .autocomplete-details-table .details-popularity {
+    .autocompleter-details-contents {
+      flex: 1 1 100%;
+      overflow-y: auto;
+      padding: 7px;
+    }
+
+    .autocompleter-details-contents .details-attribute,
+    .autocompleter-details-contents .details-popularity {
       color: #737373;
       display: inline-block;
     }
 
-    .autocomplete-details-table .details-popularity .progress {
+    .autocompleter-details-contents .details-popularity .progress {
       display: inline-block;
       border-radius: 2px;
       height: 10px;
       width: 80px;
     }
 
-    .autocomplete-details-table .details-popularity .progress .bar {
+    .autocompleter-details-contents .details-popularity .progress .bar {
       background-color: #338bb8;
     }
 
-    .autocomplete-details-table .details-comment {
+    .autocompleter-details-contents .details-comment {
       margin-top: 5px;
       color: #737373;
       font-style: italic;
     }
+
+    .autocompleter-details-contents .details-code {
+      background-color: #F9F9F9;
+      padding:3px;
+      color: #737373;
+      font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;
+    }
+
   </style>
 
   <script type="text/html" id="hue-ace-autocompleter">
     <!-- ko if: active -->
     <div class="hue-ace-autocompleter" data-bind="style: { top: top() + 'px', left: left() + 'px' }">
-      <!-- ko if: suggestions.availableCategories().length > 1 || suggestions.loading() -->
-      <div class="autocompleter-header">
-        <!-- ko if: suggestions.availableCategories().length > 1 -->
-        <div class="autocompleter-categories" data-bind="foreach: suggestions.availableCategories()">
-          <div data-bind="text: label, css: { 'active': $parent.suggestions.activeCategory() === $data }, style: { 'border-color': $parent.suggestions.activeCategory() === $data ? color : 'transparent' }, click: function (data, event) { $parent.suggestions.activeCategory($data); event.stopPropagation(); $parent.editor().focus(); }"></div>
+      <div class="autocompleter-suggestions">
+        <!-- ko if: suggestions.availableCategories().length > 1 || suggestions.loading() -->
+        <div class="autocompleter-header">
+          <!-- ko if: suggestions.availableCategories().length > 1 -->
+          <div class="autocompleter-categories" data-bind="foreach: suggestions.availableCategories()">
+            <div data-bind="text: label, css: { 'active': $parent.suggestions.activeCategory() === $data }, style: { 'border-color': $parent.suggestions.activeCategory() === $data ? color : 'transparent' }, click: function (data, event) { $parent.suggestions.activeCategory($data); event.stopPropagation(); $parent.editor().focus(); }"></div>
+          </div>
+          <!-- /ko -->
+          <div class="autocompleter-spinner"><!-- ko hueSpinner: { spin: suggestions.loading, size: 'small' } --><!-- /ko --></div>
         </div>
         <!-- /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>
+        <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>
+              </div>
+              <div class="autocompleter-suggestion-meta"><!-- ko if: typeof popular !== 'undefined' && popular --><i class="fa fa-star-o popular-icon"></i> <!-- /ko --><span data-bind="text: meta"></span></div>
             </div>
-            <div class="autocompleter-suggestion-meta"><!-- ko if: typeof popular !== 'undefined' && popular --><i class="fa fa-star-o popular-icon"></i> <!-- /ko --><span data-bind="text: meta"></span></div>
           </div>
         </div>
-        <!-- ko if: focusedEntry() && focusedEntry().details -->
-        <!-- ko template: { name: 'autocomplete-details-' + focusedEntry().category.detailsTemplate, data: focusedEntry } --><!-- /ko -->
-        <!-- /ko -->
       </div>
+      <!-- ko if: focusedEntry() && focusedEntry().details -->
+      <!-- ko template: { name: 'autocomplete-details-' + focusedEntry().category.detailsTemplate, data: focusedEntry } --><!-- /ko -->
+      <!-- /ko -->
     </div>
     <!-- /ko -->
   </script>
@@ -217,8 +240,11 @@ from desktop.views import _ko
 
   <script type="text/html" id="autocomplete-details-udf">
     <div class="autocompleter-details">
-      <div class="details-code" data-bind="text: details.signature"></div>
-      <div data-bind="text: details.description"></div>
+      <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>
     </div>
   </script>
 
@@ -231,8 +257,8 @@ from desktop.views import _ko
   <script type="text/html" id="autocomplete-details-table">
     <!-- ko if: details -->
     <div class="autocompleter-details">
-      <div class="autocomplete-details-table">
-        <div class="details-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-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-icon"></i>
@@ -252,8 +278,8 @@ from desktop.views import _ko
   <script type="text/html" id="autocomplete-details-column">
     <!-- ko if: details -->
     <div class="autocompleter-details">
-      <div class="autocomplete-details-table">
-        <div class="details-header"><i class="fa fa-fw fa-columns"></i> <span data-bind="text: details.name"></span></div>
+      <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.popularity !== 'undefined' -->