macOS shortcuts: Only listen for command key, not control key

This commit is contained in:
Scott Nonnenberg 2019-12-17 10:52:36 -08:00 committed by Ken Powers
parent d86e8ef7ec
commit 2c7baad68d
10 changed files with 59 additions and 39 deletions

View file

@ -1,6 +1,6 @@
import * as React from 'react';
import { Editor } from 'draft-js';
import { noop } from 'lodash';
import { get, noop } from 'lodash';
import classNames from 'classnames';
import {
EmojiButton,
@ -293,9 +293,12 @@ export const CompositionArea = ({
const { key, shiftKey, ctrlKey, metaKey } = e;
// When using the ctrl key, `key` is `'X'`. When using the cmd key, `key` is `'x'`
const xKey = key === 'x' || key === 'X';
const cmdOrCtrl = ctrlKey || metaKey;
const commandKey = get(window, 'platform') === 'darwin' && metaKey;
const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
const commandOrCtrl = commandKey || controlKey;
// cmd/ctrl-shift-x
if (xKey && shiftKey && cmdOrCtrl) {
if (xKey && shiftKey && commandOrCtrl) {
e.preventDefault();
setLarge(x => !x);
}

View file

@ -653,6 +653,9 @@ export const CompositionInput = ({
const editorKeybindingFn = React.useCallback(
// tslint:disable-next-line cyclomatic-complexity
(e: React.KeyboardEvent): CompositionInputEditorCommand | null => {
const commandKey = get(window, 'platform') === 'darwin' && e.metaKey;
const controlKey = get(window, 'platform') !== 'darwin' && e.ctrlKey;
if (e.key === 'Enter' && emojiResults.length > 0) {
e.preventDefault();
@ -660,7 +663,7 @@ export const CompositionInput = ({
}
if (e.key === 'Enter' && !e.shiftKey) {
if (large && !(e.ctrlKey || e.metaKey)) {
if (large && !(controlKey || commandKey)) {
return getDefaultKeyBinding(e);
}

View file

@ -1,6 +1,6 @@
import React from 'react';
import { AutoSizer, List } from 'react-virtualized';
import { debounce } from 'lodash';
import { debounce, get } from 'lodash';
import {
ConversationListItem,
@ -128,7 +128,9 @@ export class LeftPane extends React.Component<PropsType> {
};
public handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
const commandOrCtrl = event.metaKey || event.ctrlKey;
const commandKey = get(window, 'platform') === 'darwin' && event.metaKey;
const controlKey = get(window, 'platform') !== 'darwin' && event.ctrlKey;
const commandOrCtrl = commandKey || controlKey;
if (commandOrCtrl && !event.shiftKey && event.key === 'ArrowUp') {
this.scrollToRow(0);

View file

@ -1,6 +1,6 @@
import React from 'react';
import classNames from 'classnames';
import { debounce } from 'lodash';
import { debounce, get } from 'lodash';
import { Manager, Popper, Reference } from 'react-popper';
import { createPortal } from 'react-dom';
@ -222,10 +222,12 @@ export class MainHeader extends React.Component<PropsType, StateType> {
} = this.props;
const { ctrlKey, metaKey, key } = event;
const ctrlOrCommand = ctrlKey || metaKey;
const commandKey = get(window, 'platform') === 'darwin' && metaKey;
const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
const commandOrCtrl = commandKey || controlKey;
// On linux, this keyboard combination selects all text
if (ctrlOrCommand && key === '/') {
if (commandOrCtrl && key === '/') {
event.preventDefault();
event.stopPropagation();

View file

@ -5,7 +5,7 @@ import {
CellMeasurerCache,
List,
} from 'react-virtualized';
import { debounce, isNumber } from 'lodash';
import { debounce, get, isNumber } from 'lodash';
import { Intl } from './Intl';
import { Emojify } from './conversation/Emojify';
@ -136,7 +136,9 @@ export class SearchResults extends React.Component<PropsType, StateType> {
public handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
const { items } = this.props;
const commandOrCtrl = event.metaKey || event.ctrlKey;
const commandKey = get(window, 'platform') === 'darwin' && event.metaKey;
const controlKey = get(window, 'platform') !== 'darwin' && event.ctrlKey;
const commandOrCtrl = commandKey || controlKey;
if (!items || items.length < 1) {
return;

View file

@ -1,4 +1,4 @@
import { debounce, isNumber } from 'lodash';
import { debounce, get, isNumber } from 'lodash';
import React from 'react';
import {
AutoSizer,
@ -926,7 +926,9 @@ export class Timeline extends React.PureComponent<Props, State> {
public handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
const { selectMessage, selectedMessageId, items, id } = this.props;
const commandOrCtrl = event.metaKey || event.ctrlKey;
const commandKey = get(window, 'platform') === 'darwin' && event.metaKey;
const controlKey = get(window, 'platform') !== 'darwin' && event.ctrlKey;
const commandOrCtrl = commandKey || controlKey;
if (!items || items.length < 1) {
return;

View file

@ -1,6 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
import { noop } from 'lodash';
import { get, noop } from 'lodash';
import { Manager, Popper, Reference } from 'react-popper';
import { createPortal } from 'react-dom';
import {
@ -86,7 +86,9 @@ export const EmojiButton = React.memo(
() => {
const handleKeydown = (event: KeyboardEvent) => {
const { ctrlKey, key, metaKey, shiftKey } = event;
const ctrlOrCommand = metaKey || ctrlKey;
const commandKey = get(window, 'platform') === 'darwin' && metaKey;
const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
const commandOrCtrl = commandKey || controlKey;
// We don't want to open up if the conversation has any panels open
const panels = document.querySelectorAll('.conversation .panel');
@ -94,7 +96,7 @@ export const EmojiButton = React.memo(
return;
}
if (ctrlOrCommand && shiftKey && (key === 'j' || key === 'J')) {
if (commandOrCtrl && shiftKey && (key === 'j' || key === 'J')) {
event.stopPropagation();
event.preventDefault();

View file

@ -1,6 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
import { noop } from 'lodash';
import { get, noop } from 'lodash';
import { Manager, Popper, Reference } from 'react-popper';
import { createPortal } from 'react-dom';
import { StickerPicker } from './StickerPicker';
@ -152,7 +152,9 @@ export const StickerButton = React.memo(
() => {
const handleKeydown = (event: KeyboardEvent) => {
const { ctrlKey, key, metaKey, shiftKey } = event;
const ctrlOrCommand = metaKey || ctrlKey;
const commandKey = get(window, 'platform') === 'darwin' && metaKey;
const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
const commandOrCtrl = commandKey || controlKey;
// We don't want to open up if the conversation has any panels open
const panels = document.querySelectorAll('.conversation .panel');
@ -160,7 +162,7 @@ export const StickerButton = React.memo(
return;
}
if (ctrlOrCommand && shiftKey && (key === 's' || key === 'S')) {
if (commandOrCtrl && shiftKey && (key === 's' || key === 'S')) {
event.stopPropagation();
event.preventDefault();