CRM-15706 - Refactor Angular uiAccordions and add help

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
index c97a861444c1276ccf3ff8c60a3c3b3c8d006863..f055ca6c7d6c3dd7d4c8caafebb3962af24e8ded 100644 (file)
--- a/js/angular-crm-ui.js
+++ b/js/angular-crm-ui.js
@@ -10,15 +10,23 @@
     .directive('crmUiAccordion', function() {
       return {
         scope: {
-          crmTitle: '@',
-          crmCollapsed: '@'
+          crmUiAccordion: '='
         },
-        template: '<div class="crm-accordion-wrapper" ng-class="cssClasses"><div class="crm-accordion-header">{{$parent.$eval(crmTitle)}}</div><div class="crm-accordion-body" ng-transclude></div></div>',
+        template: '<div ng-class="cssClasses"><div class="crm-accordion-header">{{crmUiAccordion.title}} <a crm-ui-help="help" ng-if="help"></a></div><div class="crm-accordion-body" ng-transclude></div></div>',
         transclude: true,
         link: function (scope, element, attrs) {
           scope.cssClasses = {
-            collapsed: scope.$parent.$eval(attrs.crmCollapsed)
+            'crm-accordion-wrapper': true,
+            collapsed: scope.crmUiAccordion.collapsed
           };
+          scope.help = null;
+          scope.$watch('crmUiAccordion', function(crmUiAccordion) {
+            if (crmUiAccordion && crmUiAccordion.help) {
+              scope.help = crmUiAccordion.help.clone({}, {
+                title: crmUiAccordion.title
+              });
+            }
+          });
         }
       };
     })

diff --git a/js/angular-crmMailing.js b/js/angular-crmMailing.js
index b111c3969a1866d605dc28f9af5e05c7baa45963..0404547a5e47742cde2204253a6ce647dd8f8494 100644 (file)
--- a/js/angular-crmMailing.js
+++ b/js/angular-crmMailing.js
@@ -72,13 +72,14 @@
     $location.replace();
   });
 
-  angular.module('crmMailing').controller('EditMailingCtrl', function EditMailingCtrl($scope, selectedMail, $location, crmMailingMgr, crmStatus, attachments, crmMailingPreviewMgr, crmBlocker, CrmAutosaveCtrl, $timeout) {
+  angular.module('crmMailing').controller('EditMailingCtrl', function EditMailingCtrl($scope, selectedMail, $location, crmMailingMgr, crmStatus, attachments, crmMailingPreviewMgr, crmBlocker, CrmAutosaveCtrl, $timeout, crmUiHelp) {
     $scope.mailing = selectedMail;
     $scope.attachments = attachments;
     $scope.crmMailingConst = CRM.crmMailing;
     $scope.checkPerm = CRM.checkPerm;
 
     var ts = $scope.ts = CRM.ts(null);
+    $scope.hs = crmUiHelp({file: 'CRM/Mailing/MailingUI'});
     var block = $scope.block = crmBlocker();
     var myAutosave = null;
 

diff --git a/partials/crmMailing/edit-unified.html b/partials/crmMailing/edit-unified.html
index 35854109ef0f57dbd9cd2db7a1aec2e78b719774..2e634ffe6ea16f658dad224cecddf301de348bcd 100644 (file)
--- a/partials/crmMailing/edit-unified.html
+++ b/partials/crmMailing/edit-unified.html
@@ -35,11 +35,11 @@
       </div>
     </div>
 
-    <div crm-ui-accordion crm-title="ts('Preview')">
+    <div crm-ui-accordion="{title: ts('Preview')}" >
       <div crm-mailing-block-preview crm-mailing="mailing" on-preview="previewMailing(mailing, preview.mode)" on-send="sendTest(mailing, attachments, preview.recipient)" />
     </div>
 
-    <div crm-ui-accordion crm-title="ts('Schedule')">
+    <div crm-ui-accordion="{title: ts('Schedule')}" >
       <div crm-mailing-block-schedule crm-mailing="mailing"/>
     </div>
 

diff --git a/partials/crmMailing/edit-unified2.html b/partials/crmMailing/edit-unified2.html
index cc20ff2afbe5a4547b7f686a99c4c18d750910d5..8d3ec0fe0ac979ebcb5cd97aaffa3e430cda12a1 100644 (file)
--- a/partials/crmMailing/edit-unified2.html
+++ b/partials/crmMailing/edit-unified2.html
@@ -10,32 +10,32 @@
     <div crm-mailing-block-summary crm-mailing="mailing"/>
     <div crm-mailing-block-mailing crm-mailing="mailing"/>
 
-    <div crm-ui-accordion crm-title="ts('HTML')">
+    <div crm-ui-accordion="{title: ts('HTML'), help: hs('html')}" >
       <div crm-mailing-body-html crm-mailing="mailing"/>
     </div>
-    <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!mailing.body_text'>
+    <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !mailing.body_text, help: hs('text')}">
       <div crm-mailing-body-text crm-mailing="mailing"/>
     </div>
     <span ng-model="placeholder" crm-ui-validate="mailing.body_html || mailing.body_text"></span>
-    <div crm-ui-accordion id="tab-header" crm-title="ts('Header and Footer')" crm-collapsed='true'>
+    <div crm-ui-accordion="{title: ts('Header and Footer'), collapsed: true}" id="tab-header" >
       <div crm-mailing-block-header-footer crm-mailing="mailing"/>
     </div>
-    <div crm-ui-accordion id="tab-attachment" crm-title="ts('Attachments')" crm-collapsed='true'>
+    <div crm-ui-accordion="{title: ts('Attachments'), collapsed: true}" id="tab-attachment" >
       <div crm-attachments="attachments"/>
     </div>
-    <div crm-ui-accordion id="tab-pub" crm-title="ts('Publication')" crm-collapsed='true'>
+    <div crm-ui-accordion="{title: ts('Publication'), collapsed: true}" id="tab-pub" >
       <div crm-mailing-block-publication crm-mailing="mailing"/>
     </div>
-    <div crm-ui-accordion id="tab-response" crm-title="ts('Responses')" crm-collapsed='true'>
+    <div crm-ui-accordion="{title: ts('Responses'), collapsed: true}" id="tab-response" >
       <div crm-mailing-block-responses crm-mailing="mailing"/>
     </div>
-    <div crm-ui-accordion id="tab-tracking" crm-title="ts('Tracking')" crm-collapsed='true'>
+    <div crm-ui-accordion="{title: ts('Tracking'), collapsed: true}" id="tab-tracking" >
       <div crm-mailing-block-tracking crm-mailing="mailing"/>
     </div>
-    <div crm-ui-accordion crm-title="ts('Preview')">
+    <div crm-ui-accordion="{title: ts('Preview')}" >
       <div crm-mailing-block-preview crm-mailing="mailing" on-preview="previewMailing(mailing, preview.mode)" on-send="sendTest(mailing, attachments, preview.recipient)" />
     </div>
-    <div crm-ui-accordion id="tab-schedule" crm-title="ts('Schedule')">
+    <div crm-ui-accordion="{title: ts('Schedule')}" id="tab-schedule" >
       <div crm-mailing-block-schedule crm-mailing="mailing"/>
     </div>
 

diff --git a/partials/crmMailing/edit-wizard.html b/partials/crmMailing/edit-wizard.html
index 4337c859f181df5d82ac0b34f061a2bd9cbda7ca..f8b4fa300114fd5b6f6de0fc6a20c7398c0d9b70 100644 (file)
--- a/partials/crmMailing/edit-wizard.html
+++ b/partials/crmMailing/edit-wizard.html
@@ -12,42 +12,42 @@
       <div crm-ui-wizard-step crm-title="ts('Content')" ng-form="contentForm">
         <div crm-mailing-block-summary crm-mailing="mailing"/>
         <div crm-mailing-block-mailing crm-mailing="mailing"/>
-        <div crm-ui-accordion crm-title="ts('HTML')">
+        <div crm-ui-accordion="{title: ts('HTML'), help: hs('html')}" >
           <div crm-mailing-body-html crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!mailing.body_text'>
+        <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !mailing.body_text, help: hs('text')}">
           <div crm-mailing-body-text crm-mailing="mailing"/>
         </div>
         <span ng-model="placeholder" crm-ui-validate="mailing.body_html || mailing.body_text"></span>
-        <div crm-ui-accordion crm-title="ts('Header and Footer')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Header and Footer'), collapsed: true}">
           <div crm-mailing-block-header-footer crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Attachments')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Attachments'), collapsed: true}">
           <div crm-attachments="attachments"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview')">
