From 80dd04dbc2cc3e93643c336bb5542f3b7e591b46 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 13 Apr 2016 16:35:40 +0200
Subject: [PATCH] Overhauled user profile buttons

---
 com.woltlab.wcf/templates/user.tpl            |  31 +--
 com.woltlab.wcf/templates/userHeader.tpl      | 101 +++++---
 wcfsetup/install/files/js/WCF.User.js         | 216 +-----------------
 .../js/WoltLab/WCF/Ui/Dropdown/Simple.js      |   6 +-
 .../WCF/Ui/User/Profile/Menu/Item/Abstract.js | 129 +++++++++++
 .../WCF/Ui/User/Profile/Menu/Item/Follow.js   |  31 +++
 .../WCF/Ui/User/Profile/Menu/Item/Ignore.js   |  31 +++
 .../user/ignore/UserIgnoreAction.class.php    |  14 +-
 .../install/files/style/ui/userProfile.scss   |  87 ++++++-
 wcfsetup/install/lang/de.xml                  |   3 +
 wcfsetup/install/lang/en.xml                  |   3 +
 11 files changed, 376 insertions(+), 276 deletions(-)
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Abstract.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Follow.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Ignore.js

diff --git a/com.woltlab.wcf/templates/user.tpl b/com.woltlab.wcf/templates/user.tpl
index 80fd8ffcae..96f7fc297c 100644
--- a/com.woltlab.wcf/templates/user.tpl
+++ b/com.woltlab.wcf/templates/user.tpl
@@ -9,28 +9,33 @@
 	
 	{event name='javascriptInclude'}
 	<script data-relocate="true">
