#29801 - Improved form and widget look and feel.
authorManoj K <manoj.k@zyxware.com>
Tue, 4 Nov 2014 13:21:19 +0000 (18:51 +0530)
committerManoj K <manoj.k@zyxware.com>
Tue, 4 Nov 2014 13:21:19 +0000 (18:51 +0530)
CRM/Wci/BAO/Widget.php
CRM/Wci/Form/CreateWidget.php
CRM/Wci/Form/ProgressBar.php
templates/CRM/Wci/Form/CreateWidget.tpl
templates/CRM/Wci/Form/ProgressBar.tpl
templates/CRM/Wci/Page/wciwidget.tpl

index 3cedbec48c0a7550718c3037938e22b61440c340..c1823a61aa57f6c1a0bdba4821c9d387121cce43 100644 (file)
@@ -158,7 +158,7 @@ class CRM_Wci_BAO_Widget extends CRM_Wci_DAO_Widget {
       $data["widgetId"] = $widgetId;
       $data["override"] = $dao->override;
       $data["color_bar"] = $dao->color_progress_bar;
-      $data["emailSignupGroupFormURL"] = CRM_Utils_System::baseCMSURL() . 'civicrm/mailing/subscribe';
+      $data["emailSignupGroupFormURL"] = CRM_Utils_System::baseCMSURL() . '/civicrm/profile/create?reset=1&amp;gid=15';
     }
     return $data;
   }
