Add missing playlist menus

This commit is contained in:
Jordan Eldredge 2017-11-17 21:17:41 -08:00
parent 364cdeea3b
commit a71d3e66e1
8 changed files with 149 additions and 5 deletions

View file

@ -163,6 +163,15 @@
width: 3px;
height: 54px;
}
#winamp2-js #playlist-add-menu {
position: absolute;
bottom: 12px;
left: 13px;
width: 22px;
height: 18px;
}
#winamp2-js #playlist-remove-menu.playlist-menu .bar {
height: 72px;
}
@ -183,6 +192,22 @@
height: 18px;
}
#winamp2-js #playlist-misc-menu {
position: absolute;
bottom: 12px;
left: 102px;
width: 22px;
height: 18px;
}
#winamp2-js #playlist-list-menu {
position: absolute;
bottom: 12px;
right: 22px;
width: 22px;
height: 18px;
}
#winamp2-js .playlist-bottom-right {
width: 150px;
height: 100%;

View file

@ -0,0 +1,20 @@
import React from "react";
import PlaylistMenu from "./PlaylistMenu";
/* eslint-disable no-alert */
const AddMenu = ({ openFileDialog }) => (
<PlaylistMenu id="playlist-add-menu">
<div
className="add-url"
onClick={() => alert("Not supported in Winamp2-js")}
/>
<div
className="add-dir"
onClick={() => alert("Not supported in Winamp2-js")}
/>
<div className="add-file" onClick={openFileDialog} />
</PlaylistMenu>
);
export default AddMenu;

View file

@ -0,0 +1,25 @@
import React from "react";
import { connect } from "react-redux";
import PlaylistMenu from "./PlaylistMenu";
/* eslint-disable no-alert */
const ListMenu = () => (
<PlaylistMenu id="playlist-list-menu">
<div
className="new-list"
onClick={() => alert("Not supported in Winamp2-js")}
/>
<div
className="save-list"
onClick={() => alert("Not supported in Winamp2-js")}
/>
<div
className="load-list"
onClick={() => alert("Not supported in Winamp2-js")}
/>
</PlaylistMenu>
);
const mapDispatchToProps = {};
export default connect(null, mapDispatchToProps)(ListMenu);

View file

