CRM-14481 - crmCaseType - Use tabs and accordions from jQuery UI

diff --git a/CRM/Core/Page/Angular.php b/CRM/Core/Page/Angular.php
index 7b63382b1ab5957fa655e0832628da97dfa617b1..0f380edbca2f8201c53517fa8fc51f64f71e1b4f 100644 (file)
--- a/CRM/Core/Page/Angular.php
+++ b/CRM/Core/Page/Angular.php
@@ -51,6 +51,7 @@ class CRM_Core_Page_Angular extends CRM_Core_Page {
    */
   public static function getAngularModules() {
     $angularModules = array();
+    $angularModules['ui.utils'] = array('ext' => 'civicrm', 'file' => 'packages/bower_components/angular-ui-utils/ui-utils.js');
     foreach (CRM_Core_Component::getEnabledComponents() as $component) {
       $angularModules = array_merge($angularModules, $component->getAngularModules());
     }

diff --git a/js/angular-crmCaseType.js b/js/angular-crmCaseType.js
index 2214efa4c625239ce70db91f544e4dba8e8efbf5..1fbd47462046863f6320d76e82607047b0f4730b 100644 (file)
--- a/js/angular-crmCaseType.js
+++ b/js/angular-crmCaseType.js
@@ -1,7 +1,7 @@
 (function(angular, $, _) {
 
   var partialsUrl = CRM.resourceUrls['civicrm'] + '/partials/crmCaseType';
-  var crmCaseType = angular.module('crmCaseType', ['ngRoute']);
+  var crmCaseType = angular.module('crmCaseType', ['ngRoute', 'ui.utils']);
 
   crmCaseType.config(['$routeProvider',
     function($routeProvider) {

diff --git a/partials/crmCaseType/edit.html b/partials/crmCaseType/edit.html
index c0a208bd78d0168665d25955677e58e542052563..e7f989f120d84384ad4faa623ac7fc1acae975ea 100644 (file)
--- a/partials/crmCaseType/edit.html
+++ b/partials/crmCaseType/edit.html
@@ -6,28 +6,31 @@ Required vars: caseType
   <div ng-include="partialsUrl + '/caseTypeDetails.html'"></div>
 
   <h2>Roles</h2>
+
   <div ng-include="partialsUrl + '/rolesTable.html'"></div>
 
   <h2>Activities</h2>
 
-  <div class="vertical-tabset">
-    <fieldset class="vertical-tab">
-      <legend>Activity Types</legend>
+  <div ui-jq="tabs">
+    <ul>
+      <li><a href="#acttab-actType">Activity Types</a></li>
+      <li ng-repeat="activitySet in caseType.definition.activitySets">
+        <a href="#acttab-{{$index}}">{{ activitySet.label }}</a>
+      </li>
+    </ul>
 
+    <div id="acttab-actType">
       <div ng-include="partialsUrl + '/activityTypesTable.html'"></div>
-    </fieldset>
-
-    <fieldset class="vertical-tab" ng-repeat="activitySet in caseType.definition.activitySets">
-      <legend>{{ activitySet.label }}</legend>
+    </div>
 
+    <div ng-repeat="activitySet in caseType.definition.activitySets" id="acttab-{{$index}}">
       <div ng-include="activityTableTemplate(activitySet)"></div>
 
-      <fieldset class="collapsible">
-        <legend>Advanced</legend>
-        <div ng-include="partialsUrl + '/activitySetDetails.html'"></div>
-      </fieldset>
-
-    </fieldset>
+      <div ui-jq="accordion" ui-options="{collapsible: true, active: false}">
+        <h3>Advanced</h3>
+        <div ng-include="partialsUrl + '/activitySetDetails.html'" style="display:none;"></div>
+      </div>
+    </div>
   </div>
 
   <button ng-click="dump()">Log</button>