+        <div crm-ui-accordion="{title: ts('Preview')}" >
           <div crm-mailing-block-preview crm-mailing="mailing" on-preview="previewMailing(mailing, preview.mode)" on-send="sendTest(mailing, attachments, preview.recipient)" />
         </div>
       </div>
 
       <div crm-ui-wizard-step crm-title="ts('Options')" ng-form="optionsForm">
-        <div crm-ui-accordion crm-title="ts('Schedule')">
+        <div crm-ui-accordion="{title: ts('Schedule')}" >
           <div crm-mailing-block-schedule crm-mailing="mailing"/>
         </div>
 
-        <div crm-ui-accordion crm-title="ts('Responses')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Responses'), collapsed: true}">
           <div crm-mailing-block-responses crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Tracking')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Tracking'), collapsed: true}">
           <div crm-mailing-block-tracking crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Publication')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Publication'), collapsed: true}">
           <div crm-mailing-block-publication crm-mailing="mailing"/>
         </div>
       </div>
 
       <div crm-ui-wizard-step crm-title="ts('Review')" ng-form="reviewForm">
-        <div crm-ui-accordion crm-title="ts('Review')">
+        <div crm-ui-accordion="{title: ts('Review')}" >
           <div crm-mailing-block-review crm-mailing="mailing"/>
         </div>
         <center>

diff --git a/partials/crmMailing/edit-workflow.html b/partials/crmMailing/edit-workflow.html
index cd530abb8052c3d0aa3dcf07bafa9a3e5f9a6089..bbc2a82031d8c9517d561be48c2c108f69851720 100644 (file)
--- a/partials/crmMailing/edit-workflow.html
+++ b/partials/crmMailing/edit-workflow.html
@@ -12,44 +12,44 @@
       <div crm-ui-wizard-step="10" crm-title="ts('Content')" ng-form="contentForm" ng-if="checkPerm('create mailings') || checkPerm('access CiviMail')">
         <div crm-mailing-block-summary crm-mailing="mailing"/>
         <div crm-mailing-block-mailing crm-mailing="mailing"/>
-        <div crm-ui-accordion crm-title="ts('HTML')">
+        <div crm-ui-accordion="{title: ts('HTML'), help: hs('html')}" >
           <div crm-mailing-body-html crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!mailing.body_text'>
+        <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !mailing.body_text, help: hs('text')}">
           <div crm-mailing-body-text crm-mailing="mailing"/>
         </div>
         <span ng-model="placeholder" crm-ui-validate="mailing.body_html || mailing.body_text"></span>
-        <div crm-ui-accordion crm-title="ts('Header and Footer')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Header and Footer'), collapsed: true}">
           <div crm-mailing-block-header-footer crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Attachments')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Attachments'), collapsed: true}">
           <div crm-attachments="attachments"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview')">
+        <div crm-ui-accordion="{title: ts('Preview')}" >
           <div crm-mailing-block-preview crm-mailing="mailing" on-preview="previewMailing(mailing, preview.mode)" on-send="sendTest(mailing, attachments, preview.recipient)" />
         </div>
       </div>
 
       <div crm-ui-wizard-step="20" crm-title="ts('Options')" ng-form="optionsForm" ng-if="checkPerm('create mailings') || checkPerm('access CiviMail')">
