Toggle Desktop from context menu

js/actionCreators/index.js

@@ -6,6 +6,7 @@ export {
   togglePlaylistShadeMode,
   closeWindow,
   hideWindow,
+  showWindow,
   setWindowSize,
   toggleWindow,
   updateWindowPositions,

js/actionCreators/windows.js

@@ -12,7 +12,8 @@ import {
   TOGGLE_WINDOW,
   CLOSE_WINDOW,
   TOGGLE_WINDOW_SHADE_MODE,
-  HIDE_WINDOW
+  HIDE_WINDOW,
+  SHOW_WINDOW
 } from "../actionTypes";
 
 import { getPositionDiff } from "../resizeUtils";
@@ -86,6 +87,11 @@ export function closeWindow(windowId) {
 export function hideWindow(windowId) {
   return { type: HIDE_WINDOW, windowId };
 }
+
+export function showWindow(windowId) {
+  return { type: SHOW_WINDOW, windowId };
+}
+
 export function setWindowSize(windowId, size) {
   return { type: WINDOW_SIZE_CHANGED, windowId, size };
 }

js/actionTypes.js

@@ -69,4 +69,5 @@ export const SET_Z_INDEX = "SET_Z_INDEX";
 export const DISABLE_MARQUEE = "DISABLE_MARQUEE";
 export const SET_DUMMY_VIZ_DATA = "SET_DUMMY_VIZ_DATA";
 export const HIDE_WINDOW = "HIDE_WINDOW";
+export const SHOW_WINDOW = "SHOW_WINDOW";
 export const LOADING = "LOADING";

js/components/MilkdropWindow/MilkdropContextMenu.js

@@ -8,7 +8,12 @@ const MilkdropContextMenu = props => (
       label="Fullscreen"
       hotkey="Alt+Enter"
     />
-    <Node onClick={props.enableDesktop} label="Desktop Mode" hotkey="Alt+D" />
+    <Node
+      onClick={props.toggleDesktop}
+      checked={props.desktopMode}
+      label="Desktop Mode"
+      hotkey="Alt+D"
+    />
     <Hr />
     <Node onClick={props.close} label="Quit" />
   </React.Fragment>

js/components/MilkdropWindow/index.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import screenfull from "screenfull";
 import ContextMenuWrapper from "../ContextMenuWrapper";
 import GenWindow from "../GenWindow";
-import { hideWindow } from "../../actionCreators";
+import { hideWindow, showWindow } from "../../actionCreators";
 import MilkdropContextMenu from "./MilkdropContextMenu";
 import Desktop from "./Desktop";
 
@@ -27,7 +27,7 @@ class PresetsLoader extends React.Component {
     };
     this._handleFullscreenChange = this._handleFullscreenChange.bind(this);
     this._handleRequestFullsceen = this._handleRequestFullsceen.bind(this);
-    this._enableDesktop = this._enableDesktop.bind(this);
+    this._toggleDesktop = this._toggleDesktop.bind(this);
   }
 
   isHidden() {
@@ -60,9 +60,14 @@ class PresetsLoader extends React.Component {
     this.setState({ isFullscreen: screenfull.isFullscreen });
   }
 
-  _enableDesktop() {
-    this.props.hideWindow(this.props.windowId);
-    this.setState({ desktop: true });
+  _toggleDesktop() {
+    if (this.state.desktop) {
+      this.props.showWindow(this.props.windowId);
+      this.setState({ desktop: false });
+    } else {
+      this.props.hideWindow(this.props.windowId);
+      this.setState({ desktop: true });
+    }
   }
 
   _handleRequestFullsceen() {
@@ -100,7 +105,21 @@ class PresetsLoader extends React.Component {
       return this._renderMilkdrop(size);
     } else if (this.state.desktop) {
       const size = { width: window.innerWidth, height: window.innerHeight };
-      return <Desktop>{this._renderMilkdrop(size)}</Desktop>;
+      return (
+        <ContextMenuWrapper
+          onDoubleClick={this._handleRequestFullsceen}
+          renderContents={() => (
+            <MilkdropContextMenu
+              close={this.props.close}
+              toggleFullscreen={this._handleRequestFullsceen}
+              desktopMode={this.state.desktop}
+              toggleDesktop={this._toggleDesktop}
+            />
+          )}
+        >
+          <Desktop>{this._renderMilkdrop(size)}</Desktop>
+        </ContextMenuWrapper>
+      );
     }
 
     return (
@@ -116,7 +135,8 @@ class PresetsLoader extends React.Component {
               <MilkdropContextMenu
                 close={this.props.close}
                 toggleFullscreen={this._handleRequestFullsceen}
-                enableDesktop={this._enableDesktop}
+                desktopMode={this.state.desktop}
+                toggleDesktop={this._toggleDesktop}
               />
             )}
           >
@@ -168,9 +188,7 @@ async function loadNonMinimalPresets() {
 }
 
 const mapStateToProps = () => ({});
-const mapDispatchProps = {
-  hideWindow
-};
+const mapDispatchProps = { hideWindow, showWindow };
 
 export default connect(
   mapStateToProps,

js/reducers/windows.js

@@ -4,6 +4,7 @@ import {
   TOGGLE_WINDOW,
   CLOSE_WINDOW,
   HIDE_WINDOW,
+  SHOW_WINDOW,
   ADD_GEN_WINDOW,
   UPDATE_WINDOW_POSITIONS,
   WINDOW_SIZE_CHANGED,
@@ -109,6 +110,17 @@ const windows = (state = defaultWindowsState, action) => {
           }
         }
       };
+    case SHOW_WINDOW:
+      return {
+        ...state,
+        genWindows: {
+          ...state.genWindows,
+          [action.windowId]: {
+            ...state.genWindows[action.windowId],
+            hidden: true
+          }
+        }
+      };
     case ADD_GEN_WINDOW:
       return {
         ...state,