Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-21 00:59:29 +00:00
Code Issues Projects Releases Wiki Activity

Add selection menu (always open, for now)

Browse source
This commit is contained in:
Jordan Eldredge 2017-09-30 13:33:27 -07:00
parent 924485c8a8
commit e97cb3c243
7 changed files with 105 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

40
css/playlist-window.css
View file

@ -134,6 +134,46 @@
position: absolute;
}
#winamp2-js .playlist-menu li {
list-style: none;
display: block;
display: none;
width: 22px;
height: 18px;
}
#winamp2-js .playlist-menu.selected ul {
padding: 0;
margin: 0;
position: absolute;
bottom: 0;
}
#winamp2-js .playlist-menu.selected li {
list-style: none;
display: block;
width: 22px;
height: 18px;
padding: 0;
margin: 0;
}
#winamp2-js .playlist-menu .bar {
position: absolute;
bottom: 0;
left: -3px;
width: 3px;
height: 54px;
}
#winamp2-js #playlist-selection-menu {
position: absolute;
bottom: 12px;
left: 72px;
width: 22px;
height: 18px;
}
#winamp2-js .playlist-bottom-right {
width: 150px;
height: 100%;

3
js/actionTypes.js
View file

@ -42,3 +42,6 @@ export const UNSET_USER_MESSAGE = "UNSET_USER_MESSAGE";
export const SET_PLAYLIST_SCROLL_POSITION = "SET_PLAYLIST_SCROLL_POSITION";
export const CLICKED_TRACK = "CLICKED_TRACK";
export const CTRL_CLICKED_TRACK = "CTRL_CLICKED_TRACK";
export const SELECT_ALL = "SELECT_ALL";
export const SELECT_ZERO = "SELECT_ZERO";
export const INVERT_SELECTION = "INVERT_SELECTION";

21
js/components/PlaylistWindow/SelectionMenu.js Normal file
View file

@ -0,0 +1,21 @@
import React from "react";
import { connect } from "react-redux";
import { SELECT_ALL, SELECT_ZERO, INVERT_SELECTION } from "../../actionTypes";
const SelectionMenu = props => (
<div id="playlist-selection-menu" className="playlist-menu selected">
<div className="bar" />
<ul>
<li className="invert-selection" onClick={props.invertSelection} />
<li className="select-zero" onClick={props.selectZero} />
<li className="select-all" onClick={props.selectAll} />
</ul>
</div>
);
const mapDispatchToProps = {
invertSelection: () => ({ type: INVERT_SELECTION }),
selectAll: () => ({ type: SELECT_ALL }),
selectZero: () => ({ type: SELECT_ZERO })
};
export default connect(null, mapDispatchToProps)(SelectionMenu);

5
js/components/PlaylistWindow/index.js
View file

@ -5,6 +5,7 @@ import Slider from "rc-slider/lib/Slider";
import MiniTime from "../MiniTime";
import Track from "./Track";
import SelectionMenu from "./SelectionMenu";
import { percentToIndex } from "../../utils";
import { WINDOWS } from "../../constants";
import {
@ -81,7 +82,9 @@ const PlaylistWindow = props => {
</div>
</div>
<div className="playlist-bottom draggable">
<div className="playlist-bottom-left draggable" />
<div className="playlist-bottom-left draggable">
<SelectionMenu />
</div>
<div className="playlist-bottom-center draggable" />
<div className="playlist-bottom-right draggable">
<div className="playlist-action-buttons">

13
js/components/Skin.js
View file

@ -77,6 +77,19 @@ const imageSelectors = {
PLAYLIST_BOTTOM_RIGHT_CORNER: [".playlist-bottom-right"],
PLAYLIST_VISUALIZER_BACKGROUND: [".playlist-visualizer"],
PLAYLIST_SHADE_BACKGROUND: ["#playlist.shade"],
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_SELECT_ZERO: ["#playlist-selection-menu .select-zero"],
PLAYLIST_SELECT_ZERO_SELECTED: [
"#playlist-selection-menu .select-zero:hover"
],
PLAYLIST_SELECT_ALL: ["#playlist-selection-menu .select-all"],
PLAYLIST_SELECT_ALL_SELECTED: ["#playlist-selection-menu .select-all:hover"],
EQ_WINDOW_BACKGROUND: ["#equalizer-window:not(.shade)"],
EQ_TITLE_BAR: [".equalizer-top"],
EQ_TITLE_BAR_SELECTED: [".selected .equalizer-top"],

23
js/reducers.js
View file

@ -35,7 +35,10 @@ import {
UNSET_USER_MESSAGE,
SET_PLAYLIST_SCROLL_POSITION,
CLICKED_TRACK,
CTRL_CLICKED_TRACK
CTRL_CLICKED_TRACK,
SELECT_ALL,
SELECT_ZERO,
INVERT_SELECTION
} from "./actionTypes";
import { playlistEnabled } from "./config";
@ -221,8 +224,7 @@ const defaultTracksState = {
const tracks = (state = defaultTracksState, action) => {
switch (action.type) {
case CLICKED_TRACK:
const ids = Object.keys(state);
return ids.reduce((newTracks, id) => {
return Object.keys(state).reduce((newTracks, id) => {
newTracks[id] = { ...state[id], selected: id === String(action.id) };
return newTracks;
}, {});
@ -230,6 +232,21 @@ const tracks = (state = defaultTracksState, action) => {
const track = state[action.id];
const newTrack = { ...track, selected: !track.selected };
return { ...state, [action.id]: newTrack };
case SELECT_ALL:
return Object.keys(state).reduce((newTracks, id) => {
newTracks[id] = { ...state[id], selected: true };
return newTracks;
}, {});
case SELECT_ZERO:
return Object.keys(state).reduce((newTracks, id) => {
newTracks[id] = { ...state[id], selected: false };
return newTracks;
}, {});
case INVERT_SELECTION:
return Object.keys(state).reduce((newTracks, id) => {
newTracks[id] = { ...state[id], selected: !state[id].selected };
return newTracks;
}, {});
default:
return state;
}

7
js/skinSprites.js
View file

@ -340,10 +340,11 @@ export default {
width: 22,
height: 18
},
{ name: "PLAYLIST_REMOVE_MENU_BAR", x: 48, y: 111, width: 3, height: 54 },
{ name: "PLAYLIST_SELECT_MENU_BAR", x: 100, y: 111, width: 3, height: 72 },
{ name: "PLAYLIST_ADD_MENU_BAR", x: 48, y: 111, width: 3, height: 54 },
{ name: "PLAYLIST_REMOVE_MENU_BAR", x: 100, y: 111, width: 3, height: 72 },
{ name: "PLAYLIST_SELECT_MENU_BAR", x: 150, y: 111, width: 3, height: 54 },
{ name: "PLAYLIST_MISC_MENU_BAR", x: 200, y: 111, width: 3, height: 54 },
{ name: "PLAYLIST_LIST_MENU_BAR", x: 250, y: 111, width: 3, height: 54 }
{ name: "PLAYLIST_LIST_BAR", x: 250, y: 111, width: 3, height: 54 }
],
EQ_EX: [
{