Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-08-03 15:34:25 +00:00
Code Issues Projects Releases Wiki Activity

Still more ContextMenu abstraction

Browse source
This commit is contained in:
Jordan Eldredge 2017-06-05 20:16:14 -07:00
parent 2669b013dd
commit af3f65c315
4 changed files with 18 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

2
css/main-window.css
View file

@ -80,7 +80,7 @@
left: 0px;
}
#winamp2-js #title-bar #option:active #context-menu,
#winamp2-js #title-bar #option.selected #context-menu {
#winamp2-js #title-bar #option .selected #context-menu {
display: block;
}

7
js/components/ContextMenu.js
View file

@ -48,11 +48,7 @@ export class ContextMenu extends React.Component {
render() {
return (
<div
id="option"
className={classnames({ selected: this.props.selected })}
onClick={this.props.toggleMenu}
>
<div className={classnames({ selected: this.props.selected })}>
<ul id="context-menu">
{this.props.children}
</ul>
@ -63,6 +59,5 @@ export class ContextMenu extends React.Component {
ContextMenu.propTypes = {
closeMenu: React.PropTypes.func.isRequired,
toggleMenu: React.PropTypes.func.isRequired,
children: React.PropTypes.any.isRequired
};

12
js/components/MainContextMenu.js
View file

@ -14,11 +14,7 @@ const SKINS = [
];
const MainContextMenu = props =>
<ContextMenu
closeMenu={props.closeMenu}
toggleMenu={props.toggleMenu}
selected={props.selected}
>
<ContextMenu closeMenu={props.closeMenu} selected={props.selected}>
<LinkNode
href="https://github.com/captbaritone/winamp2-js"
target="_blank"
@ -48,12 +44,6 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
console.log("close");
dispatch({ type: CLOSE_CONTEXT_MENU });
},
toggleMenu: e => {
dispatch({ type: TOGGLE_CONTEXT_MENU });
// TODO: Consider binding to a ref instead.
// https://stackoverflow.com/a/24421834
e.nativeEvent.stopImmediatePropagation();
},
openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
setSkin: filename => dispatch(setSkinFromFilename(filename))
});

18
js/components/MainWindow.js
View file

@ -24,7 +24,7 @@ import Time from "./Time";
import Visualizer from "./Visualizer";
import Volume from "./Volume";
import { SET_FOCUSED_WINDOW } from "../actionTypes";
import { SET_FOCUSED_WINDOW, TOGGLE_CONTEXT_MENU } from "../actionTypes";
import { loadFileFromReference } from "../actionCreators";
@ -91,7 +91,9 @@ export class MainWindow extends React.Component {
>
<div id="loading">Loading...</div>
<div id="title-bar" className="selected title-bard draggable">
<MainContextMenu fileInput={this.props.fileInput} />
<div id="option" onClick={this.props.toggleMenu}>
<MainContextMenu fileInput={this.props.fileInput} />
</div>
<ShadeTime />
<div id="minimize" />
<Shade />
@ -144,4 +146,14 @@ const mapStateToProps = state => {
} = state;
return { status, loading, doubled, shade, closed, llama, working, focused };
};
export default connect(mapStateToProps)(MainWindow);
const mapDispatchToProps = dispatch => ({
toggleMenu: e => {
dispatch({ type: TOGGLE_CONTEXT_MENU });
// TODO: Consider binding to a ref instead.
// https://stackoverflow.com/a/24421834
e.nativeEvent.stopImmediatePropagation();
},
dispatch
});
export default connect(mapStateToProps, mapDispatchToProps)(MainWindow);