Commits

christiansalazar committed 563773d

enhancements for EYuiForm UI

Comments (0)

Files changed (5)

 	public $submitErrorText='Cannot submit. Please fix errors.';
 	public $showErrorsLabel='Show Errors';
 	public $formSubmittedOkLabel='The form has been submitted.';
-	public $jQueryUiEnabled=true; // for CSS tags
 	public $jQueryControl='tabs'; // tabs or accordion
 	public $jQueryGroupControl=''; // use 'accordion' or leave blank
 	public $descriptionLocation; // valid values: 'title'(default) or 'visible'
 		foreach($this->pages as $page){
 			if($this->jQueryControl == 'accordion')
 				$pageDiv .= "\n\n<h3><a href='#'>{$page->label}</a></h3>\n";
-			$pageDiv .= "<div class='page' id='{$page->id}'>\n";
+				$pageDiv .= "<div class='ui-widget ui-widget-content page' id='{$page->id}'>\n";
 				$h1PageTitle="";
 				if($this->jQueryUiEnabled == false)
 					$h1PageTitle = "<h1>{$page->label}</h1>";
 				
 				$groupsDivId = "{$page->id}_groups";
 				$groups_divs[] = $groupsDivId;
-				$pageDiv .= "<div class='groups' id='{$groupsDivId}'>";
+				$pageDiv .= "<div class='ui-widget ui-widget-content groups' id='{$groupsDivId}'>";
 				if(isset($page->groups))
 				foreach($page->groups as $group){
 					$fieldsDiv = "";
 							$fieldsDiv .= $f;
 						}
 					}
-					$groupTitle = ($group->label != '') ? "<h1>{$group->label}</h1>" : "";
+					$groupTitle = ($group->label != '') ? "<div class='ui-widget ui-widget-header ui-state-active group-title'>{$group->label}</div>" : "";
 					$groupDescr = ($group->descr != '') ? "<p class='info'>{$group->descr}</p>" : "";
 				
 					$groupTitleForAccordionControl = "";
 						$fix="style='min-height: 150px;'";
 					}
 				
-					
-				
 					$pageDiv .= 
 "
 {$groupTitleForAccordionControl}
-<div class='group' $fix>
+<div class='ui-widget ui-widget-content ui-state-default group' $fix>
 	{$groupTitle}
 	{$groupDescr}
-	<ul class='fields'>
+	<ul class='ui-widget ui-widget-content ui-state-default fields'>
 		{$fieldsDiv}
 	</ul>
-	<hr/>
 </div>
 ";
 				}
 		// creates a submit button
 		$form_submit_button_id = $this->id."_submit";
 		$submitButton = CHtml::button(self::t($this->submitButtonLabel)
-			,array('id'=>$form_submit_button_id));
+			,array('id'=>$form_submit_button_id,'class'=>'submitButton'));
 				
 		// creates the layout
 		$layout = 
 				."$(function() { $( '#{$form_submit_button_id}' ).button(); });\n"
 				.$scriptForGroup."\n\n"
 				, 
-				CClientScript::POS_BEGIN
+				CClientScript::POS_LOAD
 			);
 		}
 		// invokes the js component who will perform future action calls

EYuiFormField.php

 			$this->descriptionLocation = 'title';
 		$descrVisibleTag = '';
 		if($this->descriptionLocation == 'visible')
-			$descrVisibleTag = "<div class='descr'>{$this->descr}</div>";
+			$descrVisibleTag = "<div class='ui-widget ui-state-tooltip descr'>{$this->descr}</div>";
 		if($this->descriptionLocation == 'title')
 			if(!isset($this->htmlOptions['title']))
 				$this->htmlOptions['title'] = CHtml::encode($this->descr);
 		}
 		return $ar;
 	}	
