Merge pull request #3150 from nextcloud/highlight-active-navigation

highlight active navigation entry better, fix #2096

3 files changed, 8 insertions, 1 deletions

diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php
index 73e3ed3a4b4..9145717c4a0 100644
--- a/apps/theming/lib/Controller/ThemingController.php
+++ b/apps/theming/lib/Controller/ThemingController.php
@@ -374,6 +374,7 @@ class ThemingController extends Controller {
 				';
 			$responseCss .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
 			$responseCss .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
+			$responseCss .= sprintf('#app-navigation li:hover > a, #app-navigation li:focus > a, #app-navigation a:focus, #app-navigation .selected, #app-navigation .selected a, #app-navigation .active, #app-navigation .active a {box-shadow: inset 2px 0 %s}' . "\n", $color);
 
 		}
 		$logo = $this->config->getAppValue($this->appName, 'logoMime');
diff --git a/apps/theming/tests/Controller/ThemingControllerTest.php b/apps/theming/tests/Controller/ThemingControllerTest.php
index d42e5afb245..c19d609d909 100644
--- a/apps/theming/tests/Controller/ThemingControllerTest.php
+++ b/apps/theming/tests/Controller/ThemingControllerTest.php
@@ -487,6 +487,7 @@ class ThemingControllerTest extends TestCase {
 				';
 		$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
 		$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
+		$expectedData .= sprintf('#app-navigation li:hover > a, #app-navigation li:focus > a, #app-navigation a:focus, #app-navigation .selected, #app-navigation .selected a, #app-navigation .active, #app-navigation .active a {box-shadow: inset 2px 0 %s}' . "\n", $color);
 		$expectedData .= '.nc-theming-contrast {color: #ffffff}' . "\n";
 		$expectedData .= '.icon-file,.icon-filetype-text {' .
 			'background-image: url(\'./img/core/filetypes/text.svg?v=0\');' . "}\n" .
@@ -581,6 +582,7 @@ class ThemingControllerTest extends TestCase {
 				';
 		$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
 		$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
+		$expectedData .= sprintf('#app-navigation li:hover > a, #app-navigation li:focus > a, #app-navigation a:focus, #app-navigation .selected, #app-navigation .selected a, #app-navigation .active, #app-navigation .active a {box-shadow: inset 2px 0 %s}' . "\n", $color);
 		$expectedData .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n";
 		$expectedData .= '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . "\n";
 		$expectedData .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n";
@@ -768,6 +770,7 @@ class ThemingControllerTest extends TestCase {
 				';
 		$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
 		$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
+		$expectedData .= sprintf('#app-navigation li:hover > a, #app-navigation li:focus > a, #app-navigation a:focus, #app-navigation .selected, #app-navigation .selected a, #app-navigation .active, #app-navigation .active a {box-shadow: inset 2px 0 %s}' . "\n", $color);
 		$expectedData .= sprintf(
 			'#header .logo {' .
 			'background-image: url(\'./logo?v=0\');' .
@@ -879,6 +882,7 @@ class ThemingControllerTest extends TestCase {
 				';
 		$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
 		$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
+		$expectedData .= sprintf('#app-navigation li:hover > a, #app-navigation li:focus > a, #app-navigation a:focus, #app-navigation .selected, #app-navigation .selected a, #app-navigation .active, #app-navigation .active a {box-shadow: inset 2px 0 %s}' . "\n", $color);
 		$expectedData .= sprintf(
 			'#header .logo {' .
 			'background-image: url(\'./logo?v=0\');' .
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 88fd223ba64..93e60fbfbf1 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -1,4 +1,5 @@
 /**
+ * @copyright Copyright (c) 2014, Jan-Christoph Borchardt (http://jancborchardt.net)
  * @copyright Copyright (c) 2017, John Molakvoæ (skjnldsv@protonmail.com)
  *
  * @license GNU AGPL version 3 or any later version
@@ -101,6 +102,7 @@ em {
 	.active,
 	.active a {
 		opacity: 1;
+		box-shadow: inset 2px 0 #0082c9;
 	}
 	.collapse {
 		display: none;
@@ -284,7 +286,7 @@ em {
 	.app-navigation-entry-utils ul, .app-navigation-entry-menu ul {
 		list-style-type: none;
 	}
-	
+
 	/* editing an entry */
 	.app-navigation-entry-edit {
 		padding-left: 5px;