30849, 31461 colors in 2 columns and collapsible fieldset

diff --git a/js/createwidget.js b/js/createwidget.js
index 85e728c76efe410d90aadc5ab3a822d0cbee2a8d..b5a1907b9061ab8458d32618ee250f09f33350cb 100644 (file)
--- a/js/createwidget.js
+++ b/js/createwidget.js
@@ -12,12 +12,6 @@ cj(function ( $ ) {
     } else {
       $('#embd_code').parents('.crm-section').hide();
     }
-    
-    $('#image').after('<label><br><SMALL>Select a smaller image than Size variant</SMALL></label>');
-    $('#logo_image').after('<label><br><SMALL>Select smaller image appropriate for logo</SMALL></label>');
-    $('#email_signup_group_id').after("<label><br><SMALL>Those groups that are 'Mailing List' selected are shown.</SMALL></label>");
-    $('#size_variant').after("<label><br><SMALL>Fixed width. Height depends on what contents selected.</SMALL></label>");
-    $('#hide_border').after("<label><br>To get transparent background give <strong>none</strong> in the Background color field.</label>");
   }
   $(document).ready(setState)
   $('#override').click(setState);

diff --git a/templates/CRM/Wci/Form/CreateWidget.hlp b/templates/CRM/Wci/Form/CreateWidget.hlp
new file mode 100644 (file)
index 0000000..bae916b
--- /dev/null
+++ b/templates/CRM/Wci/Form/CreateWidget.hlp
@@ -0,0 +1,19 @@
+{htxt id="hide-border"}
+{ts}To get transparent background give <strong>none</strong> in the <i>Background color</i> field{/ts}
+{/htxt}
+
+{htxt id="size_variant"}
+{ts}Fixed width. Height depends on what contents selected.{/ts}
+{/htxt}
+
+{htxt id="email_signup_group_id"}
+{ts}Those groups that have 'Mailing List' selected are shown.{/ts}
+{/htxt}
+
+{htxt id="logo_image"}
+{ts}Select smaller image appropriate for logo{/ts}
+{/htxt}
+
+{htxt id="image"}
+{ts}Select a smaller image than Size variant{/ts}
+{/htxt}

diff --git a/templates/CRM/Wci/Form/CreateWidget.tpl b/templates/CRM/Wci/Form/CreateWidget.tpl
index 137e1c3c0dff8caa1ac48acc5fbc4ee417817af7..47f0c6f548d27db6c551db435ae106f90282410d 100644 (file)
--- a/templates/CRM/Wci/Form/CreateWidget.tpl
+++ b/templates/CRM/Wci/Form/CreateWidget.tpl
@@ -1,5 +1,5 @@
 {* HEADER *}
-<div class="crm-block crm-form-block">
+<div class="crm-block crm-form-block ">
   <div class="crm-submit-buttons">
   {include file="CRM/common/formButtons.tpl" location="top"}
   </div>
@@ -27,23 +27,154 @@
           <div class="clear"></div>
     </div>
   {/if}
-  
-  {* FIELD EXAMPLE: OPTION 1 (AUTOMATIC LAYOUT) *}
 
-  {foreach from=$elementNames item=elementName}
-    <div class="crm-section">
-      <div class="label">{$form.$elementName.label}</div>
-      <div class="content">{$form.$elementName.html}</div>
-      <div class="clear"></div>
-    </div>
-  {/foreach}
-  
-  {* FIELD EXAMPLE: OPTION 2 (MANUAL LAYOUT)
+<div class="crm-section">
+  <div class="label">{$form.title.label}</div>
+  <div class="content">{$form.title.html}</div>
+  <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="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="clear"></div>
+</div>
+<div class="crm-section">
+  <div class="label">{$form.button_link_to.label}</div>
+  <div class="content">{$form.button_link_to.html}</div>
+  <div class="clear"></div>
+</div>
+<div class="crm-section">
+  <div class="label">{$form.button_title.label}</div>
+  <div class="content">{$form.button_title.html}</div>
+  <div class="clear"></div>
+</div>
+<div class="crm-section">
+  <div class="label">{$form.progress_bar.label}</div>
+  <div class="content">{$form.progress_bar.html}</div>
+  <div class="clear"></div>
+</div>
+<div class="crm-section">
+  <div class="label">{$form.show_pb_perc.label}</div>
+  <div class="content">{$form.show_pb_perc.html}</div>
+  <div class="clear"></div>
+</div>
+<div class="crm-section">
+  <div class="label">{$form.description.label}</div>
+  <div class="content">{$form.description.html}</div>
+  <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="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="clear"></div>
+</div>
+
+<div class="crm-section">
+<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>
+  </tr>
+  <tr>
+   <td>{$form.hide_title.html}</td> <td>{$form.hide_border.html}</td> <td>{$form.hide_pbcap.html}</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>
-      <span>{$form.favorite_color.label}</span>
-      <span>{$form.favorite_color.html}</span>
-    </div>
 
   {* FOOTER *}
 
@@ -51,3 +182,19 @@
   {include file="CRM/common/formButtons.tpl" location="bottom"}
   </div>
 </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>
+{/literal}