Updated Navigationbar to latest styleguide

Signed-off-by: Felix Nüsse <Felix.nuesse@t-online.de>

js/app/controllers/menu.js

@@ -77,8 +77,38 @@
 					$rootScope.$broadcast('selected_tags_updated', $scope.selectedTags);
 				}, true);
 
+                $scope.tagSelected = function (tag) {
+                    for (var i = 0; i < $scope.selectedTags.length; i++) {
+                        if($scope.selectedTags[i].text === tag.text){
+                            return true;
+                        }
+                    }
+                    return false;
+				};
+
+                $scope.removeTagFromSelected = function (tag) {
+                	var where =-1;
+                    for (var i = 0; i < $scope.selectedTags.length; i++) {
+                        if($scope.selectedTags[i].text === tag.text){
+                            where=i;
+                        }
+                    }
+                    if(where === -1){
+                        console.log("Cant remove selected Tag, Tag not present!");
+					}else{
+
+					}
+                    $scope.selectedTags.splice(where, 1);
+                };
+
 				$scope.tagClicked = function (tag) {
-					$scope.selectedTags.push(tag);
+					//check if tag already selected
+                    if(!$scope.tagSelected(tag)){
+                        $scope.selectedTags.push(tag);
+                    }else{
+                        //console.log("Already selected Tag!");
+                        $scope.removeTagFromSelected(tag);
+                    }
 				};
 
 				$rootScope.$on('credentials_loaded', function () {
@@ -91,10 +121,14 @@
 					if ($scope.selectedTags.length === 0) {
 						return TagService.getTags();
 					} else {
-						return $scope.filtered_tags;
+                        return TagService.getTags();
+                        //Always show all tags
+						//return $scope.filtered_tags;
 					}
 				}, function (tags) {
-					$scope.available_tags = tags;
+                    //Always show all tags
+					//$scope.available_tags = tags;
+					$scope.available_tags = TagService.getTags();
 				}, true);
 
 				$scope.toggleDeleteTime = function () {

sass/admin.scss

@@ -12,13 +12,4 @@
   #requests-table{
     width: 100%;
   }
-
-
-  .link{
-    color: rgb(0, 102, 255) !important;
-    cursor: pointer;
-  }
-  .link:hover{
-    text-decoration: underline;
-  }
 }

sass/app.scss

@@ -33,7 +33,6 @@
 @import 'settings';
 
 #app-settings-content:not(.ng-hide) {
-  height: 90px;
   display: inherit !important;
   padding: 0;
   transition: height 0.15s ease-out;

sass/menu.scss

@@ -23,41 +23,51 @@
 .settings-container {
   div {
     padding-left: 15px;
-
+  }
+  button {
+    width: 80%;
+    margin-left: 15px;
+    margin-right: 15px;
   }
 }
 
 #app-navigation > ul{
-  padding-bottom: 80px;
   > li > a{
-    padding-left: 12px !important;
     z-index: auto;
   }
 }
 
 .nav-trashbin {
-  position: fixed !important;
+  //position: fixed !important;
-  bottom: 44px;
+  //bottom: 44px;
   width: inherit !important;
 
   border-right: 1px solid #eee;
   a {
     &.active{
-      border-left: 3px solid #0082c9;
+      #border-left: 3px solid #0082c9;
     }
     background-color: #fff !important;
     opacity: 1 !important;
     z-index: 140;
-    padding: 0 20px;
+    //padding: 0 20px;
     .fa {
       margin-right: 15px;
     }
   }
 }
 
+//to remove old entry
+#taginput{
+  visibility: hidden;
+  display: none;
+}
+
 #app-navigation {
   li{
     a.taginput{
+      visibility: hidden;
+      display: none;
       opacity: 1;
     }
     a{

sass/partials/button.scss

@@ -36,11 +36,4 @@
 .button-red:hover{
   background: lighten(#ce3702, 2%);
   color: #fff;
-}
-.link{
-  color: rgb(0, 102, 255) !important;
-  cursor: pointer;
-}
-.link:hover{
-  text-decoration: underline;
 }

templates/main.php

@@ -125,7 +125,7 @@ style('passman', 'app');
 	</div>
 
 	<div id="app-navigation" ng-show="selectedVault" ng-controller="MenuCtrl">
-		<ul>
+		<ul class="with-icon">
 			<li class="taginput">
 				<a class="taginput">
 					<tags-input ng-model="selectedTags" replace-spaces-with-dashes="false">
@@ -134,16 +134,20 @@ style('passman', 'app');
 				</a>
 			</li>
 
-			<li ng-repeat="tag in available_tags | orderBy:'text'" ng-if="selectedTags.indexOf(tag) == -1">
+
-				<a  class="nav-icon-systemtagsfilter svg" ng-click="tagClicked(tag)">{{tag.text}}</a>
+
+			<li ng-repeat="tag in available_tags | orderBy:'text'" ng-class="{'active': tagSelected(tag)}">
+				<a  class="icon-tag svg" ng-click="tagClicked(tag)" ng-class="{'icon-toggle': tagSelected(tag)}">{{tag.text}}</a>
 			</li>
-			<li data-id="trashbin" class="nav-trashbin">
+			<li data-id="trashbin" class="nav-trashbin pinned first-pinned">
-				<a ng-click="toggleDeleteTime()"
+				<a href="#" ng-click="toggleDeleteTime()" ng-class="{'active': delete_time > 0}" class="icon-delete svg">
-				   ng-class="{'active': delete_time > 0}">
-					<i href="#" class="fa fa-trash"></i>
 					{{ 'deleted.credentials' | translate }}
 				</a>
+
 			</li>
+
+
+
 		</ul>
 
 		<div id="app-settings" ng-init="settingsShown = false;">
@@ -154,15 +158,21 @@ style('passman', 'app');
 				</button>
 			</div>
 			<div id="app-settings-content" ng-show="settingsShown">
-				<!-- Your settings in here -->
+
 				<div class="settings-container">
-					<div><a class="link" ng-href="#/vault/{{active_vault.guid}}/settings">{{ 'settings' | translate }}</a></div>
+					<button ng-href="#/vault/{{active_vault.guid}}/settings"><a class="link" >{{ 'settings' | translate }}</a></button>
-					<div><span class="link" ng-click="logout()">{{'logout' | translate }}</span></div>
-					<div><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6YS8F97PETVU2" target="_blank" class="link">{{ 'donate' | translate }}</a></div>
-					<div ng-show="session_time_left">
-						<small>{{'session.time.left' | translate:translationData}}</small>
-					</div>
 				</div>
+                <div class="settings-container">
+                    <button ng-click="logout()"><span class="link" >{{'logout' | translate }}</span></button>
+                </div>
+                <div class="donation-container settings-container">
+                    <button class="donation-container"> <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6YS8F97PETVU2" target="_blank" class="link">{{ 'donate' | translate }}</a></button>
+                </div>
+                <div class="settings-container">
+                    <div ng-show="session_time_left">
+                        <small>{{'session.time.left' | translate:translationData}}</small>
+                    </div>
+                </div>
 			</div>
 		</div>
 	</div>