Sfoglia il codice sorgente

HUE-8570 [frontend] Right align the Hue dropdown when rendered outside the window

Johan Ahlen 7 anni fa
parent
commit
2d59df81fd

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


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


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


+ 10 - 1
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -471,7 +471,6 @@ ul.errorlist {
   }
 
   .dropdown-menu {
-    min-width: 190px;
     max-width: 250px;
     min-height: 34px;
     max-height: 200px;
@@ -484,6 +483,16 @@ ul.errorlist {
   }
 }
 
+.hue-drop-down-container-searchable {
+  .dropdown-menu {
+    min-width: 190px;
+  }
+
+  .hue-inner-drop-down > li {
+    min-width: 170px;
+  }
+}
+
 .hue-drop-down-active span {
   font-size: 15px;
 }

+ 4 - 1
desktop/core/src/desktop/static/desktop/less/hue4.less

@@ -512,7 +512,6 @@ a:visited {
   font-size: 13px;
 }
 
-.hue-inner-drop-down > li,
 .hue-context-menu > li {
   min-width: 170px;
   color: @cui-gray-200;
@@ -564,6 +563,10 @@ a:visited {
   white-space: nowrap;
 }
 
+.hue-inner-drop-down > li {
+  color: @cui-gray-200;
+}
+
 .hue-inner-drop-down > li > a:hover,
 .hue-inner-drop-down > li.active,
 .hue-context-menu > li.active,

+ 18 - 1
desktop/core/src/desktop/templates/ko_components/ko_drop_down.mako

@@ -38,7 +38,7 @@ from desktop.views import _ko
     <input class="hue-drop-down-input" type="text" data-bind="textInput: filter, attr: { 'placeHolder': inputPlaceHolder }, visible: dropDownVisible, style: { color: filterEdited() ? '#000' : '#AAA', 'min-height': '22px', 'margin-left': '10px' }"/>
     <i class="fa fa-caret-down"></i>
     <!-- /ko -->
-    <div class="hue-drop-down-container" data-bind="css: { 'open' : dropDownVisible, 'hue-drop-down-fixed': fixedPosition }, dropDownKeyUp: { onEsc: onEsc, onEnter: onEnter, dropDownVisible: dropDownVisible }">
+    <div class="hue-drop-down-container" data-bind="css: { 'open' : dropDownVisible, 'hue-drop-down-fixed': fixedPosition, 'hue-drop-down-container-searchable': searchable }, dropDownKeyUp: { onEsc: onEsc, onEnter: onEnter, dropDownVisible: dropDownVisible }">
       <div class="dropdown-menu" data-bind="visible: filteredEntries().length > 0, style: { 'overflow-y': !foreachVisible ? 'auto' : 'hidden' }">
         <!-- ko if: foreachVisible -->
         <ul class="hue-inner-drop-down" data-bind="foreachVisible: { data: filteredEntries, minHeight: 34, container: '.dropdown-menu' }">
@@ -211,6 +211,23 @@ from desktop.views import _ko
               $(window).on('click', closeOnOutsideClick);
               $(element).find('.hue-drop-down-input').focus();
             }, 0);
+
+            // Right align the dropdown when outside the right edge
+            if (!self.fixedPosition) {
+              var $element = $(element);
+              var $dropDownMenu = $element.find('.dropdown-menu').parent();
+              var $offsetParent = $element.offsetParent();
+
+              var rightLimit = $offsetParent.offset().left + $offsetParent.width();
+
+              if ($dropDownMenu.offset().left + 160 > rightLimit) {
+                var $caret = $element.find('.fa-caret-down');
+                var caretRight = $caret.offset().left + $caret.width();
+
+                var diff = -$dropDownMenu.offset().left - 160 + caretRight;
+                $element.find('.hue-drop-down-container').css({ 'margin-left': diff + 'px' });
+              }
+            }
           } else {
             $(element).find('.hue-inner-drop-down > .active').removeClass('.active');
             $(window).off('click', closeOnOutsideClick);

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