An other way to open menu #308
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,6 +13,7 @@ import mousetrap from 'mousetrap'; | |
| import {remove as removeDiacritics} from 'diacritics'; | ||
| import isEmpty from 'lodash.isempty'; | ||
| import classnames from 'classnames'; | ||
| import {setMenuMargin} from '../actions/windows'; | ||
| import {setCurrentTask} from '../actions/task'; | ||
| import InputContainer from '../components/InputContainer'; | ||
| import LocaleUtils from '../utils/LocaleUtils'; | ||
|
|
@@ -32,10 +33,12 @@ class AppMenu extends React.Component { | |
| currentTaskBlocked: PropTypes.bool, | ||
| currentTheme: PropTypes.object, | ||
| keepMenuOpen: PropTypes.bool, | ||
| menuCompact: PropTypes.bool, | ||
| menuItems: PropTypes.array, | ||
| onMenuToggled: PropTypes.func, | ||
| openExternalUrl: PropTypes.func, | ||
| setCurrentTask: PropTypes.func, | ||
| setMenuMargin: PropTypes.func, | ||
| showFilterField: PropTypes.bool, | ||
| showOnStartup: PropTypes.bool | ||
| }; | ||
|
|
@@ -168,14 +171,14 @@ class AppMenu extends React.Component { | |
| if (!this.state.menuVisible && this.props.appMenuClearsTask) { | ||
| this.props.setCurrentTask(null); | ||
| } | ||
| if (this.state.menuVisible || this.props.keepMenuOpen) { | ||
| document.removeEventListener('click', this.checkCloseMenu); | ||
| document.removeEventListener('keydown', this.onKeyPress, true); | ||
| document.removeEventListener('mousemove', this.onMouseMove, true); | ||
| } else { | ||
| document.addEventListener('click', this.checkCloseMenu); | ||
| document.addEventListener('keydown', this.onKeyPress, true); | ||
| document.addEventListener('mousemove', this.onMouseMove, true); | ||
| } | ||
|
There was a problem hiding this comment. Please enclose the entire block between 174 and 181 in |
||
| this.props.onMenuToggled(!this.state.menuVisible); | ||
| this.setState((state) => ({menuVisible: !state.menuVisible, submenusVisible: [], filter: ""})); | ||
|
|
@@ -262,20 +265,20 @@ class AppMenu extends React.Component { | |
| } | ||
| }; | ||
| render() { | ||
| const visible = !this.props.currentTaskBlocked && this.state.menuVisible; | ||
| const className = classnames({ | ||
| "appmenu-blocked": this.props.currentTaskBlocked, | ||
| "appmenu-visible": visible, | ||
| "appmenu-compact": this.props.menuCompact | ||
| }); | ||
| const filter = removeDiacritics(this.state.filter.toLowerCase()); | ||
| return ( | ||
| <div className={"AppMenu " + className} ref={el => { this.menuEl = el; MiscUtils.setupKillTouchEvents(el); }} | ||
| > | ||
| <div className="appmenu-button-container" onMouseDown={this.toggleMenu} > | ||
| {this.props.buttonContents} | ||
| </div> | ||
| <div className="appmenu-menu-container" ref={this.storeRigthMargin}> | ||
| <ul className="appmenu-menu"> | ||
| {this.props.showFilterField ? ( | ||
| <li className="appmenu-leaf"> | ||
|
|
@@ -302,6 +305,12 @@ class AppMenu extends React.Component { | |
| mousetrap(el).bind(this.props.appMenuShortcut, this.toggleMenu); | ||
| } | ||
| }; | ||
| storeRigthMargin = (el) => { | ||
|
|
||
| if (this.props.menuCompact && el?.clientWidth > 0) { | ||
| const rightmargin = el.clientWidth - MiscUtils.convertEmToPx(11.5); | ||
|
There was a problem hiding this comment. Hello, |
||
| this.props.setMenuMargin(rightmargin, 0); | ||
| } | ||
| }; | ||
| itemAllowed = (item) => { | ||
| if (!ThemeUtils.themFlagsAllowed(this.props.currentTheme, item.themeFlagWhitelist, item. themeFlagBlacklist)) { | ||
| return false; | ||
|
|
@@ -323,5 +332,6 @@ export default connect((state) => ({ | |
| currentTaskBlocked: state.task.blocked, | ||
| currentTheme: state.theme.current || {} | ||
| }), { | ||
| setCurrentTask: setCurrentTask, | ||
| setMenuMargin: setMenuMargin | ||
| })(AppMenu); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -41,6 +41,7 @@ class ResizeableWindow extends React.Component { | |
| maxHeight: PropTypes.number, | ||
| maxWidth: PropTypes.number, | ||
| maximizeable: PropTypes.bool, | ||
| menuMargins: PropTypes.object, | ||
| minHeight: PropTypes.number, | ||
| minWidth: PropTypes.number, | ||
| minimizeable: PropTypes.bool, | ||
|
|
@@ -100,7 +101,7 @@ class ResizeableWindow extends React.Component { | |
| if (props.splitScreenWhenDocked && this.state.geometry.docked) { | ||
| const dockSide = props.dockable === true ? "left" : props.dockable; | ||
| const dockSize = ["left", "right"].includes(dockSide) ? this.state.geometry.width : this.state.geometry.height; | ||
| props.setSplitScreen(this.id, dockSide, dockSize, this.props.menuMargins); | ||
| } | ||
| } | ||
| computeInitialX = (x) => { | ||
|
|
@@ -117,7 +118,7 @@ class ResizeableWindow extends React.Component { | |
| componentWillUnmount() { | ||
| this.props.unregisterWindow(this.id); | ||
| if (this.props.splitScreenWhenDocked) { | ||
| this.props.setSplitScreen(this.id, null, null, this.props.menuMargins); | ||
| } | ||
| } | ||
| componentDidUpdate(prevProps, prevState) { | ||
|
|
@@ -135,11 +136,11 @@ class ResizeableWindow extends React.Component { | |
| (!this.props.visible && prevProps.visible) || | ||
| (this.state.geometry.docked === false && prevState.geometry.docked !== false) | ||
| ) { | ||
| this.props.setSplitScreen(this.id, null, null, this.props.menuMargins); | ||
| } else if (this.props.visible && this.state.geometry.docked) { | ||
| const dockSide = this.props.dockable === true ? "left" : this.props.dockable; | ||
| const dockSize = ["left", "right"].includes(dockSide) ? this.state.geometry.width : this.state.geometry.height; | ||
| this.props.setSplitScreen(this.id, dockSide, dockSize, this.props.menuMargins); | ||
| } | ||
| } | ||
| } | ||
|
|
@@ -169,7 +170,10 @@ class ResizeableWindow extends React.Component { | |
| "resizeable-window-body-scrollable": this.props.scrollable, | ||
| "resizeable-window-body-nonscrollable": !this.props.scrollable | ||
| }); | ||
| const style = { | ||
| display: this.props.visible ? 'initial' : 'none', | ||
| right: 'calc(0.25em + ' + this.props.menuMargins.right + 'px)' | ||
|
There was a problem hiding this comment. What is 0.25em? Shouldn't this be part of the menuMargin, if necessary? Else with a zero menuMargin, it will still have a 0.25em right offset. There was a problem hiding this comment. I add 0.25em as it is done for MapCopyright : https://github.com/qgis/qwc2/blob/master/plugins/MapCopyright.jsx#L57 I found it aesthetically pleasing when everything wasn't aligned (stuck) with the right edge; even without compact menu. I hope to honor the left margin but I can't do this right now. Should I remove left margin from reducer state ? |
||
| }; | ||
| const maximized = this.state.geometry.maximized ? true : false; | ||
| const minimized = this.state.geometry.minimized ? true : false; | ||
| const zIndex = this.props.baseZIndex + this.props.windowStacking.findIndex(item => item === this.id); | ||
|
|
@@ -327,7 +331,8 @@ class ResizeableWindow extends React.Component { | |
| export default connect((state) => ({ | ||
| windowStacking: state.windows.stacking, | ||
| topbarHeight: state.map.topbarHeight, | ||
| bottombarHeight: state.map.bottombarHeight, | ||
| menuMargins: state.windows.menuMargins | ||
| }), { | ||
| raiseWindow: raiseWindow, | ||
| registerWindow: registerWindow, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think there is any advantage in passing the
menuMarginshere, since it is identical to the state value. Just usemenuMarginsin the reducer. You can move theconst mapMargins = {...}block in the reducer to a separate funtion which you call both as a result ofSET_SPLIT_SCREENandSET_MENU_MARGIN.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm sorry I don't understand how to move the
const mapMargins = {...}block to a separate function. mapMargin Values inSET_SPLIT_SCREENandSET_MENU_MARGINare different...