add layout toggle shortcut (#6610)

* add layout toggle shortcut

* add switch mode shortcut on libraries page

* delete useless codes

---------

Co-authored-by: Michael An <2331806369@qq.com>

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': 'list-view', 'text': gettext('List view'), 'value': 'list', 'shortcut': 'Shift 1' },
-      { 'icon': 'grid-view', 'text': gettext('Grid view'), 'value': 'grid' }
+      { 'icon': 'grid-view', 'text': gettext('Grid view'), 'value': 'grid', 'shortcut': 'Shift 2' }
     ];
     return (
       <Dropdown
@@ -62,6 +78,9 @@ class ViewModes extends React.Component {
                     <span className={`sf3-font-${item.icon} sf3-font mr-2`}></span>
                     <span>{item.text}</span>
                   </span>
+                  <span className="view-modes-dropdown-shortcut">
+                    <span>{item.shortcut}</span>
+                  </span>
                 </div>
               </DropdownItem>
             );

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;
+}