Fixed alignment of interactive dropdown pointer

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index e8727cd30471b56345aa302628b0d822ba8ef77e..1f2763acbf72106c7dec3706401393c835e86e79 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -1134,7 +1134,7 @@ WCF.Dropdown.Interactive.Instance = Class.extend({
                        $('<a href="' + options.showAllLink + '" class="interactiveDropdownShowAll">' + WCF.Language.get('wcf.user.panel.showAll') + '</a>').appendTo(this._container);
                }
                
-               this._pointer = $('<span class="pointer"><span /></span>').appendTo(this._container);
+               this._pointer = $('<span class="elementPointer"><span /></span>').appendTo(this._container);
                
                if (!$.browser.mobile && $itemContainer !== null) {
                        // use jQuery scrollbar on desktop, mobile browsers have a similar display built-in
@@ -1275,100 +1275,11 @@ WCF.Dropdown.Interactive.Instance = Class.extend({
         * @param       string          pageDirection
         */
        _renderDesktop: function(pageDirection) {
-               var $elementDimensions = this._triggerElement.getDimensions('outer');
-               var $elementOffsets = this._triggerElement.getOffsets('offset');
-               var $dropdownDimensions = this._container.getDimensions();
-               var $pageWidth = $(window).width();
-               
-               var $left = null;
-               var $right = null;
-               if (pageDirection === 'ltr') {
-                       $left = this._getPositionLeft($elementOffsets, $dropdownDimensions, $pageWidth);
-                       
-                       if (!$left.result) {
-                               $right = this._getPositionRight($elementOffsets, $dropdownDimensions, $elementDimensions, $pageWidth);
-                               
-                               if ($right.result) {
-                                       $left = null;
-                               }
-                               else {
-                                       $right = null;
-                               }
-                       }
-               }
-               else {
-                       $right = this._getPositionRight($elementOffsets, $dropdownDimensions, $elementDimensions, $pageWidth);
-                       
-                       if (!$right.result) {
-                               $left = this._getPositionLeft($elementOffsets, $dropdownDimensions, $pageWidth);
-                               if ($left.result) {
-                                       $right = null;
-                               }
-                               else {
-                                       $left = null;
-                               }
-                       }
-               }
-               
-               if ($right === null) {
-                       // align to the left
-                       this._container.css({
-                               left: $left.left + 'px',
-                               top: $elementOffsets.top + $elementDimensions.height + 'px'
-                       });
-                       
-                       this._pointer.css({
-                               left: (this._options.pointerOffset ? this._options.pointerOffset : '4px')
+               require(['Ui/Alignment'], (function(UiAlignment) {
+                       UiAlignment.set(this._container[0], this._triggerElement[0], {
+                               pointer: true
                        });
-               }
-               else {
-                       // align to the right
-                       this._container.css({
-                               right: $right.right + 'px',
-                               top: $elementOffsets.top + $elementDimensions.height + 'px'
-                       });
-                       
-                       this._pointer.css({
-                               right: (this._options.pointerOffset ? this._options.pointerOffset : '4px')
-                       });
-               }
-       },
-       
-       /**
-        * Calculates the dropdown position aligned with its left side.
-        * 
-        * @param       object          elementOffsets
-        * @param       object          dropdownDimensions
-        * @param       integer         pageWidth
-        * @return      object
-        */
-       _getPositionLeft: function(elementOffsets, dropdownDimensions, pageWidth) {
-               var $left = elementOffsets.left;
-               var $right = elementOffsets.left + dropdownDimensions.width;
-               
-               return {
-                       left: $left,
-                       result: ($right < pageWidth)
-               };
-       },
-       
-       /**
-        * Calculates the dropdown position aligned with its right side.
-        * 
-        * @param       object          elementOffsets
-        * @param       object          dropdownDimensions
-        * @param       object          elementDimensions
-        * @param       integer         pageWidth
-        * @return      object
-        */
-       _getPositionRight: function(elementOffsets, dropdownDimensions, elementDimensions, pageWidth) {
-               var $left = (elementOffsets.left + elementDimensions.width) - dropdownDimensions.width;
-               var $right = pageWidth - (elementOffsets.left + elementDimensions.width);
-               
-               return {
-                       result: ($left > 0),
-                       right: $right
-               };
+               }).bind(this));
        }
 });
 

diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index 0ea41bb1098daf099ccc1ecbafcb6dcd78ce92da..107f2e308153c8ba636eebd6635e0641107bb6c8 100644 (file)
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -12,14 +12,13 @@
                display: none !important;
        }
        
-       > .pointer {
+       > .elementPointer {
                border: 10px solid transparent;
                border-bottom-color: $wcfDropdownBorder;
                border-top-width: 0;
                content: "";
-               display: inline-block;
+               display: block;
                position: absolute;
-               top: -10px;
                z-index: 100;
                
                > span {
@@ -27,30 +26,33 @@
                        border-bottom-color: $wcfDropdownBackground;
                        border-top-width: 0;
                        content: "";
-                       display: inline-block;
-                       left: -8px;
+                       display: block;
                        position: absolute;
                        top: 2px;
                        z-index: 101;
                }
-       }
-       
-       &.interactiveDropdownUserMenu {
-               > .interactiveDropdownItemsContainer {
-                       overflow: visible;
-                       max-height: none;
+               
+               &.left {
+                       left: 16px;
+                       
+                       > span {
+                               left: -8px;
+                       }
                }
                
-               > .pointer {
-                       border-width: 0 7px 7px 7px;
-                       top: -7px;
+               &.right {
+                       right: 16px;
                        
                        > span {
-                               border-width: 0 5px 5px 5px;
-                               left: -5px;
+                               right: -7px;
                        }
                }
        }
+       
+       &.interactiveDropdownUserMenu > .interactiveDropdownItemsContainer {
+               overflow: visible;
+               max-height: none;
+       }
 }
 
 .interactiveDropdownHeader {