From 2977b31a3942ac0e6bd2ad1c38f2c008037c54a6 Mon Sep 17 00:00:00 2001 From: Saturnino Abril Date: Wed, 6 Sep 2017 04:34:53 +0800 Subject: slight modifications to keyboards dialog and also fix error with non-Mac (#7367) --- webapp/components/needs_team/needs_team.jsx | 2 +- webapp/components/shortcuts_modal.jsx | 28 +-- webapp/i18n/en.json | 4 +- webapp/sass/routes/_shortcuts-modal.scss | 27 ++- .../__snapshots__/shortcuts_modal.test.jsx.snap | 237 +++++++++++++++++++++ webapp/tests/components/shortcuts_modal.test.jsx | 25 +++ 6 files changed, 306 insertions(+), 17 deletions(-) create mode 100644 webapp/tests/components/__snapshots__/shortcuts_modal.test.jsx.snap create mode 100644 webapp/tests/components/shortcuts_modal.test.jsx (limited to 'webapp') diff --git a/webapp/components/needs_team/needs_team.jsx b/webapp/components/needs_team/needs_team.jsx index 387710c9d..349b9ae67 100644 --- a/webapp/components/needs_team/needs_team.jsx +++ b/webapp/components/needs_team/needs_team.jsx @@ -234,7 +234,7 @@ export default class NeedsTeam extends React.Component { - + ); diff --git a/webapp/components/shortcuts_modal.jsx b/webapp/components/shortcuts_modal.jsx index 32a3f9c4b..2d6f2499a 100644 --- a/webapp/components/shortcuts_modal.jsx +++ b/webapp/components/shortcuts_modal.jsx @@ -2,18 +2,24 @@ // See License.txt for license information. import Constants from 'utils/constants.jsx'; -import * as Utils from 'utils/utils.jsx'; import ModalStore from 'stores/modal_store.jsx'; import {intlShape, injectIntl, defineMessages} from 'react-intl'; import {Modal} from 'react-bootstrap'; import React from 'react'; +import PropTypes from 'prop-types'; const allShortcuts = defineMessages({ mainHeader: { - id: 'shortcuts.header', - defaultMessage: 'Keyboard Shortcuts' + default: { + id: 'shortcuts.header', + defaultMessage: 'Keyboard Shortcuts\tCtrl|/' + }, + mac: { + id: 'shortcuts.header.mac', + defaultMessage: 'Keyboard Shortcuts\t⌘|/' + } }, navHeader: { id: 'shortcuts.nav.header', @@ -103,10 +109,6 @@ const allShortcuts = defineMessages({ id: 'shortcuts.msgs.header', defaultMessage: 'Messages' }, - msgMarkAsRead: { - id: 'shortcuts.msgs.mark_as_read', - defaultMessage: 'Mark current channel as read:\tEsc' - }, msgInputHeader: { id: 'shortcuts.msgs.input.header', defaultMessage: 'Works inside an empty input field' @@ -237,7 +239,8 @@ const allShortcuts = defineMessages({ class ShortcutsModal extends React.PureComponent { static propTypes = { - intl: intlShape.isRequired + intl: intlShape.isRequired, + isMac: PropTypes.bool.isRequired } constructor(props) { @@ -266,7 +269,8 @@ class ShortcutsModal extends React.PureComponent { this.setState({show: false}); } - getShortcuts(isMac) { + getShortcuts() { + const {isMac} = this.props; const shortcuts = {}; Object.keys(allShortcuts).forEach((s) => { if (isMac && allShortcuts[s].mac) { @@ -282,8 +286,7 @@ class ShortcutsModal extends React.PureComponent { } render() { - const shortcuts = this.getShortcuts(Utils.isMac()); - + const shortcuts = this.getShortcuts(); const {formatMessage} = this.props.intl; return ( @@ -296,7 +299,7 @@ class ShortcutsModal extends React.PureComponent {
- {formatMessage(shortcuts.mainHeader)} + {renderShortcut(formatMessage(shortcuts.mainHeader))} @@ -320,7 +323,6 @@ class ShortcutsModal extends React.PureComponent {

{formatMessage(shortcuts.msgHeader)}

- {renderShortcut(formatMessage(shortcuts.msgMarkAsRead))} {formatMessage(shortcuts.msgInputHeader)}
{renderShortcut(formatMessage(shortcuts.msgEdit))} diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 87da9c943..4bb9542ef 100755 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -2156,7 +2156,8 @@ "shortcuts.files.header": "Files", "shortcuts.files.upload": "Upload files:\tCtrl|U", "shortcuts.files.upload.mac": "Upload files:\t⌘|U", - "shortcuts.header": "Keyboard Shortcuts", + "shortcuts.header": "Keyboard Shortcuts\tCtrl|/", + "shortcuts.header.mac": "Keyboard Shortcuts\t⌘|/", "shortcuts.info": "Begin a message with / for a list of all the commands at your disposal.", "shortcuts.msgs.comp.channel": "Channel:\t~|[a-z]|Tab", "shortcuts.msgs.comp.emoji": "Emoji:\t:|[a-z]|Tab", @@ -2165,7 +2166,6 @@ "shortcuts.msgs.edit": "Edit last message in channel:\tUp", "shortcuts.msgs.header": "Messages", "shortcuts.msgs.input.header": "Works inside an empty input field", - "shortcuts.msgs.mark_as_read": "Mark current channel as read:\tEsc", "shortcuts.msgs.reply": "Reply to last message in channel:\tShift|Up", "shortcuts.msgs.reprint_next": "Reprint next message:\tCtrl|Down", "shortcuts.msgs.reprint_next.mac": "Reprint next message:\t⌘|Down", diff --git a/webapp/sass/routes/_shortcuts-modal.scss b/webapp/sass/routes/_shortcuts-modal.scss index 817239f2f..854340b2c 100644 --- a/webapp/sass/routes/_shortcuts-modal.scss +++ b/webapp/sass/routes/_shortcuts-modal.scss @@ -11,18 +11,43 @@ background: transparent; border: none; color: inherit; - padding: 40px 40px 20px; + padding: 20px 40px 20px; .close { color: inherit; font-size: 28px; font-weight: normal; right: 35px; + top: 35px; } .modal-title { color: inherit; font-size: 20px; + + > div { + &:first-child { + margin-bottom: 2.5em; + } + } + + .shortcut-line { + margin: 17px 0; + + span { + &:first-child { + margin-right: 5px; + } + } + + .shortcut-key { + border-radius: 3px; + font-size: .9em; + font-weight: 500; + margin: 5px 0 5px 5px; + padding: 1px 5px; + } + } } } } diff --git a/webapp/tests/components/__snapshots__/shortcuts_modal.test.jsx.snap b/webapp/tests/components/__snapshots__/shortcuts_modal.test.jsx.snap new file mode 100644 index 000000000..cfe719ba4 --- /dev/null +++ b/webapp/tests/components/__snapshots__/shortcuts_modal.test.jsx.snap @@ -0,0 +1,237 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/ShortcutsModal should match snapshot modal for Mac 1`] = ` + + + + + + + +`; + +exports[`components/ShortcutsModal should match snapshot modal for non-Mac like Windows/Linux 1`] = ` + + + + + + + +`; diff --git a/webapp/tests/components/shortcuts_modal.test.jsx b/webapp/tests/components/shortcuts_modal.test.jsx new file mode 100644 index 000000000..04fa51a76 --- /dev/null +++ b/webapp/tests/components/shortcuts_modal.test.jsx @@ -0,0 +1,25 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import {mountWithIntl} from 'tests/helpers/intl-test-helper.jsx'; +import ShortcutsModal from 'components/shortcuts_modal.jsx'; + +describe('components/ShortcutsModal', () => { + test('should match snapshot modal for Mac', () => { + const wrapper = mountWithIntl( + + ); + + expect(wrapper).toMatchSnapshot(); + }); + + test('should match snapshot modal for non-Mac like Windows/Linux', () => { + const wrapper = mountWithIntl( + + ); + + expect(wrapper).toMatchSnapshot(); + }); +}); -- cgit v1.2.3-1-g7c22