Fixed issues in create widget template.

Modified the template to correct the order of text fields.
Fixed the js issue with accordion.

diff --git a/templates/CRM/Wci/Form/CreateWidget.tpl b/templates/CRM/Wci/Form/CreateWidget.tpl
index 47f0c6f548d27db6c551db435ae106f90282410d..1296eab71e850b4003aa1c7649c98a7b644445ff 100644 (file)
--- a/templates/CRM/Wci/Form/CreateWidget.tpl
+++ b/templates/CRM/Wci/Form/CreateWidget.tpl
@@ -34,13 +34,13 @@
   <div class="clear"></div>
 </div>  
 <div class="crm-section">
-  <div class="label">{$form.logo_image.label}{help id="logo_image" file="CRM/Wci/Form/CreateWidget"}</div>
-  <div class="content">{$form.logo_image.html}</div>
+  <div class="label">{$form.logo_image.label}</div>
+  <div class="content">{$form.logo_image.html} {help id="logo_image" file="CRM/Wci/Form/CreateWidget"}</div>
   <div class="clear"></div>
 </div>  
 <div class="crm-section">
-  <div class="label">{$form.image.label}{help id="image" file="CRM/Wci/Form/CreateWidget"}</div>
-  <div class="content">{$form.image.html}</div>
+  <div class="label">{$form.image.label}</div>
+  <div class="content">{$form.image.html} {help id="image" file="CRM/Wci/Form/CreateWidget"}</div>
   <div class="clear"></div>
 </div>
 <div class="crm-section">
@@ -69,111 +69,176 @@
   <div class="clear"></div>
 </div>
 <div class="crm-section">
-  <div class="label">{$form.email_signup_group_id.label}{help id="email_signup_group_id" file="CRM/Wci/Form/CreateWidget"}</div>
-  <div class="content">{$form.email_signup_group_id.html}</div>
+  <div class="label">{$form.email_signup_group_id.label}</div>
+  <div class="content">{$form.email_signup_group_id.html} {help id="email_signup_group_id" file="CRM/Wci/Form/CreateWidget"}</div>
   <div class="clear"></div>
 </div>
+
+<div class="crm-section">
+  <div class="label">{$form.newsletter_text.label}</div>
+  <div class="content">{$form.newsletter_text.html} </div>
+  <div class="clear"></div>
+</div>
+
 <div class="crm-section">
-  <div class="label">{$form.size_variant.label}{help id="size_variant" file="CRM/Wci/Form/CreateWidget"}</div>
-  <div class="content">{$form.size_variant.html}</div>
+  <div class="label">{$form.size_variant.label}</div>
+  <div class="content">{$form.size_variant.html} {help id="size_variant" file="CRM/Wci/Form/CreateWidget"}</div>
   <div class="clear"></div>
 </div>
 
 <div class="crm-section">
+<div class="label">Widget options</div>
 <div class="content">
 <table class="form-layout-compressed">
   <tr>
-   <td>{$form.hide_title.label}</td> <td>{$form.hide_border.label}{help id="hide-border" file="CRM/Wci/Form/CreateWidget"}</td> <td>{$form.hide_pbcap.label}</td>
+   <td>{$form.hide_title.html}</td>
+   <td>{$form.hide_title.label}</td> 
   </tr>
   <tr>
-   <td>{$form.hide_title.html}</td> <td>{$form.hide_border.html}</td> <td>{$form.hide_pbcap.html}</td>
+   <td>{$form.hide_border.html}</td>
+   <td>{$form.hide_border.label} {help id="hide-border" file="CRM/Wci/Form/CreateWidget"}</td>
+  </tr>  
+  <tr>
+   <td>{$form.hide_pbcap.html}</td>
+   <td>{$form.hide_pbcap.label}</td>
   </tr>  
 </table>
   </div>
 </div>
 
