Desktop: Keyboard shortcut editor

.eslintignore

@@ -63,6 +63,8 @@ Modules/TinyMCE/langs/
 # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
 CliClient/app/LinkSelector.js
 CliClient/build/LinkSelector.js
+CliClient/tests-build/synchronizer_LockHandler.js
+CliClient/tests-build/synchronizer_MigrationHandler.js
 CliClient/tests/synchronizer_LockHandler.js
 CliClient/tests/synchronizer_MigrationHandler.js
 ElectronClient/commands/focusElement.js
@@ -71,6 +73,12 @@ ElectronClient/commands/stopExternalEditing.js
 ElectronClient/global.d.js
 ElectronClient/gui/ErrorBoundary.js
 ElectronClient/gui/Header/commands/focusSearch.js
+ElectronClient/gui/KeymapConfig/KeymapConfigScreen.js
+ElectronClient/gui/KeymapConfig/ShortcutRecorder.js
+ElectronClient/gui/KeymapConfig/styles/index.js
+ElectronClient/gui/KeymapConfig/utils/getLabel.js
+ElectronClient/gui/KeymapConfig/utils/useEditing.js
+ElectronClient/gui/KeymapConfig/utils/useKeymap.js
 ElectronClient/gui/MainScreen/commands/editAlarm.js
 ElectronClient/gui/MainScreen/commands/exportPdf.js
 ElectronClient/gui/MainScreen/commands/hideModalMessage.js

.gitignore

@@ -54,6 +54,8 @@ Tools/commit_hook.txt
 # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
 CliClient/app/LinkSelector.js
 CliClient/build/LinkSelector.js
+CliClient/tests-build/synchronizer_LockHandler.js
+CliClient/tests-build/synchronizer_MigrationHandler.js
 CliClient/tests/synchronizer_LockHandler.js
 CliClient/tests/synchronizer_MigrationHandler.js
 ElectronClient/commands/focusElement.js
@@ -62,6 +64,12 @@ ElectronClient/commands/stopExternalEditing.js
 ElectronClient/global.d.js
 ElectronClient/gui/ErrorBoundary.js
 ElectronClient/gui/Header/commands/focusSearch.js
+ElectronClient/gui/KeymapConfig/KeymapConfigScreen.js
+ElectronClient/gui/KeymapConfig/ShortcutRecorder.js
+ElectronClient/gui/KeymapConfig/styles/index.js
+ElectronClient/gui/KeymapConfig/utils/getLabel.js
+ElectronClient/gui/KeymapConfig/utils/useEditing.js
+ElectronClient/gui/KeymapConfig/utils/useKeymap.js
 ElectronClient/gui/MainScreen/commands/editAlarm.js
 ElectronClient/gui/MainScreen/commands/exportPdf.js
 ElectronClient/gui/MainScreen/commands/hideModalMessage.js

CliClient/tests/services_KeymapService.js

