Enhancement : The edit icon looks like files app rename fileaction.

settings/css/settings.css

@@ -52,19 +52,20 @@ table.nostyle td { padding: 0.2em 0; }
 
 /* USERS */
 .usercount { float: left; margin: 5px; }
-li.active span.utils .delete { left: 7px; }
-li.active span.utils .delete, li.active span.utils .rename {
+li.active span.utils .delete {
 	float: left; position: relative; opacity: 0.5;
-	top: -7px; width: 44px; height: 44px;
+	top: -7px; left: 7px; width: 44px; height: 44px;
 }
-li.active span.utils .rename {
-	width: 16px; height: 16px;
-	padding: 14px;
-	cursor: pointer;
+li.active .rename {
+	padding: 8px 14px 20px 14px;
+	top: 0px; position: absolute; width: 16px; height: 16px; 
+	opacity: 0.5; 
+	display: inline-block !important;
 }
 li.active span.utils .delete img { margin: 14px; }
-li.active span.utils .delete:hover, li.active span.utils .rename:hover { opacity: 1; }
-span.utils .delete, span.utils .rename { display: none; }
+li.active .rename { opacity: 0.5; }
+li.active span.utils .delete:hover, li.active .rename:hover { opacity: 1; }
+span.utils .delete, .rename { display: none; }
 #app-navigation ul li.active > span.utils .delete,
 #app-navigation ul li.active > span.utils .rename { display: block; }
 #usersearchform { position: absolute; top: 4px; right: 10px; }

settings/js/users/groups.js

@@ -105,14 +105,14 @@ $(document).ready( function () {
 		)
 	});
 	// Implements Groupname editing.
-	$('#app-navigation').on('click', 'span.utils>img.rename', function (event) {
+	$('#app-navigation').on('click', 'img.rename', function (event) {
 		event.stopPropagation();
 		var img = $(this);
 		var gid = img.parent().parent().attr('data-gid');
 		var groupname = escapeHTML(img.parent().parent().attr('data-gid'));
 		var input = $('<input type="text" value="' + groupname + '">');
 		img.css('display', 'none');
-		img.parent().parent().children('a').replaceWith(input);
+		img.parent().children('span').replaceWith(input);
 		input.focus();
 		input.keypress(function (event) {
 			if (event.keyCode === 13) {
@@ -132,7 +132,7 @@ $(document).ready( function () {
 		input.blur(function () {
 			var input = $(this), groupname = input.val();
 			input.closest('li').attr('data-gid', groupname);
-			input.replaceWith('<a href="#">' + escapeHTML(groupname) + '</a>');
+			input.replaceWith('<span>' + escapeHTML(groupname) + '</span>');
 			img.css('display', '');
 		});
 	});

settings/templates/users/part.grouplist.php

@@ -8,7 +8,11 @@
 	</li>
 	<!-- Everyone -->
 	<li>
-		<a href="#"><?php p($l->t('Everyone')); ?></a>
+		<a href="#">
+			<span>
+				<?php p($l->t('Everyone')); ?>
+			</span>
+		</a>
 	</li>
 
 	<!-- The Admin Group -->
@@ -24,11 +28,13 @@
 	<!--List of Groups-->
 	<?php foreach($_["groups"] as $group): ?>
 		<li data-gid="<?php p($group['name']) ?>">
-			<a href="#"><?php p($group['name']); ?></a>
+			<a href="#">
+				<span><?php p($group['name']); ?></span>
+				<img class="svg action rename" src="<?php p(image_path('core', 'actions/rename.svg'))?>"
+				original-title="<?php p($l->t('Edit'))?>" alt="<?php p($l->t("change group name"))?>" title="<?php p($l->t("change group name"))?>" />
+			</a>
 			<span class="utils">
 				<span class="usercount"><?php if(count($group['useringroup']) > 0) { p(count($group['useringroup'])); } ?></span>
-				<img class="svg action rename" src="<?php p(image_path('core', 'actions/rename.svg'))?>"
-					original-title="<?php p($l->t('Edit'))?>" alt="<?php p($l->t("change group name"))?>" title="<?php p($l->t("change group name"))?>" />
 				<a href="#" class="action delete" original-title="<?php p($l->t('Delete'))?>">
 					<img src="<?php print_unescaped(image_path('core', 'actions/delete.svg')) ?>" class="svg" />
 				</a>