Add option to hide on-screen buttons, add cards & prefs to menu

components/cards/index.js

@@ -51,15 +51,15 @@ class Cards extends React.Component {
 				open,
 			},
 		}, open ? [
-			r.div([
+			!this.props.preferences.hideOnScreenButtons && r(React.Fragment, [
 				r(Button, {
 					style: { width: '100%' },
 					autoFocus: true,
 					onClick: toggle,
 				}, 'Close'),
-			]),
 
-			r.hr(),
+				r.hr(),
+			]),
 
 			...map(card => r(Label, {
 				title: card.name,
@@ -92,7 +92,7 @@ class Cards extends React.Component {
 				JSON.stringify(this.props, null, 2),
 			]),
 		] : [
-			r(Button, {
+			!this.props.preferences.hideOnScreenButtons && r(Button, {
 				autoFocus: true,
 				onClick: toggle,
 			}, 'Cards'),

components/hot-keys/index.js

@@ -85,13 +85,20 @@ class MyHotKeys extends React.Component {
 	}
 
 	render() {
+		const handlers = map(f => bind(f, this), pick(keys(keyMap), this));
 		return r(HotKeys, {
 			keyMap,
-			handlers: map(f => bind(f, this), pick(keys(keyMap), this)),
+			handlers,
 		}, this.props.children({
 			graphRef: this.graphRef,
 			cardsRef: this.cardsRef,
 			preferencesRef: this.preferencesRef,
+
+			actions: {
+				focusGraph: handlers.hotKeyFocusGraph,
+				focusCards: handlers.hotKeyFocusCards,
+				focusPreferences: handlers.hotKeyFocusPreferences,
+			},
 		}));
 	}
 }

components/menu/index.js

@@ -16,14 +16,14 @@ const MenuProvider = ({ children, ...props }) => r(Provider, { electron }, r(Rea
 	...[].concat(children),
 ]));
 
-const WindowMenu = ({ openConnectToServerModal }) => r(WindowMenuBase, [
+const WindowMenu = props => r(WindowMenuBase, [
 	r(MenuItem, {
 		label: 'File',
 	}, [
 		r(MenuItem, {
 			label: 'Connect to server...',
 			accelerator: 'CommandOrControl+N',
-			onClick: openConnectToServerModal,
+			onClick: props.openConnectToServerModal,
 		}),
 
 		r(MenuItem.Separator),
@@ -37,6 +37,17 @@ const WindowMenu = ({ openConnectToServerModal }) => r(WindowMenuBase, [
 	r(MenuItem, {
 		label: 'View',
 	}, [
+		r(MenuItem, {
+			label: 'Cards',
+			onClick: props.focusCards,
+		}),
+		r(MenuItem, {
+			label: 'Preferences',
+			onClick: props.focusPreferences,
+		}),
+
+		r(MenuItem.Separator),
+
 		r(MenuItem, {
 			label: 'Reload',
 			role: 'reload',

components/preferences/index.js

@@ -58,15 +58,15 @@ class Preferences extends React.Component {
 				open,
 			},
 		}, open ? [
-			r.div([
+			!this.props.preferences.hideOnScreenButtons && r(React.Fragment, [
 				r(Button, {
 					style: { width: '100%' },
 					autoFocus: true,
 					onClick: toggle,
 				}, 'Close'),
-			]),
 
-			r.hr(),
+				r.hr(),
+			]),
 
 			r.div([
 				r(Checkbox, {
@@ -153,6 +153,13 @@ class Preferences extends React.Component {
 
 			r.hr(),
 
+			r.div([
+				r(Checkbox, {
+					checked: this.props.preferences.hideOnScreenButtons,
+					onChange: () => this.props.actions.toggle('hideOnScreenButtons'),
+				}, 'Hide on-screen buttons'),
+			]),
+
 			r.div([
 				r(Checkbox, {
 					checked: this.props.preferences.doNotAskForConfirmations,
@@ -176,7 +183,7 @@ class Preferences extends React.Component {
 				}, 'Reset to defaults'),
 			]),
 		] : [
-			r(Button, {
+			!this.props.preferences.hideOnScreenButtons && r(Button, {
 				autoFocus: true,
 				onClick: toggle,
 			}, 'Preferences'),

reducers/preferences.js

@@ -8,6 +8,8 @@ const { handleActions } = require('redux-actions');
 const { preferences } = require('../actions');
 
 const initialState = {
+	hideOnScreenButtons: false,
+
 	hideDisconnectedClients: true,
 	hideDisconnectedModules: true,
 	hideDisconnectedSources: false,

renderer.js

@@ -22,11 +22,12 @@ const theme = require('./utils/theme');
 const Root = () => r(ReduxProvider, {
 	store: createStore(),
 }, r(HotKeys, {
-}, ({ graphRef, cardsRef, preferencesRef }) => r(Modals, {
+}, ({ graphRef, cardsRef, preferencesRef, actions: hotKeysActions }) => r(Modals, {
-}, ({ actions }) => r(MenuProvider, {
+}, ({ actions: modalsActions }) => r(MenuProvider, {
-	...actions,
+	...modalsActions,
+	...hotKeysActions,
 }, [
-	r(Graph, { ref: graphRef, ...actions }),
+	r(Graph, { ref: graphRef, ...modalsActions }),
 	r(Cards, { ref: cardsRef }),
 	r(Preferences, { ref: preferencesRef }),
 	r(ServerInfo),