From: Coleman Watts <coleman@civicrm.org>
Date: Fri, 23 Oct 2015 18:42:31 +0000 (-0400)
Subject: CRM-13823 - Show count in Angular tabs
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=b1f92f72ae1969b9fa23150bb9b26bf55e4a2806;p=civicrm-core.git

CRM-13823 - Show count in Angular tabs
---

diff --git a/ang/crmStatusPage/StatusPage.html b/ang/crmStatusPage/StatusPage.html
index ad5782c7ed..fa49b3a080 100644
--- a/ang/crmStatusPage/StatusPage.html
+++ b/ang/crmStatusPage/StatusPage.html
@@ -12,6 +12,7 @@
         ng-repeat="tab in [{is_visible: 1, name: 'visible'}, {is_visible: 0, name: 'hidden'}]"
         crm-ui-tab
         id="tab-{{tab.name}}"
+        count="{{_.where(statuses, {is_visible: tab.is_visible}).length}}"
         crm-title="tab.is_visible ? ts('Active') : ts('Hushed/Snoozed')"
         >
         <div id="crm-status-list" ng-repeat="status in statuses | filter:{is_visible: tab.is_visible}" >
diff --git a/ang/crmStatusPage/StatusPageCtrl.js b/ang/crmStatusPage/StatusPageCtrl.js
index dabde92d42..924e4af870 100644
--- a/ang/crmStatusPage/StatusPageCtrl.js
+++ b/ang/crmStatusPage/StatusPageCtrl.js
@@ -6,6 +6,7 @@
       var ts = $scope.ts = CRM.ts();
       $scope.alert = CRM.alert;
       $scope.statuses = statusData.values;
+      $scope._ = _;
 
       _.each($scope.statuses, function(status) {
         status.severity_id = status.severity;
diff --git a/ang/crmUi.js b/ang/crmUi.js
index fc0310ba0b..63ad95f2c8 100644
--- a/ang/crmUi.js
+++ b/ang/crmUi.js
@@ -653,7 +653,7 @@
       };
     })
 
-    // example <div crm-ui-tab crm-title="ts('My Title')">...content...</div>
+    // example <div crm-ui-tab id="tab-1" crm-title="ts('My Title')" count="3">...content...</div>
     // WISHLIST: use a full Angular component instead of an incomplete jQuery wrapper
     .directive('crmUiTab', function($parse) {
       return {
@@ -661,6 +661,7 @@
         restrict: 'EA',
         scope: {
           crmTitle: '@',
+          count: '@',
           id: '@'
         },
         template: '<div ng-transclude></div>',
diff --git a/ang/crmUi/tabset.html b/ang/crmUi/tabset.html
index 9c539b175b..f232937945 100644
--- a/ang/crmUi/tabset.html
+++ b/ang/crmUi/tabset.html
@@ -1,7 +1,10 @@
 <div ui-jq="tabs" class="crm-tabset">
   <ul>
-    <li ng-repeat="tab in tabs" class="ui-corner-all">
-      <a href="#{{tab.id}}">{{tab.$parent.$eval(tab.crmTitle)}}</a>
+    <li ng-repeat="tab in tabs" class="ui-corner-all crm-tab-button crm-count-{{tab.count}}">
+      <a href="#{{tab.id}}">
+        {{tab.$parent.$eval(tab.crmTitle)}}
+        <em ng-if="tab.count">{{tab.count}}</em>
+      </a>
     </li>
   </ul>
   <div ng-transclude/>
diff --git a/css/civicrm.css b/css/civicrm.css
index 39eaa364f3..791d287b30 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -1594,7 +1594,7 @@ input.crm-form-entityref {
   font-size: 0.9em;
 }
 
-#mainTabContainer li.crm-tab-button {
+.crm-container li.crm-tab-button {
   margin: 0 2px 2px 0;
 }
 
@@ -2820,14 +2820,12 @@ tbody.scrollContent tr.alternateRow {
 
 .crm-container .disabled,
 .crm-container .cancelled,
-#mainTabContainer li.disabled a.ui-tabs-anchor,
-#mainTabContainer li.crm-count-0 a.ui-tabs-anchor,
-#mainTabContainer li.crm-count-0 a.ui-tabs-anchor em {
+.crm-container li.disabled a.ui-tabs-anchor,
+.crm-container li.crm-count-0 a.ui-tabs-anchor,
+.crm-container li.crm-count-0 a.ui-tabs-anchor em {
   color: #999999 !important;
 }
-#mainTabContainer li.disabled {
-  text-decoration: none;
-}
+
 #crm-container tr.crm-job {
   text-decoration: none !important;
 }