-        <div crm-ui-accordion crm-title="ts('Responses')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Responses'), collapsed: true}">
           <div crm-mailing-block-responses crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Tracking')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Tracking'), collapsed: true}">
           <div crm-mailing-block-tracking crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Publication')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Publication'), collapsed: true}">
           <div crm-mailing-block-publication crm-mailing="mailing"/>
         </div>
       </div>
 
       <div crm-ui-wizard-step="40" crm-title="ts('Review')" ng-form="schedForm" ng-if="checkPerm('schedule mailings') || checkPerm('access CiviMail')">
-        <div crm-ui-accordion crm-title="ts('Review')">
+        <div crm-ui-accordion="{title: ts('Review')}" >
           <div crm-mailing-block-review crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Schedule')">
+        <div crm-ui-accordion="{title: ts('Schedule')}" >
           <div crm-mailing-block-schedule crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Approval')" ng-if="checkPerm('approve mailings') || checkPerm('access CiviMail')">
+        <div crm-ui-accordion="{title: ts('Approval')}"  ng-if="checkPerm('approve mailings') || checkPerm('access CiviMail')">
           <div crm-mailing-block-approve crm-mailing="mailing"/>
         </div>
         <center ng-if="!checkPerm('approve mailings') && !checkPerm('access CiviMail')">

diff --git a/partials/crmMailing/edit.html b/partials/crmMailing/edit.html
index b46a54ca28861c67f7d118c5a0be8716d8e11a7c..b799f7d04dd0956935f77c19129bbad516e9c1c6 100644 (file)
--- a/partials/crmMailing/edit.html
+++ b/partials/crmMailing/edit.html
@@ -13,10 +13,10 @@
           <div crm-ui-tab id="tab-mailing" crm-title="ts('Mailing')">
             <div crm-mailing-block-summary crm-mailing="mailing"/>
             <div crm-mailing-block-mailing crm-mailing="mailing"/>
-            <div crm-ui-accordion crm-title="ts('HTML')">
+            <div crm-ui-accordion="{title: ts('HTML'), help: hs('html')}" >
               <div crm-mailing-body-html crm-mailing="mailing"/>
             </div>
-            <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!mailing.body_text'>
+            <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !mailing.body_text, help: hs('text')}">
               <div crm-mailing-body-text crm-mailing="mailing"/>
             </div>
             <span ng-model="placeholder" crm-ui-validate="mailing.body_html || mailing.body_text"></span>
@@ -37,15 +37,15 @@
             <div crm-mailing-block-tracking crm-mailing="mailing"/>
           </div>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview')">
+        <div crm-ui-accordion="{title: ts('Preview')}" >
           <div crm-mailing-block-preview crm-mailing="mailing" on-preview="previewMailing(mailing, preview.mode)" on-send="sendTest(mailing, attachments, preview.recipient)" />
         </div>
       </div>
       <div crm-ui-wizard-step crm-title="ts('Review and Schedule')" ng-form="reviewForm">
-        <div crm-ui-accordion crm-title="ts('Review')">
+        <div crm-ui-accordion="{title: ts('Review')}" >
           <div crm-mailing-block-review crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Schedule')">
+        <div crm-ui-accordion="{title: ts('Schedule')}" >
           <div crm-mailing-block-schedule crm-mailing="mailing"/>
         </div>
         <center>

diff --git a/partials/crmMailingAB/edit.html b/partials/crmMailingAB/edit.html
index 75a7c5ea56faf7ef092cd94bc448f5fc5bddf023..e50d798c0a4b5f82a761b299b6efb1ee18ccfc28 100644 (file)
--- a/partials/crmMailingAB/edit.html
+++ b/partials/crmMailingAB/edit.html
@@ -49,10 +49,10 @@
                 subjectB: 1
                 }"
               crm-abtest="abtest"></div>
