Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-19 01:23:49 +00:00
Code Issues Projects Releases Wiki Activity

Implement hover ourselves (sad face)

Browse source 
Fixes #408
This commit is contained in:
Jordan Eldredge 2017-10-22 11:10:05 -07:00
parent e55fcaf36e
commit e589edca77
5 changed files with 67 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

6
js/components/PlaylistWindow/MiscMenu.js
View file

@ -5,9 +5,9 @@ import PlaylistMenu from "./PlaylistMenu";
const MiscMenu = props => (
<PlaylistMenu id="playlist-misc-menu">
<li className="sort-list" />
<li className="file-info" onClick={props.fileInfo} />
<li className="misc-options" />
<div className="sort-list" />
<div className="file-info" onClick={props.fileInfo} />
<div className="misc-options" />
</PlaylistMenu>
);

49
js/components/PlaylistWindow/PlaylistMenu.js
View file

@ -1,6 +1,45 @@
import React from "react";
import classnames from "classnames";
let cursorX;
let cursorY;
window.document.addEventListener("mousemove", e => {
cursorX = e.pageX;
cursorY = e.pageY;
});
// We implement hover ourselves, because we hate ourselves and https://stackoverflow.com/a/13259049/1263117
class Entry extends React.Component {
constructor(props) {
super(props);
this.state = { hover: false };
}
componentDidMount() {
const domRect = this.node.getBoundingClientRect();
this.setState({
hover:
cursorX >= domRect.left &&
cursorX <= domRect.right &&
cursorY >= domRect.top &&
cursorY <= domRect.bottom
});
}
render() {
return (
<li
ref={node => (this.node = node)}
onMouseEnter={() => this.setState({ hover: true })}
onMouseLeave={() => this.setState({ hover: false })}
className={classnames({ hover: this.state.hover })}
>
{this.props.children}
</li>
);
}
}
export default class PlaylistMenu extends React.Component {
constructor(props) {
super(props);
@ -40,8 +79,14 @@ export default class PlaylistMenu extends React.Component {
})}
onClick={this._handleClick}
>
<div className="bar" />
<ul>{this.props.children}</ul>
<div className="bar" />,
{this.state.selected && (
<ul>
{React.Children.map(this.props.children, (child, i) => (
<Entry key={i}>{child}</Entry>
))}
</ul>
)}
</div>
);
}

8
js/components/PlaylistWindow/RemoveMenu.js
View file

@ -6,10 +6,10 @@ import PlaylistMenu from "./PlaylistMenu";
const RemoveMenu = props => (
<PlaylistMenu id="playlist-remove-menu">
<li className="remove-misc" />
<li className="remove-all" onClick={props.removeAll} />
<li className="crop" onClick={props.crop} />
<li className="remove-selected" onClick={props.removeSelected} />
<div className="remove-misc" />
<div className="remove-all" onClick={props.removeAll} />
<div className="crop" onClick={props.crop} />
<div className="remove-selected" onClick={props.removeSelected} />
</PlaylistMenu>
);

6
js/components/PlaylistWindow/SelectionMenu.js
View file

@ -5,9 +5,9 @@ import PlaylistMenu from "./PlaylistMenu";
const SelectionMenu = props => (
<PlaylistMenu id="playlist-selection-menu">
<li className="invert-selection" onClick={props.invertSelection} />
<li className="select-zero" onClick={props.selectZero} />
<li className="select-all" onClick={props.selectAll} />
<div className="invert-selection" onClick={props.invertSelection} />
<div className="select-zero" onClick={props.selectZero} />
<div className="select-all" onClick={props.selectAll} />
</PlaylistMenu>
);

18
js/components/Skin.js
View file

@ -80,27 +80,27 @@ const imageSelectors = {
PLAYLIST_REMOVE_MENU_BAR: ["#playlist-remove-menu.selected .bar"],
PLAYLIST_REMOVE_ALL: ["#playlist-remove-menu .remove-all"],
PLAYLIST_REMOVE_ALL_SELECTED: ["#playlist-remove-menu .remove-all:hover"],
PLAYLIST_REMOVE_ALL_SELECTED: ["#playlist-remove-menu .hover .remove-all"],
PLAYLIST_CROP: ["#playlist-remove-menu .crop"],
PLAYLIST_CROP_SELECTED: ["#playlist-remove-menu .crop:hover"],
PLAYLIST_CROP_SELECTED: ["#playlist-remove-menu .hover .crop"],
PLAYLIST_REMOVE_SELECTED: ["#playlist-remove-menu .remove-selected"],
PLAYLIST_REMOVE_SELECTED_SELECTED: [
"#playlist-remove-menu .remove-selected:hover"
"#playlist-remove-menu .hover .remove-selected"
],
PLAYLIST_REMOVE_MISC: ["#playlist-remove-menu .remove-misc"],
PLAYLIST_REMOVE_MISC_SELECTED: ["#playlist-remove-menu .remove-misc:hover"],
PLAYLIST_REMOVE_MISC_SELECTED: ["#playlist-remove-menu .hover .remove-misc"],
PLAYLIST_SELECT_MENU_BAR: ["#playlist-selection-menu.selected .bar"],
PLAYLIST_INVERT_SELECTION: ["#playlist-selection-menu .invert-selection"],
PLAYLIST_INVERT_SELECTION_SELECTED: [
"#playlist-selection-menu .invert-selection:hover"
"#playlist-selection-menu .hover .invert-selection"
],
PLAYLIST_SELECT_ZERO: ["#playlist-selection-menu .select-zero"],
PLAYLIST_SELECT_ZERO_SELECTED: [
"#playlist-selection-menu .select-zero:hover"
"#playlist-selection-menu .hover .select-zero"
],
PLAYLIST_SELECT_ALL: ["#playlist-selection-menu .select-all"],
PLAYLIST_SELECT_ALL_SELECTED: ["#playlist-selection-menu .select-all:hover"],
PLAYLIST_SELECT_ALL_SELECTED: ["#playlist-selection-menu .hover .select-all"],
EQ_WINDOW_BACKGROUND: ["#equalizer-window:not(.shade)"],
EQ_TITLE_BAR: [".equalizer-top"],
@ -254,7 +254,9 @@ const cursorSelectors = {
"#equalizer-window .title-bar",
"#equalizer-window.shade",
"#equalizer-window.shade input"
]
],
PNORMAL: ["#playlist-window"],
PVSCROLL: ["#playlist-window .playlist-scrollbar-wrapper"]
};
Object.keys(FONT_LOOKUP).forEach(character => {