From ea51cd659c03c0ffd571e8868e8217c00c3ccd23 Mon Sep 17 00:00:00 2001
From: Matthew Setter <matthew@matthewsetter.com>
Date: Fri, 22 Dec 2017 13:22:39 +0100
Subject: [PATCH] Change the styling of the active settings navigation menu
 item

In the ownCloud UI, when a navigation menu is active, it's not always
obvious that it is. There is a subtle difference in how it's rendered,
but I don't feel that it's that clear, nor distinct. This commit updates
it so that it's that much clear to the user as to which element is
currently active.
---
 core/css/apps.css                   | 5 +++++
 settings/templates/settingsPage.php | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/core/css/apps.css b/core/css/apps.css
index 02537a7e0114..4e73cdb34e6e 100644
--- a/core/css/apps.css
+++ b/core/css/apps.css
@@ -83,6 +83,11 @@
 	opacity: 1;
 }
 
+#app-navigation .active {
+	background-color: rgba(240, 240, 240, .9);
+	font-weight: bold;
+}
+
 #app-navigation li.divider {
 	display: block;
 	width: 100%;
diff --git a/settings/templates/settingsPage.php b/settings/templates/settingsPage.php
index 8f5af78b96fe..57918a839d1c 100644
--- a/settings/templates/settingsPage.php
+++ b/settings/templates/settingsPage.php
@@ -20,9 +20,10 @@
 
 <div id="app-navigation">
 	<ul class="with-icon">
+		<!-- Personal Navigation Settings -->
 		<li class="divider"><?php p($l->t('Personal')); ?></li>
 		<?php foreach ($_['personalNav'] as $item): ?>
-		<li>
+		<li class="<?php $item['active'] ? p(' active ') : p('') ?>">
 			<?php if (\strpos($item['icon'], '/', 1) !== false): ?>
 				<a class="svg <?php $item['active'] ? p(' active ') : p('') ?>" style="background-image: url(<?php p($item['icon']) ?>)" href='<?php p($item['link']); ?>'><?php p($item['name']) ?></a>
 			<?php else: ?>
@@ -31,10 +32,11 @@
 		</li>
 		<?php endforeach; ?>
 
+		<!-- Admin Navigation Settings -->
 		<?php if (!empty($_['adminNav'])): ?>
 			<li class="divider"><?php p($l->t('Admin')); ?></li>
 			<?php foreach ($_['adminNav'] as $item): ?>
-				<li>
+				<li class="<?php $item['active'] ? p(' active ') : p('') ?>">
 					<?php if (\strpos($item['icon'], '/', 1) !== false): ?>
 						<a class="svg <?php $item['active'] ? p(' active ') : p('') ?>" style="background-image: url(<?php p($item['icon']) ?>)" href='<?php p($item['link']); ?>'><?php p($item['name']) ?></a>
 					<?php else: ?>