From 008e95c9827a8cb3a725f7ff1d3de9874b56ba15 Mon Sep 17 00:00:00 2001
From: Vitor <vitor@futurefirst.org.uk>
Date: Thu, 2 Oct 2014 14:10:18 +0100
Subject: [PATCH] abtesting - Fixes to several interface issues.

---
 css/angular-crmMailingAB.css          |  7 +++
 js/angular-crmMailingAB.js            | 24 +++++----
 partials/abtesting/from_name.html     | 34 ++++++------
 partials/abtesting/subject_lines.html | 34 ++++++------
 partials/abtesting/tab1.html          |  2 +-
 partials/abtesting/tab3.html          | 26 ++++++----
 partials/abtesting/tab4.html          |  8 ++-
 partials/abtesting/two_emails.html    | 74 +++++++++++++--------------
 8 files changed, 116 insertions(+), 93 deletions(-)

diff --git a/css/angular-crmMailingAB.css b/css/angular-crmMailingAB.css
index 0dc5927df3..f39411d14b 100644
--- a/css/angular-crmMailingAB.css
+++ b/css/angular-crmMailingAB.css
@@ -50,4 +50,11 @@ div#frag2 {
   height:600px;
   width:800px;
   overflow: auto;
+}
+
+.abtesting-form-label {
+  width: 30%;
+}
+.abtesting-form-element *{
+  width: 100%;
 }
