feat(ui): new layout of user hover menu contents

docs/guides/upgrading.rst

@@ -463,6 +463,11 @@ All menu items are now identified with with ``data-menu-item`` attribute, sectio
 ``entity`` menu:
 
  * ``access`` menu item has been removed. Access information is now rendered in the entity byline.
+
+ ``user_hover`` menu:
+
+ * All items use the ``icon`` parameter.
+ * The layout of the dropdown has been changed. If you have modified the look and feel of this dropdown, you might need to update your HTML/CSS.
 
 Entity icons
 ------------

js/lib/ui.js

@@ -112,7 +112,7 @@ elgg.ui.initHoverMenu = function(parent) {
 				if (data) {
 					// replace all existing placeholders with new menu
 					$all_placeholders.removeClass('elgg-ajax-loader')
-						.html($(data).children());
+						.html($(data));
 				}
 			}
 		});
@@ -157,7 +157,7 @@ elgg.ui.initHoverMenu = function(parent) {
 			} else {
 				popup.open($icon, $hovermenu, {
 					'my': 'left top',
-					'at': 'right-15px bottom',
+					'at': 'left top',
 					'of': $icon.closest(".elgg-avatar"),
 					'collision': 'fit fit'
 				});

views/default/elements/navigation.css.php

@@ -416,7 +416,7 @@
 	color: #999;
 	text-decoration: underline;
 }
-.elgg-menu-page .elgg-menu-closed:before, 
+.elgg-menu-page .elgg-menu-closed:before,
 .elgg-menu-page .elgg-menu-opened:before {
 	display: inline-block;
 	padding-right: 4px;
@@ -436,38 +436,49 @@
 	position: absolute;
 	z-index: 10000;
 	overflow: hidden;
-	min-width: 180px;
-	max-width: 250px;
 	border: 1px solid #DEDEDE;
 	background-color: #FFF;
+	margin-right: 10px;
 
 	border-radius: 0 3px 3px 3px;
 	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.25);
 }
