From 7ca36978a6f7d16ac8bcda99d9818aa67e8697b1 Mon Sep 17 00:00:00 2001
From: fnuesse <felix.nuesse@t-online.de>
Date: Sun, 4 Nov 2018 11:25:12 +0100
Subject: [PATCH] indicating which navbaritem is selected in current listview

Signed-off-by: fnuesse <felix.nuesse@t-online.de>
---
 js/app/controllers/menu.js |  2 ++
 sass/menu.scss             | 15 ++++++++++++---
 templates/main.php         | 10 +++++-----
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/js/app/controllers/menu.js b/js/app/controllers/menu.js
index 4785007e..dc5d49f3 100644
--- a/js/app/controllers/menu.js
+++ b/js/app/controllers/menu.js
@@ -110,7 +110,9 @@
                     }
 				};
 
+				$scope.clickedNavigationItem='all';
                 $scope.filterCredentialBySpecial = function (string) {
+                    $scope.clickedNavigationItem=string;
                 	if(string !== 'nav_trashbin'){
                         $scope.delete_time=0;
                         $rootScope.$broadcast('set_delete_time', $scope.delete_time);
diff --git a/sass/menu.scss b/sass/menu.scss
index fa03c6e2..75a75ece 100644
--- a/sass/menu.scss
+++ b/sass/menu.scss
@@ -68,12 +68,22 @@
 }
 
 //Overrides transparent entry bullet on hover from server
-#app-navigation .collapsible:hover .app-navigation-entry-bullet{
-  background: var(--color-primary) !important;
+#app-navigation{
+  .collapsible:hover .app-navigation-entry-bullet{
+    background: var(--color-primary) !important;
+  }
 }
 
+
 #app-navigation {
 
+  a{
+    .selected{
+      opacity: 1!important;
+      box-shadow: inset 4px 0 var(--color-primary)!important;
+    }
+  }
+
   li{
     .app-navigation-entry-bullet-color {
       background-color: var(--color-primary);
@@ -91,7 +101,6 @@
       background-color: #4db728;
     }
 
-
     .highlight-selected{
         background-color: var(--color-primary);
     }
diff --git a/templates/main.php b/templates/main.php
index f24869b5..f39551b9 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -134,7 +134,7 @@ style('passman', 'app');
                 </a>
             </li>-->
             <li>
-                <a class="icon-toggle svg" ng-click="filterCredentialBySpecial('all')">{{ 'Show All' | translate }}</a>
+                <a ng-class="{selected: clickedNavigationItem=='all'}" class="icon-toggle svg" ng-click="filterCredentialBySpecial('all')">{{ 'Show All' | translate }}</a>
             </li>
 
             <li class="collapsible" ng-class="tagCollapsibleState()">
@@ -151,21 +151,21 @@ style('passman', 'app');
 
             <li>
                 <div class="app-navigation-entry-bullet bullet-color-red"></div>
-                <a ng-click="filterCredentialBySpecial('strength_low')">{{ 'Bad Strength' | translate }}</a>
+                <a ng-class="{selected: clickedNavigationItem=='strength_low'}" ng-click="filterCredentialBySpecial('strength_low')">{{ 'Bad Strength' | translate }}</a>
             </li>
 
             <li>
                 <div class="app-navigation-entry-bullet bullet-color-yellow"></div>
-                <a ng-click="filterCredentialBySpecial('strength_medium')">{{ 'Medium Strength' | translate }}</a>
+                <a ng-class="{selected: clickedNavigationItem=='strength_medium'}" ng-click="filterCredentialBySpecial('strength_medium')">{{ 'Medium Strength' | translate }}</a>
             </li>
 
             <li>
                 <div class="app-navigation-entry-bullet bullet-color-green"></div>
-                <a ng-click="filterCredentialBySpecial('strength_good')">{{ 'Good Strength' | translate }}</a>
+                <a ng-class="{selected: clickedNavigationItem=='strength_good'}" ng-click="filterCredentialBySpecial('strength_good')">{{ 'Good Strength' | translate }}</a>
             </li>
 
             <li>
-                <a class="icon-expired svg" ng-click="filterCredentialBySpecial('expired')">{{ 'Expired' | translate
+                <a ng-class="{selected: clickedNavigationItem=='expired'}" class="icon-expired svg" ng-click="filterCredentialBySpecial('expired')">{{ 'Expired' | translate
                     }}</a>
             </li>