Add single option votes tooltip in polls (#16849)
Adds a tooltip when hovering over the percentages in a poll showing how many votes were cast for that option. Also removes descriptions from messages here since they are not picked up by Crowdin anyway and might be confusing to other developers :) Fixes #16820
This commit is contained in:
		
					parent
					
						
							
								c99d28369a
							
						
					
				
			
			
				commit
				
					
						89b5071fde
					
				
			
		
					 1 changed files with 22 additions and 5 deletions
				
			
		|  | @ -12,8 +12,18 @@ import RelativeTimestamp from './relative_timestamp'; | |||
| import Icon from 'mastodon/components/icon'; | ||||
| 
 | ||||
| const messages = defineMessages({ | ||||
|   closed: { id: 'poll.closed', defaultMessage: 'Closed' }, | ||||
|   voted: { id: 'poll.voted', defaultMessage: 'You voted for this answer', description: 'Tooltip of the "voted" checkmark in polls' }, | ||||
|   closed: { | ||||
|     id: 'poll.closed', | ||||
|     defaultMessage: 'Closed', | ||||
|   }, | ||||
|   voted: { | ||||
|     id: 'poll.voted', | ||||
|     defaultMessage: 'You voted for this answer', | ||||
|   }, | ||||
|   votes: { | ||||
|     id: 'poll.votes', | ||||
|     defaultMessage: '{votes, plural, one {# vote} other {# votes}}', | ||||
|   }, | ||||
| }); | ||||
| 
 | ||||
| const makeEmojiMap = record => record.get('emojis').reduce((obj, emoji) => { | ||||
|  | @ -148,9 +158,16 @@ class Poll extends ImmutablePureComponent { | |||
|               data-index={optionIndex} | ||||
|             /> | ||||
|           )} | ||||
|           {showResults && <span className='poll__number'> | ||||
|             {Math.round(percent)}% | ||||
|           </span>} | ||||
|           {showResults && ( | ||||
|             <span | ||||
|               className='poll__number' | ||||
|               title={intl.formatMessage(messages.votes, { | ||||
|                 votes: option.get('votes_count'), | ||||
|               })} | ||||
|             > | ||||
|               {Math.round(percent)}% | ||||
|             </span> | ||||
|           )} | ||||
| 
 | ||||
|           <span | ||||
|             className='poll__option__text translate' | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue