zelo72
/
mastodon
mirror of https://github.com/mastodon/mastodon
2
2
Fork 1
Code Issues 9 Releases Wiki Activity

Allow Esc to close modal lightbox

This commit is contained in:
June Rhodes 2016-11-27 14:50:58 +11:00
parent 26287b6e7d
commit 93f0fd01e6
2 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/components/features/ui/containers/modal_container.jsx
View File

@ -29,7 +29,19 @@ const Modal = React.createClass({
url: React.PropTypes.string,
isVisible: React.PropTypes.bool,
onCloseClicked: React.PropTypes.func,
onOverlayClicked: React.PropTypes.func
onOverlayClicked: React.PropTypes.func,
registerOnKeyDownHandler: React.PropTypes.func
},
componentDidMount() {
this.props.registerOnKeyDownHandler(this.onKeyDown);
},
onKeyDown (e) {
if (e.keyCode == 27 /* Escape key */) {
this.props.onCloseClicked();
e.preventDefault();
}
},
render () {

16
app/assets/javascripts/components/features/ui/index.jsx
View File

@ -17,8 +17,20 @@ const UI = React.createClass({
render () {
const layoutBreakpoint = 1024;
let onKeyDownHandler = null;
const dispatchKeyDown = (e) => {
if (onKeyDownHandler != null) {
onKeyDownHandler(e);
}
};
const registerOnKeyDownHandler = (cb) => {
onKeyDownHandler = cb;
};
return (
<div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }}>
<div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }} onKeyDown={dispatchKeyDown}>
<MediaQuery maxWidth={layoutBreakpoint}>
<TabsBar />
</MediaQuery>
@ -38,7 +50,7 @@ const UI = React.createClass({
<NotificationsContainer />
<LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} />
<ModalContainer />
<ModalContainer registerOnKeyDownHandler={registerOnKeyDownHandler} />
</div>
);
}