-
-<div class="crm-accordion-wrapper collapsed" >
-  <div class="crm-accordion-header" id="advanced" collapsed='true'>
-   Advanced
-   </div><!-- /.crm-accordion-header -->
-   <div class="crm-accordion-body">
-     <div class="crm-block crm-form-block crm-form-title-here-form-block">
-         
-      <div class="crm-section">
-      <table class="form-layout-compressed">
-      <div class="content">
-      <tr>
-        <td>{$form.color_title.label}</td>
-        <td>{$form.color_title.html}</td>
-
-        <td>{$form.color_title_bg.label}</td>
-        <td>{$form.color_title_bg.html}</td>
-        
-        <div class="clear"></div>
-      </tr>
-      <tr>
-        <td>{$form.color_bar.label}</td>
-        <td>{$form.color_bar.html}</td>
-
-        <td>{$form.color_bar_bg.label}</td>
-        <td>{$form.color_bar_bg.html}</td>
-      </tr>
-      <tr>
-        <td>{$form.color_widget_bg.label}</td>
-        <td>{$form.color_widget_bg.html}</td>
-
-        <td>{$form.color_description.label}</td>
-        <td>{$form.color_description.html}</td>
-      </tr>
-      <tr>
-        <td>{$form.color_border.label}</td>
-        <td>{$form.color_border.html}</td>
-
-        <td>{$form.color_button.label}</td>
-        <td>{$form.color_button.html}</td>
-      </tr>
-      <tr>
-        <td>{$form.color_button_bg.label}</td>
-        <td>{$form.color_button_bg.html}</td>
-
-        <td>{$form.color_btn_newsletter.label}</td>
-        <td>{$form.color_btn_newsletter.html}</td>
-      </tr>
-      <tr>
-        <td>{$form.color_btn_newsletter_bg.label}</td>
-        <td>{$form.color_btn_newsletter_bg.html}</td>
-
-        <td>{$form.newsletter_text.label}</td>
-        <td>{$form.newsletter_text.html}</td>
-      </tr>
-      <tr>
-        <td>{$form.color_newsletter_text.label}</td>
-        <td>{$form.color_newsletter_text.html}</td>
-
-      </tr>
-      </div>
-      </table>  
-      </div>
-
-<div class="crm-section">
-  <div class="label">{$form.style_rules.label}</div>
-  <div class="content">{$form.style_rules.html}</div>
-  <div class="clear"></div>
-</div>         
-<div class="crm-section">
-  <div class="label">{$form.override.label}</div>
-  <div class="content">{$form.override.html}</div>
-  <div class="clear"></div>
-</div>
-<div class="crm-section">
-  <div class="label">{$form.custom_template.label}</div>
-  <div class="content">{$form.custom_template.html}</div>
-  <div class="clear"></div>
-</div>
-     </div><!-- / .crm-block -->
-   </div><!-- /.crm-accordion-body -->
-</div><!-- /.crm-accordion-wrapper -->
+<div class="crm-accordion-wrapper">
+      <div class="crm-accordion-header">
+        Edit Widget color
+      </div><!-- /.crm-accordion-header -->
+      <div class="crm-accordion-body">
+        <div class="crm-block crm-form-block crm-form-title-here-form-block">
+          <div class="crm-section">
+            <table class="form-layout-compressed">
+              <tr>
+                <td>
+                  {$form.color_title.label}
+                </td>
+                <td>
+                  {$form.color_title.html}
+                </td>
+                <td>
+                  {$form.color_btn_newsletter_bg.label}
+                </td>
+                <td>
+                  {$form.color_btn_newsletter_bg.html}
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  {$form.color_title_bg.label}
+                </td>
+                <td>
+                  {$form.color_title_bg.html}
+                </td>
+                <td>
+                  {$form.color_btn_newsletter.label}
+                </td>
+                <td>
+                  {$form.color_btn_newsletter.html}
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  {$form.color_widget_bg.label}
+                </td>
+                <td>
+                  {$form.color_widget_bg.html}
+                </td>
+                <td>
+                  {$form.color_newsletter_text.label}
+                </td>
+                <td>
+                  {$form.color_newsletter_text.html}
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  {$form.color_border.label}
+                </td>
+                <td>
+                  {$form.color_border.html}
+                </td>
+                <td>
+                  {$form.color_description.label}
+                </td>
+                <td>
+                  {$form.color_description.html}
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  {$form.color_button.label}
+                </td>
+                <td>
+                  {$form.color_button.html}
+                </td>
+                <td>
+                  {$form.color_bar.label}
+                </td>
+                <td>
+                  {$form.color_bar.html}
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  {$form.color_button_bg.label}
+                </td>
+                <td>
+                  {$form.color_button_bg.html}
+                </td>
+                <td>
+                  {$form.color_bar_bg.label}
+                </td>
+                <td>
+                  {$form.color_bar_bg.html}
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div><!-- / .crm-block -->
+      </div><!-- /.crm-accordion-body -->
+    </div><!-- /.crm-accordion-wrapper -->
+    <div class="crm-accordion-wrapper collapsed">
+      <div class="crm-accordion-header">
+        Advanced - Override Widget style and template
+      </div><!-- /.crm-accordion-header -->
+      <div class="crm-accordion-body">
+      <div class="crm-block crm-form-block crm-form-title-here-form-block">
+        <div class="crm-section">
+          <div class="label">
+            {$form.style_rules.label}
+          </div>
+          <div class="content">
+            {$form.style_rules.html}
+          </div>
+          <div class="clear"></div>
+        </div>
+        <div class="crm-section">
+          <div class="label">
+            {$form.override.label}
+          </div>
+          <div class="content">
+            {$form.override.html}
+          </div>
+          <div class="clear"></div>
+        </div>
+        <div class="crm-section">
+          <div class="label">
+            {$form.custom_template.label}
+          </div>
+          <div class="content">
+            {$form.custom_template.html}
+          </div>
+          <div class="clear"></div>
+        </div>
+        </div><!-- /.crm-block -->
+      </div><!-- /.crm-accordion-body -->
+    </div><!-- /.crm-accordion-wrapper -->
 
 
   {* FOOTER *}
@@ -184,17 +249,9 @@
 </div>
 
 {literal}
-<script type="text/javascript" >
-cj(function($) {
-  $('#advanced').on('click', function( e ) {
-    if($(this).attr('collapsed') == 'true') {
-      $('.crm-accordion-wrapper.collapsed').crmAccordionToggle();
-      $(this).attr('collapsed', 'false');
-    } else {
-      $('.crm-accordion-wrapper:not(.collapsed)').crmAccordionToggle();
-      $(this).attr('collapsed', 'true');
-    }
-  });
-});  
+<script type="text/javascript">
+cj(function() {
+   cj().crmAccordions();
+});
 </script>
 {/literal}