mirror of https://github.com/vector-im/riot-web
Fix issue with sticker picker rendering off-screen
when the RightPanel is collapsed on a small monitor and the sticker picker is opened.pull/21833/head
parent
3761cd4054
commit
e0236c3d3e
|
@ -252,16 +252,33 @@ export default class Stickerpicker extends React.Component {
|
|||
* @param {Event} e Event that triggered the function
|
||||
*/
|
||||
_onShowStickersClick(e) {
|
||||
// XXX: Simplify by using a context menu that is positioned relative to the sticker picker button
|
||||
|
||||
const buttonRect = e.target.getBoundingClientRect();
|
||||
|
||||
// The window X and Y offsets are to adjust position when zoomed in to page
|
||||
const x = buttonRect.right + window.pageXOffset - 42;
|
||||
let x = buttonRect.right + window.pageXOffset - 41;
|
||||
|
||||
// Amount of horizontal space between the right of menu and the right of the viewport
|
||||
// (10 = amount needed to make chevron centrally aligned)
|
||||
const rightPad = 10;
|
||||
|
||||
// When the sticker picker would be displayed off of the viewport, adjust x
|
||||
// (302 = width of context menu, including borders)
|
||||
x = Math.min(x, document.body.clientWidth - (302 + rightPad));
|
||||
|
||||
// Offset the chevron location, which is relative to the left of the context menu
|
||||
// (10 = offset when context menu would not be displayed off viewport)
|
||||
// (8 = value required in practice (possibly 10 - 2 where the 2 = context menu borders)
|
||||
const stickerPickerChevronOffset = Math.max(10, 8 + window.pageXOffset + buttonRect.left - x);
|
||||
|
||||
const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
|
||||
|
||||
this.setState({
|
||||
showStickers: true,
|
||||
stickerPickerX: x,
|
||||
stickerPickerY: y,
|
||||
stickerPickerChevronOffset,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -314,7 +331,7 @@ export default class Stickerpicker extends React.Component {
|
|||
|
||||
const stickerPicker = <ContextualMenu
|
||||
elementClass={GenericElementContextMenu}
|
||||
chevronOffset={10}
|
||||
chevronOffset={this.state.stickerPickerChevronOffset}
|
||||
chevronFace={'bottom'}
|
||||
left={this.state.stickerPickerX}
|
||||
top={this.state.stickerPickerY}
|
||||
|
|
Loading…
Reference in New Issue