Firefly-91: fixed dropdown opening in visible area, when too far right

Author: robyww

src/firefly/js/ui/DialogRootContainer.jsx

@@ -153,7 +153,7 @@ function computeZIndex(element ) {
 /**
  * @param {string} dialogId
  * @param {object} dialog
- * @param {Element} overElement
+ * @param {Element} [overElement]
  */
 function defineDialog(dialogId, dialog, overElement) {
     if (!divElement) init();

src/firefly/js/ui/DropDownMenu.css

@@ -4,7 +4,7 @@
     border-radius: 0 0 5px 5px;
     background-color: rgba(245,245,245,.97);
     box-shadow: 0 5px 10px rgba(0,0,0,0.3);
-    min-width: 180px;
+    min-width: 100px;
 }
 
 
@@ -29,7 +29,8 @@
 .dropdown-menu__right {
     position: absolute;
     top: -10px;
-    left: 8px;
+    /*left: 8px;*/
+    left: 13px;
 }
 
 

src/firefly/js/ui/DropDownMenu.jsx

@@ -13,7 +13,7 @@ export const DROP_DOWN_WRAPPER_CLASSNAME= 'ff-dropdown-menu';
 
 const computePosition= (tgtX,tgtY)  => ({x:tgtX,y:tgtY+18});
 
-function placeDropDown(e,x,y) {
+function placeDropDown(e,x,y, beforeVisible) {
     var pos= computePosition(x,y);
 
     var left= pos.x - 10;
@@ -22,6 +22,7 @@ function placeDropDown(e,x,y) {
     }
     e.style.left= left +'px';
     e.style.top= (pos.y + 10)+'px';
+    if (isFunction(beforeVisible)) beforeVisible(e);
     e.style.visibility='visible';
 }
 
@@ -42,12 +43,12 @@ export class DropDownMenuWrapper extends PureComponent {
 }
 
     componentDidMount() {
-        var {x,y}= this.props;
-        placeDropDown(ReactDOM.findDOMNode(this),x,y);
+        const {x,y,beforeVisible}= this.props;
+        placeDropDown(ReactDOM.findDOMNode(this),x,y, beforeVisible );
     }
     componentDidUpdate() {
-        var {x,y}= this.props;
-        placeDropDown(ReactDOM.findDOMNode(this),x,y);
+        const {x,y,beforeVisible}= this.props;
+        placeDropDown(ReactDOM.findDOMNode(this),x,y, beforeVisible);
     }
 
     render() {
@@ -74,14 +75,15 @@ DropDownMenuWrapper.propTypes= {
     x : PropTypes.number.isRequired,
     y : PropTypes.number.isRequired,
     content : PropTypes.object.isRequired,
-    zIndex : PropTypes.number
+    zIndex : PropTypes.number,
+    beforeVisible : PropTypes.func
 };
 
 
 
 export class DropDownSubMenu extends PureComponent {
 
-    constructor(props, context) {
+    constructor(props) {
         super(props);
         this.state= {showSubMenu: false};
         this.show = this.show.bind(this);
@@ -118,7 +120,8 @@ export class DropDownSubMenu extends PureComponent {
                         }
                     </div>
 
-                    {<div className={'arrow-right'}/>}
+                    {/*{<div style={{marginLeft:5}} className={'arrow-right'}/>}*/}
+                    {<div style={{marginLeft:5}} className={'arrow-right'}/>}
 
                 </div>
             </div>

src/firefly/js/ui/DropDownToolbarButton.jsx

@@ -16,21 +16,50 @@ import {DropDownDirCTX} from './DropDownDirContext.js';
 import {DROP_DOWN_WRAPPER_CLASSNAME} from './DropDownMenu';
 
 
-function computeDropdownXY(divElement, isIcon) {
+/**
+ * j
+ * @param {Element} buttonElement
+ * @param isIcon
+ * @param {Element} dropdownElement
+ * @return {{x: number, y: number}}
+ */
+function computeDropdownXY(buttonElement, isIcon, dropdownElement) {
     const bodyRect = document.body.parentElement.getBoundingClientRect();
-    const off= isIcon ? 0 : 6;
-    const elemRect = divElement.getBoundingClientRect();
-    const x = (elemRect.left - bodyRect.left);
-    const y = elemRect.top - bodyRect.top- off;
+    const dropdownRect = dropdownElement.getBoundingClientRect();
+    const elemRect = buttonElement.getBoundingClientRect();
+    const off= isIcon ? 4 : 10;
+    let x = elemRect.left - bodyRect.left - 10;
+    const leftAdjust= (bodyRect.right-20 < x + dropdownRect.width) ? dropdownRect.width-elemRect.width-20 : 0;
+    x-= leftAdjust;
+    const y = elemRect.bottom - bodyRect.top- off;
     return {x,y};
 }
 
 
-function showDialog(divElement,dropDown,ownerId,offButtonCB, isIcon) {
-    const {x,y}= computeDropdownXY(divElement, isIcon);
+/**
+ * Compute the drop down position and build the react components to show the dropdown.
+ * The dropdown position is computed in two phases. The normal position and after the dropdown element exist
+ * it is check to make sure it is not going off the right side of the screen. Part 2 is done in the beforeVisible
+ * callback. At that point the element has be created and the visibility is set ot hidden.  They way we can do side
+ * computations.
+ *
+ * @param {Object} buttonElement - the div of where the button is
+ * @param {Object} dropDown - dropdown React component
+ * @param {String} ownerId
+ * @param {function} offButtonCB
+ * @param {boolean} isIcon
+ */
+function showDialog(buttonElement,dropDown,ownerId,offButtonCB, isIcon) {
+
+    const beforeVisible= (e) =>{
+        if (!e) return;
+        const {x,y}= computeDropdownXY(buttonElement,isIcon, e);
+        e.style.left= x+'px';
+        e.style.top= y+'px';
+    };
 
-    const dropDownClone= React.cloneElement(dropDown, { toolbarElement:divElement });
-    const dd= <DropDownMenuWrapper x={x} y={y} content={dropDownClone}/>;
+    const dropDownClone= React.cloneElement(dropDown, { toolbarElement:buttonElement});
+    const dd= <DropDownMenuWrapper x={0} y={0} content={dropDownClone} beforeVisible={beforeVisible}/>;
     DialogRootContainer.defineDialog(DROP_DOWN_KEY,dd);
     document.removeEventListener('mousedown', offButtonCB);
     dispatchShowDialog(DROP_DOWN_KEY,ownerId);
@@ -52,6 +81,7 @@ export class DropDownToolbarButton extends PureComponent {
         this.state= {dropDownVisible:false, dropDownOwnerId:null };
         this.ownerId= uniqueId(OWNER_ROOT);
         this.mounted= true;
+        this.divElement= undefined;
     }
 
     componentWillUnmount() {
@@ -76,12 +106,11 @@ export class DropDownToolbarButton extends PureComponent {
     }
 
     offButtonCallback(ev) {
-        document.removeEventListener('mousedown', this.docMouseDownCallback);
         delay( () => {
+            document.removeEventListener('mousedown', this.docMouseDownCallback);
             const {dropDownVisible, dropDownOwnerId}= this.state;
-            if (!dropDownVisible) {
-                return;
-            }
+            if (!dropDownVisible) return;
+
             let e= document.activeElement;
             let focusIsDropwdownInput= false;
             if (e && e.tagName==='INPUT') {
@@ -92,9 +121,17 @@ export class DropDownToolbarButton extends PureComponent {
                      }
                 }
             }
+            e= ev.target;
+            const maxBack= 10;
+            let clickOnButton= false;
+            for(let i=0;(e&&i<maxBack);e= e.parentElement,i++) {
+                if (this.divElement===e) {
+                   clickOnButton= true;
+                   break;
+                }
+            }
             const onDropDownInput= focusIsDropwdownInput && ev && ev.target.tagName==='INPUT';
-            console.log(ev);
-            if (!onDropDownInput&& dropDownVisible && dropDownOwnerId===this.ownerId) {
+            if (!clickOnButton && !onDropDownInput && dropDownOwnerId===this.ownerId) {
                 dispatchHideDialog(DROP_DOWN_KEY);
             }
             else {
@@ -106,11 +143,13 @@ export class DropDownToolbarButton extends PureComponent {
 
     handleDropDown(divElement,dropDown) {
         if (divElement) {
+            this.divElement= divElement;
             const isIcon= Boolean(this.props.icon);
             const {dropDownVisible, dropDownOwnerId}= this.state;
 
+            const dropdownDirection= calcDropDownDir(divElement, this.props.menuMaxWidth);
             const dropDownWithContext= (
-                <DropDownDirCTX.Provider value={{dropdownDirection: calcDropDownDir(divElement, this.props.menuMaxWidth)}}>
+                <DropDownDirCTX.Provider value={{dropdownDirection}}>
                     {dropDown}
                 </DropDownDirCTX.Provider>
             );

src/firefly/js/ui/ToolbarButton.css

@@ -13,6 +13,7 @@
     justify-content: space-between;
     width: 100%;
     align-items: center;
+    min-width: 180px;
 }
 
 .ff-MenuItem-dark:HOVER {

src/firefly/js/ui/ToolbarButton.jsx

@@ -20,7 +20,7 @@ export function makeBadge(cnt) {
 
 export function makeDropDownIndicator(cnt) {
     // return (<img className={'ff-dropDownIndicator'} src={DROP_DOWN_ICON}/>);
-    return (<img src={DROP_DOWN_ICON}/>);
+    return (<img src={DROP_DOWN_ICON} style={{width:11, height:6, alignSelf: 'center'}}/>);
 }