index b746bd8f976bc1aa36bbf48b7f74cc7292833745..1a1abd0e7ab3f8cbdb2a1dc412d90f9da5a6c9d2 100644 (file)
@@ -33,17 +33,17 @@ class CRM_Wci_Form_CreateWidget extends CRM_Core_Form {
       'color_title_bg' => array(ts('Title background color'),
         'text',
         FALSE,
-        '#FFFFFF',
+        '#BF0F0F',
       ),
       'color_bar' => array(ts('Progress Bar Color'),
         'text',
         FALSE,
-        '#FFFFFF',
+        '#BF0F0F',
       ),
       'color_widget_bg' => array(ts('Background color'),
         'text',
         FALSE,
-        '#96C0E7',
+        '#FFFFFF',
       ),
       'color_description' => array(ts('Description color'),
         'text',
@@ -53,7 +53,7 @@ class CRM_Wci_Form_CreateWidget extends CRM_Core_Form {
       'color_border' => array(ts('Border color'),
         'text',
         FALSE,
-        '#96C0E7',
+        '#BF0F0F',
       ),
       'color_button' => array(ts('Button text color'),
         'text',
@@ -63,12 +63,7 @@ class CRM_Wci_Form_CreateWidget extends CRM_Core_Form {
       'color_button_bg' => array(ts('Button background color'),
         'text',
         FALSE,
-        '#96C0E7',
-      ),
-      'color_button_bg' => array(ts('Button background color'),
-        'text',
-        FALSE,
-        '#96C0E7',
+        '#BF0F0F',
       ),
       );
   }
@@ -86,17 +81,18 @@ class CRM_Wci_Form_CreateWidget extends CRM_Core_Form {
 
   function buildQuickForm() {
     // add form elements
-    $this->add('text', 'title', ts('Title'),true);
-    $this->add('text', 'logo_image', ts('Logo image'));
-    $this->add('text', 'image', ts('Image'));
+    $this->add('text', 'title', ts('Title'),true)->setSize(45);
+    $this->add('text', 'logo_image', ts('Logo image'))->setSize(45);
+    $this->add('text', 'image', ts('Image'))->setSize(45);
     $this->add('select', 'button_link_to', ts('Contribution button'), getContributionPageOptions());
-    $this->add('text', 'button_title', ts('Contribution button title'));
+    $this->add('text', 'button_title', ts('Contribution button title'))->setSize(45);
     $this->add('select', 'progress_bar', ts('Progress bar'), $this->getProgressBars());
     $this->addWysiwyg('description', ts('Description'), '');
     $this->add('select', 'email_signup_group_id', ts('Newsletter signup'), $this->getGroupOptions());
     $this->add('select', 'size_variant', ts('Size variant'), $this->getSizeOptions());
+    // $fieldset = $this->addElement('fieldset')->setLabel('Advanced Settings');
     foreach ($this->_colorFields as $name => $val) {
-      $this->add($val[1],
+      $this->addElement($val[1],
         $name,
         $val[0],
         $name,
index 6b58eb5484711e5f24775b68d4a0229c2190479d..8e0fcaee1ccf8666d22539fbb30262ced14f77c1 100644 (file)
@@ -100,19 +100,19 @@ class CRM_Wci_Form_ProgressBar extends CRM_Core_Form {
       'progressbar_name', // field name
       'Name', // field label
       true // is required
-    );
+    )->setSize(35);
     $this->add(
       'text', // field type
       'starting_amount', // field name
       'Starting amount', // field label
       true // is required
-    );
+    )->setSize(35);
     $this->add(
       'text', // field type
       'goal_amount', // field name
       'Goal amount', // field label
       true // is required
-    );
+    )->setSize(35);
     
     $this->fillData();
     
index 5737d69a569af96693d9444a552f28d0106b7f24..783b41bdb78060867ed74fc0f6894809852b911e 100644 (file)
@@ -1,76 +1,76 @@
 {* HEADER *}
+<div class="crm-block crm-form-block">
+  <div class="crm-submit-buttons">
+  {include file="CRM/common/formButtons.tpl" location="top"}
+  </div>
 
-<div class="crm-submit-buttons">
-{include file="CRM/common/formButtons.tpl" location="top"}
-</div>
-
-{* FIELD EXAMPLE: OPTION 1 (AUTOMATIC LAYOUT) *}
+  {* 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}
+  {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}
 
-{* {if $form.title.value != ""} *}
-  {php} 
-    if(isset($_REQUEST['id'])) {
-      $wid_id = $_REQUEST['id'];
-      $data = CRM_Wci_BAO_Widget::getWidgetData($wid_id);
-      $template = CRM_Core_Smarty::singleton();
-      $template->assign('wciform', $data);
-      if($data["override"] == 0) {
-        $template->template_dir[] = getWciWidgetTemplatePath();
-        $wcidata = $template->fetch('wciwidget.tpl');
-      } else {
-        $wcidata = $template->fetch('string:' . base64_decode($wid_page[$dao->id]['custom_template']));
+  {if $form.title.value != ""}
+    {php} 
+      if(isset($_REQUEST['id'])) {
+        $wid_id = $_REQUEST['id'];
+        $data = CRM_Wci_BAO_Widget::getWidgetData($wid_id);
+        $template = CRM_Core_Smarty::singleton();
+        $template->assign('wciform', $data);
+        if($data["override"] == 0) {
+          $template->template_dir[] = getWciWidgetTemplatePath();
+          $wcidata = $template->fetch('wciwidget.tpl');
+        } else {
+          $wcidata = $template->fetch('string:' . base64_decode($wid_page[$dao->id]['custom_template']));
+        }
+        $widget_controller_path = getWciWidgetControllerPath();
+        $extension_root_path = getExtensionRootPath();
       }
-      $widget_controller_path = getWciWidgetControllerPath();
-      $extension_root_path = getExtensionRootPath();
-    }
-  {/php}
+    {/php}
 
-  <div class="crm-section">
-    <div class="label">
-      <label for="embd_code">Code to embed:</label>
-    </div>
-    <div class="content">
-      <div class="resizable-textarea">
-        <span>{literal}
-          <textarea rows="5" name="embd_code" id="embd_code" class="form-textarea textarea-processed">
-<script type="text/javascript" src="{/literal}{php}echo $widget_controller_path;{/php}{literal}?widgetId={/literal}{php}echo $wid_id;{/php}{literal}&embed=1"></script>
-<script type="text/javascript" src="{/literal}{php}echo $extension_root_path;{/php}{literal}/extern/wciembed.js"></script>
-<div id='widgetwci'></div></textarea>{/literal}
-          <div class="grippie" style="margin-right: 18px;"></div>
-        </span>
-      </div>
+    <div class="crm-section">
+      <fieldset>
+        <legend>
+          Preview Widget and Get Code
+        </legend>
+        <div class="col1">
+          <div class="description">
+            Click <strong>Save &amp; Preview</strong> to save any changes to your settings, and preview the widget again on this page.
+          </div>
+          <script type="text/javascript" src="{php}echo $widget_controller_path;{/php}?widgetId={php}echo $wid_id;{/php}&embed=0"></script>
+  <script type="text/javascript" src="{php}echo $extension_root_path;{/php}/extern/wciembed.js"></script>
+  <div id='widgetwci'></div>
+        </div>
+        <div class="col2">
+          <div class="description">
+            Add this widget to any web page by copying and pasting the code below.
+          </div>
+          <textarea rows="8" cols="40" name="widget_code" id="widget_code"><script type="text/javascript" src="{php}echo $widget_controller_path;{/php}?widgetId={php}echo $wid_id;{/php}&embed=1"></script>
+  <script type="text/javascript" src="{php}echo $extension_root_path;{/php}/extern/wciembed.js"></script>
+  <div id='widgetwci'></div></textarea>
+          <br>
+          <strong>
+            <a href="#" onclick="CreateWidget.widget_code.select(); return false;">ยป Select Code</a>
+          </strong>
+        </div>
+      </fieldset>
     </div>
-    <div class="clear"></div>
-  </div>
-  <div class="crm-section">
-    <div class="content">
-   {* {include file="CRM/Wci/Page/wciwidget.tpl"} *}
-
-<script type="text/javascript" src="{php}echo $widget_controller_path;{/php}?widgetId={php}echo $wid_id;{/php}&embed=0"></script>
-<script type="text/javascript" src="{/literal}{php}echo $extension_root_path;{/php}{literal}/extern/wciembed.js"></script>
-<div id='widgetwci'></div>
+  {/if}
+  
+  {* FIELD EXAMPLE: OPTION 2 (MANUAL LAYOUT)
 
+    <div>
+      <span>{$form.favorite_color.label}</span>
+      <span>{$form.favorite_color.html}</span>
     </div>
-  </div>
-{* {/if} *}
 
-{* FIELD EXAMPLE: OPTION 2 (MANUAL LAYOUT)
+  {* FOOTER *}
 
-  <div>
-    <span>{$form.favorite_color.label}</span>
-    <span>{$form.favorite_color.html}</span>
+  <div class="crm-submit-buttons">
+  {include file="CRM/common/formButtons.tpl" location="bottom"}
   </div>
-
-{* FOOTER *}
-
-<div class="crm-submit-buttons">
-{include file="CRM/common/formButtons.tpl" location="bottom"}
 </div>
-
index c99bb1f08e51437b96be2bdc42ae14e018c71fbc..eda9b1c42dbbe2a17b68c46b6e5fcaf5d8dbf82c 100644 (file)
@@ -1,27 +1,28 @@
 {* HEADER *}
+<div class="crm-block crm-form-block">
+  <div class="crm-submit-buttons">
+  {include file="CRM/common/formButtons.tpl" location="top"}
+  </div>
 
-<div class="crm-submit-buttons">
-{include file="CRM/common/formButtons.tpl" location="top"}
-</div>
+  {* FIELD EXAMPLE: OPTION 1 (AUTOMATIC LAYOUT) *}
 
-{* 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}
 
-{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)
 
-{* FIELD EXAMPLE: OPTION 2 (MANUAL LAYOUT)
+    <div>
+      <span>{$form.favorite_color.label}</span>
+      <span>{$form.favorite_color.html}</span>
+    </div>
 
-  <div>
-    <span>{$form.favorite_color.label}</span>
-    <span>{$form.favorite_color.html}</span>
+  {* FOOTER *}
+  <div class="crm-submit-buttons">
+  {include file="CRM/common/formButtons.tpl" location="bottom"}
   </div>
-
-{* FOOTER *}
-<div class="crm-submit-buttons">
-{include file="CRM/common/formButtons.tpl" location="bottom"}
 </div>
index 4f61252677cfa876119e8fdf50e3d37a6992def6..1813008cf6eaa2b4a384373e6059c0a4614dc61d 100644 (file)
@@ -8,9 +8,8 @@
         -webkit-border-radius:   4px;
         -khtml-border-radius:   4px;
         border-radius:      4px;
-        border:1px solid #96C0E7;
+        border: 4px solid {/literal}{$wciform.color_border}{literal};
         background-color: {/literal}{$wciform.color_widget_bg}{literal}; /* background color */
-        border-color:{/literal}{$wciform.color_border}{literal}; /* border color */
     }
     
     .crm-wci-widget.thin {
         margin-bottom:.8em;
         text-align:left;
         
-        background-color:{/literal}{$wciform.color_bar}{literal};
+        background-color: #FFFFFF;
         border-color:#CECECE;
     }
     .crm-amount-fill {
-        background-color:#2786C2;
+        background-color:{/literal}{$wciform.color_bar}{literal};
         height:1em;
         display:block;
         -moz-border-radius:   4px;
       text-align: center;
       padding: 10px 20px;
     }
-    #crm_wci_image {
-      margin: auto;
+    .thin #crm_wci_image {
+      width: 100px;
+    }
+    .normal #crm_wci_image {
+      width: 150px;
+    }
+    .wide #crm_wci_image {
+      width: 200px;
+    }
+    #newsletter_msg, #newsletter_mail, #newsletter_submit {
+      text-align: center;
+      margin: 0 auto;
     }
 </style>
 
     </div>
     <div id="crm_wid_{$wciform.widgetId}_campaign" class="crm-campaign">
     </div>
+    {if $wciform.button_title}
     <div class="crm-wci-button-wrapper" id="crm_wid_{$wciform.widgetId}_button">
         <a href='{crmURL p="civicrm/contribute/transact" q="reset=1&id=$cpageId" h=0 a=1 fe=1}' class="crm-wci-button"><span class="crm-wci-button-inner" id="crm_wid_{$wciform.widgetId}_btn_txt">{$wciform.button_title}</span></a>
     </div>
-    
+    {/if}
     {if $wciform.email_signup_group_id}
       {if $embed eq 1 }
-        <form method="get" action="{$wciform.emailSignupGroupFormURL}" name="Subscribe">
+        <form action="{$wciform.emailSignupGroupFormURL}" method="post">
       {/if}
-        <p style="text-align:center; margin: 0;">
+        <p id="newsletter_msg">
           Get the monthly newsletter
         </p>
-          <input type="text" id="frmEmail" name="email" size="10" placeholder="Email id" style="margin: 0 11%; width: 75%;">
-        <p style="text-align: center; margin-top: 10px;">
+        <p id="newsletter_mail">
+          <input id="frmEmail" type="text" name="email-Primary" size="18" maxlength="80" placeholder="email address">
+        </p>
+        <p id="newsletter_submit">
           {if $embed eq 1 }
-            <input type="submit" name="_qf_Subscribe_next" value="Subscribe Me">
+            <input type="submit" name="_qf_Edit_next" value="Subscribe me">
           {else}
-            <input type="button" name="_qf_Subscribe_next" value="Subscribe Me">
+            <input type="button" name="_qf_Edit_next" value="Subscribe me">
           {/if}
         </p>
+        <div>
+          <input name="postURL" type="hidden" value="">
+          <input type="hidden" name="group[{$wciform.email_signup_group_id}]" value="1">
+          <input name="_qf_default" type="hidden" value="Edit:cancel">
+        </div>
       {if $embed eq 1 }
         </form>
       {/if}