Further improvements in tag handling and rendering

frontend/delta/js/Clipperz/PM/DataModel/User.js

@@ -518,10 +518,9 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.User, Object, {
 			MochiKit.Iter.groupby,
 			function (someGroups) {
 				return  MochiKit.Iter.reduce(function(aCollector, aGroup) {
-					if (aGroup[0] != Clipperz.PM.DataModel.Record.archivedTag) {
 					var currentValue = aCollector[aGroup[0]] ? aCollector[aGroup[0]] : 0;
 					aCollector[aGroup[0]] = MochiKit.Iter.list(aGroup[1]).length + currentValue;
-					}
+
 					return aCollector;
 				}, someGroups, {});
 			}

frontend/delta/js/Clipperz/PM/UI/Components/Cards/View.js

@@ -129,7 +129,12 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
 	//............................................................................
 
 	renderCard: function () {
-		return	React.DOM.div({'className':'view'},[
+		var	classes = {
+			'view':		true,
+			'archived':	this.props['_isArchived']
+		}
+	
+		return	React.DOM.div({'className':React.addons.classSet(classes)},[
 			Clipperz.PM.UI.Components.Cards.Toolbar(this.props),
 			React.DOM.div({'className':'content'}, [
 				this.renderLabel(this.props['label']),

frontend/delta/js/Clipperz/PM/UI/Components/Selections.js

@@ -47,9 +47,12 @@ Clipperz.PM.UI.Components.Selections = React.createClass({
 	render: function () {
 		var	tagInfo;
 		var	tags;
+		var	archivedCardsCount;
 
 		tagInfo = this.props['tags'] ? this.props['tags'] : {};
-		tags = MochiKit.Base.keys(tagInfo).sort(Clipperz.Base.caseInsensitiveCompare);
+		tags = MochiKit.Base.filter(function (aTag) { return aTag != Clipperz.PM.DataModel.Record.archivedTag}, MochiKit.Base.keys(tagInfo)).sort(Clipperz.Base.caseInsensitiveCompare);
+		
+		archivedCardsCount = tagInfo[Clipperz.PM.DataModel.Record.archivedTag] ? tagInfo[Clipperz.PM.DataModel.Record.archivedTag] : 0;
 
 		return	React.DOM.div({'key':'selections', 'id':'selections'}, [
 			React.DOM.ul({'className':'defaultSet'}, [
@@ -65,7 +68,8 @@ Clipperz.PM.UI.Components.Selections = React.createClass({
 			React.DOM.ul({'className':'tagList'}, MochiKit.Base.map(function (aTag) {return Clipperz.PM.UI.Components.TagIndexItem({'label':aTag, 'count':tagInfo[aTag]}); }, tags)),
 			React.DOM.div({'className':'showArchivedCards'}, [
 				React.DOM.input({'type':'checkbox', 'onChange':this.handleCheckboxChanges}),
-				React.DOM.h5({}, "Show archived cards")
+				React.DOM.span({'className':'label'}, "Show archived cards"),
+				archivedCardsCount > 0 ? React.DOM.span({'className':'count'}, archivedCardsCount) : null
 			]),
 		]);
 	}

frontend/delta/js/Clipperz/PM/UI/MainController.js

@@ -426,6 +426,8 @@ console.log("SET USER", aUser);
 		deferredResult = new Clipperz.Async.Deferred('MainController.collectRecordInfo', {trace:false});
 		deferredResult.addMethod(aRecord, 'reference');
 		deferredResult.setValue('_reference');
+		deferredResult.addMethod(aRecord, 'isArchived');
+		deferredResult.setValue('_isArchived');
 		deferredResult.addMethod(aRecord, 'label');
 		deferredResult.setValue('label');
 		deferredResult.addMethod(aRecord, 'notes');

frontend/delta/scss/core/layout.scss

@@ -43,11 +43,6 @@
 			
 			span.tagCount {
 //				@include flex(none);
-				background-color: gray;
-				font-size: 10pt;
-				margin-left: 10px;
-				padding: 0px 4px;
-				@include border-radius(4px);
 			}
 		}
 	}

frontend/delta/scss/style/card.scss

@@ -99,6 +99,10 @@ $cardViewBasePadding: 10px;
 
 	.view {
 		
+		&.archived {
+			background-color: pink;
+		}
+		
 		.cardDetailToolbar {
 			
 			ul {

frontend/delta/scss/style/selectionPanel.scss

@@ -46,6 +46,17 @@
 			&:before {
 				content: "tag";
 			}
+
+			span.tagLabel {
+			}
+		
+			span.tagCount {
+				background-color: gray;
+				font-size: 10pt;
+				margin-left: 10px;
+				padding: 0px 4px;
+				@include border-radius(4px);
+			}
 		}
 	}
 	
@@ -68,5 +79,14 @@
 	}
 	
 	.showArchivedCards {
+		font-size: 12pt;
+		
+		span.count {
+			background-color: gray;
+			font-size: 10pt;
+			margin-left: 10px;
+			padding: 0px 4px;
+			@include border-radius(4px);
+		}
 	}
 }