CRM-13823 - Show count in Angular tabs

diff --git a/ang/crmStatusPage/StatusPage.html b/ang/crmStatusPage/StatusPage.html
index ad5782c7ed5f1a6eec7acac4335054dddcdd4b7f..fa49b3a0800ade9e7384bb52052a7ea04432dd3a 100644 (file)
--- 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 dabde92d42b9dbdf4182ddd9d6f3a38096d0937b..924e4af870fb7ab9d2166cf617e4adc2ec0a5b92 100644 (file)
--- 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 fc0310ba0ba6d5d240b80dd4eda3ff4ed5f8b665..63ad95f2c868a2d427e7e6b6ca20575165fa9fa9 100644 (file)
--- 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 9c539b175b2df693529e9100796f67c6a37a1428..f2329379456b1278e26a93b60a6877a979421826 100644 (file)
--- 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 39eaa364f3f261efe73320698dc18fb917629974..791d287b3076dc7ced3fd29fd18293507bab6048 100644 (file)
--- 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;
 }