[BUGFIX] FormEngine paddings, margins, colors, borders 20/33520/2
authorFelix Kopp <felix-source@phorax.com>
Sat, 25 Oct 2014 11:32:03 +0000 (13:32 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Mon, 27 Oct 2014 14:30:36 +0000 (15:30 +0100)
Fixes several layout issues with the FormEngine form:

Adds space between checkbox+label.
Forms element browser link as default button.
Form field header will be a headline h4.
Repairs outer padding and inner padding and borders.

Resolves: #62466
Releases: master
Change-Id: I0dcf1cd2206c0cee63a8353516a3b41b94fd670b
Reviewed-on: http://review.typo3.org/33520
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/backend/Classes/Form/Element/CheckboxElement.php
typo3/sysext/backend/Classes/Form/FormEngine.php
typo3/sysext/backend/Resources/Private/Templates/FormEngine.html
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tceforms.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3kin.css

index 0b2934d..8305f1a 100644 (file)
@@ -104,7 +104,7 @@ class CheckboxElement extends AbstractFormElement {
                                $checkboxId = $additionalInformation['itemFormElID'] . '_' . $c;
                                $item .= ($c > 0 ? '<br />' : '') . '<input type="checkbox"' . $this->formEngine->insertDefStyle('check')
                                        . ' value="1" name="' . $checkboxName . '"' . $checkboxParameters . $additionalInformation['onFocus'] . $disabled
-                                       . ' id="' . $checkboxId . '" />'
+                                       . ' id="' . $checkboxId . '" /> '
                                        . '<label for="' . $checkboxId . '">' . htmlspecialchars($selectedItem[0]) . '</label>';
                        }
                }
