diff --git a/css/context-menu.css b/css/context-menu.css index 3f267977..5079c5ef 100644 --- a/css/context-menu.css +++ b/css/context-menu.css @@ -34,6 +34,13 @@ display: block; } +#context-menu li.checked:before { + float: left; + /* TODO: Use an image */ + content: "\2713"; + margin-left: -12px; +} + #context-menu li.parent:after { float: right; content: "\25b8"; diff --git a/js/actionTypes.js b/js/actionTypes.js index 74c23e4f..378f521e 100644 --- a/js/actionTypes.js +++ b/js/actionTypes.js @@ -21,6 +21,7 @@ export const STEP_MARQUEE = "STEP_MARQUEE"; export const STOP = "STOP"; export const STOP_WORKING = "STOP_WORKING"; export const TOGGLE_DOUBLESIZE_MODE = "TOGGLE_DOUBLESIZE_MODE"; +export const TOGGLE_MAIN_WINDOW = "TOGGLE_MAIN_WINDOW"; export const TOGGLE_EQUALIZER_WINDOW = "TOGGLE_EQUALIZER_WINDOW"; export const TOGGLE_PLAYLIST_WINDOW = "TOGGLE_PLAYLIST_WINDOW"; export const SET_EQ_AUTO = "SET_EQ_AUTO"; diff --git a/js/components/App.js b/js/components/App.js index 323e1bfb..b13ae700 100644 --- a/js/components/App.js +++ b/js/components/App.js @@ -13,6 +13,7 @@ import "../../css/webamp.css"; const App = ({ media, closed, + mainWindow, equalizer, playlist, openWindows, @@ -24,7 +25,9 @@ const App = ({ return null; } const windows = { - main: , + main: mainWindow && ( + + ), equalizer: equalizer && , playlist: playlist && }; @@ -46,7 +49,7 @@ const App = ({ } }); return ( -
+
alert("context")}>
@@ -59,6 +62,7 @@ App.propTypes = { const mapStateToProps = state => ({ closed: state.display.closed, + mainWindow: state.windows.mainWindow, equalizer: state.windows.equalizer, playlist: state.windows.playlist, openWindows: new Set(state.windows.openGenWindows) diff --git a/js/components/ContextMenu.js b/js/components/ContextMenu.js index 5df9d413..658b25b1 100644 --- a/js/components/ContextMenu.js +++ b/js/components/ContextMenu.js @@ -1,7 +1,6 @@ import React from "react"; import { createPortal } from "react-dom"; import PropTypes from "prop-types"; - import classnames from "classnames"; import "../../css/context-menu.css"; @@ -54,7 +53,14 @@ LinkNode.propTypes = { href: PropTypes.string.isRequired }; -export const Node = props =>
  • {props.label}
  • ; +export const Node = props => { + const { label, checked, className = "", ...passThroughProps } = props; + return ( +
  • + {label} +
  • + ); +}; Node.propTypes = { label: PropTypes.string.isRequired diff --git a/js/components/MainWindow/MainContextMenu.js b/js/components/MainWindow/MainContextMenu.js index d4ec1343..75b4d521 100644 --- a/js/components/MainWindow/MainContextMenu.js +++ b/js/components/MainWindow/MainContextMenu.js @@ -8,6 +8,11 @@ import { loadMediaFiles, openSkinFileDialog } from "../../actionCreators"; +import { + TOGGLE_MAIN_WINDOW, + TOGGLE_EQUALIZER_WINDOW, + TOGGLE_PLAYLIST_WINDOW +} from "../../actionTypes"; import { LOAD_STYLE } from "../../constants"; import { ContextMenu, Hr, Node, Parent, LinkNode } from "../ContextMenu"; @@ -20,7 +25,7 @@ const MainContextMenu = props => (
    @@ -45,6 +50,23 @@ const MainContextMenu = props => ( ) )} +
    + + + +
    {!!props.availableSkins.length &&
    } @@ -63,7 +85,10 @@ const MainContextMenu = props => ( const mapStateToProps = state => ({ availableSkins: state.settings.availableSkins, - networkConnected: state.network.connected + networkConnected: state.network.connected, + mainWindowOpen: state.windows.mainWindow, // For now you can't close the main window without closing all of Webamp + playlistOpen: state.windows.playlist, + equalizerOpen: state.windows.equalizer }); const mapDispatchToProps = { @@ -71,7 +96,10 @@ const mapDispatchToProps = { openSkinFileDialog, openMediaFileDialog, loadMediaFiles, - setSkin: setSkinFromUrl + setSkin: setSkinFromUrl, + toggleMainWindow: () => ({ type: TOGGLE_MAIN_WINDOW }), + togglePlaylist: () => ({ type: TOGGLE_PLAYLIST_WINDOW }), + toggleEqualizer: () => ({ type: TOGGLE_EQUALIZER_WINDOW }) }; export default connect(mapStateToProps, mapDispatchToProps)(MainContextMenu); diff --git a/js/reducers/windows.js b/js/reducers/windows.js index 1da0eedf..a00fa1ed 100644 --- a/js/reducers/windows.js +++ b/js/reducers/windows.js @@ -1,6 +1,7 @@ import { WINDOWS } from "../constants"; import { SET_FOCUSED_WINDOW, + TOGGLE_MAIN_WINDOW, TOGGLE_EQUALIZER_WINDOW, CLOSE_EQUALIZER_WINDOW, TOGGLE_PLAYLIST_WINDOW, @@ -14,6 +15,7 @@ import { arrayWith, arrayWithout } from "../utils"; const defaultWindowsState = { focused: WINDOWS.MAIN, + mainWindow: true, equalizer: true, playlist: true, openGenWindows: [], @@ -25,6 +27,8 @@ const windows = (state = defaultWindowsState, action) => { switch (action.type) { case SET_FOCUSED_WINDOW: return { ...state, focused: action.window }; + case TOGGLE_MAIN_WINDOW: + return { ...state, mainWindow: !state.mainWindow }; case TOGGLE_EQUALIZER_WINDOW: return { ...state, equalizer: !state.equalizer }; case CLOSE_EQUALIZER_WINDOW: diff --git a/js/selectors.js b/js/selectors.js index 6e5844bd..4bdd5945 100644 --- a/js/selectors.js +++ b/js/selectors.js @@ -298,3 +298,7 @@ export const getWindowGraph = createSelector( return generateGraph(windowData); } ); + +export const getGenWindows = state => { + return state.windows.genWindows; +};