abtesting - Fixes to several interface issues.
authorVitor <vitor@futurefirst.org.uk>
Thu, 2 Oct 2014 13:10:18 +0000 (14:10 +0100)
committerVitor <vitor@futurefirst.org.uk>
Thu, 2 Oct 2014 13:10:18 +0000 (14:10 +0100)
css/angular-crmMailingAB.css
js/angular-crmMailingAB.js
partials/abtesting/from_name.html
partials/abtesting/subject_lines.html
partials/abtesting/tab1.html
partials/abtesting/tab3.html
partials/abtesting/tab4.html
partials/abtesting/two_emails.html

index 0dc5927df3a21642b62abb0477b6a1ccaad703ff..f39411d14be3df1a86196b8d7913830088ea01dd 100644 (file)
@@ -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
index c377ad8d16ba7b073e5700ba2dccee113a9d9cf5..91bffd3f7708a2c546facec473f899b130d20d08 100755 (executable)
       if ($scope.preview == true) {
         $('#prevmail').dialog({
           title: 'Preview Mailing',
-          width: 1080,
-          height: 700,
+          width: 1000,
+          height: 500,
           closed: false,
           cache: false,
           modal: true,
     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()');
           "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"});
           
     return {
       restrict: 'AE',
       link: function (scope, element, attrs) {
-        $(element).timeEntry({show24Hours: true});
+        $(element).timeEntry({
+          show24Hours: true,
+          showSeconds: true,
+        });
       }
     }
   });
index a398b13ad3c49264f12d36d247a3eaa582f87e79..13bd32ac287adb8e10079a01c70fdb29f43254f2 100755 (executable)
@@ -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>
index 45678192a7b3c6b7081c620f7053f73cbfc93968..f07aac77b91ed32c586dd0ae313528aaf101f0db 100755 (executable)
@@ -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>
index c8a3884592eca38b77f49bd54d8bb2ef76a33a05..3fbc04214db5918dce8a58cf8a99ac65918556fb 100755 (executable)
@@ -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>
index 145ed874e33e67c480e7ebf9482b8ed6f72da379..c69218a030ecff3b32b5d9f6b67a05430fdf522e 100755 (executable)
@@ -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>
index d0f7ea0206584d82483ebe804488989f671be3c3..0ba22dab0b0242c0d4d96208112c8807872a41ac 100755 (executable)
     <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 >
index 630353b5dff09a47cd4fe723313b1d1fd9f216c6..615bdf04f9a1eb974f829752052c6c0e374417bb 100755 (executable)
@@ -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>
     <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>
     <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>
       <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>