visually show unreadcount using opacity, fix #57

7 files changed, 40 insertions, 4 deletions

diff --git a/css/feeds.css b/css/feeds.css
index 6a35b7f69..1f00a7f34 100644
--- a/css/feeds.css
+++ b/css/feeds.css
@@ -10,6 +10,8 @@
 	font-weight: bold;
 }
 
+
+
 #app-navigation .unread > a {
 	padding-right: 32px;
 }
@@ -63,6 +65,9 @@
 	display: block;
 }
 
+.starred .unread-counter {
+	font-weight: normal;
+}
 
 button.action {
 	opacity: .5;
diff --git a/js/app/controllers/feedcontroller.coffee b/js/app/controllers/feedcontroller.coffee
index 8f9f4e7b6..15f784a69 100644
--- a/js/app/controllers/feedcontroller.coffee
+++ b/js/app/controllers/feedcontroller.coffee
@@ -102,6 +102,19 @@ angular.module('News').factory '_FeedController',
 					@_$scope.addNewFolder = true
 
 
+			@_$scope.getOpacity = (number) =>
+				number = parseInt(number, 10)
+
+				# the higher the number, the lower the opacity
+				opacity = (number / 180)
+
+				if opacity < 0.3
+					opacity = 0.3
+				if opacity > 1
+					opacity = 1
+				return opacity
+
+
 			@_$scope.$on 'moveFeedToFolder', (scope, data) =>
 				@_feedBl.move(data.feedId, data.folderId)
 
diff --git a/js/public/app.js b/js/public/app.js
index 13dd1d7dc..4f44689c3 100644
--- a/js/public/app.js
+++ b/js/public/app.js
@@ -345,6 +345,19 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
               return _this._$scope.addNewFolder = true;
             }
           };
+          this._$scope.getOpacity = function(number) {
+            var opacity;
+
+            number = parseInt(number, 10);
+            opacity = number / 180;
+            if (opacity < 0.3) {
+              opacity = 0.3;
+            }
+            if (opacity > 1) {
+              opacity = 1;
+            }
+            return opacity;
+          };
           this._$scope.$on('moveFeedToFolder', function(scope, data) {
             return _this._feedBl.move(data.feedId, data.folderId);
           });
diff --git a/templates/part.feed.starred.php b/templates/part.feed.starred.php
index 110549150..e3c787b65 100644
--- a/templates/part.feed.starred.php
+++ b/templates/part.feed.starred.php
@@ -2,7 +2,8 @@
 		active: starredBl.isActive(0), 
 		unread: starredBl.getUnreadCount() > 0
 	}" 
-	ng-show="starredBl.isVisible(0)">
+	ng-show="starredBl.isVisible(0)"
+	class="starred">
 	<a class="starred-icon"
 		href="#"
 		ng-click="starredBl.load(0)">
diff --git a/templates/part.feed.unread.php b/templates/part.feed.unread.php
index 67c57e369..cf130228c 100644
--- a/templates/part.feed.unread.php
+++ b/templates/part.feed.unread.php
@@ -16,7 +16,8 @@
 	   <?php p($l->t('All articles'))?>
 	</a>
 	<span class="utils">
-		<span class="unread-counter">
+		<span class="unread-counter"
+			ng-style="{opacity: getOpacity(subscriptionsBl.getUnreadCount()) }">
 			{{ subscriptionsBl.getUnreadCount() }}
 		</span>
 		<button class="svg action mark-read-icon" 
diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php
index 7dc06ea59..824337972 100644
--- a/templates/part.listfeed.php
+++ b/templates/part.listfeed.php
@@ -28,7 +28,9 @@
 	
 	<span class="utils">
 
-		<span class="unread-counter" ng-show="feed.id">
+		<span class="unread-counter" 
+			ng-show="feed.id"
+			ng-style="{opacity: getOpacity(feedBl.getUnreadCount(feed.id)) }">
 			{{ feedBl.getUnreadCount(feed.id) }}
 		</span>
 
diff --git a/templates/part.listfolder.php b/templates/part.listfolder.php
index c4d7b0b8b..745210b0e 100644
--- a/templates/part.listfolder.php
+++ b/templates/part.listfolder.php
@@ -30,7 +30,8 @@
 				class="svg action delete-icon" 
 				title="<?php p($l->t('Delete folder')); ?>"></button>
 
-		<span class="unread-counter">
+		<span class="unread-counter"
+			ng-style="{ opacity: getOpacity(folderBl.getUnreadCount(folder.id)) }">
 			{{ folderBl.getUnreadCount(folder.id) }}
 		</span>