OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Put the stickerpicker below dialogs 

Fixes https://github.com/vector-im/riot-web/issues/9353

The ContextualMenu now accepts a zIndex parameter which can be used to control its level. Dialogs are at around 4000 in the z-index, and the context menu defaults to 5000 for the things that need tooltips and such in a dialog.
pull/21833/head
Travis Ralston 2019-04-01 20:34:33 -06:00
parent d92336fc16
commit 3f9d088667
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/structures/ContextualMenu.js
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>;

7
src/components/views/rooms/Stickerpicker.js
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) {