Added icons to users list and improved design

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

core/css/icons.scss

@@ -486,6 +486,18 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
 	background-image: url('../img/actions/arrow-left.svg?v=1');
 }
 
+.icon-disabled-user {
+	background-image: url('../img/actions/disabled-user.svg?v=1');
+}
+
+.icon-disabled-users {
+	background-image: url('../img/actions/disabled-users.svg?v=1');
+}
+
+.icon-user-admin {
+	background-image: url('../img/actions/user-admin.svg?v=1');
+}
+
 /* PLACES ------------------------------------------------------------------- */
 .icon-calendar {
 	background-image: url('../img/places/calendar.svg?v=1');

core/img/actions/disabled-user.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" version="1.1" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m8 1c-1.75 0-3 1.4308-3 2.8008 0 1.4 0.10078 2.4 0.80078 3.5 0.2 0.286 0.49922 0.34961 0.69922 0.59961 0.0039248 0.014536 0.0058968 0.028465 0.0097656 0.042969l4.4551-4.4551c-0.17471-1.4311-1.5009-2.4883-2.9648-2.4883zm1.541 8.4551-5.3223 5.3223c1.1728 0.19277 2.6019 0.22266 3.7812 0.22266 2.5 0 6.163-0.099219 6-1.6992-0.215-2-0.23-1.7108-1-2.3008-1.0575-0.62876-2.3392-1.1226-3.459-1.5449zm-5.6484 1.1055c-0.29809 0.14662-0.60757 0.2854-0.89258 0.43945-0.66764 0.47127-0.77292 0.43452-0.89062 1.3438l1.7832-1.7832z"/><rect transform="rotate(-45)" x="-8.9968" y="11.118" width="16.999" height="1.4166" style="paint-order:normal"/></svg>

core/img/actions/disabled-users.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" version="1.1" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m9 1c-1.746 0-3 1.4308-3 2.8008 0 1.4 0.10078 2.4 0.80078 3.5 0.066421 0.085991 0.13627 0.14858 0.20703 0.20508l4.7617-4.7617c-0.46305-1.0371-1.5733-1.7441-2.7695-1.7441zm-4.9805 4c-0.87 0-1.5 0.72039-1.5 1.4004h-0.019531c0 0.7 0.050391 1.2 0.40039 1.75 0.1 0.15 0.24161 0.17383 0.34961 0.29883 0.0674 0.25 0.12178 0.5 0.050781 0.75-0.64 0.223-1.2448 0.50078-1.8008 0.80078-0.42 0.3-0.233 0.18239-0.5 1.1504-0.097631 0.39367 0.76198 0.61493 1.6309 0.73242l2.5137-2.5137c-0.14238-0.05672-0.28961-0.11729-0.42383-0.16992-0.07-0.28-0.021172-0.487 0.048828-0.75 0.12-0.125 0.23133-0.17883 0.36133-0.29883 0.37-0.45 0.38867-1.21 0.38867-1.75 0-0.8-0.72-1.4004-1.5-1.4004zm6.3359 3.5801-5.8516 5.8516c1.4351 0.4011 3.5062 0.56836 4.4961 0.56836 2.43 0 6.3135-0.45522 5.9805-1.6992-0.52-1.94-0.20847-1.7108-0.98047-2.3008-1.09-0.654-2.4516-1.1666-3.5996-1.5996-0.08115-0.30134-0.079548-0.56194-0.044922-0.82031z"/><rect transform="rotate(-45)" x="-8.9557" y="11.077" width="18" height="1.5" style="paint-order:normal"/></svg>

core/img/actions/user-admin.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m6.9395 0.5c-0.24 0-0.43945 0.19945-0.43945 0.43945v1.2598c-0.5 0.14-1.0493 0.35039-1.5293 0.65039l-0.91016-0.91016c-0.16-0.18-0.46109-0.19-0.62109 0l-1.5 1.5c-0.18 0.17-0.18 0.46109 0 0.62109l0.91016 0.91016c-0.284 0.48-0.50039 0.9993-0.65039 1.5293h-1.2598c-0.24 0-0.43945 0.19945-0.43945 0.43945v2.1211c0 0.25 0.18945 0.43945 0.43945 0.43945h1.2598c0.14 0.54 0.36039 1.0493 0.65039 1.5293l-0.91016 0.91016c-0.18 0.17-0.18 0.45109 0 0.62109l1.5 1.5c0.18 0.18 0.46109 0.18 0.62109 0l0.91016-0.91016c0.48 0.285 0.9993 0.50039 1.5293 0.65039v1.2598c0 0.25 0.19945 0.43945 0.43945 0.43945h2.1211c0.24 0 0.44945-0.19945 0.43945-0.43945v-1.2598c0.54-0.14 1.0493-0.36039 1.5293-0.65039l0.91016 0.91016c0.17 0.18 0.45109 0.18 0.62109 0l1.5-1.5c0.18-0.17 0.18-0.45109 0-0.62109l-0.91016-0.91016c0.29-0.48 0.50039-0.9993 0.65039-1.5293h1.2598c0.24 0 0.44945-0.19945 0.43945-0.43945v-2.1211c0-0.24-0.19945-0.43945-0.43945-0.43945h-1.2598c-0.14-0.54-0.36039-1.0493-0.65039-1.5293l0.91016-0.91016c0.18-0.17 0.18-0.45109 0-0.62109l-1.5-1.5c-0.17-0.18-0.45109-0.18-0.62109 0l-0.91016 0.91016c-0.48-0.29-0.9993-0.50039-1.5293-0.65039v-1.2598c0-0.24-0.19945-0.43945-0.43945-0.43945h-2.1211zm1.0605 2.9922a4.5085 4.5085 0 0 1 4.5078 4.5078 4.5085 4.5085 0 0 1-1.082 2.9277c-0.073996-0.24227-0.18207-0.29128-0.45703-0.50195-0.65293-0.38819-1.456-0.69415-2.1387-0.95117-0.08904-0.3324-0.022553-0.5778 0.060547-0.89062 0.13949-0.14839 0.2973-0.2148 0.41602-0.35547 0.40956-0.52531 0.47461-1.44 0.47461-2.0781 0-0.94378-0.84935-1.6621-1.7812-1.6621-1.0387 0-1.7812 0.84892-1.7812 1.6621 0 0.831 0.059109 1.4252 0.47461 2.0781 0.11871 0.16976 0.2973 0.20708 0.41602 0.35547 0.08013 0.29679 0.14365 0.58196 0.060547 0.89062-0.7568 0.26711-1.4798 0.59503-2.1387 0.95117-0.29555 0.20862-0.39945 0.26205-0.46484 0.48633a4.5085 4.5085 0 0 1-1.0742-2.9121 4.5085 4.5085 0 0 1 4.5078-4.5078z"/></svg>

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 -->

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'),
 			};