Added icons to users list and improved design

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

2 files changed, 19 insertions, 1 deletions

diff --git a/settings/src/components/appNavigation/navigationItem.vue b/settings/src/components/appNavigation/navigationItem.vue
index becbb5ded12..b64a7664a2e 100644
--- a/settings/src/components/appNavigation/navigationItem.vue
+++ b/settings/src/components/appNavigation/navigationItem.vue
@@ -20,7 +20,12 @@
   -
   -->
 <template>
-	<nav-element :id="item.id" v-bind="navElement(item)"
+
+	<!-- Is this a caption ? -->
+	<li class="app-navigation-caption" v-if="item.caption">{{item.text}}</li>
+
+	<!-- Navigation item -->
+	<nav-element v-else :id="item.id" v-bind="navElement(item)"
 				 :class="[{'icon-loading-small': item.loading, 'open': item.opened, 'collapsible': item.collapsible&&item.children&&item.children.length>0 }, item.classes]">
 
 		<!-- Bullet -->
diff --git a/settings/src/views/Users.vue b/settings/src/views/Users.vue
index 605d71730d7..12aa7c789f1 100644
--- a/settings/src/views/Users.vue
+++ b/settings/src/views/Users.vue
@@ -251,6 +251,8 @@ export default {
 			let groups = this.$store.getters.getGroups;
 			groups = Array.isArray(groups) ? groups : [];
 
+			console.log(groups);
+
 			// Map groups
 			groups = groups.map(group => {
 				let item = {};
@@ -290,18 +292,29 @@ export default {
 			let disabledGroup = groups[disabledGroupIndex];
 			if (adminGroup && adminGroup.text) {
 				adminGroup.text = t('settings', 'Admins'); // rename admin group
+				adminGroup.icon = 'icon-user-admin'; // set icon
 			}
 			if (disabledGroup && disabledGroup.text) {
 				disabledGroup.text = t('settings', 'Disabled users'); // rename disabled group
+				disabledGroup.icon = 'icon-disabled-users'; // set icon
 				if (disabledGroup.utils.counter === 0) {
 					groups.splice(disabledGroupIndex, 1); // remove disabled if empty
 				}
 			}
 
+			// Add separator
+			let separator = {
+				caption: true,
+				text: t('settings', 'Groups')
+			};
+			groups.unshift(separator);
+
+
 			// Add everyone group
 			let everyoneGroup = {
 				id: 'everyone',
 				key: 'everyone',
+				icon: 'icon-contacts-dark',
 				router: {name:'users'},
 				text: t('settings', 'Everyone'),
 			};