Implement hotkeys for web UI (#5164)
* Fix #2102 - Implement hotkeys Hotkeys on status list: - r to reply - m to mention author - f to favourite - b to boost - enter to open status - p to open author's profile - up or k to move up in the list - down or j to move down in the list - 1-9 to focus a status in one of the columns - n to focus the compose textarea - alt+n to start a brand new toot - backspace to navigate back * Add navigational hotkeys The key g followed by: - s: start - h: home - n: notifications - l: local timeline - t: federated timeline - f: favourites - u: own profile - p: pinned toots - b: blocked users - m: muted users * Add hotkey for focusing search, make escape un-focus compose/search * Fix focusing notifications column, fix hotkeys in compose textarea
This commit is contained in:
		
					parent
					
						
							
								49cc0eb3e7
							
						
					
				
			
			
				commit
				
					
						7db0f8dcb2
					
				
			
		
					 16 changed files with 627 additions and 150 deletions
				
			
		|  | @ -145,32 +145,6 @@ export default class ScrollableList extends PureComponent { | |||
|     return this._lastMouseMove !== null && ((new Date()) - this._lastMouseMove < 600); | ||||
|   } | ||||
| 
 | ||||
|   handleKeyDown = (e) => { | ||||
|     if (['PageDown', 'PageUp'].includes(e.key) || (e.ctrlKey && ['End', 'Home'].includes(e.key))) { | ||||
|       const article = (() => { | ||||
|         switch (e.key) { | ||||
|         case 'PageDown': | ||||
|           return e.target.nodeName === 'ARTICLE' && e.target.nextElementSibling; | ||||
|         case 'PageUp': | ||||
|           return e.target.nodeName === 'ARTICLE' && e.target.previousElementSibling; | ||||
|         case 'End': | ||||
|           return this.node.querySelector('[role="feed"] > article:last-of-type'); | ||||
|         case 'Home': | ||||
|           return this.node.querySelector('[role="feed"] > article:first-of-type'); | ||||
|         default: | ||||
|           return null; | ||||
|         } | ||||
|       })(); | ||||
| 
 | ||||
| 
 | ||||
|       if (article) { | ||||
|         e.preventDefault(); | ||||
|         article.focus(); | ||||
|         article.scrollIntoView(); | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   render () { | ||||
|     const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props; | ||||
|     const { fullscreen } = this.state; | ||||
|  | @ -182,7 +156,7 @@ export default class ScrollableList extends PureComponent { | |||
|     if (isLoading || childrenCount > 0 || !emptyMessage) { | ||||
|       scrollableArea = ( | ||||
|         <div className={classNames('scrollable', { fullscreen })} ref={this.setRef} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}> | ||||
|           <div role='feed' className='item-list' onKeyDown={this.handleKeyDown}> | ||||
|           <div role='feed' className='item-list'> | ||||
|             {prepend} | ||||
| 
 | ||||
|             {React.Children.map(this.props.children, (child, index) => ( | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue