Added zoom options to the view menu

ElectronClient/app/app.js

@@ -22,7 +22,7 @@ const ResourceService = require('lib/services/ResourceService');
 const ClipperServer = require('lib/ClipperServer');
 const ExternalEditWatcher = require('lib/services/ExternalEditWatcher');
 const { bridge } = require('electron').remote.require('./bridge');
-const { shell } = require('electron');
+const { shell, webFrame } = require('electron');
 const Menu = bridge().Menu;
 const PluginManager = require('lib/services/PluginManager');
 const RevisionService = require('lib/services/RevisionService');
@@ -46,6 +46,7 @@ const appDefaultState = Object.assign({}, defaultState, {
 	sidebarVisibility: true,
 	noteListVisibility: true,
 	windowContentSize: bridge().windowContentSize(),
+	windowContentZoomFactor: 1,
 	watchedNoteFiles: [],
 	lastEditorScrollPercents: {},
 	noteDevToolsVisible: false,
@@ -109,6 +110,18 @@ class Application extends BaseApplication {
 				newState.windowContentSize = action.size;
 				break;
 
+			case 'WINDOW_CONTENT_ZOOM_FACTOR_SET':
+
+				{
+					const MIN = 0.3;
+					const MAX = 3;
+					const zoomFactor = Math.max(MIN, Math.min(MAX, action.zoomFactor));
+					newState = Object.assign({}, state);
+					newState.windowContentZoomFactor = zoomFactor;
+					webFrame.setZoomFactor(zoomFactor);
+				}
+				break;
+
 			case 'WINDOW_COMMAND':
 
 				{
@@ -970,6 +983,36 @@ class Application extends BaseApplication {
 					label: _('Focus'),
 					screens: ['Main'],
 					submenu: focusItems,
+				}, {
+					type: 'separator',
+					screens: ['Main'],
+				}, {
+					label: _('Actual Size'),
+					click: () => {
+						this.store().dispatch({
+							type: 'WINDOW_CONTENT_ZOOM_FACTOR_SET',
+							zoomFactor: 1,
+						});
+					},
+					accelerator: 'CommandOrControl+0',
+				}, {
+					label: _('Zoom In'),
+					click: () => {
+						this.store().dispatch({
+							type: 'WINDOW_CONTENT_ZOOM_FACTOR_SET',
+							zoomFactor: webFrame.getZoomFactor() + 0.1,
+						});
+					},
+					accelerator: 'CommandOrControl+=',
+				}, {
+					label: _('Zoom Out'),
+					click: () => {
+						this.store().dispatch({
+							type: 'WINDOW_CONTENT_ZOOM_FACTOR_SET',
+							zoomFactor: webFrame.getZoomFactor() - 0.1,
+						});
+					},
+					accelerator: 'CommandOrControl+-',
 				}],
 			},
 			tools: {

ElectronClient/app/gui/Header.jsx

@@ -75,6 +75,17 @@ class HeaderComponent extends React.Component {
 		if (nextProps.windowCommand) {
 			this.doCommand(nextProps.windowCommand);
 		}
+
+		if (nextProps.zoomFactor !== this.props.zoomFactor || nextProps.size !== this.props.size) {
+			const mediaQuery = window.matchMedia(`(max-width: ${550 * nextProps.zoomFactor}px)`);
+			const showButtonLabels = !mediaQuery.matches;
+
+			if (this.state.showButtonLabels !== showButtonLabels) {
+				this.setState({
+					showButtonLabels: !mediaQuery.matches,
+				});
+			}
+		}
 	}
 
 	componentDidUpdate(prevProps) {
@@ -150,7 +161,9 @@ class HeaderComponent extends React.Component {
 				}}
 			>
 				{icon}
-				<span className="title">{title}</span>
+				<span className="title" style={{
+					display: this.state.showButtonLabels ? 'inline-block' : 'none',
+				}}>{title}</span>
 			</a>
 		);
 	}
@@ -167,7 +180,7 @@ class HeaderComponent extends React.Component {
 			paddingTop: 1, // vertical alignment with buttons
 			paddingBottom: 0, // vertical alignment with buttons
 			height: style.fontSize * 2,
-			width: 300,
+			maxWidth: 300,
 			color: style.color,
 			fontSize: style.fontSize,
 			fontFamily: style.fontFamily,
@@ -193,6 +206,7 @@ class HeaderComponent extends React.Component {
 		const containerStyle = {
 			display: 'flex',
 			flexDirection: 'row',
+			flexGrow: 1,
 			alignItems: 'center',
 		};
 
@@ -274,6 +288,8 @@ const mapStateToProps = state => {
 		theme: state.settings.theme,
 		windowCommand: state.windowCommand,
 		notesParentType: state.notesParentType,
+		size: state.windowContentSize,
+		zoomFactor: state.windowContentZoomFactor,
 	};
 };
 

ElectronClient/app/gui/Root.jsx

@@ -81,8 +81,8 @@ class RootComponent extends React.Component {
 
 	render() {
 		const navigatorStyle = {
-			width: this.props.size.width,
-			height: this.props.size.height,
+			width: this.props.size.width / this.props.zoomFactor,
+			height: this.props.size.height / this.props.zoomFactor,
 		};
 
 		const screens = {
@@ -101,6 +101,7 @@ class RootComponent extends React.Component {
 const mapStateToProps = state => {
 	return {
 		size: state.windowContentSize,
+		zoomFactor: state.windowContentZoomFactor,
 		appState: state.appState,
 	};
 };

ElectronClient/app/style.css

@@ -139,12 +139,6 @@ a {
 	opacity: 0.6;
 }
 
-@media screen and (max-width:550px){    
-	.header .title {
-		display: none;
-	}
-}
-
 .config-menu-bar button:focus {
 	outline: 0 none;
 }