diff --git a/js/components/PlaylistWindow/MiscMenu.js b/js/components/PlaylistWindow/MiscMenu.js
index d145982e..fe76ab46 100644
--- a/js/components/PlaylistWindow/MiscMenu.js
+++ b/js/components/PlaylistWindow/MiscMenu.js
@@ -5,9 +5,9 @@ import PlaylistMenu from "./PlaylistMenu";
const MiscMenu = props => (
);
diff --git a/js/components/PlaylistWindow/PlaylistMenu.js b/js/components/PlaylistWindow/PlaylistMenu.js
index 4cd0075f..785e87e5 100644
--- a/js/components/PlaylistWindow/PlaylistMenu.js
+++ b/js/components/PlaylistWindow/PlaylistMenu.js
@@ -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 (
+
(this.node = node)}
+ onMouseEnter={() => this.setState({ hover: true })}
+ onMouseLeave={() => this.setState({ hover: false })}
+ className={classnames({ hover: this.state.hover })}
+ >
+ {this.props.children}
+
+ );
+ }
+}
+
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}
>
-
-
+ ,
+ {this.state.selected && (
+
+ {React.Children.map(this.props.children, (child, i) => (
+ {child}
+ ))}
+
+ )}
);
}
diff --git a/js/components/PlaylistWindow/RemoveMenu.js b/js/components/PlaylistWindow/RemoveMenu.js
index ccb7a7b0..fcdb72c7 100644
--- a/js/components/PlaylistWindow/RemoveMenu.js
+++ b/js/components/PlaylistWindow/RemoveMenu.js
@@ -6,10 +6,10 @@ import PlaylistMenu from "./PlaylistMenu";
const RemoveMenu = props => (
);
diff --git a/js/components/PlaylistWindow/SelectionMenu.js b/js/components/PlaylistWindow/SelectionMenu.js
index 425b4997..8df16db2 100644
--- a/js/components/PlaylistWindow/SelectionMenu.js
+++ b/js/components/PlaylistWindow/SelectionMenu.js
@@ -5,9 +5,9 @@ import PlaylistMenu from "./PlaylistMenu";
const SelectionMenu = props => (
);
diff --git a/js/components/Skin.js b/js/components/Skin.js
index f3e82dff..8d50c082 100644
--- a/js/components/Skin.js
+++ b/js/components/Skin.js
@@ -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 => {