diff options
-rw-r--r-- | webapp/components/needs_team/needs_team.jsx | 2 | ||||
-rw-r--r-- | webapp/components/shortcuts_modal.jsx | 28 | ||||
-rwxr-xr-x | webapp/i18n/en.json | 4 | ||||
-rw-r--r-- | webapp/sass/routes/_shortcuts-modal.scss | 27 | ||||
-rw-r--r-- | webapp/tests/components/__snapshots__/shortcuts_modal.test.jsx.snap | 237 | ||||
-rw-r--r-- | webapp/tests/components/shortcuts_modal.test.jsx | 25 |
6 files changed, 306 insertions, 17 deletions
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 { <RemovedFromChannelModal/> <ResetStatusModal/> <LeavePrivateChannelModal/> - <ShortcutsModal/> + <ShortcutsModal isMac={Utils.isMac()}/> </div> </div> ); 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 { <div className='shortcuts-content'> <Modal.Header closeButton={true}> <Modal.Title> - <strong>{formatMessage(shortcuts.mainHeader)}</strong> + <strong>{renderShortcut(formatMessage(shortcuts.mainHeader))}</strong> </Modal.Title> </Modal.Header> <Modal.Body ref='modalBody'> @@ -320,7 +323,6 @@ class ShortcutsModal extends React.PureComponent { <div className='section'> <div> <h4 className='section-title'><strong>{formatMessage(shortcuts.msgHeader)}</strong></h4> - {renderShortcut(formatMessage(shortcuts.msgMarkAsRead))} <span><strong>{formatMessage(shortcuts.msgInputHeader)}</strong></span> <div className='subsection'> {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`] = ` +<InjectIntl(ShortcutsModal) + intl={ + Object { + "defaultFormats": Object {}, + "defaultLocale": "en", + "formatDate": [Function], + "formatHTMLMessage": [Function], + "formatMessage": [Function], + "formatNumber": [Function], + "formatPlural": [Function], + "formatRelative": [Function], + "formatTime": [Function], + "formats": Object {}, + "formatters": Object { + "getDateTimeFormat": [Function], + "getMessageFormat": [Function], + "getNumberFormat": [Function], + "getPluralFormat": [Function], + "getRelativeFormat": [Function], + }, + "locale": "en", + "messages": Object {}, + "now": [Function], + "textComponent": "span", + } + } + isMac={true} +> + <ShortcutsModal + intl={ + Object { + "defaultFormats": Object {}, + "defaultLocale": "en", + "formatDate": [Function], + "formatHTMLMessage": [Function], + "formatMessage": [Function], + "formatNumber": [Function], + "formatPlural": [Function], + "formatRelative": [Function], + "formatTime": [Function], + "formats": Object {}, + "formatters": Object { + "getDateTimeFormat": [Function], + "getMessageFormat": [Function], + "getNumberFormat": [Function], + "getPluralFormat": [Function], + "getRelativeFormat": [Function], + }, + "locale": "en", + "messages": Object {}, + "now": [Function], + "textComponent": "span", + } + } + isMac={true} + > + <Modal + animation={true} + autoFocus={true} + backdrop={true} + bsClass="modal" + dialogClassName="shortcuts-modal" + dialogComponentClass={[Function]} + enforceFocus={true} + keyboard={true} + manager={ + ModalManager { + "add": [Function], + "containers": Array [], + "data": Array [], + "handleContainerOverflow": true, + "hideSiblingNodes": true, + "isTopModal": [Function], + "modals": Array [], + "remove": [Function], + } + } + onExited={[Function]} + onHide={[Function]} + renderBackdrop={[Function]} + restoreFocus={true} + show={false} + > + <Modal + autoFocus={true} + backdrop={true} + backdropClassName="modal-backdrop" + backdropTransitionTimeout={150} + containerClassName="modal-open" + dialogTransitionTimeout={300} + enforceFocus={true} + keyboard={true} + manager={ + ModalManager { + "add": [Function], + "containers": Array [], + "data": Array [], + "handleContainerOverflow": true, + "hideSiblingNodes": true, + "isTopModal": [Function], + "modals": Array [], + "remove": [Function], + } + } + onEntering={[Function]} + onExited={[Function]} + onHide={[Function]} + renderBackdrop={[Function]} + restoreFocus={true} + show={false} + transition={[Function]} + /> + </Modal> + </ShortcutsModal> +</InjectIntl(ShortcutsModal)> +`; + +exports[`components/ShortcutsModal should match snapshot modal for non-Mac like Windows/Linux 1`] = ` +<InjectIntl(ShortcutsModal) + intl={ + Object { + "defaultFormats": Object {}, + "defaultLocale": "en", + "formatDate": [Function], + "formatHTMLMessage": [Function], + "formatMessage": [Function], + "formatNumber": [Function], + "formatPlural": [Function], + "formatRelative": [Function], + "formatTime": [Function], + "formats": Object {}, + "formatters": Object { + "getDateTimeFormat": [Function], + "getMessageFormat": [Function], + "getNumberFormat": [Function], + "getPluralFormat": [Function], + "getRelativeFormat": [Function], + }, + "locale": "en", + "messages": Object {}, + "now": [Function], + "textComponent": "span", + } + } + isMac={false} +> + <ShortcutsModal + intl={ + Object { + "defaultFormats": Object {}, + "defaultLocale": "en", + "formatDate": [Function], + "formatHTMLMessage": [Function], + "formatMessage": [Function], + "formatNumber": [Function], + "formatPlural": [Function], + "formatRelative": [Function], + "formatTime": [Function], + "formats": Object {}, + "formatters": Object { + "getDateTimeFormat": [Function], + "getMessageFormat": [Function], + "getNumberFormat": [Function], + "getPluralFormat": [Function], + "getRelativeFormat": [Function], + }, + "locale": "en", + "messages": Object {}, + "now": [Function], + "textComponent": "span", + } + } + isMac={false} + > + <Modal + animation={true} + autoFocus={true} + backdrop={true} + bsClass="modal" + dialogClassName="shortcuts-modal" + dialogComponentClass={[Function]} + enforceFocus={true} + keyboard={true} + manager={ + ModalManager { + "add": [Function], + "containers": Array [], + "data": Array [], + "handleContainerOverflow": true, + "hideSiblingNodes": true, + "isTopModal": [Function], + "modals": Array [], + "remove": [Function], + } + } + onExited={[Function]} + onHide={[Function]} + renderBackdrop={[Function]} + restoreFocus={true} + show={false} + > + <Modal + autoFocus={true} + backdrop={true} + backdropClassName="modal-backdrop" + backdropTransitionTimeout={150} + containerClassName="modal-open" + dialogTransitionTimeout={300} + enforceFocus={true} + keyboard={true} + manager={ + ModalManager { + "add": [Function], + "containers": Array [], + "data": Array [], + "handleContainerOverflow": true, + "hideSiblingNodes": true, + "isTopModal": [Function], + "modals": Array [], + "remove": [Function], + } + } + onEntering={[Function]} + onExited={[Function]} + onHide={[Function]} + renderBackdrop={[Function]} + restoreFocus={true} + show={false} + transition={[Function]} + /> + </Modal> + </ShortcutsModal> +</InjectIntl(ShortcutsModal)> +`; 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( + <ShortcutsModal isMac={true}/> + ); + + expect(wrapper).toMatchSnapshot(); + }); + + test('should match snapshot modal for non-Mac like Windows/Linux', () => { + const wrapper = mountWithIntl( + <ShortcutsModal isMac={false}/> + ); + + expect(wrapper).toMatchSnapshot(); + }); +}); |