\ No newline at end of file
diff --git a/js/angular-crmMailingAB.js b/js/angular-crmMailingAB.js
index c377ad8d16..91bffd3f77 100755
--- a/js/angular-crmMailingAB.js
+++ b/js/angular-crmMailingAB.js
@@ -499,8 +499,8 @@
       if ($scope.preview == true) {
         $('#prevmail').dialog({
           title: 'Preview Mailing',
-          width: 1080,
-          height: 700,
+          width: 1000,
+          height: 500,
           closed: false,
           cache: false,
           modal: true,
@@ -920,7 +920,11 @@
     return {
       restrict: 'AE',
       link: function (scope, element, attrs) {
-        $(element).select2({width: "200px", data: CRM.crmMailing.mailTokens, placeholder: "Insert Token"});
+        $(element).select2({
+          width: "200px",
+          data: CRM.crmMailing.mailTokens,
+          placeholder: "Insert Token"
+        });
         $(element).on('select2-selecting', function (e) {
 
           scope.$evalAsync('_resetSelection()');
@@ -1003,18 +1007,17 @@
           "name": "from_email_address"
         }).done(function(result) {
           var emailGroupId = result.id;
-          console.log(result);
            CRM.api3('OptionValue', 'get', {
             "sequential": 1,
             "option_group_id": result.id
           }).done(function(orgEmails) {
-              console.log(orgEmails);
               
               //$sce.trustAsHtml(
           
-            $(element).select2({width:"200px", 
-                data: orgEmails.values,           
-                formatResult: format,
+            $(element).select2({
+              class: "abtesting-form-element",
+              data: orgEmails.values,
+              formatResult: format,
               formatSelection: format,
               placeholder:"Select reply to address"});
           
@@ -1105,7 +1108,10 @@
     return {
       restrict: 'AE',
       link: function (scope, element, attrs) {
-        $(element).timeEntry({show24Hours: true});
+        $(element).timeEntry({
+          show24Hours: true,
+          showSeconds: true,
+        });
       }
     }
   });
diff --git a/partials/abtesting/from_name.html b/partials/abtesting/from_name.html
index a398b13ad3..13bd32ac28 100755
--- a/partials/abtesting/from_name.html
+++ b/partials/abtesting/from_name.html
@@ -1,50 +1,50 @@
 <table class="form-layout-compressed">
   <tbody>
   <tr>
-    <td class="label">From E-mail Address A</td>
-    <td>
-      <select style="width: 200px" ng-model="mailA.from_email" ng-options="frm.email as frm.email for frm in eMailing" required>
+    <td class="abtesting-form-label label">From E-mail Address A</td>
+    <td class="abtesting-form-element">
+      <select ng-model="mailA.from_email" ng-options="frm.email as frm.email for frm in eMailing" required>
         <option value="">-none-</option>
       </select>
     </td>
   </tr>
   <tr>
-    <td class="label">From E-mail Address B</td>
-    <td>
-      <select style="width: 200px" ng-model="mailB.from_email" ng-options="frm.email as frm.email for frm in eMailing" required>
+    <td class="abtesting-form-label label">From E-mail Address B</td>
+    <td class="abtesting-form-element">
+      <select ng-model="mailB.from_email" ng-options="frm.email as frm.email for frm in eMailing" required>
         <option value="">-none-</option>
       </select>
     </td>
   </tr>
   <tr>
-    <td class="label">Reply to E-mail Address</td>
-    <td>
-      <select style="width: 200px" ng-model="mailA.replyto_email"
+    <td class="abtesting-form-label label">Reply to E-mail Address</td>
+    <td class="abtesting-form-element">
+      <select ng-model="mailA.replyto_email"
               ng-options="frm.email as frm.email for frm in eMailing" >
         <option value="">-none-</option>
       </select>
     </td>
   </tr>
   <tr>
-    <td class="label">Mailing Subject</td>
-    <td>
+    <td class="abtesting-form-label label">Mailing Subject</td>
+    <td class="abtesting-form-element">
       <input id= "subfrom" placeholder="Enter Subject" name="subject" type="text" ng-model="mailA.subject" required>
     </td>
   </tr>
   <tr>
-  <td class="label">Mailing Subject Token</td>
-  <td>
-    <input type="hidden" groupselect id= "subgroupfrom" ng-model="token" ></input>
+  <td class="abtesting-form-label label">Mailing Subject Token</td>
+  <td class="abtesting-form-element">
+    <input type="hidden" groupselect id= "subgroupfrom" ng-model="token" >
   </td>
   </tr>
   <tr>
-    <td class="label" style="color:red" ng-show="mailing_form.subject.$invalid">
+    <td class="abtesting-form-label label" style="color:red" ng-show="mailing_form.subject.$invalid">
       Mailing subject required.
     </td>
   </tr>
   <tr>
-    <td class="label">Use Template</td>
-    <td>
+    <td class="abtesting-form-label label">Use Template</td>
+    <td class="abtesting-form-element">
       <select ng-change="tmp(mailA.msg_template_id,3)" ng-model="mailA.msg_template_id"
               ng-options="mstemp.id as mstemp.msg_title for mstemp in tmpList" >
         <option value="">-none-</option>
diff --git a/partials/abtesting/subject_lines.html b/partials/abtesting/subject_lines.html
index 45678192a7..f07aac77b9 100755
--- a/partials/abtesting/subject_lines.html
+++ b/partials/abtesting/subject_lines.html
@@ -1,52 +1,52 @@
 <table class="form-layout-compressed">
   <tbody>
   <tr>
-    <td class="label">From E-mail Address</td>
-    <td>
-      <select style="width: 200px" ng-model="mailA.from_email" ng-options="frm.email as frm.email for frm in eMailing" >
+    <td class="abtesting-form-label label">From E-mail Address </td>
+    <td class="abtesting-form-element">
+      <select ng-model="mailA.from_email" ng-options="frm.email as frm.email for frm in eMailing" >
         <option value="">-none-</option>
       </select>
     </td>
   </tr>
   <tr>
-    <td class="label">Reply to E-mail Address</td>
-    <td>
+    <td class="abtesting-form-label label">Reply to E-mail Address</td>
+    <td class="abtesting-form-element">
       <input type="hidden" replytoselect id= "replyToEmail"   ng-model="mailA.replyto_email"
               ng-options="frm.email as frm.email for frm in eMailing" />
     </td>
   </tr>
   <tr>
-    <td class="label">Mailing Subject A</td>
-    <td>
+    <td class="abtesting-form-label label">Mailing Subject A</td>
+    <td class="abtesting-form-element">
       <input placeholder="Enter Subject A" id="suba" name="subject_a" type="text" ng-model="mailA.subject" required/>
     </td>
   </tr>
   <tr>
-    <td class="label">Mailing Subject Token</td>
-    <td>
-      <input type="hidden" groupselect id= "subgroupsuba"  ></input>
+    <td class="abtesting-form-label label">Mailing Subject Token</td>
+    <td class="abtesting-form-element">
+      <input type="hidden" groupselect id="subgroupsuba"></input>
     </td>
   </tr>
   <tr>
-    <td class="label">Mailing Subject B</td>
-    <td>
+    <td class="abtesting-form-label label">Mailing Subject B</td>
+    <td class="abtesting-form-element">
       <input placeholder="Enter Subject B" id="subb" name="subject_b" type="text" ng-model="mailB.subject" required/>
     </td>
   </tr>
   <tr>
-    <td class="label">Mailing Subject Token</td>
-    <td>
+    <td class="abtesting-form-label label">Mailing Subject Token</td>
+    <td class="abtesting-form-element">
       <input type="hidden" groupselect id= "subgroupsubb"  ></input>
     </td>
   </tr>
   <tr>
-    <td class="label" style="color:red" ng-show="mailing_form.subject.$invalid">
+    <td class="abtesting-form-label label" style="color:red" ng-show="mailing_form.subject.$invalid">
       Mailing subject required.
     </td>
   </tr>
   <tr>
-    <td class="label">Use Template</td>
-    <td>
+    <td class="abtesting-form-label label">Use Template</td>
+    <td class="abtesting-form-element">
       <select ng-change="tmp(mailA.msg_template_id,3)" ng-model="mailA.msg_template_id"
               ng-options="mstemp.id as mstemp.msg_title for mstemp in tmpList" >
         <option value="">-none-</option>
diff --git a/partials/abtesting/tab1.html b/partials/abtesting/tab1.html
index c8a3884592..3fbc04214d 100755
--- a/partials/abtesting/tab1.html
+++ b/partials/abtesting/tab1.html
@@ -1,6 +1,6 @@
 <form name="tab1Form" unsaved-warning-form>
   <div class="crm-block crm-form-block crmABTesting">
-    <br><h3> What would you like to name the Test?</h3><p>
+    <br><h3> What would you like to name the test?</h3><p>
     &nbsp&nbsp<input type="text" ng-model="currentABTest.name" name="abname" class="big crm-form-text" required>
     <span ng-show="(!currentABTest.name.length && !tab1Form.abname.$pristine)">  *This field is required</span>
     <br>
diff --git a/partials/abtesting/tab3.html b/partials/abtesting/tab3.html
index 145ed874e3..c69218a030 100755
--- a/partials/abtesting/tab3.html
+++ b/partials/abtesting/tab3.html
@@ -1,6 +1,6 @@
 <form name="tab3Form" unsaved-warning-form>
   <div class="crm-block crm-form-block crmABTesting">
-    <h3>Select the groups you would like to add</h3><br>
+    <h3>Select the groups you would like to add</h3>
     &nbsp<br>
     <select multiple chsgroup ng-model="sparestuff.allgroups" required>
       <option id="1" ng-repeat="grp in groups" value="{{grp.id}} civicrm_group include {{grp.title}}"> {{grp.title}}
@@ -9,21 +9,27 @@
       <option ng-repeat="ml in mailList" value="{{ml.id}} civicrm_mailing include {{ml.title}}"> {{ml.name}}</option>
       <option ng-repeat="ml in mailList" value="{{ml.id}} civicrm_mailing exclude {{ml.title}}"> {{ml.name}}</option>
     </select>
-    <br> <br><br><br>
-
+    <br> <br>
     <h3>Select the size of your test group</h3><br>
     &nbsp Percentage Selected - {{currentABTest.group_percentage}}%
 
     <div sliderbar id="trial" style="margin: 10px;" required></div>
 
-    <h3>How will the winner be decided</h3><br>
-    &nbsp <input type="radio" ng-model="currentABTest.winner_criteria_id" value=1 name="cri" required > Open <br/><br>
-    &nbsp <input type="radio" ng-model="currentABTest.winner_criteria_id" value=2 name="cri" >
-    Total Unique Clicks <br/><br>
-    &nbsp <input type="radio" ng-model="currentABTest.winner_criteria_id" value=3 name="cri"> Total
-    Clicks on a particular link <br/>
+    <br><h3>How will the winner be decided (metric)</h3><br>
+    <label>
+      &nbsp <input type="radio" ng-model="currentABTest.winner_criteria_id" value=1 name="cri" required >
+      Opens <br/><br>
+    </label>
+    <label>
+      &nbsp <input type="radio" ng-model="currentABTest.winner_criteria_id" value=2 name="cri" >
+      Total Unique Clicks <br/><br>
+    </label>
+    <label>
+      &nbsp <input type="radio" ng-model="currentABTest.winner_criteria_id" value=3 name="cri"> Total
+      Clicks on a particular link
+    </label>
     &nbsp &nbsp &nbsp &nbsp<input type="text"  ng-show="currentABTest.winner_criteria_id==3" ng-model="currentABTest.acturl">
-    <br>
+    <br><br>
 
     <h3>Declare the winner by when?</h3><br>
     <table>
diff --git a/partials/abtesting/tab4.html b/partials/abtesting/tab4.html
index d0f7ea0206..0ba22dab0b 100755
--- a/partials/abtesting/tab4.html
+++ b/partials/abtesting/tab4.html
@@ -57,8 +57,12 @@
     <h3>When to Start</h3><br>
 
     <div>
-      <input type="radio" name="Start" ng-model="start" value="now" ng-checked="true"> Now &nbsp
-      <input type="radio" name="Start" ng-model="start" value="later"> Later
+      <label>
+        <input type="radio" name="Start" ng-model="start" value="now" ng-checked="true"> Now &nbsp
+      </label>
+      <label>
+        <input type="radio" name="Start" ng-model="start" value="later"> Later
+      </label>
       <div ng-show="start=='later'">
       &nbsp &nbsp <input type="text" class="dateplugin"  ng-model="send_date" datepick >
       &nbsp &nbsp Time :<input type="text" placeholder="hh:mm" ng-model="currentABTest.latertime"  checktimeentry >
diff --git a/partials/abtesting/two_emails.html b/partials/abtesting/two_emails.html
index 630353b5df..615bdf04f9 100755
--- a/partials/abtesting/two_emails.html
+++ b/partials/abtesting/two_emails.html
@@ -9,33 +9,33 @@
     <table class="form-layout-compressed">
       <tbody>
       <tr>
-        <td class="label">From E-mail Address</td>
-        <td>
-          <select style="width: 200px" ng-model="mailA.from_email"
+        <td class="abtesting-form-label label">From E-mail Address</td>
+        <td class="abtesting-form-element">
+          <select ng-model="mailA.from_email"
                   ng-options="frm.email as frm.email for frm in eMailing" >
             <option value="">-none-</option>
           </select>
         </td>
       </tr>
       <tr>
-        <td class="label">Reply to E-mail Address</td>
-        <td>
-          <select style="width: 200px" ng-model="mailA.replyto_email"
+        <td class="abtesting-form-label label">Reply to E-mail Address</td>
+        <td  class="abtesting-form-element">
+          <select ng-model="mailA.replyto_email"
                   ng-options="frm.email as frm.email for frm in eMailing">
             <option value="">-none-</option>
           </select>
         </td>
       </tr>
       <tr>
-        <td class="label">Mailing Subject</td>
-        <td>
+        <td class="abtesting-form-label label">Mailing Subject</td>
+        <td class="abtesting-form-element">
           <input placeholder="Enter Subject" name="subject" id="twomaila" type="text" ng-model="mailA.subject" required>
         </td>
       </tr>
       <tr>
-        <td class="label">Mailing Subject Token</td>
-        <td>
-          <input type="hidden" groupselect id= "subgrouptwoa"  ></input>
+        <td class="abtesting-form-label label">Mailing Subject Token</td>
+        <td class="abtesting-form-element">
+          <input type="hidden" groupselect id= "subgrouptwoa">
         </td>
       </tr>
 
@@ -45,8 +45,8 @@
         </td>
       </tr>
       <tr>
-        <td class="label">Use Template</td>
-        <td>
+        <td class="abtesting-form-label label">Use Template</td>
+        <td class="abtesting-form-element">
           <select ng-change="tmp(mailA.msg_template_id,1)" ng-model="mailA.msg_template_id"
                   ng-options="mstemp.id as mstemp.msg_title for mstemp in tmpList">
             <option value="">-none-</option>
@@ -102,18 +102,18 @@
     <div class="crm-accordion-wrapper collapsed">
       <div class="crm-accordion-header">Header and Footer</div>
       <div class="crm-accordion-body">
-        <table>
+        <table class="form-layout-compressed">
           <tr>
-            <td class="label">Mailing Header</td>
-            <td>
+            <td class="abtesting-form-label label">Mailing Header</td>
+            <td class="abtesting-form-element">
               <select ng-model="mailA.header_id" ng-options="hf.id as hf.name for hf in headerfooter| filter:isHeader">
                 <option value="">-none-</option>
               </select>
             </td>
           </tr>
           <tr>
-            <td class="label">Mailing Footer</td>
-            <td>
+            <td class="abtesting-form-label label">Mailing Footer</td>
+            <td class="abtesting-form-element">
               <select ng-model="mailA.footer_id" ng-options="f.id as f.name for f in headerfooter| filter:isFooter">
                 <option value="">-none-</option>
               </select>
@@ -130,43 +130,43 @@
     <table class="form-layout-compressed">
       <tbody>
       <tr>
-        <td class="label">From E-mail Address</td>
-        <td>
-          <select style="width: 200px" ng-model="mailB.from_email"
+        <td class="abtesting-form-label label">From E-mail Address</td>
+        <td class="abtesting-form-element">
+          <select ng-model="mailB.from_email"
                   ng-options="frm.email as frm.email for frm in eMailing">
             <option value="">-none-</option>
           </select>
         </td>
       </tr>
       <tr>
-        <td class="label">Reply to E-mail Address</td>
-        <td>
-          <select style="width: 200px" ng-model="mailB.replyto_email"
+        <td class="abtesting-form-label label">Reply to E-mail Address</td>
+        <td class="abtesting-form-element">
+          <select ng-model="mailB.replyto_email"
                   ng-options="frm.email as frm.email for frm in eMailing">
             <option value="">-none-</option>
           </select>
         </td>
       </tr>
       <tr>
-        <td class="label">Mailing Subject</td>
-        <td>
+        <td class="abtesting-form-label label">Mailing Subject</td>
+        <td class="abtesting-form-element">
           <input placeholder="Enter Subject" id = "twomailb" name="subject" type="text" ng-model="mailB.subject"/>
         </td>
       </tr>
       <tr>
-        <td class="label">Mailing Subject Token</td>
-        <td>
-          <input type="hidden" groupselect id= "subgrouptwob"  ></input>
+        <td class="abtesting-form-label label">Mailing Subject Token</td>
+        <td  class="abtesting-form-element">
+          <input type="hidden" groupselect id= "subgrouptwob">
         </td>
       </tr>
       <tr>
-        <td class="label" style="color:red" ng-show="mailing_form.subject.$invalid">
+        <td class="abtesting-form-label label" style="color:red" ng-show="mailing_form.subject.$invalid">
           Mailing subject required.
         </td>
       </tr>
       <tr>
-        <td class="label">Use Template</td>
-        <td>
+        <td class="abtesting-form-label label">Use Template</td>
+        <td class="abtesting-form-element">
           <select ng-change="tmp(mailB.msg_template_id,2)" ng-model="mailB.msg_template_id"
                   ng-options="mstemp.id as mstemp.msg_title for mstemp in tmpList">
             <option value="">-none-</option>
@@ -218,18 +218,18 @@
       <div class="crm-accordion-header">Header and Footer</div>
       <div class="crm-accordion-body">
         <body>
-        <table>
+        <table class="form-layout-compressed">
           <tr>
-            <td class="label">Mailing Header</td>
-            <td>
+            <td class="abtesting-form-label label">Mailing Header</td>
+            <td class="abtesting-form-element">
               <select ng-model="mailB.header_id" ng-options="hf.id as hf.name for hf in headerfooter| filter:isHeader">
                 <option value="">-none-</option>
               </select>
             </td>
           </tr>
           <tr>
-            <td class="label">Mailing Footer</td>
-            <td>
+            <td class="abtesting-form-label label">Mailing Footer</td>
+            <td class="abtesting-form-element">
               <select ng-model="mailB.footer_id" ng-options="f.id as f.name for f in headerfooter| filter:isFooter">
                 <option value="">-none-</option>
               </select>
-- 
2.25.1