-            <div crm-ui-accordion crm-title="ts('HTML')">
+            <div crm-ui-accordion="{title: ts('HTML')}" >
               <div crm-mailing-body-html crm-mailing="abtest.mailings.a"/>
             </div>
-            <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!abtest.mailings.a.body_text'>
+            <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !abtest.mailings.a.body_text}">
               <div crm-mailing-body-text crm-mailing="abtest.mailings.a"/>
             </div>
           </div>
@@ -73,10 +73,10 @@
             <div crm-mailing-block-responses crm-mailing="abtest.mailings.a"/>
           </div>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview (A)')">
+        <div crm-ui-accordion="{title: ts('Preview (A)')}" >
           <div crm-mailing-block-preview crm-mailing="abtest.mailings.a" on-preview="previewMailing('a', preview.mode)" on-send="sendTest('a', preview.recipient)" />
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview (B)')">
+        <div crm-ui-accordion="{title: ts('Preview (B)')}" >
           <div crm-mailing-block-preview crm-mailing="abtest.mailings.b" on-preview="previewMailing('b', preview.mode)" on-send="sendTest('b', preview.recipient)" />
         </div>
       </div>
@@ -91,10 +91,10 @@
                 subjectA: 1
                 }"
               crm-abtest="abtest"></div>
-            <div crm-ui-accordion crm-title="ts('HTML')">
+            <div crm-ui-accordion="{title: ts('HTML')}" >
               <div crm-mailing-body-html crm-mailing="abtest.mailings.a"/>
             </div>
-            <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!abtest.mailings.a.body_text'>
+            <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !abtest.mailings.a.body_text}">
               <div crm-mailing-body-text crm-mailing="abtest.mailings.a"/>
             </div>
           </div>
@@ -111,7 +111,7 @@
             <div crm-mailing-block-responses crm-mailing="abtest.mailings.a"/>
           </div>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview')">
+        <div crm-ui-accordion="{title: ts('Preview')}" >
           <div crm-mailing-block-preview crm-mailing="abtest.mailings.a" on-preview="previewMailing('a', preview.mode)" on-send="sendTest('a', preview.recipient)" />
         </div>
       </div>
@@ -126,10 +126,10 @@
                 subjectB: 1
                 }"
               crm-abtest="abtest"></div>
-            <div crm-ui-accordion crm-title="ts('HTML')">
+            <div crm-ui-accordion="{title: ts('HTML')}" >
               <div crm-mailing-body-html crm-mailing="abtest.mailings.b"/>
             </div>
-            <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!abtest.mailings.b.body_text'>
+            <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !abtest.mailings.b.body_text}">
               <div crm-mailing-body-text crm-mailing="abtest.mailings.b"/>
             </div>
           </div>
@@ -146,7 +146,7 @@
             <div crm-mailing-block-responses crm-mailing="abtest.mailings.b"/>
           </div>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview')">
+        <div crm-ui-accordion="{title: ts('Preview')}" >
           <div crm-mailing-block-preview crm-mailing="abtest.mailings.b" on-preview="previewMailing('b', preview.mode)" on-send="sendTest('b', preview.recipient)" />
         </div>
       </div>

diff --git a/partials/crmMailingAB/list.html b/partials/crmMailingAB/list.html
index 361f9c867c64c5a2f5ffd6b9ac388a7c8f4ac047..1944350ecb8e731e0a7c028c52afba9df9bc919c 100644 (file)
--- a/partials/crmMailingAB/list.html
+++ b/partials/crmMailingAB/list.html
@@ -5,7 +5,7 @@ Required vars: mailingABList
 
 <span crm-ui-order="{var: 'myOrder', defaults: ['-created_date']}"></span>
 
-<div crm-ui-accordion crm-title="ts('Filter')" crm-collapsed="true">
+<div crm-ui-accordion="{title: ts('Filter'), collapsed: true}">
   <form name="filterForm">
     <span>
       <input class="big crm-form-text" ng-model="filter.name" placeholder="{{ts('Name')}}"/>