From bbb29627e4e843a3d955fe0569c9a4a25996254a Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Sat, 19 Apr 2014 16:40:02 -0700
Subject: [PATCH] CRM-14481 - crmCaseType - Use tabs and accordions from jQuery
 UI

---
 CRM/Core/Page/Angular.php      |  1 +
 js/angular-crmCaseType.js      |  2 +-
 partials/crmCaseType/edit.html | 29 ++++++++++++++++-------------
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/CRM/Core/Page/Angular.php b/CRM/Core/Page/Angular.php
index 7b63382b1a..0f380edbca 100644
--- 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 2214efa4c6..1fbd474620 100644
--- 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 c0a208bd78..e7f989f120 100644
--- 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>
-- 
2.25.1