Permalink
Browse files

ENHANCEMENT: move hard coded template HTML for composite field and fi…

…eld group out to separate template files.
  • Loading branch information...
1 parent 3572b31 commit 907568b1827abcc2f25cd38a2b90a80ac7a7bb66 @wilr wilr committed Apr 13, 2012
View
4 admin/css/screen.css
@@ -197,7 +197,7 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
.cms .ss-ui-loading-icon { background: url(../../images/network-save.gif) no-repeat; display: block; width: 16px; height: 16px; }
/** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */
-.fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding-right: 8px; }
+.fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding: 8px 0 0 8px; }
.fieldgroup .fieldgroup-field .field { border: none; padding-bottom: 0; }
/** ---------------------------------------------------- Checkbox Field ---------------------------------------------------- */
@@ -353,7 +353,7 @@ body.cms { overflow: hidden; }
/* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */
.cms-content-tools { background-color: #dde3e7; width: 192px; border-right: 1px solid #bfcad2; overflow-y: auto; overflow-x: hidden; z-index: 70; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; float: left; position: relative; }
.cms-content-tools .cms-panel-header { clear: both; margin: 0 0 7px; line-height: 24px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -moz-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -o-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); }
-.cms-content-tools .cms-panel-content { width: 176px; padding: 8px 8px; overflow: auto; height: 100%; }
+.cms-content-tools .cms-panel-content { width: 176px; padding: 0 8px; overflow: auto; height: 100%; }
.cms-content-tools .cms-panel-content .dropdown select { width: 160px; }
.cms-content-tools .cms-panel-content #LastEditedFrom { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.cms-content-tools .cms-panel-content #LastEditedFrom input { width: 160px; }
View
2 admin/scss/_forms.scss
@@ -406,7 +406,7 @@ form.small .field, .field.small {
float: left;
display: block;
width: $grid-x * 23;
- padding-right: $grid-x;
+ padding: $grid-y 0 0 $grid-x;
&.odd {
View
4 admin/scss/_style.scss
@@ -610,8 +610,8 @@ body.cms {
}
.cms-panel-content {
- width: $grid-x * 22;
- padding: $grid-y $grid-x;
+ width: ($grid-x * 22);
+ padding: 0 $grid-x;
overflow: auto;
height:100%;
.dropdown select {
View
12 css/UnitTesting.css
@@ -8,17 +8,17 @@ table.details tr { background: #eeeee0; }
p { line-height: 1.5em; margin-top: 0.5em; margin-bottom: 1.0em; }
-h1 { margin: 0px 0px 5px; font: 165% verdana, arial, helvetica; }
+h1 { margin: 0px 0px 5px; font: 165% verdana,arial,helvetica; }
-h2 { margin-top: 1em; margin-bottom: 0.5em; font: bold 125% verdana, arial, helvetica; }
+h2 { margin-top: 1em; margin-bottom: 0.5em; font: bold 125% verdana,arial,helvetica; }
-h3 { margin-bottom: 0.5em; font: bold 115% verdana, arial, helvetica; }
+h3 { margin-bottom: 0.5em; font: bold 115% verdana,arial,helvetica; }
-h4 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
+h4 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
-h5 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
+h5 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
-h6 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
+h6 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
@chillu
chillu Apr 14, 2012

Ah the good old war between an old and new version of compass ... which one are you running Will?

.Error { font-weight: bold; color: red; }
View
5 dev/SapphireTest.php
@@ -228,7 +228,10 @@ function setUp() {
// Preserve memory settings
$this->originalMemoryLimit = ini_get('memory_limit');
-
+
+ // turn off template debugging
+ SSViewer::set_source_file_comments(false);
+
// Clear requirements
Requirements::clear();
}
View
118 forms/CompositeField.php
@@ -34,6 +34,11 @@ class CompositeField extends FormField {
protected $tag = 'div';
/**
+ * @var string
+ */
+ protected $template = "CompositeField";
+
+ /**
* @var String Optional description for this set of fields.
* If the {@link $tag} property is set to use a 'fieldset', this will be
* rendered as a <legend> tag, otherwise its a 'title' attribute.
@@ -59,6 +64,8 @@ public function __construct($children = null) {
/**
* Returns all the sub-fields, suitable for <% control FieldList %>
+ *
+ * @return FieldList
*/
public function FieldList() {
return $this->children;
@@ -76,9 +83,10 @@ public function setID($id) {
$this->id = $id;
return $this;
}
-
+
/**
* Accessor method for $this->children
+ *
* @return FieldList
*/
public function getChildren() {
@@ -93,31 +101,41 @@ public function setChildren($children) {
return $this;
}
- /** @param String */
+ /**
+ * @param string
+ */
public function setTag($tag) {
$this->tag = $tag;
+
return $this;
}
- /** @return String */
+ /**
+ * @return string
+ */
public function getTag() {
return $this->tag;
}
- /** @param String */
+ /**
+ * @param string
+ */
public function setLegend($legend) {
$this->legend = $legend;
return $this;
}
- /** @return String */
+ /**
+ * @return string
+ */
public function getLegend() {
return $this->legend;
}
function extraClasses() {
$classes = array('field', 'CompositeField', parent::extraClasses());
if($this->columnCount) $classes[] = 'multicolumn';
+
return implode(' ', $classes);
}
@@ -135,79 +153,35 @@ function getAttributes() {
}
public function Field($properties = array()) {
- $content = '';
-
- if($this->tag == 'fieldset' && $this->legend) {
- $content .= '<legend>' . $this->legend . '<legend>';
- }
-
- $fs = $this->FieldList();
- foreach($fs as $subfield) {
- if($this->columnCount) {
- $className = "column{$this->columnCount}";
- if(!next($fs)) $className .= " lastcolumn";
- $content .= "\n<div class=\"{$className}\">\n" . $subfield->Field() . "\n</div>\n";
- } else if($subfield){
- $content .= "\n" . $subfield->Field() . "\n";
- }
- }
-
- return $this->createTag($this->getTag(), $this->getAttributes(), $content);
+ $props = $this->customise($properties);
+
+ return $props->renderWith($this->getTemplate());
}
/**
- * Returns the fields nested inside another DIV
+ * @param array
*/
function FieldHolder($properties = array()) {
- $content = '';
+ $props = $this->customise($properties);
- if($this->tag == 'fieldset' && $this->legend) {
- $content .= '<legend>' . $this->legend . '<legend>';
- }
-
- $fs = $this->FieldList();
- foreach($fs as $subfield) {
- if($this->columnCount) {
- $className = "column{$this->columnCount}";
- if(!next($fs)) $className .= " lastcolumn";
- $content .= "\n<div class=\"{$className}\">\n" . $subfield->FieldHolder() . "\n</div>\n";
- } else if($subfield){
- $content .= "\n" . $subfield->FieldHolder() . "\n";
- }
- }
-
- return $this->createTag($this->getTag(), $this->getAttributes(), $content);
+ return $props->renderWith($this->getTemplate());
}
/**
- * Returns the fields in the restricted field holder inside a DIV.
+ * Returns the fields in the restricted field holder.
+ *
+ * @param array
*/
- function SmallFieldHolder() {
- $fs = $this->FieldList();
- $tag = $this->getTag();
- $idAtt = isset($this->id) ? " id=\"{$this->id}\"" : '';
- $className = ($this->columnCount) ? "field CompositeField {$this->extraClass()} multicolumn" : "field CompositeField {$this->extraClass()}";
- $content = "<$tag class=\"$className\"$idAtt>";
-
- if($this->tag == 'fieldset' && $this->legend) {
- $content .= '<legend>' . $this->legend . '<legend>';
- }
-
- foreach($fs as $subfield) {
- if($this->columnCount) {
- $className = "column{$this->columnCount}";
- if(!next($fs)) $className .= " lastcolumn";
- $content .= "<div class=\"{$className}\">" . $subfield->FieldHolder() . "</div>";
- } else if($subfield){
- $content .= $subfield->SmallFieldHolder() . " ";
- }
- }
- $content .= "</$tag>";
-
- return $content;
+ function SmallFieldHolder($properties = array()) {
+ $obj = ($properties) ? $this->customise($properties) : $this;
+
+ return $obj->renderWith($this->getTemplate());
}
+
/**
- * Add all of the non-composite fields contained within this field to the list.
+ * Add all of the non-composite fields contained within this field to the
+ * list.
+ *
* Sequentialisation is used when connecting the form to its data source
*/
public function collateDataFields(&$list, $saveableOnly = false) {
@@ -232,8 +206,11 @@ public function collateDataFields(&$list, $saveableOnly = false) {
}
function setForm($form) {
- foreach($this->children as $f) if(is_object($f)) $f->setForm($form);
+ foreach($this->children as $f)
+ if(is_object($f)) $f->setForm($form);
+
parent::setForm($form);
+
return $this;
}
@@ -242,6 +219,10 @@ function setColumnCount($columnCount) {
return $this;
}
+ function getColumnCount() {
+ return $this->columnCount;
+ }
+
function isComposite() {
return true;
}
@@ -253,8 +234,11 @@ function hasData() {
public function fieldByName($name) {
return $this->children->fieldByName($name);
}
+
/**
* Add a new child field to the end of the set.
+ *
+ * @param FormField
*/
public function push(FormField $field) {
$this->children->push($field);
View
97 forms/FieldGroup.php
@@ -45,8 +45,8 @@
* @subpackage fields-structural
*/
class FieldGroup extends CompositeField {
+
protected $zebra;
- public $subfieldParam = "SmallFieldHolder";
function __construct($arg1 = null, $arg2 = null) {
if(is_array($arg1) || is_a($arg1, 'FieldSet')) {
@@ -85,93 +85,74 @@ function Name(){
return preg_replace("/[^a-zA-Z0-9]+/", "", $this->title);
}
+
/**
- * Returns a set of <span class="subfield"> tags, each containing a sub-field.
- * You can also use <% control FieldSet %>, if you'd like more control over the generated HTML
- *
- * @todo Shouldn't use SmallFieldHolder() (very difficult to style),
- * it is easier to overwrite the <div class="field"> behaviour in a more specific class
+ * Generates the field HTML with the HTML for child {@link FormField}
+ *
+ * @param array $properties custom properties for the template
*/
function Field($properties = array()) {
- $fs = $this->FieldList();
- $spaceZebra = isset($this->zebra) ? " fieldgroup-$this->zebra" : '';
- $idAtt = isset($this->id) ? " id=\"{$this->id}\"" : '';
- $content = "<div class=\"fieldgroup$spaceZebra\"$idAtt>";
-
- $count = 1;
- foreach($fs as $subfield) {
- $childZebra = (!isset($childZebra) || $childZebra == "odd") ? "even" : "odd";
- if($subfield->hasMethod('setZebra')) {
- $subfield->setZebra($childZebra);
- }
-
- //label the first and last fields of each surrounding div
- if ($count == 1) $firstLast = "first";
- elseif ($count == count($fs)) $firstLast = "last";
- else $firstLast = '';
-
- $content .= "<div class=\"fieldgroup-field $firstLast\">" . $subfield->{$this->subfieldParam}() . "</div>";
- $count++;
- }
- $content .= "</div>";
+ $props = $this->customise(new ArrayData($properties));
- return $content;
+ return $props->renderWith('FieldGroupField');
}
- public function setID($id) {
- $this->id = Convert::raw2att($id);
+ /**
+ * Generates the field HTML with the HTML for child {@link FormField}
+ *
+ * @param array $properties custom properties for the template
+ */
+ function FieldHolder($properties = array()) {
+ $props = $this->customise(new ArrayData($properties));
+
+ return $props->renderWith('FieldGroupHolder');
}
/**
* Set an odd/even class
+ *
+ * @param string $zebra one of odd or even.
*/
function setZebra($zebra) {
if($zebra == 'odd' || $zebra == 'even') $this->zebra = $zebra;
else user_error("setZebra passed '$zebra'. It should be passed 'odd' or 'even'", E_USER_WARNING);
return $this;
}
- function FieldHolder($properties = array()) {
- $Title = $this->XML_val('Title');
- $Message = $this->XML_val('Message');
- $MessageType = $this->XML_val('MessageType');
- $RightTitle = $this->XML_val('RightTitle');
- $Type = $this->XML_val('Type');
- $extraClass = $this->XML_val('extraClass');
- $Name = $this->XML_val('Name');
- $Field = $this->XML_val('Field');
-
- $titleBlock = (!empty($Title)) ? "<label class=\"left\">$Title</label>" : "";
- $messageBlock = (!empty($Message)) ? "<span class=\"message $MessageType\">$Message</span>" : "";
- $rightTitleBlock = (!empty($RightTitle)) ? "<label class=\"right\">$RightTitle</label>" : "";
- $id = $Name ? ' id="$Name"' : '';
-
- return <<<HTML
-<div$id class="field $Type $extraClass">$titleBlock<div class="middleColumn">$Field</div>$rightTitleBlock$messageBlock</div>
-HTML;
+ /**
+ * @return string
+ */
+ function getZebra() {
+ return $this->zebra;
}
+ /**
+ * @return string
+ */
function Message() {
$fs = $this->FieldList();
+
foreach($fs as $subfield) {
if($m = $subfield->Message()) $message[] = $m;
}
- if(isset($message)) return implode(", ", $message) . ". ";
+
+ return (isset($message)) ? implode(", ", $message) . ". " : "";
}
- function MessageType(){
+ /**
+ * @return string
+ */
+ function MessageType() {
$fs = $this->FieldList();
+
foreach($fs as $subfield) {
if($m = $subfield->MessageType()) $MessageType[] = $m;
}
- if(isset($MessageType)) {
- return implode(". ", $MessageType);
- }
+
+ return (isset($MessageType)) ? implode(". ", $MessageType) : "";
}
- function php($data){
+ function php($data) {
return;
- }
-
-}
-
+ }
+}
View
15 templates/forms/CompositeField.ss
@@ -0,0 +1,15 @@
+<$Tag class="CompositeField $extraClass <% if ColumnCount %>multi-column<% end_if %>">
+ <% if $Tag == 'fieldset' && $Legend %>
+ <legend>$Legend</legend>
+ <% end_if %>
+
+ <% loop FieldList %>
+ <% if ColumnCount %>
+ <div class="column-{$ColumnCount} $FirstLast">
+ $FieldHolder
+ </div>
+ <% else %>
+ $FieldHolder
+ <% end_if %>
+ <% end_loop %>
+</$Tag>
View
7 templates/forms/FieldGroupField.ss
@@ -0,0 +1,7 @@
+<div class="fieldgroup <% if Zebra %>fieldgroup-zebra<% end_if %>" <% if ID %>id="$ID"<% end_if %>>
+ <% loop FieldList %>
+ <div class="fieldgroup-field $FirstLast $EvenOdd">
+ SmallFieldHolder
+ </div>
+ <% end_loop %>
+</div>
View
13 templates/forms/FieldGroupHolder.ss
@@ -0,0 +1,13 @@
+<div <% if Name %>id="$Name"<% end_if %> class="field $Type $extraClass">
+ <% if Title %><label class="left">$Title</label><% end_if %>
+
+ <div class="middleColumn fieldgroup <% if Zebra %>fieldgroup-$Zebra<% end_if %>">
+ <% loop FieldList %>
+ <div class="fieldgroup-field $FirstLast $EvenOdd">
+ $SmallFieldHolder
+ </div>
+ <% end_loop %>
+ </div>
+ <% if RightTitle %><label class="right">$RightTitle</label><% end_if %>
+ <% if Message %><span class="message $MessageType">$Message</span><% end_if %>
+</div>
View
24 tests/forms/CompositeFieldTest.php
@@ -30,35 +30,33 @@ function testFieldPosition() {
}
function testTag() {
- $composite = new CompositeField(
+ $div = new CompositeField(
new TextField('A'),
new TextField('B')
);
- $this->assertStringStartsWith('<div', trim($composite->FieldHolder()));
- $this->assertStringEndsWith('/div>', trim($composite->FieldHolder()));
+ $this->assertStringStartsWith('<div', trim($div->FieldHolder()));
+ $this->assertStringEndsWith('/div>', trim($div->FieldHolder()));
+
+ $fieldset = new CompositeField();
+ $fieldset->setTag('fieldset');
- $composite->setTag('fieldset');
- $this->assertStringStartsWith('<fieldset', trim($composite->FieldHolder()));
- $this->assertStringEndsWith('/fieldset>', trim($composite->FieldHolder()));
+ $this->assertStringStartsWith('<fieldset', trim($fieldset->FieldHolder()));
+ $this->assertStringEndsWith('/fieldset>', trim($fieldset->FieldHolder()));
}
function testLegend() {
$composite = new CompositeField(
new TextField('A'),
new TextField('B')
);
- $composite->setLegend('My legend');
- $parser = new CSSContentParser($composite->Field());
- $root = $parser->getBySelector('div.composite');
- $this->assertObjectHasAttribute('title', $root[0]->attributes());
- $this->assertEquals('My legend', (string)$root[0]['title']);
-
+
$composite->setTag('fieldset');
$composite->setLegend('My legend');
+
$parser = new CSSContentParser($composite->Field());
$root = $parser->getBySelector('fieldset.composite');
- $this->assertObjectNotHasAttribute('title', $root[0]->attributes());
$legend = $parser->getBySelector('fieldset.composite legend');
+
$this->assertNotNull($legend);
$this->assertEquals('My legend', (string)$legend[0]);
}

0 comments on commit 907568b

Please sign in to comment.