add icons to personal settings navigation

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

settings/css/settings.css

@@ -7,6 +7,29 @@ input#openid, input#webdav { width:20em; }
 
 /* PERSONAL */
 
+/* icons for sidebar */
+.nav-icon-personal-settings {
+	background-image: url('../img/personal.svg?v=1');
+}
+.nav-icon-sessions {
+	background-image: url('../img/toggle-filelist.svg?v=1');
+}
+.nav-icon-apppasswords {
+	background-image: url('../img/password.svg?v=1');
+}
+.nav-icon-clientsbox {
+	background-image: url('../img/change.svg?v=1');
+}
+.nav-icon-activity {
+	background-image: url('../img/activity-dark.svg?v=1');
+}
+.nav-icon-federated-cloud {
+	background-image: url('../img/share.svg?v=1');
+}
+.nav-icon-second-factor-backup-codes {
+	background-image: url('../img/password.svg?v=1');
+}
+
 #avatarform {
 	width: 160px;
 	padding-right: 0;

settings/img/activity-dark.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.0">
+ <path d="m16 1-10 18h11l-1 12 10-18h-11z"/>
+</svg>

settings/img/change.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1">
+ <path d="m7.9375 0c-3.1175 0.023214-6.0756 1.876-7.3438 4.9375l2.7812 1.1563c1.0568-2.5513 3.98-3.7756 6.5312-2.7188 0.8628 0.3573 1.5738 0.9274 2.0938 1.625l-2 2h6v-6l-1.875 1.875c-0.802-0.9616-1.825-1.7688-3.063-2.2812-1.02-0.4227-2.0853-0.60149-3.1245-0.59375z"/>
+ <path d="m0 9.5v6l2.0938-2.094c0.7676 0.843 1.7205 1.535 2.8437 2 4.082 1.691 8.7775-0.262 10.468-4.344l-2.781-1.1558c-1.057 2.5508-3.98 3.7758-6.5312 2.7188-0.7435-0.308-1.3509-0.805-1.8438-1.375l1.75-1.75h-6z"/>
+</svg>

settings/img/password.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 71 100"><path d="M35.5 6.25c-13.807 0-25 11.193-25 25v12.5H4.25V87.5h62.5V43.75H60.5v-12.5c0-13.807-11.194-25-25-25zm0 12.5c6.904 0 12.5 5.596 12.5 12.5v12.5H23v-12.5c0-6.904 5.596-12.5 12.5-12.5z"/></svg>

settings/img/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M12.228 1a2.457 2.457 0 0 0-2.46 2.454c0 .075.01.15.016.224L5.05 6.092a2.445 2.445 0 0 0-1.596-.586A2.453 2.453 0 0 0 1 7.96a2.453 2.453 0 0 0 2.454 2.455 2.45 2.45 0 0 0 1.46-.477l4.865 2.474c-.004.044-.01.09-.01.134a2.457 2.457 0 1 0 .804-1.818l-4.696-2.4c.02-.123.035-.25.035-.378 0-.072-.01-.144-.015-.214l4.74-2.414A2.457 2.457 0 1 0 12.228.99z"/></svg>

settings/img/toggle-filelist.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><rect rx=".5" ry=".5" height="4" width="4" y="1" x="1"/><rect rx=".5" ry=".5" height="1" width="9" y="2" x="6"/><rect rx=".5" ry=".5" height="4" width="4" y="6" x="1"/><rect rx=".5" ry=".5" height="1" width="9" y="7" x="6"/><rect rx=".5" ry=".5" height="4" width="4" y="11" x="1"/><rect rx=".5" ry=".5" height="1" width="9" y="12" x="6"/></svg>

settings/templates/personal.php

@@ -9,12 +9,14 @@
 ?>
 
 <div id="app-navigation">
-	<ul>
+	<ul class="with-icon">
 	<?php foreach($_['forms'] as $form) {
 		if (isset($form['anchor'])) {
 			$anchor = '#' . $form['anchor'];
+			$class = 'nav-icon-' . $form['anchor'];
 			$sectionName = $form['section-name'];
-			print_unescaped(sprintf("<li><a href='%s'>%s</a></li>", \OCP\Util::sanitizeHTML($anchor), \OCP\Util::sanitizeHTML($sectionName)));
+			print_unescaped(sprintf("<li><a href='%s' class='%s'>%s</a></li>", \OCP\Util::sanitizeHTML($anchor),
+			\OCP\Util::sanitizeHTML($class), \OCP\Util::sanitizeHTML($sectionName)));
 		}
 	}?>
 	</ul>