CRM-15578 - Change table layouts to <crm-ui-field> directive. Remove <crm-ui-label...

diff --git a/js/angular-crmCaseType.js b/js/angular-crmCaseType.js
index fd525718fd90d1f0a229a15d8f492ad117e3842e..d27c9655e55af073b551bfeda55cce4d7d69f025 100644 (file)
--- a/js/angular-crmCaseType.js
+++ b/js/angular-crmCaseType.js
@@ -128,6 +128,7 @@
 
   crmCaseType.controller('CaseTypeCtrl', function($scope, crmApi, apiCalls) {
     $scope.partialUrl = partialUrl;
+    var ts = $scope.ts = CRM.ts('CiviCase');
 
     $scope.activityStatuses = _.values(apiCalls.actStatuses.values);
     $scope.activityTypes = apiCalls.actTypes.values;

diff --git a/partials/crmCaseType/caseTypeDetails.html b/partials/crmCaseType/caseTypeDetails.html
index 3a24b86ee88380e9abdb557cb3844efb07fbdc92..fb16da9ef023609eb119b434768050874aeb1c05 100644 (file)
--- a/partials/crmCaseType/caseTypeDetails.html
+++ b/partials/crmCaseType/caseTypeDetails.html
@@ -4,15 +4,9 @@ Required vars: caseType
 
 The original form used table layout; don't know if we have an alternative, CSS-based layout
 -->
-<table class="form-layout">
-  <tbody>
-  <tr>
-    <td class="label">
-      <label crm-ui-label crm-for="title">
-        Title
-      </label>
-    </td>
-    <td>
+<div class="crm-block">
+  <div class="crm-group">
+    <div crm-ui-field="title" crm-title="ts('Title')">
       <input
         type="text"
         name="title"
@@ -20,15 +14,8 @@ The original form used table layout; don't know if we have an alternative, CSS-b
         class="big crm-form-text"
         required
         />
-    </td>
-  </tr>
-  <tr>
-    <td class="label">
-      <label crm-ui-label crm-for="caseTypeName">
-        Name
-      </label>
-    </td>
-    <td>
+    </div>
+    <div crm-ui-field="caseTypeName" crm-title="ts('Name')">
       <input
         type="text"
         name="caseTypeName"
@@ -45,27 +32,12 @@ The original form used table layout; don't know if we have an alternative, CSS-b
       <div ng-show="caseType.id && !locks.caseTypeName">
         <em>WARNING: If any external files or programs reference the old "Name", then they must be updated manually.</em>
       </div>
-    </td>
-  </tr>
-  <tr>
-    <td class="label">
-      <label crm-ui-label crm-for="description">
-        Description
-      </label>
-    </td>
-    <td>
+    </div>
+    <div crm-ui-field="description" crm-title="ts('Description')">
       <textarea name="description" ng-model="caseType.description" class="big crm-form-textarea"></textarea>
-    </td>
-  </tr>
-  <tr>
-    <td class="label">
-      <label crm-ui-label crm-for="is_active">
-        Enabled?
-      </label>
-    </td>
-    <td>
+    </div>
+    <div crm-ui-field="is_active" crm-title="ts('Enabled?')">
       <input name="is_active" type="checkbox" ng-model="caseType.is_active" ng-true-value="1" ng-false-value="0"/>
-    </td>
-  </tr>
-  </tbody>
-</table>
+    </div>
+  </div>
+</div>

diff --git a/partials/crmMailing2/field/recipients.html b/partials/crmMailing2/field/recipients.html
index 3c3da6d1615de369d6aadde0786e138ab37bcc23..db427c58d0883e11da064bc1b0dfa3cb455d8e9c 100644 (file)
--- a/partials/crmMailing2/field/recipients.html
+++ b/partials/crmMailing2/field/recipients.html
@@ -8,9 +8,9 @@ Required vars: mailing, crmMailingConst
       <a href="" ng-click="previewRecipients()">{{getRecipientsEstimate()}}</a>
     </div>
     <div>
-      <input name='dedupe_email' type='checkbox' ng-model='mailing.dedupe_email'  ng-true-value="1" ng-false-value="0" />
-      <label crm-ui-label crm-for='dedupe_email'>
-        Dedupe
+      <input name='dedupe_email' type='checkbox' ng-model='mailing.dedupe_email'  ng-true-value="1" ng-false-value="0" id="recipients-dedupe-email" />
+      <label for="recipients-dedupe-email">
+        {{ts('Dedupe')}}
       </label>
     </div>
   </div>
@@ -23,4 +23,4 @@ Required vars: mailing, crmMailingConst
           required
           multiple>
   </select>
-</div>
\ No newline at end of file
+</div>

diff --git a/partials/crmMailing2/headerFooter.html b/partials/crmMailing2/headerFooter.html
index 975350a066aa2b417b8834c4c5ed8c8f87fa20f0..b677c7853122684dcc3382047e94c20702d89d56 100644 (file)
--- a/partials/crmMailing2/headerFooter.html
+++ b/partials/crmMailing2/headerFooter.html
@@ -1,14 +1,10 @@
 <!--
 Controller: EditMailingCtrl
 Required vars: mailing, crmMailingConst
-FIXME: Don't hardcode table-based layout!
 -->
-<table class="form-layout-compressed">
-  <tr>
-    <td class="label">
-      <label crm-ui-label crm-for="header_id">{{ts('Mailing Header')}}</label>
-    </td>
-    <td>
+<div class="crm-block">
+  <div class="crm-group">
+    <div crm-ui-field="header_id" crm-title="ts('Mailing Header')">
       <select
         name="header_id"
         ui-jq="select2"
@@ -17,13 +13,8 @@ FIXME: Don't hardcode table-based layout!
         ng-options="mc.id as mc.name for mc in crmMailingConst.headerfooterList | filter:{component_type: 'Header'}">
         <option value=""></option>
       </select>
-    </td>
-  </tr>
-  <tr>
-    <td class="label">
-      <label crm-ui-label crm-for="footer_id">{{ts('Mailing Footer')}}</label>
-    </td>
-    <td>
+    </div>
+    <div crm-ui-field="footer_id" crm-title="ts('Mailing Footer')">
       <select
         name="footer_id"
         ui-jq="select2"
@@ -32,6 +23,6 @@ FIXME: Don't hardcode table-based layout!
         ng-options="mc.id as mc.name for mc in crmMailingConst.headerfooterList | filter:{component_type: 'Footer'}">
         <option value=""></option>
       </select>
-    </td>
-  </tr>
-</table>
+    </div>
+  </div>
+</div>

diff --git a/partials/crmMailing2/mailing.html b/partials/crmMailing2/mailing.html
index 130e1e43dcf302de6ecbf51f200192805f885fc4..3d7a50a482fb4f1c867aeab8f26de9fa76cbf890 100644 (file)
--- a/partials/crmMailing2/mailing.html
+++ b/partials/crmMailing2/mailing.html
@@ -1,76 +1,53 @@
 <!--
 Controller: EditMailingCtrl
 Required vars: mailing, crmMailingConst
-FIXME: Don't hardcode table-based layout!
 -->
-<table class="form-layout-compressed" style="background: #bbf; width:100%;">
-  <tbody>
-  <tr>
-    <td class="label">
-      <label crm-ui-label crm-for="msg_template_id">{{ts('Template')}}</label>
-    </td>
-    <td ng-include="partialUrl('field/msg_template_id.html')">
-    </td>
-  </tr>
-  </tbody>
-</table>
-<table class="form-layout-compressed">
-  <tbody>
-    <tr>
-      <td class="label">
-        <label crm-ui-label crm-for="fromAddress">{{ts('From')}}</label>
-      </td>
-      <td>
-        <select
-          name="fromAddress"
-          ui-jq="select2"
-          ui-options="{dropdownAutoWidth : true, allowClear: false, placeholder: ts('Email address')}"
-          ng-model="fromPlaceholder.label"
-          ng-options="frm.label as frm.label for frm in crmFromAddresses.getAll() | filter:{is_active:1} | orderBy:'weight'"
-          required>
-          <option value=""></option>
-        </select>
-      </td>
-    </tr>
-    <tr>
-      <td class="label">
-        <label crm-ui-label crm-for="replyTo">{{ts('Reply-To')}}</label>
-      </td>
-      <td>
-        <select
-          name="replyTo"
-          ui-jq="select2"
-          ui-options="{dropdownAutoWidth : true, allowClear: true, placeholder: ts('Email address')}"
-          ng-model="mailing.replyto_email"
-          ng-options="frm.label as frm.label for frm in crmFromAddresses.getAll() | filter:{is_active:1} | orderBy:'weight'"
-          >
-          <option value=""></option>
-        </select>
-      </td>
-    </tr>
-    <tr>
-      <td class="label">
-        <label crm-ui-label crm-for="recipients">{{ts('Recipients')}}</label>
-      </td>
-      <td ng-include="partialUrl('field/recipients.html')">
-      </td>
-    </tr>
-    <tr>
-      <td class="label">
-        <label crm-ui-label crm-for="subject">{{ts('Subject')}}</label>
-      </td>
-      <td>
-        <div style="float: right;">
-          <input crm-mailing-token crm-for="subject" />
-        </div>
-        <input
-          type="text"
-          class="crm-form-text"
-          ng-model="mailing.subject"
-          required
-          placeholder="Subject"
-          name="subject" />
-      </td>
-    </tr>
-  </tbody>
-</table>
+
+<div class="crm-block">
+  <div class="crm-group">
+    <div crm-ui-field="msg_template_id" crm-title="ts('Template')" style="background: #bbf; width:100%; padding: 0.1em;">
+      <div>
+        <div ng-include="partialUrl('field/msg_template_id.html')"></div>
+      </div>
+    </div>
+    <div crm-ui-field="fromAddress" crm-title="ts('From')">
+      <select
+        name="fromAddress"
+        ui-jq="select2"
+        ui-options="{dropdownAutoWidth : true, allowClear: false, placeholder: ts('Email address')}"
+        ng-model="fromPlaceholder.label"
+        ng-options="frm.label as frm.label for frm in crmFromAddresses.getAll() | filter:{is_active:1} | orderBy:'weight'"
+        required>
+        <option value=""></option>
+      </select>
+    </div>
+    <div crm-ui-field="replyTo" crm-title="ts('Reply-To')">
+      <select
+        name="replyTo"
+        ui-jq="select2"
+        ui-options="{dropdownAutoWidth : true, allowClear: true, placeholder: ts('Email address')}"
+        ng-model="mailing.replyto_email"
+        ng-options="frm.label as frm.label for frm in crmFromAddresses.getAll() | filter:{is_active:1} | orderBy:'weight'"
+        >
+        <option value=""></option>
+      </select>
+    </div>
+    <div crm-ui-field="recipients" crm-title="ts('Recipients')">
+      <div>
+        <div ng-include="partialUrl('field/recipients.html')"></div>
+      </div>
+    </div>
+    <div crm-ui-field="subject" crm-title="ts('Subject')">
+      <div style="float: right;">
+        <input crm-mailing-token crm-for="subject" />
+      </div>
+      <input
+        type="text"
+        class="crm-form-text"
+        ng-model="mailing.subject"
+        required
+        placeholder="Subject"
+        name="subject" />
+    </div>
+  </div>
+</div>

diff --git a/partials/crmMailing2/publication.html b/partials/crmMailing2/publication.html
index 3e0e8b23ef9ced87ddc08ef0a762211c400023d4..88c724f2a805c4b1bdf7421e8284bb5e3128e977 100644 (file)
--- a/partials/crmMailing2/publication.html
+++ b/partials/crmMailing2/publication.html
@@ -1,14 +1,10 @@
 <!--
 Controller: EditMailingCtrl
 Required vars: mailing
-FIXME: Don't hardcode table-based layout!
 -->
-<table class="form-layout-compressed">
-  <tr>
-    <td class="label">
-      <label crm-ui-label crm-for="visibility">{{ts('Mailing Visibility')}}</label>
-    </td>
-    <td>
+<div class="crm-block">
+  <div class="crm-group">
+    <div crm-ui-field="visibility" crm-title="ts('Mailing Visibility')">
       <select
         name="visibility"
         ui-jq="select2"
@@ -18,6 +14,6 @@ FIXME: Don't hardcode table-based layout!
         required
         >
       </select>
-    </td>
-    </tbody>
-</table>
+    </div>
+  </div>
+</div>

diff --git a/partials/crmMailing2/responses.html b/partials/crmMailing2/responses.html
index 8e28768c3b93754116efc524fd042ad5c1080838..00b7c2315b4b4e9c87eb1860c0902f6b2d47ae67 100644 (file)
--- a/partials/crmMailing2/responses.html
+++ b/partials/crmMailing2/responses.html
@@ -1,112 +1,78 @@
 <!--
 Controller: EditMailingCtrl
 Required vars: mailing, crmMailingConst
-FIXME: Don't hardcode table-based layout!
 -->
-<table class="form-layout-compressed">
-  <tbody>
-    <tr>
-      <td>
-        <!-- Comparing data-model and UI of "override_verp", note that true/false are inverted (enabled==0,disabled==1) -->
-        <input name="override_verp" type="checkbox" ng-model="mailing.override_verp" ng-true-value="0" ng-false-value="1" />
-        <label crm-ui-label crm-for="override_verp">{{ts('Track Replies')}}</label>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <div class="help">
-          {{ts('Recipients\' replies are sent to a CiviMail specific address instead of the sender\'s address so they can be stored within CiviCRM.')}}
-        </div>
-      </td>
-    </tr>
-    <tr ng-show="'0' == mailing.override_verp">
-      <td>
-        <input name="forward_replies" type="checkbox" ng-model="mailing.forward_replies" ng-true-value="1" ng-false-value="0" />
-        <label crm-ui-label crm-for="forward_replies">{{ts('Forward Replies')}}</label>
-      </td>
-    </tr>
-    <tr ng-show="'0' == mailing.override_verp">
-      <td>
-        <div class="help">
-          {{ts('If a recipient replies to this mailing, forward the reply to the FROM Email address specified for the mailing.')}}
-        </div>
-      </td>
-    </tr>
-    <tr ng-show="'0' == mailing.override_verp">
-      <td>
-        <input name="auto_responder" type="checkbox" ng-model="mailing.auto_responder" ng-true-value="1" ng-false-value="0" />
-        <label crm-ui-label crm-for="auto_responder">{{ts('Auto-Respond to Replies')}}</label>
-      </td>
-    </tr>
-    <tr ng-show="'0' == mailing.override_verp">
-      <td>
-        <div class="help">
-          {{ts('If a recipient replies to this mailing, send an automated reply using the selected message.')}}
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div class="crm-block">
+  <div class="crm-group">
+    <div crm-ui-field="override_verp" crm-title="ts('Track Replies')" crm-layout="checkbox">
+      <!-- Comparing data-model and UI of "override_verp", note that true/false are inverted (enabled==0,disabled==1) -->
+      <input name="override_verp" type="checkbox" ng-model="mailing.override_verp" ng-true-value="0" ng-false-value="1" />
+    </div>
+    <div class="crm-section" id="help">
+      {{ts('Recipients\' replies are sent to a CiviMail specific address instead of the sender\'s address so they can be stored within CiviCRM.')}}
+    </div>
+    <div crm-ui-field="forward_replies" crm-title="ts('Forward Replies')" crm-layout="checkbox" ng-show="'0' == mailing.override_verp">
+      <input name="forward_replies" type="checkbox" ng-model="mailing.forward_replies" ng-true-value="1" ng-false-value="0" />
+    </div>
+    <div class="crm-section" id="help" ng-show="'0' == mailing.override_verp">
+      {{ts('If a recipient replies to this mailing, forward the reply to the FROM Email address specified for the mailing.')}}
+    </div>
+    <div crm-ui-field="auto_responder" crm-title="ts('Auto-Respond to Replies')" crm-layout="checkbox" ng-show="'0' == mailing.override_verp">
+      <input name="auto_responder" type="checkbox" ng-model="mailing.auto_responder" ng-true-value="1" ng-false-value="0" />
+    </div>
+    <div class="crm-section" id="help" ng-show="'0' == mailing.override_verp">
+      {{ts('If a recipient replies to this mailing, send an automated reply using the selected message.')}}
+    </div>
+  </div>
+</div>
 
 <hr/>
 
-<table>
-  <tbody>
-    <tr ng-show="'0' == mailing.override_verp && '1' == mailing.auto_responder">
-      <td><label crm-ui-label crm-for="reply_id">{{ts('Auto-Respond Message')}}</label></td>
-      <td>
-        <select
-          name="reply_id"
-          ui-jq="select2"
-          ui-options="{dropdownAutoWidth : true}"
-          ng-model="mailing.reply_id"
-          ng-options="mc.id as mc.name for mc in crmMailingConst.headerfooterList | filter:{component_type: 'Reply'}"
-          required>
-          <option value=""></option>
-        </select>
-      </td>
-    </tr>
-    <tr>
-      <td><label crm-ui-label crm-for="optout_id">{{ts('Opt-out Message')}}</label></td>
-      <td>
-        <select
-          name="optout_id"
-          ui-jq="select2"
-          ui-options="{dropdownAutoWidth : true}"
-          ng-model="mailing.optout_id"
-          ng-options="mc.id as mc.name for mc in crmMailingConst.headerfooterList | filter:{component_type: 'OptOut'}"
-          required>
-          <option value=""></option>
-        </select>
-      </td>
-    </tr>
-    <tr>
-      <td><label crm-ui-label crm-for="resubscribe_id">{{ts('Resubscribe Message')}}</label></td>
-      <td>
-        <select
-          name="resubscribe_id"
-          ui-jq="select2"
-          ui-options="{dropdownAutoWidth : true}"
-          ng-model="mailing.resubscribe_id"
-          ng-options="mc.id as mc.name for mc in crmMailingConst.headerfooterList | filter:{component_type: 'Resubscribe'}"
-          required>
-          <option value=""></option>
-        </select>
-      </td>
-    </tr>
-    <tr>
-      <td><label crm-ui-label crm-for="unsubscribe_id">{{ts('Unsubscribe Message')}}</label></td>
-      <td>
-        <select
-          name="unsubscribe_id"
-          ui-jq="select2"
-          ui-options="{dropdownAutoWidth : true}"
-          ng-model="mailing.unsubscribe_id"
-          ng-options="mc.id as mc.name for mc in crmMailingConst.headerfooterList | filter:{component_type: 'Unsubscribe'}"
-          required>
-          <option value=""></option>
-        </select>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div class="crm-block">
+  <div class="crm-group">
+    <div crm-ui-field="reply_id" crm-title="ts('Auto-Respond Message')" ng-show="'0' == mailing.override_verp && '1' == mailing.auto_responder">
+      <select
+        name="reply_id"
+        ui-jq="select2"
+        ui-options="{dropdownAutoWidth : true}"
+        ng-model="mailing.reply_id"
+        ng-options="mc.id as mc.name for mc in crmMailingConst.headerfooterList | filter:{component_type: 'Reply'}"
+        required>
+        <option value=""></option>
+      </select>
+    </div>
+    <div crm-ui-field="optout_id" crm-title="ts('Opt-out Message')">
+      <select
+        name="optout_id"
+        ui-jq="select2"
+        ui-options="{dropdownAutoWidth : true}"
+        ng-model="mailing.optout_id"
+        ng-options="mc.id as mc.name for mc in crmMailingConst.headerfooterList | filter:{component_type: 'OptOut'}"
+        required>
+        <option value=""></option>
+      </select>
+    </div>
+    <div crm-ui-field="resubscribe_id" crm-title="ts('Resubscribe Message')">
+      <select
+        name="resubscribe_id"
+        ui-jq="select2"
+        ui-options="{dropdownAutoWidth : true}"
+        ng-model="mailing.resubscribe_id"
+        ng-options="mc.id as mc.name for mc in crmMailingConst.headerfooterList | filter:{component_type: 'Resubscribe'}"
+        required>
+        <option value=""></option>
+      </select>
+    </div>
+    <div crm-ui-field="unsubscribe_id" crm-title="ts('Unsubscribe Message')">
+      <select
+        name="unsubscribe_id"
+        ui-jq="select2"
+        ui-options="{dropdownAutoWidth : true}"
+        ng-model="mailing.unsubscribe_id"
+        ng-options="mc.id as mc.name for mc in crmMailingConst.headerfooterList | filter:{component_type: 'Unsubscribe'}"
+        required>
+        <option value=""></option>
+      </select>
+    </div>
+  </div>
+</div>

diff --git a/partials/crmMailing2/summary.html b/partials/crmMailing2/summary.html
index 5dcde6d037238a86d330470d0952f1ec191e5c3d..51bfbae14eb737388dfb9cc0ef433237a5fef272 100644 (file)
--- a/partials/crmMailing2/summary.html
+++ b/partials/crmMailing2/summary.html
@@ -3,13 +3,10 @@ Controller: EditMailingCtrl
 Required vars: mailing, crmMailingConst
 FIXME: Don't hardcode table-based layout!
 -->
-<table class="form-layout-compressed">
-  <tbody>
-    <tr>
-      <td class="label">
-        <label crm-ui-label crm-for="mailingName">{{ts('Mailing Name')}}</label>
-      </td>
-      <td>
+<div class="crm-block">
+  <div class="crm-group">
+    <div crm-ui-field="mailingName" crm-title="ts('Mailing Name')">
+      <div>
         <input
           type="text"
           class="crm-form-text"
@@ -17,23 +14,18 @@ FIXME: Don't hardcode table-based layout!
           placeholder="Mailing Name"
           required
           name="mailingName" />
-      </td>
-    </tr>
-    <tr ng-show="crmMailingConst.campNames.length > 0">
-      <td class="label">
-        <label crm-ui-label crm-for="campaign">{{ts('Campaign')}}</label>
-      </td>
-      <td>
-        <select
-          name="campaign"
-          ui-jq="select2"
-          ui-options="{dropdownAutoWidth : true, allowClear: true, placeholder: ts('Select Campaign')}"
-          ng-model="mailing.campaign_id"
-          ng-options="campaign.id as campaign.name for campaign in crmMailingConst.campNames|orderBy:'name'"
-          >
-          <option value=""></option>
-        </select>
-      </td>
-    </tr>
-  </tbody>
-</table>
\ No newline at end of file
+      </div>
+    </div>
+    <div crm-ui-field="campaign" crm-title="ts('Campaign')" ng-show="crmMailingConst.campNames.length > 0">
+      <select
+        name="campaign"
+        ui-jq="select2"
+        ui-options="{dropdownAutoWidth : true, allowClear: true, placeholder: ts('Select Campaign')}"
+        ng-model="mailing.campaign_id"
+        ng-options="campaign.id as campaign.name for campaign in crmMailingConst.campNames|orderBy:'name'"
+        >
+        <option value=""></option>
+      </select>
+    </div>
+  </div>
+</div>

diff --git a/partials/crmMailing2/tracking.html b/partials/crmMailing2/tracking.html
index fc49f21c745b47a3dd7cd4e9c2b5548ac2d68a2c..ebd57c25cd488d52924eed7d8b6c0a19df949f1d 100644 (file)
--- a/partials/crmMailing2/tracking.html
+++ b/partials/crmMailing2/tracking.html
@@ -1,35 +1,20 @@
 <!--
 Controller: EditMailingCtrl
 Required vars: mailing
-FIXME: Don't hardcode table-based layout!
 -->
-<table class="form-layout-compressed">
-  <tbody>
-    <tr>
-      <td>
-        <input name="url_tracking" type="checkbox" ng-model="mailing.url_tracking" ng-true-value="1" ng-false-value="0" />
-        <label crm-ui-label crm-for="url_tracking">{{ts('Track Click Throughs')}}</label>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <div id="help">
-          {{ts('Track the number of times recipients click each link in this mailing. NOTE: When this feature is enabled, all links in the message body will be automatically re-written to route through your CiviCRM server prior to redirecting to the target page.')}}
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <input name="open_tracking" type="checkbox" ng-model="mailing.open_tracking" ng-true-value="1" ng-false-value="0" />
-        <label crm-ui-label crm-for="open_tracking">{{ts('Track Opens')}}</label>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <div id="help">
-          {{ts('Track the number of times recipients open this mailing in their email software.')}}
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div class="crm-block">
+  <div class="crm-group">
+    <div crm-ui-field="url_tracking" crm-title="ts('Track Click Throughs')" crm-layout="checkbox">
+      <input name="url_tracking" type="checkbox" ng-model="mailing.url_tracking" ng-true-value="1" ng-false-value="0" />
+    </div>
+    <div class="crm-section" id="help">
+      {{ts('Track the number of times recipients click each link in this mailing. NOTE: When this feature is enabled, all links in the message body will be automatically re-written to route through your CiviCRM server prior to redirecting to the target page.')}}
+    </div>
+    <div crm-ui-field="open_tracking" crm-title="ts('Track Opens')" crm-layout="checkbox">
+      <input name="open_tracking" type="checkbox" ng-model="mailing.open_tracking" ng-true-value="1" ng-false-value="0" />
+    </div>
+    <div class="crm-section" id="help">
+      {{ts('Track the number of times recipients open this mailing in their email software.')}}
+    </div>
+  </div>
+</div>