Merge pull request #2863 from matrix-org/travis/stickerpicker/lower-z

Put the stickerpicker below dialogs
This commit is contained in:
Travis Ralston 2019-04-02 10:23:17 -06:00 committed by GitHub
commit 8225b91179
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 5 deletions

View file

@ -56,6 +56,7 @@ export default class ContextualMenu extends React.Component {
menuPaddingRight: PropTypes.number, menuPaddingRight: PropTypes.number,
menuPaddingBottom: PropTypes.number, menuPaddingBottom: PropTypes.number,
menuPaddingLeft: PropTypes.number, menuPaddingLeft: PropTypes.number,
zIndex: PropTypes.number,
// If true, insert an invisible screen-sized element behind the // If true, insert an invisible screen-sized element behind the
// menu that when clicked will close it. // menu that when clicked will close it.
@ -215,16 +216,22 @@ export default class ContextualMenu extends React.Component {
menuStyle["paddingRight"] = props.menuPaddingRight; menuStyle["paddingRight"] = props.menuPaddingRight;
} }
const wrapperStyle = {};
if (!isNaN(Number(props.zIndex))) {
menuStyle["zIndex"] = props.zIndex + 1;
wrapperStyle["zIndex"] = props.zIndex;
}
const ElementClass = props.elementClass; const ElementClass = props.elementClass;
// FIXME: If a menu uses getDefaultProps it clobbers the onFinished // FIXME: If a menu uses getDefaultProps it clobbers the onFinished
// property set here so you can't close the menu from a button click! // property set here so you can't close the menu from a button click!
return <div className={className} style={position}> return <div className={className} style={{...position, ...wrapperStyle}}>
<div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect}> <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect}>
{ chevron } { chevron }
<ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} /> <ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
</div> </div>
{ props.hasBackground && <div className="mx_ContextualMenu_background" { props.hasBackground && <div className="mx_ContextualMenu_background" style={wrapperStyle}
onClick={props.closeMenu} onContextMenu={this.onContextMenu} /> } onClick={props.closeMenu} onContextMenu={this.onContextMenu} /> }
<style>{ chevronCSS }</style> <style>{ chevronCSS }</style>
</div>; </div>;

View file

@ -29,9 +29,9 @@ import PersistedElement from "../elements/PersistedElement";
const widgetType = 'm.stickerpicker'; const widgetType = 'm.stickerpicker';
// We sit in a context menu, so the persisted element container needs to float // This should be below the dialog level (4000), but above the rest of the UI (1000-2000).
// above it, so it needs a greater z-index than the ContextMenu // We sit in a context menu, so this should be given to the context menu.
const STICKERPICKER_Z_INDEX = 5000; const STICKERPICKER_Z_INDEX = 3500;
// Key to store the widget's AppTile under in PersistedElement // Key to store the widget's AppTile under in PersistedElement
const PERSISTED_ELEMENT_KEY = "stickerPicker"; const PERSISTED_ELEMENT_KEY = "stickerPicker";
@ -367,6 +367,7 @@ export default class Stickerpicker extends React.Component {
menuPaddingTop={0} menuPaddingTop={0}
menuPaddingLeft={0} menuPaddingLeft={0}
menuPaddingRight={0} menuPaddingRight={0}
zIndex={STICKERPICKER_Z_INDEX}
/>; />;
if (this.state.showStickers) { if (this.state.showStickers) {