diff options
author | David Yip <yipdw@member.fsf.org> | 2018-04-12 03:28:22 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-04-12 03:28:22 -0500 |
commit | eb72c3398cd70c6b595fae5a0cb6730a3e49bd61 (patch) | |
tree | 284dfe28ae42ef4a6414cf2ef3bab667f58b7396 /app/javascript/flavours/glitch/features/composer/options/dropdown/content/index.js | |
parent | 0b326950bf8d38fd7c98a71d6bc1c93067c8ceb5 (diff) | |
parent | e74e5c7eb903d6e9aa88629e975a81574fe49159 (diff) |
Merge pull request #418 from ThibG/glitch-soc/fixes/composer-dropdowns
Place composer dropdown menus top if they are closer to the bottom of the viewport
Diffstat (limited to 'app/javascript/flavours/glitch/features/composer/options/dropdown/content/index.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/composer/options/dropdown/content/index.js | 12 |
1 files changed, 10 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/features/composer/options/dropdown/content/index.js b/app/javascript/flavours/glitch/features/composer/options/dropdown/content/index.js index b3a472999..b76410561 100644 --- a/app/javascript/flavours/glitch/features/composer/options/dropdown/content/index.js +++ b/app/javascript/flavours/glitch/features/composer/options/dropdown/content/index.js @@ -13,7 +13,6 @@ import { assignHandlers } from 'flavours/glitch/util/react_helpers'; // Handlers. const handlers = { - // When the document is clicked elsewhere, we close the dropdown. handleDocumentClick ({ target }) { const { node } = this; @@ -45,6 +44,10 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent // Instance variables. this.node = null; + + this.state = { + mounted: false, + }; } // On mounting, we add our listeners. @@ -52,6 +55,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent const { handleDocumentClick } = this.handlers; document.addEventListener('click', handleDocumentClick, false); document.addEventListener('touchend', handleDocumentClick, withPassive); + this.setState({ mounted: true }); } // On unmounting, we remove our listeners. @@ -63,6 +67,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent // Rendering. render () { + const { mounted } = this.state; const { handleRef } = this.handlers; const { items, @@ -87,13 +92,16 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent }} > {({ opacity, scaleX, scaleY }) => ( + // It should not be transformed when mounting because the resulting + // size will be used to determine the coordinate of the menu by + // react-overlays <div className='composer--options--dropdown--content' ref={handleRef} style={{ ...style, opacity: opacity, - transform: `scale(${scaleX}, ${scaleY})`, + transform: mounted ? `scale(${scaleX}, ${scaleY})` : null, }} > {items ? items.map( |