From 4d4d53e3fa8d2317a451825cbab25d66113e0c49 Mon Sep 17 00:00:00 2001 From: Manoj K Date: Tue, 4 Nov 2014 18:51:19 +0530 Subject: [PATCH] #29801 - Improved form and widget look and feel. --- CRM/Wci/BAO/Widget.php | 2 +- CRM/Wci/Form/CreateWidget.php | 26 +++-- CRM/Wci/Form/ProgressBar.php | 6 +- templates/CRM/Wci/Form/CreateWidget.tpl | 126 ++++++++++++------------ templates/CRM/Wci/Form/ProgressBar.tpl | 39 ++++---- templates/CRM/Wci/Page/wciwidget.tpl | 43 +++++--- 6 files changed, 128 insertions(+), 114 deletions(-) diff --git a/CRM/Wci/BAO/Widget.php b/CRM/Wci/BAO/Widget.php index 3cedbec..c1823a6 100644 --- a/CRM/Wci/BAO/Widget.php +++ b/CRM/Wci/BAO/Widget.php @@ -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&gid=15'; } return $data; } diff --git a/CRM/Wci/Form/CreateWidget.php b/CRM/Wci/Form/CreateWidget.php index b746bd8..1a1abd0 100644 --- a/CRM/Wci/Form/CreateWidget.php +++ b/CRM/Wci/Form/CreateWidget.php @@ -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, diff --git a/CRM/Wci/Form/ProgressBar.php b/CRM/Wci/Form/ProgressBar.php index 6b58eb5..8e0fcae 100644 --- a/CRM/Wci/Form/ProgressBar.php +++ b/CRM/Wci/Form/ProgressBar.php @@ -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(); diff --git a/templates/CRM/Wci/Form/CreateWidget.tpl b/templates/CRM/Wci/Form/CreateWidget.tpl index 5737d69..783b41b 100644 --- a/templates/CRM/Wci/Form/CreateWidget.tpl +++ b/templates/CRM/Wci/Form/CreateWidget.tpl @@ -1,76 +1,76 @@ {* HEADER *} +
+
+ {include file="CRM/common/formButtons.tpl" location="top"} +
-
-{include file="CRM/common/formButtons.tpl" location="top"} -
- -{* FIELD EXAMPLE: OPTION 1 (AUTOMATIC LAYOUT) *} + {* FIELD EXAMPLE: OPTION 1 (AUTOMATIC LAYOUT) *} -{foreach from=$elementNames item=elementName} -
-
{$form.$elementName.label}
-
{$form.$elementName.html}
-
-
-{/foreach} + {foreach from=$elementNames item=elementName} +
+
{$form.$elementName.label}
+
{$form.$elementName.html}
+
+
+ {/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} -
-
- -
-
-
- {literal} - {/literal} -
- -
+
+
+ + Preview Widget and Get Code + +
+
+ Click Save & Preview to save any changes to your settings, and preview the widget again on this page. +
+ + +
+
+
+
+ Add this widget to any web page by copying and pasting the code below. +
+ +
+ + » Select Code + +
+
-
-
-
-
- {* {include file="CRM/Wci/Page/wciwidget.tpl"} *} - - - -
+ {/if} + + {* FIELD EXAMPLE: OPTION 2 (MANUAL LAYOUT) +
+ {$form.favorite_color.label} + {$form.favorite_color.html}
-
-{* {/if} *} -{* FIELD EXAMPLE: OPTION 2 (MANUAL LAYOUT) + {* FOOTER *} -
- {$form.favorite_color.label} - {$form.favorite_color.html} +
+ {include file="CRM/common/formButtons.tpl" location="bottom"}
- -{* FOOTER *} - -
-{include file="CRM/common/formButtons.tpl" location="bottom"}
- diff --git a/templates/CRM/Wci/Form/ProgressBar.tpl b/templates/CRM/Wci/Form/ProgressBar.tpl index c99bb1f..eda9b1c 100644 --- a/templates/CRM/Wci/Form/ProgressBar.tpl +++ b/templates/CRM/Wci/Form/ProgressBar.tpl @@ -1,27 +1,28 @@ {* HEADER *} +
+
+ {include file="CRM/common/formButtons.tpl" location="top"} +
-
-{include file="CRM/common/formButtons.tpl" location="top"} -
+ {* FIELD EXAMPLE: OPTION 1 (AUTOMATIC LAYOUT) *} -{* FIELD EXAMPLE: OPTION 1 (AUTOMATIC LAYOUT) *} + {foreach from=$elementNames item=elementName} +
+
{$form.$elementName.label}
+
{$form.$elementName.html}
+
+
+ {/foreach} -{foreach from=$elementNames item=elementName} -
-
{$form.$elementName.label}
-
{$form.$elementName.html}
-
-
-{/foreach} + {* FIELD EXAMPLE: OPTION 2 (MANUAL LAYOUT) -{* FIELD EXAMPLE: OPTION 2 (MANUAL LAYOUT) +
+ {$form.favorite_color.label} + {$form.favorite_color.html} +
-
- {$form.favorite_color.label} - {$form.favorite_color.html} + {* FOOTER *} +
+ {include file="CRM/common/formButtons.tpl" location="bottom"}
- -{* FOOTER *} -
-{include file="CRM/common/formButtons.tpl" location="bottom"}
diff --git a/templates/CRM/Wci/Page/wciwidget.tpl b/templates/CRM/Wci/Page/wciwidget.tpl index 4f61252..1813008 100644 --- a/templates/CRM/Wci/Page/wciwidget.tpl +++ b/templates/CRM/Wci/Page/wciwidget.tpl @@ -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 { @@ -65,11 +64,11 @@ 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; @@ -133,8 +132,18 @@ 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; } @@ -176,25 +185,33 @@
+ {if $wciform.button_title} - + {/if} {if $wciform.email_signup_group_id} {if $embed eq 1 } -
+ {/if} -

+

Get the monthly newsletter

- -

+

+ +

+

{if $embed eq 1 } - + {else} - + {/if}

+
+ + + +
{if $embed eq 1 }
{/if} -- 2.25.1