-}
+}
  */
 abstract class EYuiWidget extends CWidget {
 
-	public $themeUrl;
-	public $theme='base';
-	public $jqueryUiCssFile='jquery-ui.css';
+	public $themeUrl; // example: "themes/jqueryui" 
+	public $theme='base'; // the theme name in the jqueryUI package,
+	public $jqueryUiCssFile='jquery-ui.css';// the css file to be loaded
+	public $jQueryUiEnabled=true;
 
 	private $_baseUrl;
 	private $_debug;
 	
 		// we dont provide Jquery or jQueryUI scripts anymore. use the provided by YII
         $cs = Yii::app()->getClientScript();
-        $cs->registerCoreScript('jquery.ui');
+        $cs->registerCoreScript($this->jQueryUiEnabled ? 'jquery.ui' : 'jquery');
 		
 		if($this->isDebug){
 			//$this->_baseUrl = $localAssetsDir;
 		}
 		
 		// jquery-ui
+		if($this->jQueryUiEnabled == true){
 		if($this->themeUrl == null)
 			$this->themeUrl = $this->_baseUrl;
 		$cs->registerCssFile($this->themeUrl."/".$this->theme.
 			"/".$this->jqueryUiCssFile);
+		}
 	}
 	
 	/**

assets/eyuiform.css

 .eyuiform {
-	border: 1px dotted #aaa;
-	padding: 10px;
-	border-radius: 5px;
-	margin: 10px;
+	padding: 0px;
+	margin: 0px;
 	display: block;
 }
 
-.eyuiform .group br,
-.eyuiform .group hr {
-  margin: 0px;
-  padding: 0px;
+.eyuiform .submitButton {
+	font-size: 0.8em;
+	font-family: Arial;
 }
 
-
 .eyuiform  div.page {
-	margin-bottom: 10px;
 }
 
 .eyuiform  div.info {
 }
 .eyuiform  div.info h1{
-	font-family: Verdana;
-	font-size: 0.8em;
+	font-family: Arial;
 	font-weight: bold;
 }
 
 .eyuiform  div.page div.groups {
-	margin-top: 5px;
+	border: none;	
 }
 
 .eyuiform  div.page div.groups div.group {
-	box-shadow: 5px 5px 7px #ddd;
-	padding: 5px;
-	border: 1px dotted #ddd;
-	background-color: white;
-	clear: both;
-}
-
-.eyuiform  div.page div.groups div.group hr {
-	margin: 0px;
-	padding: 0px;
-	color: white;
-}
-
-.eyuiform  div.page div.groups div.group h1 {
-	color: gray;
-	background-color: #eee;
-	padding: 5px;
-	border-radius: 3px;
-	border: 1px solid #ddd;
-	font-size: 0.9em;
-	font-weight: bold;
+	margin-bottom: 7px;
+	padding: 3px;
 }
 
-.eyuiform  div.page  h6 {
-	color: gray;
-	background-color: #eee;
-	padding: 10px;
-	padding-left: 30px;
-	border-radius: 3px;
-	border: 1px solid #ddd;
-	font-size: 0.9em;
-	font-weight: bold;
+.eyuiform  div.page div.groups div.group .group-title {
+	padding: 3px;
 }
 
 .eyuiform  div.page div.groups div.group p.info {
 	list-style: none;
 	padding: 0px;
 	overflow: auto;
-	height: auto;
 	display: block;
-	clear: both;
+	border: none;
 }
 
 .eyuiform  div.page div.groups div.group ul.fields li {
 }
 
 .eyuiform  div.page div.groups div.group .fields li div.descr {
-	color: gray;
-	font-family: verdana;
-	font-size: 0.8em;
+	font-size: 1em;
 }
 
 .eyuiform  div.page div.groups div.group .fields li  div.checkboxes {
 	textarea,
 	select
 {
-	border-radius: 3px;
-	border: 1px solid #aaa;
 	padding: 3px;
-	background-color: #eee;
-	color: navy;
 }
 .eyuiform input,
 .eyuiform select
 	padding: 2px;
 }
 .eyuiform label {
-	font-family: verdana;
 	font-size: 0.8em;
 	padding: 5px;
 	margin: 0px;

assets/eyuiform.js

 	
 	
 	
-};
+};