diff --git a/frontend/src/components/view-modes.js b/frontend/src/components/view-modes.js index 78b999136d..790be2c3da 100644 --- a/frontend/src/components/view-modes.js +++ b/frontend/src/components/view-modes.js @@ -19,6 +19,22 @@ class ViewModes extends React.Component { }; } + componentDidMount() { + document.addEventListener('keydown', this.onKeyDown); + } + + componentWillUnmount() { + document.removeEventListener('keydown', this.onKeyDown); + } + + onKeyDown = (event) => { + if (event.shiftKey && event.keyCode === 49) { + this.props.switchViewMode('list'); + } else if (event.shiftKey && event.keyCode === 50) { + this.props.switchViewMode('grid'); + } + }; + toggleDropdownMenu = () => { this.setState({ isDropdownMenuOpen: !this.state.isDropdownMenuOpen @@ -29,8 +45,8 @@ class ViewModes extends React.Component { const { isDropdownMenuOpen } = this.state; const { currentViewMode } = this.props; const options = [ - { 'icon': 'list-view', 'text': gettext('List view'), 'value': 'list' }, - { 'icon': 'grid-view', 'text': gettext('Grid view'), 'value': 'grid' } + { 'icon': 'list-view', 'text': gettext('List view'), 'value': 'list', 'shortcut': 'Shift 1' }, + { 'icon': 'grid-view', 'text': gettext('Grid view'), 'value': 'grid', 'shortcut': 'Shift 2' } ]; return ( {item.text} + + {item.shortcut} + ); diff --git a/frontend/src/css/view-modes.css b/frontend/src/css/view-modes.css index 729b524aea..cd9009d77c 100644 --- a/frontend/src/css/view-modes.css +++ b/frontend/src/css/view-modes.css @@ -23,3 +23,13 @@ display: flex; align-items: center; } + +.view-modes-dropdown-shortcut { + display: flex; + align-items: center; + color: #999; +} + +.dropdown-item:hover .view-modes-dropdown-shortcut { + color: #fff; +}