tree hover

src/main/webapp/css/app.css

@@ -70,10 +70,6 @@
 	white-space: nowrap;
 }
 
-.css-treeview .indent {
-	margin-left: 22px;
-}
-
 .css-treeview ul {
 	list-style: none;
 	margin-left: 0px;
@@ -127,6 +123,35 @@
 	text-overflow: ellipsis;
 }
 
+.css-treeview a:hover {
+	text-decoration: none;
+}
+
+.css-treeview li .tree-item:hover {
+	background-color: #EBEBEB;
+	text-decoration: none;
+}
+
+.css-treeview .indent1 {
+	padding-left: 22px;
+}
+
+.css-treeview .indent2 {
+	padding-left: 44px;
+}
+
+.css-treeview .indent3 {
+	padding-left: 66px;
+}
+
+.css-treeview .indent4 {
+	padding-left: 88px;
+}
+
+.css-treeview .indent5 {
+	padding-left: 110px;
+}
+
 /* entry list*/
 .entrylist-header {
 	border-bottom: 1px solid #eee;

src/main/webapp/js/directives.js

@@ -93,6 +93,7 @@ module.directive('category', [ function() {
 	return {
 		scope : {
 			node : '=',
+			level: '=',
 			selectedType : '=',
 			selectedId : '=',
 			showLabel : '=',
@@ -112,6 +113,12 @@ module.directive('category', [ function() {
 				function($scope, $state, $dialog, FeedService, CategoryService,
 						SettingsService) {
 					$scope.settingsService = SettingsService;
+					
+					$scope.getClass = function(level) {
+						if ($scope.showLabel){
+							return 'indent' + level;
+						}
+					};
 
 					$scope.formatCategoryName = function(category) {
 						var count = $scope.unreadCount({

src/main/webapp/templates/_category.html

@@ -1,5 +1,5 @@
 <li>
-	<div ng-mouseenter="hovered=node" ng-mouseleave="hovered=null" class="pointer" ui-if="showLabel">
+	<div ng-mouseenter="hovered=node" ng-mouseleave="hovered=null" class="pointer tree-item" ui-if="showLabel" ng-class="getClass(level - 1)">
 		<div class="dropdown pull-right">
 			<div class="pull-right" ng-click="showCategoryDetails(node)">
 				<i ng-class="{'icon-wrench': hovered==node}" class="icon"></i>
@@ -14,22 +14,21 @@
 			</span>
 		</span>
 	</div>
-	<ul ng-show="node.expanded && showChildren" ng-class="{indent: showLabel}">
+	<ul ng-show="node.expanded && showChildren">
 		<recursive>
 			<category ng-repeat="child in node.children" ng-show="settingsService.settings.showRead == true || unreadCount({category:node}) > 0"
-				node="child" selected-type="selectedType"
+				node="child" level="level + 1" selected-type="selectedType"
 				selected-id="selectedId" show-label="true" show-children="true"
 				unread-count="unreadCount({category:category})"> 
 			</category> 
 		</recursive>
-		<li ng-repeat="feed in node.feeds" ng-mouseenter="hovered=feed"
-			ng-mouseleave="hovered=null" ng-show="settingsService.settings.showRead == true || feed.unread > 0"
-			ng-class="{error: feed.message && feed.errorCount > 10}">
+		<li ng-repeat="feed in node.feeds" ng-mouseenter="hovered=feed" ng-class="getClass(level)" class="tree-item"
+			ng-mouseleave="hovered=null" ng-show="settingsService.settings.showRead == true || feed.unread > 0">
 			<div class="pull-right" ng-click="showFeedDetails(feed)">
 				<i ng-class="{'icon-wrench': hovered==feed}" class="icon pointer"></i>
 			</div>
 			<a ng-click="feedClicked(feed.id)" class="feed-link"
-				ng-class="{selected: (feed.id == selectedId && selectedType == 'feed'), unread: feed.unread }">
+				ng-class="{error: feed.message && feed.errorCount > 10, selected: (feed.id == selectedId && selectedType == 'feed'), unread: feed.unread }">
 				<favicon url="feed.feedLink" />
 				{{formatFeedName(feed)}}
 			</a>

src/main/webapp/templates/_tree.html

@@ -1,13 +1,13 @@
 <div class="css-treeview" ng-controller="CategoryTreeCtrl">
 	<ul>
 		<category node="CategoryService.subscriptions" show-label="true" show-children="false"
-			selected-type="selectedType" selected-id="selectedId"
+			level="0" selected-type="selectedType" selected-id="selectedId"
 			unread-count="unreadCount(category)"> </category>
 		<category node="starred" show-label="true" show-children="false"
-			selected-type="selectedType" selected-id="selectedId"
+			level="0" selected-type="selectedType" selected-id="selectedId"
 			unread-count="unreadCount(category)"> </category>
 		<category node="CategoryService.subscriptions" show-label="false" show-children="true"
-			selected-type="selectedType" selected-id="selectedId"
+			level="0" selected-type="selectedType" selected-id="selectedId"
 			unread-count="unreadCount(category)"> </category>
 	</ul>
 </div>