@ -3,11 +3,23 @@ import { connect } from "react-redux";
import { FILE_INFO } from "../../actionTypes";
import PlaylistMenu from "./PlaylistMenu";
const MiscMenu = props => (
/* eslint-disable no-alert */
const MiscMenu = () => (
<PlaylistMenu id="playlist-misc-menu">
<div className="sort-list" />
<div className="file-info" onClick={props.fileInfo} />
<div className="misc-options" />
<div
className="sort-list"
onClick={() => alert("Not supported in Winamp2-js")}
/>
{/* onClick={props.fileInfo} */}
<div
className="file-info"
onClick={() => alert("Not supported in Winamp2-js")}
/>
<div
className="misc-options"
onClick={() => alert("Not supported in Winamp2-js")}
/>
</PlaylistMenu>
);

View file

@ -4,9 +4,14 @@ import { REMOVE_ALL_TRACKS } from "../../actionTypes";
import { cropPlaylist, removeSelectedTracks } from "../../actionCreators";
import PlaylistMenu from "./PlaylistMenu";
/* eslint-disable no-alert */
const RemoveMenu = props => (
<PlaylistMenu id="playlist-remove-menu">
<div className="remove-misc" />
<div
className="remove-misc"
onClick={() => alert("Not supported in Winamp2-js")}
/>
<div className="remove-all" onClick={props.removeAll} />
<div className="crop" onClick={props.crop} />
<div className="remove-selected" onClick={props.removeSelected} />

View file

@ -222,6 +222,15 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
<div
className="playlist-bottom-left draggable"
>
<div
className="playlist-menu"
id="playlist-add-menu"
onClick={[Function]}
>
<div
className="bar"
/>
</div>
<div
className="playlist-menu"
id="playlist-remove-menu"
@ -240,6 +249,15 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
className="bar"
/>
</div>
<div
className="playlist-menu"
id="playlist-misc-menu"
onClick={[Function]}
>
<div
className="bar"
/>
</div>
</div>
<div
className="playlist-bottom-center draggable"
@ -334,6 +352,15 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
onClick={[Function]}
/>
</div>
<div
className="playlist-menu"
id="playlist-list-menu"
onClick={[Function]}
>
<div
className="bar"
/>
</div>
<div
id="playlist-resize-target"
onMouseDown={[Function]}

View file

@ -6,8 +6,11 @@ import Slider from "rc-slider/lib/Slider";
import MiniTime from "../MiniTime";
import PlaylistShade from "./PlaylistShade";
import Track from "./Track";
import AddMenu from "./AddMenu";
import RemoveMenu from "./RemoveMenu";
import SelectionMenu from "./SelectionMenu";
import MiscMenu from "./MiscMenu";
import ListMenu from "./ListMenu";
import ResizeTarget from "./ResizeTarget";
import RunningTimeDisplay from "./RunningTimeDisplay";
import { percentToIndex } from "../../utils";
@ -123,8 +126,10 @@ const PlaylistWindow = props => {
</div>
<div className="playlist-bottom draggable">
<div className="playlist-bottom-left draggable">
<AddMenu openFileDialog={props.openFileDialog} />
<RemoveMenu />
<SelectionMenu />
<MiscMenu />
</div>
<div className="playlist-bottom-center draggable" />
<div className="playlist-bottom-right draggable">
@ -141,6 +146,7 @@ const PlaylistWindow = props => {
/>
</div>
<MiniTime />
<ListMenu />
<ResizeTarget />
</div>
</div>

View file

@ -79,6 +79,14 @@ export const imageSelectors = {
"#playlist-window-shade.selected .right"
],
PLAYLIST_ADD_MENU_BAR: ["#playlist-add-menu.selected .bar"],
PLAYLIST_ADD_URL: ["#playlist-add-menu .add-url"],
PLAYLIST_ADD_URL_SELECTED: ["#playlist-add-menu .hover .add-url"],
PLAYLIST_ADD_DIR: ["#playlist-add-menu .add-dir"],
PLAYLIST_ADD_DIR_SELECTED: ["#playlist-add-menu .hover .add-dir"],
PLAYLIST_ADD_FILE: ["#playlist-add-menu .add-file"],
PLAYLIST_ADD_FILE_SELECTED: ["#playlist-add-menu .hover .add-file"],
PLAYLIST_REMOVE_MENU_BAR: ["#playlist-remove-menu.selected .bar"],
PLAYLIST_REMOVE_ALL: ["#playlist-remove-menu .remove-all"],
PLAYLIST_REMOVE_ALL_SELECTED: ["#playlist-remove-menu .hover .remove-all"],
@ -110,6 +118,22 @@ export const imageSelectors = {
"#playlist-window-shade #playlist-shade-button:active"
],
PLAYLIST_MISC_MENU_BAR: ["#playlist-misc-menu.selected .bar"],
PLAYLIST_MISC_OPTIONS: ["#playlist-misc-menu .misc-options"],
PLAYLIST_MISC_OPTIONS_SELECTED: ["#playlist-misc-menu .hover .misc-options"],
PLAYLIST_FILE_INFO: ["#playlist-misc-menu .file-info"],
PLAYLIST_FILE_INFO_SELECTED: ["#playlist-misc-menu .hover .file-info"],
PLAYLIST_SORT_LIST: ["#playlist-misc-menu .sort-list"],
PLAYLIST_SORT_LIST_SELECTED: ["#playlist-misc-menu .hover .sort-list"],
PLAYLIST_LIST_BAR: ["#playlist-list-menu.selected .bar"],
PLAYLIST_NEW_LIST: ["#playlist-list-menu .new-list"],
PLAYLIST_NEW_LIST_SELECTED: ["#playlist-list-menu .hover .new-list"],
PLAYLIST_LOAD_LIST: ["#playlist-list-menu .load-list"],
PLAYLIST_LOAD_LIST_SELECTED: ["#playlist-list-menu .hover .load-list"],
PLAYLIST_SAVE_LIST: ["#playlist-list-menu .save-list"],
PLAYLIST_SAVE_LIST_SELECTED: ["#playlist-list-menu .hover .save-list"],
EQ_WINDOW_BACKGROUND: ["#equalizer-window:not(.shade)"],
EQ_TITLE_BAR: [".equalizer-top"],
EQ_TITLE_BAR_SELECTED: [".selected .equalizer-top"],