Add keyboard shortcut to collapse/uncollapse toots
This commit is contained in:
		
							parent
							
								
									7ed89e9178
								
							
						
					
					
						commit
						02bd678944
					
				
					 3 changed files with 24 additions and 1 deletions
				
			
		|  | @ -367,6 +367,14 @@ export default class Status extends ImmutablePureComponent { | ||||||
|     this.props.onMoveDown(this.props.containerId || this.props.id, e.target.getAttribute('data-featured')); |     this.props.onMoveDown(this.props.containerId || this.props.id, e.target.getAttribute('data-featured')); | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|  |   handleHotkeyCollapse = e => { | ||||||
|  |     if (!this.props.settings.getIn(['collapsed', 'enabled'])) | ||||||
|  |       return; | ||||||
|  | 
 | ||||||
|  |     this.setCollapsed(!this.state.isCollapsed); | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|   handleRef = c => { |   handleRef = c => { | ||||||
|     this.node = c; |     this.node = c; | ||||||
|   } |   } | ||||||
|  | @ -556,6 +564,7 @@ export default class Status extends ImmutablePureComponent { | ||||||
|       moveDown: this.handleHotkeyMoveDown, |       moveDown: this.handleHotkeyMoveDown, | ||||||
|       toggleSpoiler: this.handleExpandedToggle, |       toggleSpoiler: this.handleExpandedToggle, | ||||||
|       bookmark: this.handleHotkeyBookmark, |       bookmark: this.handleHotkeyBookmark, | ||||||
|  |       toggleCollapse: this.handleHotkeyCollapse, | ||||||
|     }; |     }; | ||||||
| 
 | 
 | ||||||
|     const computedClass = classNames('status', `status-${status.get('visibility')}`, { |     const computedClass = classNames('status', `status-${status.get('visibility')}`, { | ||||||
|  |  | ||||||
|  | @ -1,6 +1,7 @@ | ||||||
| import React from 'react'; | import React from 'react'; | ||||||
| import Column from 'flavours/glitch/features/ui/components/column'; | import Column from 'flavours/glitch/features/ui/components/column'; | ||||||
| import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; | import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; | ||||||
|  | import { connect } from 'react-redux'; | ||||||
| import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | ||||||
| import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||||
| import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||||
|  | @ -9,16 +10,22 @@ const messages = defineMessages({ | ||||||
|   heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' }, |   heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' }, | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
|  | const mapStateToProps = state => ({ | ||||||
|  |   collapseEnabled: state.getIn(['local_settings', 'collapsed', 'enabled']), | ||||||
|  | }); | ||||||
|  | 
 | ||||||
|  | @connect(mapStateToProps) | ||||||
| @injectIntl | @injectIntl | ||||||
| export default class KeyboardShortcuts extends ImmutablePureComponent { | export default class KeyboardShortcuts extends ImmutablePureComponent { | ||||||
| 
 | 
 | ||||||
|   static propTypes = { |   static propTypes = { | ||||||
|     intl: PropTypes.object.isRequired, |     intl: PropTypes.object.isRequired, | ||||||
|     multiColumn: PropTypes.bool, |     multiColumn: PropTypes.bool, | ||||||
|  |     collapseEnabled: PropTypes.bool, | ||||||
|   }; |   }; | ||||||
| 
 | 
 | ||||||
|   render () { |   render () { | ||||||
|     const { intl } = this.props; |     const { intl, collapseEnabled } = this.props; | ||||||
| 
 | 
 | ||||||
|     return ( |     return ( | ||||||
|       <Column icon='question' heading={intl.formatMessage(messages.heading)}> |       <Column icon='question' heading={intl.formatMessage(messages.heading)}> | ||||||
|  | @ -64,6 +71,12 @@ export default class KeyboardShortcuts extends ImmutablePureComponent { | ||||||
|                 <td><kbd>x</kbd></td> |                 <td><kbd>x</kbd></td> | ||||||
|                 <td><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></td> |                 <td><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></td> | ||||||
|               </tr> |               </tr> | ||||||
|  |               {collapseEnabled && ( | ||||||
|  |                 <tr> | ||||||
|  |                   <td><kbd>shift</kbd>+<kbd>x</kbd></td> | ||||||
|  |                   <td><FormattedMessage id='keyboard_shortcuts.toggle_collapse' defaultMessage='to collapse/uncollapse toots' /></td> | ||||||
|  |                 </tr> | ||||||
|  |               )} | ||||||
|               <tr> |               <tr> | ||||||
|                 <td><kbd>up</kbd>, <kbd>k</kbd></td> |                 <td><kbd>up</kbd>, <kbd>k</kbd></td> | ||||||
|                 <td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td> |                 <td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td> | ||||||
|  |  | ||||||
|  | @ -99,6 +99,7 @@ const keyMap = { | ||||||
|   goToRequests: 'g r', |   goToRequests: 'g r', | ||||||
|   toggleSpoiler: 'x', |   toggleSpoiler: 'x', | ||||||
|   bookmark: 'd', |   bookmark: 'd', | ||||||
|  |   toggleCollapse: 'shift+x', | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| @connect(mapStateToProps) | @connect(mapStateToProps) | ||||||
|  |  | ||||||
		Loading…
	
		Reference in a new issue