From f4004d3ab87006500ac6478ec91affbc40a52657 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Mon, 16 Oct 2017 18:00:56 +0200
Subject: [PATCH] User settings app-navigation to css guidelines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 core/css/styles.scss                        |  4 +++
 settings/css/settings.scss                  | 35 +++++----------------
 settings/templates/users/part.grouplist.php | 34 +++++++++++---------
 3 files changed, 31 insertions(+), 42 deletions(-)

diff --git a/core/css/styles.scss b/core/css/styles.scss
index 3b621d69862..d74840fe444 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -249,6 +249,10 @@ body {
 	left: 0;
 }
 
+#app-navigation * {
+	box-sizing: border-box;
+}
+
 #controls {
 	.button, button {
 		box-sizing: border-box;
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index b6432c5a96e..4b571b24852 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -472,38 +472,17 @@ table.nostyle {
 }
 
 li.active {
-	span.utils .delete {
-		float: left;
-		position: relative;
-		opacity: 0.5;
-		top: -7px;
-		left: 7px;
-		width: 44px;
-		height: 44px;
-	}
+	.delete,
 	.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;
-	}
-	.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/templates/users/part.grouplist.php b/settings/templates/users/part.grouplist.php
index 5dfd7836f6a..865cc811e38 100644
--- a/settings/templates/users/part.grouplist.php
+++ b/settings/templates/users/part.grouplist.php
@@ -31,9 +31,11 @@
 	<?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 +43,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 +56,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>
+				 	<?php if($_['isAdmin']): ?>
+				 		<li class="app-navigation-entry-utils-menu-button delete">
+							<button class="icon-delete"></button>
+						</li>
+					<?php endif; ?>
+					<li class="app-navigation-entry-utils-counter"><?php if($group['usercount'] > 0) { p($group['usercount']); } ?></li>
+				</ul>
+			</div>
 		</li>
 	<?php endforeach; ?>
 </ul>