-		//<![CDATA[
-		$(function() {
-			{if $__wcf->getUser()->userID && $__wcf->getUser()->userID != $user->userID}
-				WCF.Language.addObject({
-					'wcf.user.activityPoint': '{lang}wcf.user.activityPoint{/lang}',
+		{if $__wcf->getUser()->userID && $__wcf->getUser()->userID != $user->userID}
+			require(['Language', 'WoltLab/WCF/Ui/User/Profile/Menu/Item/Ignore', 'WoltLab/WCF/Ui/User/Profile/Menu/Item/Follow'], function(Language, UiUserProfileMenuItemIgnore, UiUserProfileMenuItemFollow) {
+				Language.addObject({
 					'wcf.user.button.follow': '{lang}wcf.user.button.follow{/lang}',
 					'wcf.user.button.unfollow': '{lang}wcf.user.button.unfollow{/lang}',
 					'wcf.user.button.ignore': '{lang}wcf.user.button.ignore{/lang}',
 					'wcf.user.button.unignore': '{lang}wcf.user.button.unignore{/lang}'
 				});
 				
+				new UiUserProfileMenuItemFollow({@$user->userID}, {if $__wcf->getUserProfileHandler()->isFollowing($user->userID)}true{else}false{/if});
+				
 				{if !$user->getPermission('user.profile.cannotBeIgnored')}
-					new WCF.User.Profile.IgnoreUser({@$user->userID}, {if $__wcf->getUserProfileHandler()->isIgnoredUser($user->userID)}true{else}false{/if});
+				new UiUserProfileMenuItemIgnore({@$user->userID}, {if $__wcf->getUserProfileHandler()->isIgnoredUser($user->userID)}true{else}false{/if});
 				{/if}
-				
-				new WCF.User.Profile.Follow({@$user->userID}, {if $__wcf->getUserProfileHandler()->isFollowing($user->userID)}true{else}false{/if});
+			});
+		{/if}
+		
+		//<![CDATA[
+		$(function() {
+			{if $__wcf->getUser()->userID && $__wcf->getUser()->userID != $user->userID}
+				WCF.Language.addObject({
+					'wcf.user.activityPoint': '{lang}wcf.user.activityPoint{/lang}'
+				});
 			{/if}
 			
 			new WCF.User.Profile.TabMenu({@$user->userID});
 			
-			WCF.TabMenu.init();
-			
 			{if $user->canEdit() || ($__wcf->getUser()->userID == $user->userID && $user->canEditOwnProfile())}
 				WCF.Language.addObject({
 					'wcf.user.editProfile': '{lang}wcf.user.editProfile{/lang}',
@@ -39,7 +44,7 @@
 				new WCF.User.Profile.Editor({@$user->userID}, {if $editOnInit}true{else}false{/if});
 			{/if}
 			
-			{if $followingCount > 10}
+			{if $followingCount > 7}
 				var $followingList = null;
 				$('#followingAll').click(function() {
 					if ($followingList === null) {
@@ -49,7 +54,7 @@
 					$followingList.open();
 				});
 			{/if}
-			{if $followerCount > 10}
+			{if $followerCount > 7}
 				var $followerList = null;
 				$('#followerAll').click(function() {
 					if ($followerList === null) {
@@ -59,7 +64,7 @@
 					$followerList.open();
 				});
 			{/if}
-			{if $visitorCount > 10}
+			{if $visitorCount > 7}
 				var $visitorList = null;
 				$('#visitorAll').click(function() {
 					if ($visitorList === null) {
diff --git a/com.woltlab.wcf/templates/userHeader.tpl b/com.woltlab.wcf/templates/userHeader.tpl
index f2c07b578a..f3ce51e4ad 100644
--- a/com.woltlab.wcf/templates/userHeader.tpl
+++ b/com.woltlab.wcf/templates/userHeader.tpl
@@ -37,42 +37,73 @@
 						{/if}
 					</div>
 					
-					
-					<div class="buttonGroupNavigation">
-						<ul id="profileButtonContainer" class="buttonGroup">
-							{hascontent}
-								<li class="dropdown">
-									<a href="#" class="button dropdownToggle jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon16 fa-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
-									<ul class="dropdownMenu">
-										{content}
-										{event name='quickSearchItems'}
-										{/content}
-									</ul>
-								</li>
-							{/hascontent}
-							
-							{if $__wcf->session->getPermission('user.profile.canReportContent')}
-								<li class="jsReportUser jsOnly" data-object-id="{@$user->userID}"><a href="#" title="{lang}wcf.user.profile.report{/lang}" class="button jsTooltip"><span class="icon icon16 fa-exclamation-triangle"></span> <span class="invisible">{lang}wcf.user.profile.report{/lang}</span></a></li>
-							{/if}
-							
-							{if $user->userID != $__wcf->user->userID}
-								{if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
-									<li><a class="button jsTooltip" href="mailto:{@$user->getEncodedEmail()}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
-								{elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
-									<li><a class="button jsTooltip" href="{link controller='Mail' object=$user}{/link}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
+					<ul class="userProfileButtonContainer">
+						{hascontent}
+							<li>
+								<a class="jsTooltip" title="{lang}wcf.user.profile.customization{/lang}"><span class="icon icon32 fa-pencil"></span> <span class="invisible">{lang}wcf.user.profile.customization{/lang}</span></a>
+								<ul class="userProfileButtonMenu" data-menu="customization">
+									{content}
+										{event name='menuCustomization'}
+										
+										{if $user->userID == $__wcf->user->userID}
+											<li><a href="{link controller='AvatarEdit'}{/link}">{lang}wcf.user.avatar.edit{/lang}</a></li>
+										{/if}
+										
+										<li><a href="#" class="jsButtonEditCoverPhoto">todo: edit cover photo</a></li>
+										
+										{if $user->canEdit() || ($__wcf->getUser()->userID == $user->userID && $user->canEditOwnProfile())}
+											<li class="divider"><a href="#" class="jsButtonEditProfile">{lang}wcf.user.editProfile{/lang}</a></li>
+										{/if}
+									{/content}
+								</ul>
+							</li>
+						{/hascontent}
+						
+						<li>
+							<a class="jsTooltip" title="{lang}wcf.user.profile.user{/lang}"><span class="icon icon32 fa-user"></span> <span class="invisible">{lang}wcf.user.profile.dropdown.interaction{/lang}</span></a>
+							<ul class="userProfileButtonMenu" data-menu="interaction">
+								{event name='menuInteraction'}
+								
+								{if $user->userID != $__wcf->user->userID}
+									{if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
+										<li><a href="mailto:{@$user->getEncodedEmail()}">{lang}wcf.user.button.mail{/lang}</a></li>
+									{elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
+										<li><a href="{link controller='Mail' object=$user}{/link}">{lang}wcf.user.button.mail{/lang}</a></li>
+									{/if}
 								{/if}
-							{/if}
-							
-							{event name='buttons'}
-							
-							{if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
-								<li class="dropdown">
-									<a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="button jsTooltip jsUserInlineEditor" title="{lang}wcf.user.moderate{/lang}"><span class="icon icon16 fa-wrench"></span> <span class="invisible">{lang}wcf.user.moderate{/lang}</span></a>
-									<ul class="dropdownMenu"></ul>
-								</li>
-							{/if}
-						</ul>
-					</div>
+								
+								{if $__wcf->session->getPermission('user.profile.canReportContent')}
+									<li class="jsReportUser divider" data-object-id="{@$user->userID}"><a href="#">{lang}wcf.user.profile.report{/lang}</a></li>
+								{/if}
+							</ul>
+						</li>
+						
+						{hascontent}
+							<li>
+								<a class="jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon32 fa-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
+								<ul class="userProfileButtonMenu" data-menu="search">
+									{content}{event name='menuSearch'}{/content}
+								</ul>
+							</li>
+						{/hascontent}
+						
+						{hascontent}
+							<li>
+								<a class="jsTooltip" title="{lang}wcf.user.profile.management{/lang}"><span class="icon icon32 fa-cog"></span> <span class="invisible">{lang}wcf.user.profile.dropdown.management{/lang}</span></a>
+								<ul class="userProfileButtonMenu" data-menu="management">
+									{content}
+										{if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
+											<li><a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="jsUserInlineEditor">{lang}wcf.user.moderate{/lang}</a></li>
+										{/if}
+									
+										{event name='menuManagement'}
+									{/content}
+								</ul>
+							</li>
+						{/hascontent}
+						
+						{event name='buttonMenu'}
+					</ul>
 				</header>
 			</div>
 		</div>
diff --git a/wcfsetup/install/files/js/WCF.User.js b/wcfsetup/install/files/js/WCF.User.js
index 43de8e52e9..46245bcadd 100644
--- a/wcfsetup/install/files/js/WCF.User.js
+++ b/wcfsetup/install/files/js/WCF.User.js
@@ -716,208 +716,6 @@ WCF.User.Profile.ActivityPointList = {
 	}
 };
 
-/**
- * Provides methods to follow an user.
- * 
- * @param	integer		userID
- * @param	boolean		following
- */
-WCF.User.Profile.Follow = Class.extend({
-	/**
-	 * follow button
-	 * @var	jQuery
-	 */
-	_button: null,
-	
-	/**
-	 * true if following current user
-	 * @var	boolean
-	 */
-	_following: false,
-	
-	/**
-	 * action proxy object
-	 * @var	WCF.Action.Proxy
-	 */
-	_proxy: null,
-	
-	/**
-	 * user id
-	 * @var	integer
-	 */
-	_userID: 0,
-	
-	/**
-	 * Creates a new follow object.
-	 * 
-	 * @param	integer		userID
-	 * @param	boolean		following
-	 */
-	init: function (userID, following) {
-		this._following = following;
-		this._userID = userID;
-		this._proxy = new WCF.Action.Proxy({
-			success: $.proxy(this._success, this)
-		});
-		
-		this._createButton();
-		this._showButton();
-	},
-	
-	/**
-	 * Creates the (un-)follow button
-	 */
-	_createButton: function () {
-		this._button = $('<li id="followUser"><a href="#" class="button jsTooltip" title="'+WCF.Language.get('wcf.user.button.'+(this._following ? 'un' : '')+'follow')+'"><span class="icon icon16 fa-plus"></span> <span class="invisible">'+WCF.Language.get('wcf.user.button.'+(this._following ? 'un' : '')+'follow')+'</span></a></li>').prependTo($('#profileButtonContainer'));
-		this._button.click($.proxy(this._execute, this));
-	},
-	
-	/**
-	 * Follows or unfollows an user.
-	 */
-	_execute: function (event) {
-		event.preventDefault();
-		var $actionName = (this._following) ? 'unfollow' : 'follow';
-		this._proxy.setOption('data', {
-			'actionName': $actionName,
-			'className': 'wcf\\data\\user\\follow\\UserFollowAction',
-			'parameters': {
-				data: {
-					userID: this._userID
-				}
-			}
-		});
-		this._proxy.sendRequest();
-	},
-	
-	/**
-	 * Displays current follow state.
-	 */
-	_showButton: function () {
-		if (this._following) {
-			this._button.find('.button').data('tooltip', WCF.Language.get('wcf.user.button.unfollow')).addClass('active').children('.icon').removeClass('fa-plus').addClass('fa-minus');
-		}
-		else {
-			this._button.find('.button').data('tooltip', WCF.Language.get('wcf.user.button.follow')).removeClass('active').children('.icon').removeClass('fa-minus').addClass('fa-plus');
-		}
-	},
-	
-	/**
-	 * Update object state on success.
-	 * 
-	 * @param	object		data
-	 * @param	string		textStatus
-	 * @param	jQuery		jqXHR
-	 */
-	_success: function (data, textStatus, jqXHR) {
-		this._following = data.returnValues.following;
-		this._showButton();
-		
-		var $notification = new WCF.System.Notification();
-		$notification.show();
-	}
-});
-
-/**
- * Provides methods to manage ignored users.
- * 
- * @param	integer		userID
- * @param	boolean		isIgnoredUser
- */
-WCF.User.Profile.IgnoreUser = Class.extend({
-	/**
-	 * ignore button
-	 * @var	jQuery
-	 */
-	_button: null,
-	
-	/**
-	 * ignore state
-	 * @var	boolean
-	 */
-	_isIgnoredUser: false,
-	
-	/**
-	 * ajax proxy object
-	 * @var	WCF.Action.Proxy
-	 */
-	_proxy: null,
-	
-	/**
-	 * target user id
-	 * @var	integer
-	 */
-	_userID: 0,
-	
-	/**
-	 * Initializes methods to manage an ignored user.
-	 * 
-	 * @param	integer		userID
-	 * @param	boolean		isIgnoredUser
-	 */
-	init: function(userID, isIgnoredUser) {
-		this._userID = userID;
-		this._isIgnoredUser = isIgnoredUser;
-		
-		// initialize proxy
-		this._proxy = new WCF.Action.Proxy({
-			success: $.proxy(this._success, this)
-		});
-		
-		// handle button
-		this._updateButton();
-		this._button.click($.proxy(this._click, this));
-	},
-	
-	/**
-	 * Handle clicks, might cause 'ignore' or 'unignore' to be triggered.
-	 */
-	_click: function(event) {
-		event.preventDefault();
-		var $action = (this._isIgnoredUser) ? 'unignore' : 'ignore';
-		
-		this._proxy.setOption('data', {
-			actionName: $action,
-			className: 'wcf\\data\\user\\ignore\\UserIgnoreAction',
-			parameters: {
-				data: {
-					ignoreUserID: this._userID
-				}
-			}
-		});
-		
-		this._proxy.sendRequest();
-	},
-	
-	/**
-	 * Updates button label and function upon successful request.
-	 * 
-	 * @param	object		data
-	 * @param	string		textStatus
-	 * @param	jQuery		jqXHR
-	 */
-	_success: function(data, textStatus, jqXHR) {
-		this._isIgnoredUser = data.returnValues.isIgnoredUser;
-		this._updateButton();
-		
-		var $notification = new WCF.System.Notification();
-		$notification.show();
-	},
-	
-	/**
-	 * Updates button label and inserts it if not exists.
-	 */
-	_updateButton: function() {
-		if (this._button === null) {
-			this._button = $('<li id="ignoreUser"><a href="#" class="button jsTooltip" title="'+WCF.Language.get('wcf.user.button.'+(this._isIgnoredUser ? 'un' : '')+'ignore')+'"><span class="icon icon16 fa-ban"></span> <span class="invisible">'+WCF.Language.get('wcf.user.button.'+(this._isIgnoredUser ? 'un' : '')+'ignore')+'</span></a></li>').prependTo($('#profileButtonContainer'));
-		}
-		
-		this._button.find('.button').data('tooltip', WCF.Language.get('wcf.user.button.' + (this._isIgnoredUser ? 'un' : '') + 'ignore'));
-		if (this._isIgnoredUser) this._button.find('.button').addClass('active').children('.icon').removeClass('fa-ban').addClass('fa-circle-o');
-		else this._button.find('.button').removeClass('active').children('.icon').removeClass('fa-circle-o').addClass('fa-ban');
-	}
-});
-
 /**
  * Provides methods to load tab menu content upon request.
  */
@@ -1110,20 +908,22 @@ WCF.User.Profile.Editor = Class.extend({
 	 * Initializes interface buttons.
 	 */
 	_initButtons: function() {
-		var $buttonContainer = $('#profileButtonContainer');
-		
 		// create buttons
 		this._buttons = {
-			beginEdit: $('<li><a class="button"><span class="icon icon16 fa-pencil" /> <span>' + WCF.Language.get('wcf.user.editProfile') + '</span></a></li>').click($.proxy(this._beginEdit, this)).appendTo($buttonContainer)
+			beginEdit: $('.jsButtonEditProfile:eq(0)').click(this._beginEdit.bind(this))
 		};
 	},
 	
 	/**
 	 * Begins editing.
+	 * 
+	 * @param       {Event}         event   event object
 	 */
-	_beginEdit: function() {
+	_beginEdit: function(event) {
+		event.preventDefault();
+		
 		this._actionName = 'beginEdit';
-		this._buttons.beginEdit.hide();
+		this._buttons.beginEdit.parent().addClass('active');
 		$('#profileContent').wcfTabs('select', 'about');
 		
 		// load form
@@ -1199,7 +999,7 @@ WCF.User.Profile.Editor = Class.extend({
 	 */
 	_restore: function() {
 		this._actionName = 'restore';
-		this._buttons.beginEdit.show();
+		this._buttons.beginEdit.parent().removeClass('active');
 		
 		this._destroyEditor();
 		
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
index 14d0883580..350014721f 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
@@ -176,7 +176,11 @@ define(
 			
 			UiAlignment.set(dropdownMenu, alternateElement || dropdown, {
 				pointerClassNames: ['dropdownArrowBottom', 'dropdownArrowRight'],
-				refDimensionsElement: refDimensionsElement || null
+				refDimensionsElement: refDimensionsElement || null,
+				
+				// alignment
+				horizontal: (elData(dropdownMenu, 'dropdown-alignment-horizontal') === 'right') ? 'right' : 'left',
+				vertical: (elData(dropdownMenu, 'dropdown-alignment-vertical') === 'top') ? 'top' : 'bottom'
 			});
 		},
 		
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Abstract.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Abstract.js
new file mode 100644
index 0000000000..4cefd20e3a
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Abstract.js
@@ -0,0 +1,129 @@
+/**
+ * Default implementation for user interaction menu items used in the user profile.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2016 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/Ui/User/Profile/Menu/Item/Abstract
+ */
+define(['Ajax', 'Dom/Util'], function(Ajax, DomUtil) {
+	"use strict";
+	
+	/**
+	 * Creates a new user profile menu item.
+	 * 
+	 * @param       {int}           userId          user id
+	 * @param       {boolean}       isActive        true if item is initially active
+	 * @constructor
+	 */
+	function UiUserProfileMenuItemAbstract(userId, isActive) {}
+	UiUserProfileMenuItemAbstract.prototype = {
+		/**
+		 * Creates a new user profile menu item.
+		 * 
+		 * @param       {int}           userId          user id
+		 * @param       {boolean}       isActive        true if item is initially active
+		 */
+		init: function(userId, isActive) {
+			this._userId = userId;
+			this._isActive = (isActive !== false);
+			
+			this._initButton();
+			this._updateButton();
+		},
+		
+		/**
+		 * Initializes the menu item.
+		 * 
+		 * @protected
+		 */
+		_initButton: function() {
+			var button = elCreate('a');
+			button.href = '#';
+			button.addEventListener(WCF_CLICK_EVENT, this._toggle.bind(this));
+			
+			var listItem = elCreate('li');
+			listItem.appendChild(button);
+			
+			var menu = elBySel('.userProfileButtonMenu[data-menu="interaction"]');
+			DomUtil.prepend(listItem, menu);
+			
+			this._button = button;
+			this._listItem = listItem;
+		},
+		
+		/**
+		 * Handles clicks on the menu item button.
+		 * 
+		 * @param       {Event}         event   event object
+		 * @protected
+		 */
+		_toggle: function(event) {
+			event.preventDefault();
+			
+			Ajax.api(this, {
+				actionName: this._getAjaxActionName(),
+				parameters: {
+					data: {
+						userID: this._userId
+					}
+				}
+			});
+		},
+		
+		/**
+		 * Updates the button state and label.
+		 * 
+		 * @protected
+		 */
+		_updateButton: function() {
+			this._button.textContent = this._getLabel();
+			this._listItem.classList[(this._isActive ? 'add' : 'remove')]('active');
+		},
+		
+		/**
+		 * Returns the button label.
+		 * 
+		 * @return      {string}        button label
+		 * @protected
+		 * @abstract
+		 */
+		_getLabel: function() {
+			throw new Error("Implement me!");
+		},
+		
+		/**
+		 * Returns the Ajax action name.
+		 * 
+		 * @return      {string}        ajax action name
+		 * @protected
+		 * @abstract
+		 */
+		_getAjaxActionName: function() {
+			throw new Error("Implement me!");
+		},
+		
+		/**
+		 * Handles successful Ajax requests.
+		 * 
+		 * @protected
+		 * @abstract
+		 */
+		_ajaxSuccess: function() {
+			throw new Error("Implement me!");
+		},
+		
+		/**
+		 * Returns the default Ajax request data
+		 * 
+		 * @return      {Object}        ajax request data
+		 * @protected
+		 * @abstract
+		 */
+		_ajaxSetup: function() {
+			throw new Error("Implement me!");
+		}
+	};
+	
+	return UiUserProfileMenuItemAbstract;
+});
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Follow.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Follow.js
new file mode 100644
index 0000000000..4506029572
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Follow.js
@@ -0,0 +1,31 @@
+define(['Core', 'Language', 'Ui/Notification', './Abstract'], function(Core, Language, UiNotification, UiUserProfileMenuItemAbstract) {
+	"use strict";
+	
+	function UiUserProfileMenuItemFollow(userId, isActive) { this.init(userId, isActive); }
+	Core.inherit(UiUserProfileMenuItemFollow, UiUserProfileMenuItemAbstract, {
+		_getLabel: function() {
+			return Language.get('wcf.user.button.' + (this._isActive ? 'un' : '') + 'follow');
+		},
+		
+		_getAjaxActionName: function() {
+			return this._isActive ? 'unfollow' : 'follow';
+		},
+		
+		_ajaxSuccess: function(data) {
+			this._isActive = (data.returnValues.following ? true : false);
+			this._updateButton();
+			
+			UiNotification.show();
+		},
+		
+		_ajaxSetup: function() {
+			return {
+				data: {
+					className: 'wcf\\data\\user\\follow\\UserFollowAction'
+				}
+			}
+		}
+	});
+	
+	return UiUserProfileMenuItemFollow;
+});
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Ignore.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Ignore.js
new file mode 100644
index 0000000000..41d9779103
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/User/Profile/Menu/Item/Ignore.js
@@ -0,0 +1,31 @@
+define(['Core', 'Language', 'Ui/Notification', './Abstract'], function(Core, Language, UiNotification, UiUserProfileMenuItemAbstract) {
+	"use strict";
+	
+	function UiUserProfileMenuItemIgnore(userId, isActive) { this.init(userId, isActive); }
+	Core.inherit(UiUserProfileMenuItemIgnore, UiUserProfileMenuItemAbstract, {
+		_getLabel: function() {
+			return Language.get('wcf.user.button.' + (this._isActive ? 'un' : '') + 'ignore');
+		},
+		
+		_getAjaxActionName: function() {
+			return this._isActive ? 'unignore' : 'ignore';
+		},
+		
+		_ajaxSuccess: function(data) {
+			this._isActive = (data.returnValues.isIgnoredUser ? true : false);
+			this._updateButton();
+			
+			UiNotification.show();
+		},
+		
+		_ajaxSetup: function() {
+			return {
+				data: {
+					className: 'wcf\\data\\user\\ignore\\UserIgnoreAction'
+				}
+			}
+		}
+	});
+	
+	return UiUserProfileMenuItemIgnore;
+});
diff --git a/wcfsetup/install/files/lib/data/user/ignore/UserIgnoreAction.class.php b/wcfsetup/install/files/lib/data/user/ignore/UserIgnoreAction.class.php
index f3fc8f0841..103ca63d3f 100644
--- a/wcfsetup/install/files/lib/data/user/ignore/UserIgnoreAction.class.php
+++ b/wcfsetup/install/files/lib/data/user/ignore/UserIgnoreAction.class.php
@@ -23,9 +23,9 @@ class UserIgnoreAction extends AbstractDatabaseObjectAction {
 	 * Validates the 'ignore' action.
 	 */
 	public function validateIgnore() {
-		$this->readInteger('ignoreUserID', false, 'data');
+		$this->readInteger('userID', false, 'data');
 		
-		$userProfile = UserProfileRuntimeCache::getInstance()->getObject($this->parameters['data']['ignoreUserID']);
+		$userProfile = UserProfileRuntimeCache::getInstance()->getObject($this->parameters['data']['userID']);
 		if ($userProfile === null || $userProfile->userID == WCF::getUser()->userID) {
 			throw new IllegalLinkException();
 		}
@@ -42,11 +42,11 @@ class UserIgnoreAction extends AbstractDatabaseObjectAction {
 	 * @return	array
 	 */
 	public function ignore() {
-		$ignore = UserIgnore::getIgnore($this->parameters['data']['ignoreUserID']);
+		$ignore = UserIgnore::getIgnore($this->parameters['data']['userID']);
 		
 		if (!$ignore->ignoreID) {
 			UserIgnoreEditor::create(array(
-				'ignoreUserID' => $this->parameters['data']['ignoreUserID'],
+				'ignoreUserID' => $this->parameters['data']['userID'],
 				'time' => TIME_NOW,
 				'userID' => WCF::getUser()->userID,
 			));
@@ -61,9 +61,9 @@ class UserIgnoreAction extends AbstractDatabaseObjectAction {
 	 * Validates the 'unignore' action.
 	 */
 	public function validateUnignore() {
-		$this->readInteger('ignoreUserID', false, 'data');
+		$this->readInteger('userID', false, 'data');
 		
-		$userProfile = UserProfileRuntimeCache::getInstance()->getObject($this->parameters['data']['ignoreUserID']);
+		$userProfile = UserProfileRuntimeCache::getInstance()->getObject($this->parameters['data']['userID']);
 		if ($userProfile === null) {
 			throw new IllegalLinkException();
 		}
@@ -75,7 +75,7 @@ class UserIgnoreAction extends AbstractDatabaseObjectAction {
 	 * @return	array
 	 */
 	public function unignore() {
-		$ignore = UserIgnore::getIgnore($this->parameters['data']['ignoreUserID']);
+		$ignore = UserIgnore::getIgnore($this->parameters['data']['userID']);
 		
 		if ($ignore->ignoreID) {
 			$ignoreEditor = new UserIgnoreEditor($ignore);
diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index fec2f719ea..1182071724 100644
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -20,12 +20,12 @@
 }
 
 .userProfileUser {
-	background-color: $wcfHeaderBackground;
+	background-color: $wcfHeaderMenuBackground;
 	
 	> .layoutBoundary {
 		align-items: center;
 		display: flex;
-		padding: 5px 10px 10px 160px;
+		padding: 0 10px 0 160px;
 		position: relative;
 		
 		@include small-screen-only {
@@ -40,7 +40,7 @@
 	}
 	
 	.contentHeaderIcon {
-		background-color: $wcfHeaderBackground;
+		background-color: $wcfHeaderMenuBackground;
 		border-radius: 50%;
 		left: 0;
 		padding: 10px;
@@ -56,23 +56,86 @@
 		}
 	}
 	
-	.contentTitle + span {
-		margin-top: 5px;
+	.contentHeaderTitle {
+		align-items: center;
+		display: flex;
+		
+		> .contentTitle {
+			flex: 0 0 auto;
+		}
+		
+		> span {
+			border: 1px solid rgba(255, 255, 255, 1);
+			flex: 0 0 auto;
+			margin-left: 10px;
+		}
 	}
 	
-	.buttonGroupNavigation {
+	.userProfileButtonContainer {
 		@include large-screen-only {
+			display: flex;
 			flex: 0 0 auto;
 			margin-left: 10px;
 			
-			.button {
-				background-color: $wcfHeaderMenuBackground;
-				color: $wcfHeaderMenuLink;
+			> li {
+				flex: 0 0 auto;
+				position: relative;
+				
+				> a {
+					background-color: $wcfHeaderMenuBackground;
+					color: $wcfHeaderMenuLink;
+					display: block;
+					padding: 10px;
+					
+					.icon {
+						color: inherit;
+					}
+				}
+				
+				> .userProfileButtonMenu {
+					background-color: $wcfHeaderMenuDropdownBackground;
+					padding: 5px 0;
+					position: absolute;
+					right: 0;
+					visibility: hidden;
+					
+					> li {
+						&.divider:not(:first-child) {
+							border-top: 1px solid $wcfHeaderMenuDropdownBackgroundActive;
+							margin-top: 5px;
+							padding-top: 5px;
+						}
+						
+						> a {
+							color: $wcfHeaderMenuDropdownLink;
+						}
+						
+						> a,
+						> span {
+							display: block;
+							padding: 7px 20px;
+							white-space: nowrap;
+							text-align: right;
+						}
+						
+						&.active > a,
+						> a:hover {
+							background-color: $wcfHeaderMenuDropdownBackgroundActive;
+							color: $wcfHeaderMenuDropdownLinkActive;
+							text-decoration: none;
+						}
+					}
+				}
 				
-				&.active,
 				&:hover {
-					background-color: $wcfHeaderMenuBackgroundActive;
-					color: $wcfHeaderMenuLinkActive;
+					> a {
+						background-color: $wcfHeaderMenuBackgroundActive;
+						color: $wcfHeaderMenuLinkActive;
+					}
+					
+					> .userProfileButtonMenu {
+						visibility: visible;
+					}
 				}
 			}
 		}
diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index d8432225d6..5f0722dbbf 100644
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -3207,6 +3207,9 @@ Möchten Sie diese E-Mail-Benachrichtigung in Zukunft nicht mehr erhalten, könn
 		<item name="wcf.user.profile.recentActivity.profileCommentResponse"><![CDATA[Hat auf einen Kommentar von <a href="{link controller='User' object=$commentAuthor}{/link}">{$commentAuthor->username}</a> an der <a href="{link controller='User' object=$user}{/link}#wall">Pinnwand von {$user->username}</a> geantwortet.]]></item>
 		<item name="wcf.user.profile.report"><![CDATA[Benutzerprofil melden]]></item>
 		<item name="wcf.user.profile.protected"><![CDATA[Der Benutzer hat den Zugriff auf sein vollständiges Profil eingeschränkt.]]></item>
+		<item name="wcf.user.profile.user"><![CDATA[Benutzer]]></item>
+		<item name="wcf.user.profile.management"><![CDATA[Verwaltung]]></item>
+		<item name="wcf.user.profile.customization"><![CDATA[Anpassung]]></item>
 	</category>
 	
 	<category name="wcf.user.objectWatch">
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index b1f66c4d8c..ee39813a9e 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -3231,6 +3231,9 @@ If you do not want to receive further email notifications for this event, you ca
 		<item name="wcf.user.profile.recentActivity.profileCommentResponse"><![CDATA[Replied to a comment by <a href="{link controller='User' object=$commentAuthor}{/link}">{$commentAuthor->username}</a> on <a href="{link controller='User' object=$user}{/link}#wall">{$user->username}’s wall</a>.]]></item>
 		<item name="wcf.user.profile.report"><![CDATA[Report User Profile]]></item>
 		<item name="wcf.user.profile.protected"><![CDATA[This member limits who may view their full profile information.]]></item>
+		<item name="wcf.user.profile.user"><![CDATA[User]]></item>
+		<item name="wcf.user.profile.management"><![CDATA[Management]]></item>
+		<item name="wcf.user.profile.customization"><![CDATA[Customization]]></item>
 	</category>
 	
 	<category name="wcf.user.objectWatch">
-- 
2.20.1