Change follow button in account row to be more obvious in web UI (#24956)
This commit is contained in:
		
					parent
					
						
							
								af135bddd0
							
						
					
				
			
			
				commit
				
					
						0ddc895282
					
				
			
		
					 3 changed files with 30 additions and 25 deletions
				
			
		|  | @ -16,6 +16,7 @@ import { VerifiedBadge } from 'mastodon/components/verified_badge'; | |||
| import { me } from '../initial_state'; | ||||
| 
 | ||||
| import { Avatar } from './avatar'; | ||||
| import Button from './button'; | ||||
| import { DisplayName } from './display_name'; | ||||
| import { IconButton } from './icon_button'; | ||||
| import { RelativeTimestamp } from './relative_timestamp'; | ||||
|  | @ -23,13 +24,13 @@ import { RelativeTimestamp } from './relative_timestamp'; | |||
| const messages = defineMessages({ | ||||
|   follow: { id: 'account.follow', defaultMessage: 'Follow' }, | ||||
|   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, | ||||
|   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' }, | ||||
|   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, | ||||
|   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, | ||||
|   mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' }, | ||||
|   unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' }, | ||||
|   mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' }, | ||||
|   block: { id: 'account.block', defaultMessage: 'Block @{name}' }, | ||||
|   cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' }, | ||||
|   unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' }, | ||||
|   unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' }, | ||||
|   mute_notifications: { id: 'account.mute_notifications_short', defaultMessage: 'Mute notifications' }, | ||||
|   unmute_notifications: { id: 'account.unmute_notifications_short', defaultMessage: 'Unmute notifications' }, | ||||
|   mute: { id: 'account.mute_short', defaultMessage: 'Mute' }, | ||||
|   block: { id: 'account.block_short', defaultMessage: 'Block' }, | ||||
| }); | ||||
| 
 | ||||
| class Account extends ImmutablePureComponent { | ||||
|  | @ -96,39 +97,39 @@ class Account extends ImmutablePureComponent { | |||
| 
 | ||||
|     let buttons; | ||||
| 
 | ||||
|     if (actionIcon) { | ||||
|       if (onActionClick) { | ||||
|         buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />; | ||||
|       } | ||||
|     } else if (account.get('id') !== me && account.get('relationship', null) !== null) { | ||||
|     if (actionIcon && onActionClick) { | ||||
|       buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />; | ||||
|     } else if (!actionIcon && account.get('id') !== me && account.get('relationship', null) !== null) { | ||||
|       const following = account.getIn(['relationship', 'following']); | ||||
|       const requested = account.getIn(['relationship', 'requested']); | ||||
|       const blocking  = account.getIn(['relationship', 'blocking']); | ||||
|       const muting  = account.getIn(['relationship', 'muting']); | ||||
| 
 | ||||
|       if (requested) { | ||||
|         buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />; | ||||
|         buttons = <Button text={intl.formatMessage(messages.cancel_follow_request)} onClick={this.handleFollow} />; | ||||
|       } else if (blocking) { | ||||
|         buttons = <IconButton active icon='unlock' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />; | ||||
|         buttons = <Button text={intl.formatMessage(messages.unblock)} onClick={this.handleBlock} />; | ||||
|       } else if (muting) { | ||||
|         let hidingNotificationsButton; | ||||
| 
 | ||||
|         if (account.getIn(['relationship', 'muting_notifications'])) { | ||||
|           hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.unmute_notifications, { name: account.get('username') })} onClick={this.handleUnmuteNotifications} />; | ||||
|           hidingNotificationsButton = <Button text={intl.formatMessage(messages.unmute_notifications)} onClick={this.handleUnmuteNotifications} />; | ||||
|         } else { | ||||
|           hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username')  })} onClick={this.handleMuteNotifications} />; | ||||
|           hidingNotificationsButton = <Button text={intl.formatMessage(messages.mute_notifications)} onClick={this.handleMuteNotifications} />; | ||||
|         } | ||||
| 
 | ||||
|         buttons = ( | ||||
|           <> | ||||
|             <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} /> | ||||
|             <Button text={intl.formatMessage(messages.unmute)} onClick={this.handleMute} /> | ||||
|             {hidingNotificationsButton} | ||||
|           </> | ||||
|         ); | ||||
|       } else if (defaultAction === 'mute') { | ||||
|         buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />; | ||||
|         buttons = <Button title={intl.formatMessage(messages.mute)} onClick={this.handleMute} />; | ||||
|       } else if (defaultAction === 'block') { | ||||
|         buttons = <IconButton icon='lock' title={intl.formatMessage(messages.block, { name: account.get('username') })} onClick={this.handleBlock} />; | ||||
|         buttons = <Button text={intl.formatMessage(messages.block)} onClick={this.handleBlock} />; | ||||
|       } else if (!account.get('moved') || following) { | ||||
|         buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />; | ||||
|         buttons = <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} />; | ||||
|       } | ||||
|     } | ||||
| 
 | ||||
|  |  | |||
|  | @ -17,9 +17,10 @@ | |||
|   "account.badges.group": "Group", | ||||
|   "account.block": "Block @{name}", | ||||
|   "account.block_domain": "Block domain {domain}", | ||||
|   "account.block_short": "Block", | ||||
|   "account.blocked": "Blocked", | ||||
|   "account.browse_more_on_origin_server": "Browse more on the original profile", | ||||
|   "account.cancel_follow_request": "Withdraw follow request", | ||||
|   "account.cancel_follow_request": "Cancel follow", | ||||
|   "account.direct": "Privately mention @{name}", | ||||
|   "account.disable_notifications": "Stop notifying me when @{name} posts", | ||||
|   "account.domain_blocked": "Domain blocked", | ||||
|  | @ -48,7 +49,8 @@ | |||
|   "account.mention": "Mention @{name}", | ||||
|   "account.moved_to": "{name} has indicated that their new account is now:", | ||||
|   "account.mute": "Mute @{name}", | ||||
|   "account.mute_notifications": "Mute notifications from @{name}", | ||||
|   "account.mute_notifications_short": "Mute notifications", | ||||
|   "account.mute_short": "Mute", | ||||
|   "account.muted": "Muted", | ||||
|   "account.open_original_page": "Open original page", | ||||
|   "account.posts": "Posts", | ||||
|  | @ -65,7 +67,7 @@ | |||
|   "account.unendorse": "Don't feature on profile", | ||||
|   "account.unfollow": "Unfollow", | ||||
|   "account.unmute": "Unmute @{name}", | ||||
|   "account.unmute_notifications": "Unmute notifications from @{name}", | ||||
|   "account.unmute_notifications_short": "Unmute notifications", | ||||
|   "account.unmute_short": "Unmute", | ||||
|   "account_note.placeholder": "Click to add note", | ||||
|   "admin.dashboard.daily_retention": "User retention rate by day after sign-up", | ||||
|  |  | |||
|  | @ -1526,6 +1526,7 @@ body > [data-popper-placement] { | |||
| .account__wrapper { | ||||
|   display: flex; | ||||
|   gap: 10px; | ||||
|   align-items: center; | ||||
| } | ||||
| 
 | ||||
| .account__avatar { | ||||
|  | @ -1594,9 +1595,10 @@ a .account__avatar { | |||
| } | ||||
| 
 | ||||
| .account__relationship { | ||||
|   height: 18px; | ||||
|   padding: 10px; | ||||
|   white-space: nowrap; | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   gap: 4px; | ||||
| } | ||||
| 
 | ||||
| .account__disclaimer { | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue