Browse Source

[core] Restyled autocompletes dropdowns

Enrico Berti 11 years ago
parent
commit
6c364ef

+ 22 - 7
desktop/core/static/css/hue3.css

@@ -1702,20 +1702,35 @@ border-bottom-left-radius: 0px;
 }
 
 
-#jHueHdfsAutocomplete ul li, #jHueHiveAutocomplete ul li {
-  cursor: pointer;
-}
+.jHueAutocomplete {
+   -webkit-border-radius: 0;
+      -moz-border-radius: 0;
+      border-radius: 0;
 
-#jHueHdfsAutocomplete ul li:hover, #jHueHdfsAutocomplete ul li.active, #jHueHiveAutocomplete ul li:hover, #jHueHiveAutocomplete ul li.active {
-  color: #FFFFFF;
-  background: #338BB8;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+  border-top: none;
 }
 
-#jHueHdfsAutocomplete .popover-content, #jHueHiveAutocomplete .popover-content {
+.jHueAutocomplete .popover-content {
+  padding: 0;
   max-height: 200px;
   overflow-y: auto;
 }
 
+.jHueAutocomplete .popover-content ul li {
+  cursor: pointer;
+  margin: 3px;
+  padding: 2px;
+}
+
+
+.jHueAutocomplete .popover-content ul li:hover, .jHueAutocomplete .popover-content ul li.active {
+  color: #FFFFFF;
+  background: #338BB8;
+}
+
 .fa-1halfx {
   font-size: 1.5em;
 }

+ 4 - 4
desktop/core/static/js/jquery.hdfsautocomplete.js

@@ -46,8 +46,8 @@
 
     // creates autocomplete popover
     if ($("#jHueHdfsAutocomplete").length == 0) {
-      $("<div>").attr("id", "jHueHdfsAutocomplete").addClass("popover")
-          .addClass("bottom").attr("style", "position:absolute;display:none;max-width:1000px;z-index:33000")
+      $("<div>").attr("id", "jHueHdfsAutocomplete").addClass("jHueAutocomplete popover")
+          .attr("style", "position:absolute;display:none;max-width:1000px;z-index:33000")
           .html('<div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p><ul class="unstyled"></ul></p></div></div>')
           .appendTo($("body"));
     }
@@ -113,7 +113,7 @@
     }
 
     $(window).on("scroll", function(){
-      $("#jHueHdfsAutocomplete").css("top", _el.offset().top + _el.outerHeight()).css("left", _el.offset().left).width(_el.width());
+      $("#jHueHdfsAutocomplete").css("top", _el.offset().top + _el.outerHeight() - 1).css("left", _el.offset().left).width(_el.outerWidth() - 4);
     });
 
     var _hdfsAutocompleteSelectedIndex = -1;
@@ -211,7 +211,7 @@
             }
           });
           window.setTimeout(function () {
-            $("#jHueHdfsAutocomplete").css("top", _el.offset().top + _el.outerHeight()).css("left", _el.offset().left).width(_el.width());
+            $("#jHueHdfsAutocomplete").css("top", _el.offset().top + _el.outerHeight() - 1).css("left", _el.offset().left).width(_el.outerWidth() - 4);
             $("#jHueHdfsAutocomplete").find("ul").empty().html(_currentFiles.join(""));
             $("#jHueHdfsAutocomplete").find("li").on("click", function (e) {
               smartTooltipMaker();

+ 6 - 7
desktop/core/static/js/jquery.hiveautocomplete.js

@@ -46,9 +46,9 @@
 
     // creates autocomplete popover
     if ($("#jHueHiveAutocomplete").length == 0) {
-      $("<div>").attr("id", "jHueHiveAutocomplete").addClass("popover")
-          .addClass("bottom").attr("style", "position:absolute;display:none;max-width:1000px;z-index:33000")
-          .html('<div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p><ul class="unstyled"></ul></p></div></div>')
+      $("<div>").attr("id", "jHueHiveAutocomplete").addClass("jHueAutocomplete popover")
+          .attr("style", "position:absolute;display:none;max-width:1000px;z-index:33000")
+          .html('<div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><ul class="unstyled"></ul></div></div>')
           .appendTo($("body"));
     }
 
@@ -113,7 +113,7 @@
     }
 
     $(window).on("scroll", function(){
-      $("#jHueHiveAutocomplete").css("top", _el.offset().top + _el.outerHeight()).css("left", _el.offset().left).width(_el.width());
+      $("#jHueHiveAutocomplete").css("top", _el.offset().top + _el.outerHeight() - 1).css("left", _el.offset().left).width(_el.outerWidth() - 4);
     });
 
     var _hdfsAutocompleteSelectedIndex = -1;
@@ -227,7 +227,7 @@
             _currentFiles.push('<li class="hiveAutocompleteItem" data-value="' + item + '"><i class="fa '+ _ico +'"></i> ' + item + '</li>');
           });
 
-            $("#jHueHiveAutocomplete").css("top", _el.offset().top + _el.outerHeight()).css("left", _el.offset().left).width(_el.width());
+            $("#jHueHiveAutocomplete").css("top", _el.offset().top + _el.outerHeight() - 1).css("left", _el.offset().left).width(_el.outerWidth() - 4);
             $("#jHueHiveAutocomplete").find("ul").empty().html(_currentFiles.join(""));
             $("#jHueHiveAutocomplete").find("li").on("click", function (e) {
               smartTooltipMaker();
@@ -266,8 +266,7 @@
                 }
                 $("#jHueHiveAutocomplete").hide();
                 _hdfsAutocompleteSelectedIndex = -1;
-                //_this.options.onEnter(_el);
-                _this.options.onPathChange(_el.val());
+                _this.options.onEnter(_el);
               }
 
             });