Commit 30c362b9 authored by Benni Mack's avatar Benni Mack Committed by Georg Ringer
Browse files

[TASK] FormEngine: "field has changed" icon via CSS

When editing a record in FormEngine, each field that is
modified gets an arrow symbol in front of the
input/select field.

There are certain downsides to this implementation:
- Having images and hard-coded srcs in each field
clutters the HTML and has ugly JS to change the field
- it's hard to style / exchange the icon

The new solution does the replacement via CSS classes.
The CSS class just adds a blue background to the
changed form field or does a color change
to the checkbox label currently.

Releases: master
Resolves: #38752
Change-Id: I94b6cc8550f7539961aa7ee97a8081e7d0ae5931
Reviewed-on: http://review.typo3.org/12708


Reviewed-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
parent 9746ed4c
......@@ -3746,7 +3746,7 @@ class FormEngine {
*/
public function printPalette($palArr) {
$fieldAttributes = ' class="t3-form-palette-field"';
$labelAttributes = ' class="t3-form-palette-field-label"';
$labelAttributes = ' class="t3-form-palette-field-label t3-form-field-label"';
$row = 0;
$iRow = array();
......@@ -4014,7 +4014,6 @@ class FormEngine {
}
$out .= '
TBE_EDITOR.images.req.src = "' . IconUtility::skinImg($this->backPath, 'gfx/required_h.gif', '', 1) . '";
TBE_EDITOR.images.cm.src = "' . IconUtility::skinImg($this->backPath, 'gfx/content_client.gif', '', 1) . '";
TBE_EDITOR.images.sel.src = "' . IconUtility::skinImg($this->backPath, 'gfx/content_selected.gif', '', 1) . '";
TBE_EDITOR.images.clear.src = "' . $this->backPath . 'clear.gif";
......
......@@ -52,7 +52,7 @@ class FrontendFormEngine extends \TYPO3\CMS\Backend\Form\FormEngine {
$bgColor = ' bgcolor="#D6DAD0"';
foreach ($paletteArray as $content) {
$hRow[] = '<td' . $bgColor . '><font face="verdana" size="1">&nbsp;</font></td><td nowrap="nowrap"' . $bgColor . '><font color="#666666" face="verdana" size="1">' . $content['NAME'] . '</font></td>';
$iRow[] = '<td valign="top">' . '<img name="req_' . $content['TABLE'] . '_' . $content['ID'] . '_' . $content['FIELD'] . '" src="clear.gif" width="10" height="10" alt="" />' . '<img name="cm_' . $content['TABLE'] . '_' . $content['ID'] . '_' . $content['FIELD'] . '" src="clear.gif" width="7" height="10" alt="" />' . '</td><td nowrap="nowrap" valign="top">' . $content['ITEM'] . $content['HELP_ICON'] . '</td>';
$iRow[] = '<td valign="top">' . '<img name="req_' . $content['TABLE'] . '_' . $content['ID'] . '_' . $content['FIELD'] . '" src="clear.gif" width="10" height="10" alt="" /></td><td nowrap="nowrap" valign="top">' . $content['ITEM'] . $content['HELP_ICON'] . '</td>';
}
$out = '<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="clear.gif" width="' . (int)$this->paletteMargin . '" height="1" alt="" /></td>' . implode('', $hRow) . '</tr>
......@@ -73,7 +73,7 @@ class FrontendFormEngine extends \TYPO3\CMS\Backend\Form\FormEngine {
<td nowrap="nowrap" bgcolor="#F6F2E6">###FIELD_HELP_ICON###<font face="verdana" size="1" color="black"><strong>###FIELD_NAME###</strong></font>###FIELD_HELP_TEXT###</td>
</tr>
<tr>
<td nowrap="nowrap" bgcolor="#ABBBB4"><img name="req_###FIELD_TABLE###_###FIELD_ID###_###FIELD_FIELD###" src="clear.gif" width="10" height="10" alt="" /><img name="cm_###FIELD_TABLE###_###FIELD_ID###_###FIELD_FIELD###" src="clear.gif" width="7" height="10" alt="" /><font face="verdana" size="1" color="black">###FIELD_ITEM###</font>###FIELD_PAL_LINK_ICON###</td>
<td nowrap="nowrap" bgcolor="#ABBBB4"><img name="req_###FIELD_TABLE###_###FIELD_ID###_###FIELD_FIELD###" src="clear.gif" width="10" height="10" alt="" /><font face="verdana" size="1" color="black">###FIELD_ITEM###</font>###FIELD_PAL_LINK_ICON###</td>
</tr> ';
$this->totalWrap = '<table border="0" cellpadding="1" cellspacing="0" bgcolor="black"><tr><td><table border="0" cellpadding="2" cellspacing="0">|</table></td></tr></table>';
$this->palFieldTemplate = '
......
......@@ -10,14 +10,13 @@
<!-- ###FIELDTEMPLATE### begin -->
<tr>
<td colspan="2" class="formField-header">
<td colspan="2" class="formField-header t3-form-field-label">
<h4>###FIELD_NAME###</h4>
</td>
</tr>
<tr>
<td colspan="2" class="formField-field">
<span class="t3-form-field-container">
<img name="cm_###FIELD_TABLE###_###FIELD_ID###_###FIELD_FIELD###" src="clear.gif" class="t3-TCEforms-contentchangedImg" alt="" />
<img name="req_###FIELD_TABLE###_###FIELD_ID###_###FIELD_FIELD###" src="clear.gif" class="t3-TCEforms-reqImg" alt="" />
###FIELD_ITEM_NULLVALUE###
<div class="t3-form-field-item###FIELD_ITEM_DISABLED###">
......@@ -41,7 +40,6 @@
###CONTENT_NAME###
</label>
<span###ATTRIBUTES_FIELD###>
<img name="cm_###CONTENT_TABLE###_###CONTENT_ID###_###CONTENT_FIELD###" src="clear.gif" class="t3-form-palette-icon-contentchanged" alt="" />
<img name="req_###CONTENT_TABLE###_###CONTENT_ID###_###CONTENT_FIELD###" src="clear.gif" class="t3-form-palette-icon-required" alt="" />
###CONTENT_ITEM_NULLVALUE###
<div class="t3-form-field-item###CONTENT_ITEM_DISABLED###">
......@@ -66,4 +64,4 @@
<h3>###FIELD_HEADER###</h3>
</td>
</tr>
<!-- ###PALETTE_FIELDTEMPLATE_HEADER### end -->
\ No newline at end of file
<!-- ###PALETTE_FIELDTEMPLATE_HEADER### end -->
......@@ -330,9 +330,18 @@ var TBE_EDITOR = {
var theRecord = TBE_EDITOR.prependFormFieldNames+'['+table+']['+uid+']';
TBE_EDITOR.isChanged = 1;
// Set change image:
var imgObjName = "cm_"+table+"_"+uid+"_"+field;
TBE_EDITOR.setImage(imgObjName,TBE_EDITOR.images.cm);
// modify the "field has changed" info by adding a class to the container element (based on palette or main field)
var $formField = TYPO3.jQuery('[name="' + el + '"]');
var $label = $formField.closest('.t3-form-palette-field-container').find('.t3-form-field-label');
// no palette - find the header if it is a flexform
if ($label.length === 0) {
$label = $formField.closest('.t3-form-field-container').children('.t3-form-field-label');
}
// no flex either, check for a "normal" field
if ($label.length === 0) {
$label = $formField.closest('.formField-field').parent().prev().find('.t3-form-field-label');
}
$label.addClass('t3-form-field-state-changed');
// Set change image
if (document[TBE_EDITOR.formname][theField] && document[TBE_EDITOR.formname][theField].type=="select-one" && document[TBE_EDITOR.formname][theField+"_selIconVal"]) {
......
......@@ -968,3 +968,10 @@ TCEforms Tree
margin: 0 0 0 1px;
vertical-align: middle;
}
/* state: the form field was modified */
.t3-form-field-label.t3-form-field-state-changed {
color: #004fb0;
}
......@@ -10132,6 +10132,10 @@ TCEforms Tree
margin: 0 0 0 1px;
vertical-align: middle;
}
/* state: the form field was modified */
.t3-form-field-label.t3-form-field-state-changed {
color: #004fb0;
}
/*
* This file is part of the TYPO3 CMS project.
*
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment