diff options
author | Thibaut Girka <thib@sitedethib.com> | 2018-04-10 20:04:55 +0200 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2018-04-10 20:52:31 +0200 |
commit | e74e5c7eb903d6e9aa88629e975a81574fe49159 (patch) | |
tree | 960ece361f14728dc0f4367c88afa0ed5fd6a05d /app/javascript/flavours/glitch/features/composer/options/dropdown/index.js | |
parent | 3ab6a8b8bed37d048909b178693af8411325eb38 (diff) |
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/index.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/composer/options/dropdown/index.js | 11 |
1 files changed, 7 insertions, 4 deletions
diff --git a/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js b/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js index d63d90a9f..b3462e25a 100644 --- a/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js +++ b/app/javascript/flavours/glitch/features/composer/options/dropdown/index.js @@ -29,7 +29,7 @@ const handlers = { } = this.handlers; switch (key) { case 'Enter': - handleToggle(); + handleToggle(key); break; case 'Escape': handleClose(); @@ -79,7 +79,7 @@ const handlers = { }, // Toggles opening and closing the dropdown. - handleToggle () { + handleToggle ({ target }) { const { handleMakeModal } = this.handlers; const { onModalOpen } = this.props; const { open } = this.state; @@ -98,6 +98,8 @@ const handlers = { } } + const { top } = target.getBoundingClientRect(); + this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' }); // Otherwise, we just set our state to open. this.setState({ open: !open }); }, @@ -129,6 +131,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent { this.state = { needsModalUpdate: false, open: false, + placement: null, }; } @@ -161,7 +164,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent { onChange, value, } = this.props; - const { open } = this.state; + const { open, placement } = this.state; const computedClass = classNames('composer--options--dropdown', { active, open, @@ -188,7 +191,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent { /> <Overlay containerPadding={20} - placement='bottom' + placement={placement} show={open} target={this} > |