Merge pull request #3151 from nextcloud/navigation-icons

add icons to navigation of personal & admin settings

9 files changed, 75 insertions, 5 deletions

diff --git a/settings/Controller/AdminSettingsController.php b/settings/Controller/AdminSettingsController.php
index ef70caf5690..4bc986e708e 100644
--- a/settings/Controller/AdminSettingsController.php
+++ b/settings/Controller/AdminSettingsController.php
@@ -28,7 +28,9 @@ use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\INavigationManager;
 use OCP\IRequest;
+use OCP\Settings\IIconSection;
 use OCP\Settings\IManager as ISettingsManager;
+use OCP\Settings\ISection;
 use OCP\Template;
 
 /**
@@ -133,10 +135,16 @@ class AdminSettingsController extends Controller {
 		/** @var \OC\Settings\Section[] $prioritizedSections */
 		foreach($sections as $prioritizedSections) {
 			foreach ($prioritizedSections as $section) {
+				$icon = '';
+				if ($section instanceof IIconSection) {
+					$icon = $section->getIcon();
+				}
+
 				$templateParameters[] = [
 					'anchor'       => $section->getID(),
 					'section-name' => $section->getName(),
 					'active'       => $section->getID() === $currentSection,
+					'icon'         => $icon,
 				];
 			}
 		}
diff --git a/settings/css/settings.css b/settings/css/settings.css
index 72e740d9a01..aa5e8cd75b5 100644
--- a/settings/css/settings.css
+++ b/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;
@@ -713,6 +736,17 @@ table.grid td.date{
 }
 
 /* ADMIN */
+
+/* Navigation icons */
+#app-navigation img {
+	margin-bottom: -3px;
+	margin-right: 6px;
+	width: 16px;
+}
+#app-navigation li span.no-icon {
+	padding-left: 25px;
+}
+
 #security-warning li {
 	list-style: initial;
 	margin: 10px 0;
diff --git a/settings/img/activity-dark.svg b/settings/img/activity-dark.svg
new file mode 100644
index 00000000000..0fccc552285
--- /dev/null
+++ b/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>
diff --git a/settings/img/change.svg b/settings/img/change.svg
new file mode 100644
index 00000000000..cbc5d982b30
--- /dev/null
+++ b/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>
diff --git a/settings/img/password.svg b/settings/img/password.svg
new file mode 100644
index 00000000000..3d161917f6e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/settings/img/share.svg b/settings/img/share.svg
new file mode 100644
index 00000000000..68f2100e490
--- /dev/null
+++ b/settings/img/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 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>
\ No newline at end of file
diff --git a/settings/img/toggle-filelist.svg b/settings/img/toggle-filelist.svg
new file mode 100644
index 00000000000..47f019057ea
--- /dev/null
+++ b/settings/img/toggle-filelist.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 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>
\ No newline at end of file
diff --git a/settings/templates/admin/frame.php b/settings/templates/admin/frame.php
index 761d76c4434..2b234f4cd9b 100644
--- a/settings/templates/admin/frame.php
+++ b/settings/templates/admin/frame.php
@@ -30,14 +30,28 @@ script('files', 'jquery.fileupload');
 
 <div id="app-navigation">
 	<ul>
-		<?php foreach($_['forms'] as $form) {
+		<?php
+		foreach($_['forms'] as $form) {
 			if (isset($form['anchor'])) {
 				$anchor = \OC::$server->getURLGenerator()->linkToRoute('settings.AdminSettings.index', ['section' => $form['anchor']]);
+				$class = 'nav-icon-' . $form['anchor'];
 				$sectionName = $form['section-name'];
 				$active = $form['active'] ? ' class="active"' : '';
-				print_unescaped(sprintf("<li%s><a href='%s'>%s</a></li>", $active, \OCP\Util::sanitizeHTML($anchor), \OCP\Util::sanitizeHTML($sectionName)));
+		?>
+				<li <?php print_unescaped($form['active'] ? ' class="active"' : ''); ?>>
+					<a href="<?php p($anchor); ?>">
+						<?php if (!empty($form['icon'])) { ?>
+							<img alt="" src="<?php print_unescaped($form['icon']); ?>">
+							<span><?php p($form['section-name']); ?></span>
+						<?php } else { ?>
+							<span class="no-icon"><?php p($form['section-name']); ?></span>
+						<?php } ?>
+					</a>
+				</li>
+		<?php
 			}
-		}?>
+		}
+		?>
 	</ul>
 </div>
 
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index a14982b9b74..d3a835c4a16 100644
--- a/settings/templates/personal.php
+++ b/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>