index 1a083c0..6771f9c 100644 (file)
@@ -2331,7 +2331,7 @@ class FormEngine {
                                $spriteIcon = IconUtility::getSpriteIcon('actions-insert-record', array(
                                        'title' => htmlspecialchars($this->getLL('l_browse_' . ($mode == 'db' ? 'db' : 'file')))
                                ));
-                               $icons['R'][] = '<a href="#" onclick="' . htmlspecialchars($aOnClick) . '">' . $spriteIcon . '</a>';
+                               $icons['R'][] = '<a href="#" onclick="' . htmlspecialchars($aOnClick) . '" class="btn btn-default">' . $spriteIcon . '</a>';
                        }
                        if (!$params['dontShowMoveIcons']) {
                                if ($sSize >= 5) {
index 8a7510b..b701d84 100644 (file)
@@ -10,7 +10,9 @@
 
 <!-- ###FIELDTEMPLATE### begin -->
 <tr>
-       <td colspan="2" class="formField-header"><strong>###FIELD_NAME###</strong></td>
+       <td colspan="2" class="formField-header">
+               <h4>###FIELD_NAME###</h4>
+       </td>
 </tr>
 <tr>
        <td colspan="2" class="formField-field">
index dcab0e4..7c61fda 100644 (file)
 TCEforms
 - - - - - - - - - - - - - - - - - - - - - */
 
+// Special handling of Tabs within FormEngine
+.typo3-TCEforms {
+
+       div.typo3-dyntabmenu-divs {
+               // Override .tab inner padding: for section border
+               padding: 0;
+       }
+
+       .table {
+               margin-bottom: 0;
+
+               > tbody {
+                       > tr {
+                               > td {
+                                       background: none;
+
+
+
+                                       &.palette-header {
+                                               border-top: 1px solid @gray-light;
+
+                                               h3 {
+                                                       // Padding and margin are created by table <td>
+                                                       margin-top: @padding-large-vertical;
+                                                       margin-bottom: 0;
+                                               }
+                                       }
+
+                                       .t3-form-palette-fieldset {
+                                               margin-bottom: @padding-large-vertical;
+
+                                               .t3-form-palette-field-container {
+                                                       margin-bottom: @padding-base-vertical;
+                                               }
+                                       }
+
+
+                                       table.t3-form-field-group-file {
+                                               td {
+                                                       // Padding coming from outer wrap
+                                                       padding-left: 0;
+                                               }
+                                       }
+
+                               }
+                       }
+               }
+       }
+}
+
 img.t3-TCEforms-reqImg {
        display: block;
        position: absolute;
@@ -96,10 +146,6 @@ td.palette-header {
        padding-left: 10px;
 }
 
-.typo3-TCEforms .palette-header h3 {
-       margin-top: 10px;
-}
-
 .typo3-TCEforms .bgColor2,
 .typo3-TCEforms tr.bgColor2 td {
        padding-bottom: 5px;
@@ -265,6 +311,7 @@ div.typo3-TCEforms div.c-tablayer table > tbody > tr > td > table.wrapperTable >
        display: inline-block;
        vertical-align: top;
        padding-right: 25px;
+       margin-bottom: 0.5em;
 }
 
 .t3-form-palette-field-container .t3-form-palette-field-label,
@@ -357,11 +404,6 @@ input.typo3-TCEforms-suggest-search {
 /* - - - - - - - - - - - - - - - - - - - - -
 TCEforms Flexforms
 - - - - - - - - - - - - - - - - - - - - - */
-/** tabs inside the table => flexforms */
-.typo3-TCEforms .typo3-dyntabmenu-divs {
-       margin-right: 20px;
-       margin-bottom: 10px;
-}
 
 .t3-form-field-label-flex {
        border-top: 1px solid #c0c0c0;
@@ -757,10 +799,6 @@ select option.c-divider {
        border-bottom: 1px solid #c0c0c0;
 }
 
-.t3-form-palette-fieldset {
-       border:none;
-}
-
 input.typo3-TCEforms-suggest-search {
        background-image: url('../../../../icons/gfx/zoom.gif');
        background-position: 2px center;
@@ -903,7 +941,7 @@ TCEforms Sections
 .t3-form-field-item {
        position: relative;
        border: 1px solid transparent;
-       padding: 7px 0;
+       padding: 0;
 }
 
 .t3-tceforms-widget-null-wrapper + .t3-form-field-item {
index e62ecf0..455f082 100644 (file)
@@ -8651,6 +8651,31 @@ table.t3-table > tbody > tr:hover > th {
 /* - - - - - - - - - - - - - - - - - - - - -
 TCEforms
 - - - - - - - - - - - - - - - - - - - - - */
+.typo3-TCEforms div.typo3-dyntabmenu-divs {
+  padding: 0;
+}
+.typo3-TCEforms .table {
+  margin-bottom: 0;
+}
+.typo3-TCEforms .table > tbody > tr > td {
+  background: none;
+}
+.typo3-TCEforms .table > tbody > tr > td.palette-header {
+  border-top: 1px solid #d7d7d7;
+}
+.typo3-TCEforms .table > tbody > tr > td.palette-header h3 {
+  margin-top: 12px;
+  margin-bottom: 0;
+}
+.typo3-TCEforms .table > tbody > tr > td .t3-form-palette-fieldset {
+  margin-bottom: 12px;
+}
+.typo3-TCEforms .table > tbody > tr > td .t3-form-palette-fieldset .t3-form-palette-field-container {
+  margin-bottom: 6px;
+}
+.typo3-TCEforms .table > tbody > tr > td table.t3-form-field-group-file td {
+  padding-left: 0;
+}
 img.t3-TCEforms-reqImg {
   display: block;
   position: absolute;
@@ -8723,9 +8748,6 @@ img.t3-TCEforms-contentchangedPaletteImg {
 td.palette-header {
   padding-left: 10px;
 }
-.typo3-TCEforms .palette-header h3 {
-  margin-top: 10px;
-}
 .typo3-TCEforms .bgColor2,
 .typo3-TCEforms tr.bgColor2 td {
   padding-bottom: 5px;
@@ -8861,6 +8883,7 @@ div.typo3-TCEforms div.c-tablayer table > tbody > tr > td > table.wrapperTable >
   display: inline-block;
   vertical-align: top;
   padding-right: 25px;
+  margin-bottom: 0.5em;
 }
 .t3-form-palette-field-container .t3-form-palette-field-label,
 .t3-form-palette-field-container .t3-form-palette-field {
@@ -8938,11 +8961,6 @@ input.typo3-TCEforms-suggest-search {
 /* - - - - - - - - - - - - - - - - - - - - -
 TCEforms Flexforms
 - - - - - - - - - - - - - - - - - - - - - */
-/** tabs inside the table => flexforms */
-.typo3-TCEforms .typo3-dyntabmenu-divs {
-  margin-right: 20px;
-  margin-bottom: 10px;
-}
 .t3-form-field-label-flex {
   border-top: 1px solid #c0c0c0;
   padding: 5px;
@@ -9261,9 +9279,6 @@ select option.c-divider {
   border: none;
   border-bottom: 1px solid #c0c0c0;
 }
-.t3-form-palette-fieldset {
-  border: none;
-}
 input.typo3-TCEforms-suggest-search {
   background-image: url('../../../../icons/gfx/zoom.gif');
   background-position: 2px center;
@@ -9377,7 +9392,7 @@ TCEforms Sections
 .t3-form-field-item {
   position: relative;
   border: 1px solid transparent;
-  padding: 7px 0;
+  padding: 0;
 }
 .t3-tceforms-widget-null-wrapper + .t3-form-field-item {
   display: inline-block;