@@ -282,13 +282,7 @@ describe('services_KeymapService', () => {
 
 			for (let i = 0; i < customKeymaps_Darwin.length; i++) {
 				const customKeymap = customKeymaps_Darwin[i];
-				const defaultAccelerators = customKeymap.map(({ command }) => keymapService.getAccelerator(command));
-
 				expect(() => keymapService.setKeymap(customKeymap)).toThrow();
-				// All items should be reset to default values
-				for (let j = 0; j < customKeymap.length; j++) {
-					expect(keymapService.getAccelerator(customKeymap[j].command)).toEqual(defaultAccelerators[j]);
-				}
 			}
 
 			const customKeymaps_Linux = [
@@ -306,13 +300,7 @@ describe('services_KeymapService', () => {
 
 			for (let i = 0; i < customKeymaps_Linux.length; i++) {
 				const customKeymap = customKeymaps_Linux[i];
-				const defaultAccelerators = customKeymap.map(({ command }) => keymapService.getAccelerator(command));
-
 				expect(() => keymapService.setKeymap(customKeymap)).toThrow();
-
-				for (let j = 0; j < customKeymap.length; j++) {
-					expect(keymapService.getAccelerator(customKeymap[j].command)).toEqual(defaultAccelerators[j]);
-				}
 			}
 		});
 	});

ElectronClient/app.js

@@ -110,6 +110,8 @@ class Application extends BaseApplication {
 
 		this.commandService_commandsEnabledStateChange = this.commandService_commandsEnabledStateChange.bind(this);
 		CommandService.instance().on('commandsEnabledStateChange', this.commandService_commandsEnabledStateChange);
+
+		KeymapService.instance().on('keymapChange', this.refreshMenu.bind(this));
 	}
 
 	commandService_commandsEnabledStateChange() {
@@ -1087,7 +1089,7 @@ class Application extends BaseApplication {
 		const keymapService = KeymapService.instance();
 
 		try {
-			await KeymapService.instance().loadKeymap(`${dir}/keymap-desktop.json`);
+			await keymapService.loadKeymap(`${dir}/keymap-desktop.json`);
 		} catch (err) {
 			bridge().showErrorMessageBox(err.message);
 		}

ElectronClient/gui/ConfigScreen.jsx

@@ -10,6 +10,7 @@ const shared = require('lib/components/shared/config-shared.js');
 const ConfigMenuBar = require('./ConfigMenuBar.min.js');
 const { EncryptionConfigScreen } = require('./EncryptionConfigScreen.min');
 const { ClipperConfigScreen } = require('./ClipperConfigScreen.min');
+const { KeymapConfigScreen } = require('./KeymapConfig/KeymapConfigScreen');
 
 class ConfigScreenComponent extends React.Component {
 	constructor() {
@@ -68,6 +69,7 @@ class ConfigScreenComponent extends React.Component {
 	screenFromName(screenName) {
 		if (screenName === 'encryption') return <EncryptionConfigScreen theme={this.props.theme}/>;
 		if (screenName === 'server') return <ClipperConfigScreen theme={this.props.theme}/>;
+		if (screenName === 'keymap') return <KeymapConfigScreen themeId={this.props.theme}/>;
 
 		throw new Error(`Invalid screen name: ${screenName}`);
 	}

ElectronClient/gui/KeymapConfig/KeymapConfigScreen.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { useState } from 'react';
+
+import KeymapService, { KeymapItem } from '../../lib/services/KeymapService';
+import { ShortcutRecorder } from './ShortcutRecorder';
+import getLabel from './utils/getLabel';
+import useKeymap from './utils/useKeymap';
+import useEditing from './utils/useEditing';
+import styles_ from './styles';
+
+const { _ } = require('lib/locale.js');
+const keymapService = KeymapService.instance();
+
+export interface KeymapConfigScreenProps {
+	themeId: number
+}
+
+export const KeymapConfigScreen = ({ themeId }: KeymapConfigScreenProps) => {
+	const styles = styles_(themeId);
+
+	const [filter, setFilter] = useState('');
+	const [keymap, setAccelerator, error] = useKeymap();
+	const [editing, enableEditing, disableEditing] = useEditing();
+
+	const handleSave = (event: { commandName: string, accelerator: string }) => {
+		const { commandName, accelerator } = event;
+		setAccelerator(commandName, accelerator);
+		disableEditing(commandName);
+	};
+
+	const hanldeReset = (event: { commandName: string }) => {
+		const { commandName } = event;
+		setAccelerator(commandName, keymapService.getDefaultAccelerator(commandName));
+		disableEditing(commandName);
+	};
+
+	const handleCancel = (event: { commandName: string }) => {
+		const { commandName } = event;
+		disableEditing(commandName);
+	};
+
+	const renderAccelerator = (accelerator: string) => {
+		return (
+			<div>
+				{accelerator.split('+').map(part => <kbd style={styles.kbd} key={part}>{part}</kbd>).reduce(
+					(accumulator, part) => (accumulator.length ? [...accumulator, ' + ', part] : [part]),
+					[]
+				)}
+			</div>
+		);
+	};
+
+	const renderStatus = (command: string) => {
+		if (!error) return null;
+		const { invalidAccelerator, invalidKeymapItem, duplicateAccelerators, duplicateKeymapItems } = error.details;
+
+		if ((invalidAccelerator && invalidKeymapItem.command === command) ||
+			(duplicateAccelerators && (duplicateKeymapItems[0].command === command || duplicateKeymapItems[1].command === command))) {
+			return '❌';
+		} else {
+			return null;
+		}
+	};
+
+	const renderKeymapRow = ({ command, accelerator }: KeymapItem) => {
+		const handleClick = () => enableEditing(command);
+		const cellContent = editing[command]
+			? <ShortcutRecorder
+				onSave={handleSave}
+				onReset={hanldeReset}
+				onCancel={handleCancel}
+				initialAccelerator={accelerator}
+				commandName={command}
+				themeId={themeId}
+			/>
+			: <div onClick={handleClick} style={styles.tableCell}>
+				<div style={styles.tableCellShortcut}>
+					{accelerator
+						? renderAccelerator(accelerator)
+						: <div style={styles.disabled}>{_('Disabled')}</div>
+					}
+				</div>
+				<div style={styles.tableCellStatus}>
+					{renderStatus(command)}
+				</div>
+			</div>;
+
+		return (
+			<tr key={command}>
+				<td style={styles.tableCommandColumn}>
+					{getLabel(command)}
+				</td>
+				<td style={styles.tableShortcutColumn}>
+					{cellContent}
+				</td>
+			</tr>
+		);
+	};
+
+	return (
+		<div>
+			{error &&
+				<div style={styles.warning}>
+					<p style={styles.text}>
+						<span>
+							{error.details.duplicateAccelerators
+								? _('Keymap configuration contains duplicates. Change or disable one of the shortcuts to continue.')
+								: error.details.invalidAccelerator
+									? _('Keymap configuration contains an invalid shortcut. Change or disable it to continue.')
+									: error.message // Highly unlikely that any other error will occur at this point
+							}
+						</span>
+					</p>
+				</div>
+			}
+			<div style={styles.container}>
+				<div style={styles.actionsContainer}>
+					<input
+						value={filter}
+						onChange={event => setFilter(event.target.value)}
+						placeholder={_('Search...')}
+						style={styles.filterInput}
+						aria-label="Search"
+					/>
+				</div>
+				<table style={styles.table}>
+					<thead>
+						<tr>
+							<th style={styles.tableCommandColumn}>{_('Command')}</th>
+							<th style={styles.tableShortcutColumn}>{_('Keyboard Shortcut')}</th>
+						</tr>
+					</thead>
+					<tbody>
+						{keymap.filter(({ command }) => {
+							const filterLowerCase = filter.toLowerCase();
+							return (command.toLowerCase().includes(filterLowerCase) || getLabel(command).toLowerCase().includes(filterLowerCase));
+						}).map(item => renderKeymapRow(item))}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	);
+};
+

ElectronClient/gui/KeymapConfig/ShortcutRecorder.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { useState, KeyboardEvent } from 'react';
+
+import KeymapService from '../../lib/services/KeymapService';
+import styles_ from './styles';
+
+const { _ } = require('lib/locale.js');
+const keymapService = KeymapService.instance();
+
+export interface ShortcutRecorderProps {
+	onSave: (event: { commandName: string, accelerator: string }) => void,
+	onReset: (event: { commandName: string }) => void,
+	onCancel: (event: { commandName: string }) => void,
+	initialAccelerator: string
+	commandName: string,
+	themeId: number
+}
+
+export const ShortcutRecorder = ({ onSave, onReset, onCancel, initialAccelerator, commandName, themeId }: ShortcutRecorderProps) => {
+	const styles = styles_(themeId);
+	const [accelerator, setAccelerator] = useState(initialAccelerator);
+
+	const handleKeydown = (event: KeyboardEvent<HTMLDivElement>) => {
+		event.preventDefault();
+		const newAccelerator = keymapService.domToElectronAccelerator(event);
+
+		switch (newAccelerator) {
+		case 'Enter':
+			return onSave({ commandName, accelerator });
+		case 'Escape':
+			return onCancel({ commandName });
+		case 'Backspace':
+		case 'Delete':
+			return setAccelerator('');
+		default:
+			setAccelerator(newAccelerator);
+		}
+	};
+
+	return (
+		<div style={styles.recorderContainer}>
+			<input
+				value={accelerator}
+				placeholder={_('Press the shortcut')}
+				onKeyDown={handleKeydown}
+				style={styles.recorderInput}
+				readOnly
+				autoFocus
+			/>
+			<button style={styles.inlineButton} onClick={() => onSave({ commandName, accelerator })}>
+				{_('Save')}
+			</button>
+			<button style={styles.inlineButton} onClick={() => onReset({ commandName })}>
+				{_('Restore')}
+			</button>
+			<button style={styles.inlineButton} onClick={() => onCancel({ commandName })}>
+				{_('Cancel')}
+			</button>
+		</div>
+	);
+};

ElectronClient/gui/KeymapConfig/styles/index.ts

@@ -0,0 +1,77 @@
+const { buildStyle } = require('lib/theme');
+
+export default function styles(themeId: number) {
+	return buildStyle('KeymapConfigScreen', themeId, (theme: any) => {
+		return {
+			container: {
+				...theme.containerStyle,
+				padding: 16,
+			},
+			actionsContainer: {
+				display: 'flex',
+				flexDirection: 'row',
+			},
+			recorderContainer: {
+				padding: 2,
+			},
+			filterInput: {
+				...theme.inputStyle,
+				flexGrow: 1,
+			},
+			recorderInput: {
+				...theme.inputStyle,
+				minHeight: 29,
+			},
+			table: {
+				...theme.containerStyle,
+				marginTop: 16,
+				overflow: 'auto',
+				width: '100%',
+			},
+			tableShortcutColumn: {
+				...theme.textStyle,
+				width: '60%',
+			},
+			tableCommandColumn: {
+				...theme.textStyle,
+				width: 'auto',
+			},
+			tableCell: {
+				display: 'flex',
+				flexDirection: 'row',
+				cursor: 'pointer',
+			},
+			tableCellShortcut: {
+				flexGrow: 1,
+			},
+			tableCellStatus: {
+				// No specific styling at the moment
+			},
+			kbd: {
+				fontFamily: 'sans-serif',
+				border: '1px solid',
+				borderRadius: 4,
+				backgroundColor: theme.raisedBackgroundColor,
+				padding: 2,
+				paddingLeft: 6,
+				paddingRight: 6,
+			},
+			disabled: {
+				color: theme.colorFaded,
+				fontStyle: 'italic',
+			},
+			inlineButton: {
+				...theme.buttonStyle,
+				marginLeft: 8,
+			},
+			warning: {
+				...theme.textStyle,
+				backgroundColor: theme.warningBackgroundColor,
+				paddingLeft: 16,
+				paddingRight: 16,
+				paddingTop: 2,
+				paddingBottom: 2,
+			},
+		};
+	});
+}