-.elgg-menu-hover > li {
-	border-bottom: 1px solid #ddd;
-}
-.elgg-menu-hover > li:last-child {
-	border-bottom: none;
+
+.elgg-menu-hover-card-container {
+	display: flex;
+	flex-wrap: wrap;
+	max-width: 500px;
 }
-.elgg-menu-hover .elgg-heading-basic {
-	display: block;
+
+.elgg-menu-hover-card {
+	padding: 8px 16px;
+	min-width: 300px;
+	flex: 2;
 }
-.elgg-menu-hover > li a {
-	padding: 6px 18px;
+
+.elgg-menu-hover .elgg-menu > li a {
+	padding: 8px 16px;
 	color: #666;
 }
 .elgg-menu-hover .elgg-anchor-icon + .elgg-anchor-label {
 	margin-left: 12px;
 }
-.elgg-menu-hover a:hover {
+.elgg-menu-hover .elgg-menu a:hover {
 	background-color: #F0F0F0;
 	text-decoration: none;
 }
-.elgg-menu-hover-admin a {
-	color: #FF0000;
+.elgg-menu-hover-actions,
+.elgg-menu-hover-default {
+	border-left: 1px solid #efefef;
+	flex: 1;
+	white-space: nowrap;
+}
+
+.elgg-menu-hover-admin {
+	border-top: 1px solid #efefef;
 }
-.elgg-menu-hover-admin a:hover {
+
+.elgg-menu-hover .elgg-menu-hover-admin a:hover {
 	color: #FFF;
 	background-color: #FF0000;
 }

views/default/navigation/menu/user_hover.php

@@ -8,53 +8,65 @@
  * @uses $vars['menu']      Menu array provided by elgg_view_menu()
  */
 
-$user = $vars['entity'];
-$actions = elgg_extract('action', $vars['menu'], null);
-$main = elgg_extract('default', $vars['menu'], null);
-$admin = elgg_extract('admin', $vars['menu'], null);
-
-echo '<ul class="elgg-menu elgg-menu-hover">';
-
-// name and username
-$name_link = elgg_view('output/url', [
-	'href' => $user->getURL(),
-	'text' => "<span class=\"elgg-heading-basic\">$user->name</span>&#64;$user->username",
-	'is_trusted' => true,
+$actions = elgg_extract('action', $vars['menu'], []);
+$main = elgg_extract('default', $vars['menu'], []);
+$admin = elgg_extract('admin', $vars['menu'], []);
+
+$user = elgg_extract('entity', $vars);
+if (!($user instanceof ElggUser)) {
+	return;
+}
+
+elgg_push_context('user_hover');
+
+if (elgg_is_admin_logged_in() && $admin) {
+	$actions[] = \ElggMenuItem::factory([
+		'name' => 'toggle_admin',
+		'text' => elgg_echo('admin:options'),
+		'icon' => 'ellipsis-v',
+		'href' => '#',
+		'data-toggle-selector' => ".hover_toggle_admin_{$user->guid}",
+		'rel' => 'toggle',
+	]);
+}
+
+$user_info = elgg_view_entity($user, [
+	'full_view' => false,
+	'use_hover' => false,
+	'size' => 'medium',
 ]);
-echo "<li>$name_link</li>";
+
+$card = elgg_format_element('div', ['class' => 'elgg-menu-hover-card'], $user_info);
 
 // actions
 if (elgg_is_logged_in() && $actions) {
-	echo '<li>';
-	echo elgg_view('navigation/menu/elements/section', [
+	$card .= elgg_view('navigation/menu/elements/section', [
 		'class' => "elgg-menu elgg-menu-hover-actions",
 		'items' => $actions,
 	]);
-	echo '</li>';
 }
 
 // main
 if ($main) {
-	echo '<li>';
-
-	echo elgg_view('navigation/menu/elements/section', [
+	$card .= elgg_view('navigation/menu/elements/section', [
 		'class' => 'elgg-menu elgg-menu-hover-default',
 		'items' => $main,
 	]);
-
-	echo '</li>';
 }
 
+echo elgg_format_element('div', ['class' => 'elgg-menu-hover-card-container'], $card);
+
 // admin
 if (elgg_is_admin_logged_in() && $admin) {
-	echo '<li>';
-
 	echo elgg_view('navigation/menu/elements/section', [
-		'class' => 'elgg-menu elgg-menu-hover-admin',
+		'class' => [
+			'elgg-menu',
+			'elgg-menu-hover-admin',
+			'hidden',
+			"hover_toggle_admin_{$user->guid}",
+		],
 		'items' => $admin,
 	]);
-
-	echo '</li>';
 }
 
-echo '</ul>';
+elgg_pop_context();

views/default/navigation/menu/user_hover/contents.php

@@ -31,13 +31,14 @@
 elgg_set_config("input", $input);
 elgg_set_page_owner_guid($page_owner_guid);
 
-$params = [
-	"entity" => $user,
-	"username" => $user->username,
-	"name" => $user->name,
-];
-
-echo elgg_view_menu("user_hover", $params);
+$menu = elgg_view_menu('user_hover', [
+	'entity' => $user,
+	'username' => $user->username,
+	'name' => $user->name,
+]);
+
+// wrapping in a li as it is inject into a ul via javascript
+echo elgg_format_element('li', [], $menu);
 
 // revert global state
 elgg_set_context_stack($state['contexts']);

views/default/user/default.php

@@ -33,7 +33,7 @@
 	echo $icon;
 } else {
 	$metadata = '';
-	if (!elgg_in_context('owner_block') && !elgg_in_context('widgets')) {
+	if (!elgg_in_context('owner_block') && !elgg_in_context('widgets') && !elgg_in_context('user_hover')) {
 		$metadata = elgg_view_menu('entity', [
 			'entity' => $entity,
 			'sort_by' => 'priority',