Fix popover and styling in user management

Signed-off-by: Julius Härtl <jus@bitgrid.net>

settings/css/settings.scss

@@ -347,7 +347,7 @@ table.nostyle {
 	}
 	.token-list {
 		td > a.icon {
-			opacity: 0;
+
 			transition: opacity 0.5s;
 		}
 		a.icon {
@@ -563,34 +563,24 @@ tr:hover > td {
 }
 
 td.userActions {
-	width: 25px;
-	text-align: center;
+	width: 44px;
+	.toggleUserActions {
+		width: 44px;
+		height: 44px;
 		position: relative;
 		.action {
-		position: relative;
-		top: 3px;
-	}
-	.toggleUserActions {
-		border: none;
-		background-color: rgba(0, 0, 0, 0);
-		width: 34px;
-		height: 34px;
-		margin: 0;
+			display: block;
+			padding: 14px;
 			opacity: 0.5;
+			.icon-more {
+				display: inline-block;
+			}
 			&:hover,
 			&:focus {
-			background-color: transparent;
 				opacity: 1;
 			}
 		}
-}
-
-tr.active td.userActions .action {
-	opacity: 1;
-}
-
-td.userActions .action:hover {
-	cursor: pointer;
+	}
 }
 
 div.recoveryPassword {

settings/js/users/users.js

@@ -101,16 +101,9 @@ var UserList = {
 		$tdSubadmins.find('.action').tooltip({placement: 'top'});
 
 		/**
-		 * user actions menu
+		 * hide user actions menu for current user
 		 */
-		if ($tr.find('td.userActions > span > img').length === 0 && OC.currentUser !== user.name) {
-			var menuImage = $('<img class="svg action">').attr({
-				src: OC.imagePath('core', 'actions/more')
-			});
-			var menuLink = $('<span class="toggleUserActions"></span>')
-				.append(menuImage);
-			$tr.find('td.userActions > span').replaceWith(menuLink);
-		} else if (OC.currentUser === user.name) {
+		if (OC.currentUser === user.name) {
 			$tr.find('td.userActions').empty();
 		}
 

settings/templates/users/part.userlist.php

@@ -1,4 +1,4 @@
-<table id="userlist" class="hascontrols grid" data-groups="<?php p($_['allGroups']);?>">
+<table id="userlist" class="grid" data-groups="<?php p($_['allGroups']);?>">
 	<thead>
 		<tr>
 			<th id="headerAvatar" scope="col"></th>
@@ -64,7 +64,9 @@
 			<td class="storageLocation"></td>
 			<td class="userBackend"></td>
 			<td class="lastLogin"></td>
-			<td class="userActions"><span></span>
+			<td class="userActions">
+				<div class="toggleUserActions">
+					<a class="action"><span class="icon-more"></span></a>
 					<div class="popovermenu bubble menu">
 						<ul class="userActionsMenu">
 							<li>
@@ -78,6 +80,7 @@
 							</li>
 						</ul>
 					</div>
+				</div>
 			</td>
 		</tr>
 	</tbody>