[TASK] FormEngine: "field has changed" icon via CSS 08/12708/14
authorBenjamin Mack <benni@typo3.org>
Tue, 25 Feb 2014 10:29:02 +0000 (11:29 +0100)
committerGeorg Ringer <georg.ringer@gmail.com>
Mon, 15 Dec 2014 12:35:25 +0000 (13:35 +0100)
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 <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
typo3/sysext/backend/Classes/Form/FormEngine.php
typo3/sysext/backend/Classes/Form/FrontendFormEngine.php
typo3/sysext/backend/Resources/Private/Templates/FormEngine.html
typo3/sysext/backend/Resources/Public/JavaScript/jsfunc.tbe_editor.js
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tceforms.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 5db7f0e..82ce4bc 100644 (file)
@@ -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";
 
index b9d5a4c..681de1f 100644 (file)
@@ -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 = '
index eff7985..599bdc7 100644 (file)
 
 <!-- ###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 -->
index db95b39..a7642fb 100644 (file)
@@ -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"]) {
index b95a56e..26fa7fa 100644 (file)
@@ -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;
+}
index 9fb86bf..924360f 100644 (file)
@@ -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.
  *