Merge pull request #6848 from nextcloud/user-app-nav-to-css-guidelines

User settings app-navigation to css guidelines

3 files changed, 45 insertions, 106 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index b6432c5a96e..b21f052a15f 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -417,42 +417,6 @@ table.nostyle {
 }
 
 /* USERS */
-#newgroup-init a span {
-	margin-left: 20px;
-	&:before {
-		position: absolute;
-		left: 12px;
-		top: -2px;
-		content: '+';
-		font-weight: bold;
-		font-size: 150%;
-	}
-}
-
-#newgroup-form {
-	height: 44px;
-}
-
-#newgroupname {
-	margin: 0;
-	width: 100%;
-	padding: 12px 40px 12px 12px;
-	box-sizing: border-box;
-	background-color: transparent;
-	border: none;
-	border-bottom: 1px solid $color-border;
-	border-radius: 0;
-}
-
-#newgroup-form .button {
-	position: absolute;
-	right: 0;
-	top: 0;
-	padding: 10px 20px;
-	background-color: transparent;
-	border: none;
-	opacity: .5;
-}
 
 .isgroup {
 	.groupname {
@@ -466,44 +430,18 @@ table.nostyle {
 	}
 }
 
-.usercount {
-	float: left;
-	margin: 5px;
-}
-
 li.active {
-	span.utils .delete {
-		float: left;
-		position: relative;
-		opacity: 0.5;
-		top: -7px;
-		left: 7px;
-		width: 44px;
-		height: 44px;
-	}
-	.rename {
-		padding: 8px 14px 20px 14px;
-		top: 0px;
-		position: absolute;
-		width: 16px;
-		height: 16px;
-		opacity: 0.5;
-		display: inline-block !important;
-	}
-	span.utils .delete img {
-		margin: 14px;
-	}
+	.delete,
 	.rename {
-		opacity: 0.5;
-	}
-	span.utils .delete:hover, .rename:hover {
-		opacity: 1;
+		display: block;
 	}
 }
 
-span.utils .delete,
-.rename {
-	display: none;
+.app-navigation-entry-utils {
+	.delete,
+	.rename {
+		display: none;
+	}
 }
 
 #usersearchform {
diff --git a/settings/js/users/groups.js b/settings/js/users/groups.js
index 073551c0d8e..522291a00d7 100644
--- a/settings/js/users/groups.js
+++ b/settings/js/users/groups.js
@@ -227,7 +227,7 @@ GroupList = {
 	},
 
 	isAddGroupButtonVisible: function () {
-		return $('#newgroup-init').is(":visible");
+		return !$('#newgroup-entry').hasClass('editing');
 	},
 
 	toggleAddGroup: function (event) {
@@ -235,14 +235,12 @@ GroupList = {
 			if (event) {
 				event.stopPropagation();
 			}
-			$('#newgroup-form').show();
-			$('#newgroup-init').hide();
-			$('#newgroupname').focus();
+			$('#newgroup-entry').addClass('editing');
+			$('#newgroupname').select();
 			GroupList.handleAddGroupInput('');
 		}
 		else {
-			$('#newgroup-form').hide();
-			$('#newgroup-init').show();
+			$('#newgroup-entry').removeClass('editing');
 			$('#newgroupname').val('');
 		}
 	},
@@ -299,7 +297,7 @@ GroupList = {
 			}
 
 			// Call function for handling delete/undo
-			GroupDeleteHandler.mark(GroupList.getElementGID(this));
+			GroupDeleteHandler.mark(GroupList.getElementGID($(this).parent()));
 		};
 		$userGroupList.on('click', '.delete', deleteAction);
 
@@ -340,7 +338,6 @@ $(document).ready( function () {
 	}
 
 	// Display or hide of Create Group List Element
-	$('#newgroup-form').hide();
 	$('#newgroup-init').on('click', function (e) {
 		GroupList.toggleAddGroup(e);
 	});
diff --git a/settings/templates/users/part.grouplist.php b/settings/templates/users/part.grouplist.php
index 5dfd7836f6a..469ed94adb3 100644
--- a/settings/templates/users/part.grouplist.php
+++ b/settings/templates/users/part.grouplist.php
@@ -1,18 +1,16 @@
 <ul id="usergrouplist" data-sort-groups="<?php p($_['sortGroups']); ?>">
 	<!-- Add new group -->
 	<?php if ($_['isAdmin']) { ?>
-	<li id="newgroup-init">
-		<a href="#">
-			<span><?php p($l->t('Add group'))?></span>
-		</a>
+	<li id="newgroup-entry">
+		<a href="#" class="icon-add" id="newgroup-init"><?php p($l->t('Add group'))?></a>
+		<div class="app-navigation-entry-edit" id="newgroup-form">
+			<form>
+				<input type="text" id="newgroupname" placeholder="<?php p($l->t('Add group'))?>">
+				<input type="submit" value="" class="icon-checkmark">
+			</form>
+		</div>
 	</li>
 	<?php } ?>
-	<li id="newgroup-form" style="display: none">
-		<form>
-			<input type="text" id="newgroupname" placeholder="<?php p($l->t('Group name')); ?> …" />
-			<input type="submit" class="button icon-add" value="" />
-		</form>
-	</li>
 	<!-- Everyone -->
 	<li id="everyonegroup" data-gid="_everyone" data-usercount="" class="isgroup">
 		<a href="#">
@@ -20,20 +18,22 @@
 				<?php p($l->t('Everyone')); ?>
 			</span>
 		</a>
-		<span class="utils">
-			<span class="usercount" id="everyonecount">
-
-			</span>
-		</span>
+		<div class="app-navigation-entry-utils">
+			<ul>
+				<li class="usercount app-navigation-entry-utils-counter" id="everyonecount"></li>
+			</ul>
+		</div>
 	</li>
 
 	<!-- The Admin Group -->
 	<?php foreach($_["adminGroup"] as $adminGroup): ?>
 		<li data-gid="admin" data-usercount="<?php if($adminGroup['usercount'] > 0) { p($adminGroup['usercount']); } ?>" class="isgroup">
 			<a href="#"><span class="groupname"><?php p($l->t('Admins')); ?></span></a>
-			<span class="utils">
-				<span class="usercount"><?php if($adminGroup['usercount'] > 0) { p($adminGroup['usercount']); } ?></span>
-			</span>
+			<div class="app-navigation-entry-utils">
+				<ul>
+					<li class="app-navigation-entry-utils-counter"><?php if($adminGroup['usercount'] > 0) { p($adminGroup['usercount']); } ?></li>
+				</ul>
+			</div>
 		</li>
 	<?php endforeach; ?>
 
@@ -41,9 +41,11 @@
 	<?php $disabledUsersGroup = $_["disabledUsersGroup"] ?>
 	<li data-gid="_disabledUsers" data-usercount="<?php if($disabledUsersGroup['usercount'] > 0) { p($disabledUsersGroup['usercount']); } ?>" class="isgroup">
 		<a href="#"><span class="groupname"><?php p($l->t('Disabled')); ?></span></a>
-		<span class="utils">
-			<span class="usercount"><?php if($disabledUsersGroup['usercount'] > 0) { p($disabledUsersGroup['usercount']); } ?></span>
-		</span>
+		<div class="app-navigation-entry-utils">
+			<ul>
+				<li class="app-navigation-entry-utils-counter"><?php if($disabledUsersGroup['usercount'] > 0) { p($disabledUsersGroup['usercount']); } ?></li>
+			</ul>
+		</div>
 	</li>
 
 	<!--List of Groups-->
@@ -52,14 +54,16 @@
 			<a href="#" class="dorename">
 				<span class="groupname"><?php p($group['name']); ?></span>
 			</a>
-			<span class="utils">
-				<span class="usercount"><?php if($group['usercount'] > 0) { p($group['usercount']); } ?></span>
-				<?php if($_['isAdmin']): ?>
-				<a href="#" class="action delete" original-title="<?php p($l->t('Delete'))?>">
-					<img src="<?php print_unescaped(image_path('core', 'actions/delete.svg')) ?>" />
-				</a>
-				<?php endif; ?>
-			</span>
+			<div class="app-navigation-entry-utils">
+				<ul>
+					<li class="app-navigation-entry-utils-counter"><?php if($group['usercount'] > 0) { p($group['usercount']); } ?></li>
+				 	<?php if($_['isAdmin']): ?>
+				 		<li class="app-navigation-entry-utils-menu-button delete">
+							<button class="icon-delete"></button>
+						</li>
+					<?php endif; ?>
+				</ul>
+			</div>
 		</li>
 	<?php endforeach; ?>
 </ul>