[TASK] Port Constant Editor to Bootstrap 37/44337/4
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Wed, 28 Oct 2015 17:34:12 +0000 (18:34 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Thu, 29 Oct 2015 21:03:04 +0000 (22:03 +0100)
Resolves: #71119
Releases: master
Change-Id: I54ccfbb81b675ef343e8bb41ff06bb033b8423cb
Reviewed-on: https://review.typo3.org/44337
Tested-by: Stefan Neufeind <typo3.neufeind@speedpartner.de>
Reviewed-by: Benjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott <info@bk2k.info>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Build/Resources/Public/Less/TYPO3/_module_tstemplate.less [new file with mode: 0644]
Build/Resources/Public/Less/backend.less
typo3/sysext/core/Classes/TypoScript/ExtendedTemplateService.php
typo3/sysext/t3skin/Resources/Public/Css/backend.css
typo3/sysext/tstemplate/Resources/Public/JavaScript/ConstantEditor.js

diff --git a/Build/Resources/Public/Less/TYPO3/_module_tstemplate.less b/Build/Resources/Public/Less/TYPO3/_module_tstemplate.less
new file mode 100644 (file)
index 0000000..31d36a9
--- /dev/null
@@ -0,0 +1,12 @@
+//
+// TS Template
+//
+.tstemplate-constanteditor {
+       .input-group.userTS {
+               .input-group-addon.colorbox {
+                       display: inline-block;
+                       height: 100%;
+                       position: absolute;
+               }
+       }
+}
\ No newline at end of file
index 8c276a3..14a93e8 100644 (file)
@@ -65,6 +65,7 @@
 @import "TYPO3/_module_database.less";
 @import "TYPO3/_module_recycler.less";
 @import "TYPO3/_module_scheduler.less";
+@import "TYPO3/_module_tstemplate.less";
 @import "TYPO3/_module_web_page.less";
 @import "TYPO3/_topbar.less";
 @import "TYPO3/_debugconsole.less";
index 93f2c3c..9ea5bc8 100644 (file)
@@ -1196,19 +1196,21 @@ class ExtendedTemplateService extends TemplateService
                     $aname = '\'' . $raname . '\'';
                     list($fN, $fV, $params, $idName) = $this->ext_fNandV($params);
                     $idName = htmlspecialchars($idName);
+                    $hint = '';
                     switch ($typeDat['type']) {
                         case 'int':
-
                         case 'int+':
-                            $p_field = '<input id="' . $idName . '" type="text" name="' . $fN . '" value="' . $fV . '"'
-                                . $this->getDocumentTemplate()->formWidth(5) . ' onChange="uFormUrl(' . $aname . ')" />';
                             if ($typeDat['paramstr']) {
-                                $p_field .= ' Range: ' . $typeDat['paramstr'];
-                            } elseif ($typeDat['type'] == 'int+') {
-                                $p_field .= ' Range: 0 - ';
+                                $hint = ' Range: ' . $typeDat['paramstr'];
+                            } elseif ($typeDat['type'] === 'int+') {
+                                $hint = ' Range: 0 - ';
                             } else {
-                                $p_field .= ' (Integer)';
+                                $hint = ' (Integer)';
                             }
+
+                            $p_field =
+                                '<input class="form-control" id="' . $idName . '" type="text"'
+                                . ' name="' . $fN . '" value="' . $fV . '"' . ' onChange="uFormUrl(' . $aname . ')" />';
                             break;
                         case 'color':
                             $colorNames = explode(',', ',' . $this->HTMLcolorList);
@@ -1220,14 +1222,14 @@ class ExtendedTemplateService extends TemplateService
                                 }
                                 $p_field .= '<option value="' . htmlspecialchars($val) . '"' . $sel . '>' . $val . '</option>';
                             }
-                            $p_field = '<select id="select-' . $idName . '" rel="' . $idName . '" name="C' . $fN . '" class="typo3-tstemplate-ceditor-color-select" onChange="uFormUrl(' . $aname . ');">' . $p_field . '</select>';
-                            $p_field .= '<input type="text" id="input-' . $idName . '" rel="' . $idName . '" name="' . $fN . '" class="typo3-tstemplate-ceditor-color-input" value="' . $fV . '"' . $this->getDocumentTemplate()->formWidth(7) . ' onChange="uFormUrl(' . $aname . ')" />';
+                            $p_field = '<select class="form-control t3js-color-select" id="select-' . $idName . '" rel="' . $idName . '" name="C' . $fN . '" onChange="uFormUrl(' . $aname . ');"' . $this->getDocumentTemplate()->formWidth(7) . '>' . $p_field . '</select>';
+                            $p_field .= '<input class="form-control t3js-color-input" type="text" id="input-' . $idName . '" rel="' . $idName . '" name="' . $fN . '" value="' . $fV . '"' . $this->getDocumentTemplate()->formWidth(7) . ' onChange="uFormUrl(' . $aname . ')" />';
                             break;
                         case 'wrap':
                             $wArr = explode('|', $fV);
-                            $p_field = '<input type="text" id="' . $idName . '" name="' . $fN . '" value="' . $wArr[0] . '"' . $this->getDocumentTemplate()->formWidth(29) . ' onChange="uFormUrl(' . $aname . ')" />';
+                            $p_field = '<input class="form-control" type="text" id="' . $idName . '" name="' . $fN . '" value="' . $wArr[0] . '"' . $this->getDocumentTemplate()->formWidth(29) . ' onChange="uFormUrl(' . $aname . ')" />';
                             $p_field .= ' | ';
-                            $p_field .= '<input type="text" name="W' . $fN . '" value="' . $wArr[1] . '"' . $this->getDocumentTemplate()->formWidth(15) . ' onChange="uFormUrl(' . $aname . ')" />';
+                            $p_field .= '<input class="form-control" type="text" name="W' . $fN . '" value="' . $wArr[1] . '"' . $this->getDocumentTemplate()->formWidth(15) . ' onChange="uFormUrl(' . $aname . ')" />';
                             break;
                         case 'offset':
                             $wArr = explode(',', $fV);
@@ -1253,34 +1255,36 @@ class ExtendedTemplateService extends TemplateService
                                     $val = isset($vParts[1]) ? $vParts[1] : $vParts[0];
                                     // option tag:
                                     $sel = '';
-                                    if ($val == $params['value']) {
+                                    if ($val === $params['value']) {
                                         $sel = ' selected';
                                     }
                                     $p_field .= '<option value="' . htmlspecialchars($val) . '"' . $sel . '>' . $this->getLanguageService()->sL($label) . '</option>';
                                 }
-                                $p_field = '<select id="' . $idName . '" name="' . $fN . '" onChange="uFormUrl(' . $aname . ')">' . $p_field . '</select>';
+                                $p_field = '<select class="form-control" id="' . $idName . '" name="' . $fN . '" onChange="uFormUrl(' . $aname . ')">' . $p_field . '</select>';
                             }
                             break;
                         case 'boolean':
-                            $p_field = '<input type="hidden" name="' . $fN . '" value="0" />';
-                            $sel = '';
-                            if ($fV) {
-                                $sel = ' checked';
-                            }
-                            $p_field .= '<input id="' . $idName . '" type="checkbox" name="' . $fN . '" value="' . ($typeDat['paramstr'] ? $typeDat['paramstr'] : 1) . '"' . $sel . ' onClick="uFormUrl(' . $aname . ')" />';
+                            $sel = $fV ? 'checked' : '';
+                            $p_field =
+                                '<label class="btn btn-default btn-checkbox">'
+                                    . '<input type="hidden" name="' . $fN . '" value="0" />'
+                                    . '<input id="' . $idName . '" type="checkbox" name="' . $fN . '" value="' . ($typeDat['paramstr'] ? $typeDat['paramstr'] : 1) . '" ' . $sel . ' onClick="uFormUrl(' . $aname . ')" />'
+                                    . '<span class="t3-icon fa"></span>'
+                                . '</label>';
                             break;
                         case 'comment':
-                            $p_field = '<input type="hidden" name="' . $fN . '" value="#" />';
-                            $sel = '';
-                            if (!$fV) {
-                                $sel = ' checked';
-                            }
-                            $p_field .= '<input id="' . $idName . '" type="checkbox" name="' . $fN . '" value=""' . $sel . ' onClick="uFormUrl(' . $aname . ')" />';
+                            $sel = $fV ? 'checked' : '';
+                            $p_field =
+                                '<label class="btn btn-default btn-checkbox">'
+                                . '<input type="hidden" name="' . $fN . '" value="#" />'
+                                . '<input id="' . $idName . '" type="checkbox" name="' . $fN . '" value="" ' . $sel . ' onClick="uFormUrl(' . $aname . ')" />'
+                                . '<span class="t3-icon fa"></span>'
+                                . '</label>';
                             break;
                         case 'file':
                             // extensionlist
                             $extList = $typeDat['paramstr'];
-                            if ($extList == 'IMAGE_EXT') {
+                            if ($extList === 'IMAGE_EXT') {
                                 $extList = $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'];
                             }
                             $p_field = '<option value="">(' . $extList . ')</option>';
@@ -1289,7 +1293,7 @@ class ExtendedTemplateService extends TemplateService
                                 $p_field .= '<option value=""></option>';
                                 $p_field .= '<option value="' . htmlspecialchars($val) . '" selected>' . $val . '</option>';
                             }
-                            $p_field = '<select id="' . $idName . '" name="' . $fN . '" onChange="uFormUrl(' . $aname . ')">' . $p_field . '</select>';
+                            $p_field = '<select class="form-select" id="' . $idName . '" name="' . $fN . '" onChange="uFormUrl(' . $aname . ')">' . $p_field . '</select>';
                             break;
                         case 'user':
                             $userFunction = $typeDat['paramstr'];
@@ -1299,9 +1303,8 @@ class ExtendedTemplateService extends TemplateService
                         case 'small':
 
                         default:
-                            $fwidth = $typeDat['type'] == 'small' ? 10 : 46;
-                            $p_field = '<input id="' . $idName . '" type="text" name="' . $fN . '" value="' . $fV . '"'
-                                . $this->getDocumentTemplate()->formWidth($fwidth) . ' onChange="uFormUrl(' . $aname . ')" />';
+                            $p_field = '<input class="form-control" id="' . $idName . '" type="text" name="' . $fN . '" value="' . $fV . '"'
+                                . ' onChange="uFormUrl(' . $aname . ')" />';
                     }
                     // Define default names and IDs
                     $userTyposcriptID = 'userTS-' . $idName;
@@ -1309,10 +1312,10 @@ class ExtendedTemplateService extends TemplateService
                     $checkboxName = 'check[' . $params['name'] . ']';
                     $checkboxID = 'check-' . $idName;
                     // Handle type=color specially
-                    if ($typeDat['type'] == 'color' && substr($params['value'], 0, 2) != '{$') {
-                        $color = '<div id="colorbox-' . $idName . '" class="typo3-tstemplate-ceditor-colorblock" style="background-color:' . $params['value'] . ';">&nbsp;</div>';
+                    if ($typeDat['type'] === 'color' && substr($params['value'], 0, 2) != '{$') {
+                        $appendedGroupAddon = '<span class="input-group-addon colorbox" id="colorbox-' . $idName . '" class="typo3-tstemplate-ceditor-colorblock" style="background-color:' . $params['value'] . ';"></span>';
                     } else {
-                        $color = '';
+                        $appendedGroupAddon = '';
                     }
                     $userTyposcriptStyle = '';
                     $deleteIconHTML = '';
@@ -1330,37 +1333,63 @@ class ExtendedTemplateService extends TemplateService
                         }
                         $deleteTitle = $this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:labels.deleteTitle', true);
                         $deleteIcon = $iconFactory->getIcon('actions-edit-undo', Icon::SIZE_SMALL)->render();
-                        $deleteIconHTML = '<span title="' . $deleteTitle . '" alt="' . $deleteTitle . '"'
-                            . ' class="typo3-tstemplate-ceditor-control undoIcon" rel="' . $idName . '">'
-                            . $deleteIcon . '</span>';
+                        $deleteIconHTML =
+                            '<button type="button" class="btn btn-default t3js-toggle" data-toggle="undo" rel="' . $idName . '">'
+                                . '<span title="' . $deleteTitle . '" alt="' . $deleteTitle . '">'
+                                    . $deleteIcon
+                                . '</span>'
+                            . '</button>';
                         $editTitle = $this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:labels.editTitle', true);
-                        $editIcon = $iconFactory->getIcon('actions-document-open', Icon::SIZE_SMALL)->render();
-                        $editIconHTML = '<span title="' . $editTitle . '" alt="' . $editTitle . '"'
-                            . ' class="typo3-tstemplate-ceditor-control editIcon" rel="' . $idName . '">'
-                            . $editIcon . '</span>';
+                        $editIcon = $iconFactory->getIcon('actions-open', Icon::SIZE_SMALL)->render();
+                        $editIconHTML =
+                            '<button type="button" class="btn btn-default t3js-toggle" data-toggle="edit"  rel="' . $idName . '">'
+                                . '<span title="' . $editTitle . '" alt="' . $editTitle . '">'
+                                    . $editIcon
+                                . '</span>'
+                            . '</button>';
                         $constantCheckbox = '<input type="hidden" name="' . $checkboxName . '" id="' . $checkboxID . '" value="' . $checkboxValue . '"/>';
                         // If there's no default value for the field, use a static label.
                         if (!$params['default_value']) {
                             $params['default_value'] = '[Empty]';
                         }
-                        $constantDefaultRow = '<div class="typo3-tstemplate-ceditor-row" id="' . $defaultTyposcriptID . '" '
-                            . $defaultTyposcriptStyle . '>' . $editIconHTML . htmlspecialchars($params['default_value'])
-                            . $color . '</div>';
+                        $constantDefaultRow =
+                            '<div class="input-group defaultTS" id="' . $defaultTyposcriptID . '" ' . $defaultTyposcriptStyle . '>'
+                                . '<span class="input-group-btn">' . $editIconHTML . '</span>'
+                                . '<input class="form-control" type="text" placeholder="' . htmlspecialchars($params['default_value']) . '" readonly>'
+                                . $appendedGroupAddon
+                            . '</div>';
+                    }
+                    $constantEditRow =
+                        '<div class="input-group userTS" id="' . $userTyposcriptID . '" ' . $userTyposcriptStyle . '>'
+                            . '<span class="input-group-btn">' . $deleteIconHTML . '</span>'
+                            . $p_field
+                            . $appendedGroupAddon
+                        . '</div>';
+                    $constantLabel = '<label class="t3js-formengine-label"><span>' . htmlspecialchars($head) . '</span></label>';
+                    $constantName = '<span class="help-block">[' . $params['name'] . ']</span>';
+                    $constantDescription = $body ? '<p class="help-block">' . htmlspecialchars($body) . '</p>' : '';
+                    $constantData = '';
+                    if ($hint !== '') {
+                        $constantData .= '<span class="help-block">' . $hint . '</span>';
                     }
-                    $constantEditRow = '<div class="typo3-tstemplate-ceditor-row" id="' . $userTyposcriptID . '" '
-                        . $userTyposcriptStyle . '>' . $deleteIconHTML . $p_field . $color . '</div>';
-                    $constantLabel = '<dt class="typo3-tstemplate-ceditor-label">' . htmlspecialchars($head) . '</dt>';
-                    $constantName = '<dt class="text-muted">[' . $params['name'] . ']</dt>';
-                    $constantDescription = $body ? '<dd>' . htmlspecialchars($body) . '</dd>' : '';
-                    $constantData = '<dd>' . $constantCheckbox . $constantEditRow . $constantDefaultRow . '</dd>';
-                    $output .= '<a name="' . $raname . '"></a>' . $help['constants'][$params['name']];
-                    $output .= '<dl class="typo3-tstemplate-ceditor-constant">' . $constantLabel . $constantName . $constantDescription . $constantData . '</dl>';
+                    $constantData .=
+                        $constantCheckbox
+                        . $constantEditRow
+                        . $constantDefaultRow;
+
+                    $output .=
+                        '<fieldset class="form-section">'
+                            . '<a name="' . $raname . '"></a>' . $help['constants'][$params['name']]
+                            . '<div class="form-group">'
+                                . $constantLabel . $constantName . $constantDescription . $constantData
+                            . '</div>'
+                        . '</fieldset>';
                 } else {
                     debug('Error. Constant did not exist. Should not happen.');
                 }
             }
         }
-        return $output;
+        return '<div class="tstemplate-constanteditor">' . $output . '</div>';
     }
 
     /***************************
index db5b9a9..5c79b9d 100644 (file)
@@ -12803,6 +12803,11 @@ iframe {
   white-space: normal;
   color: #737373;
 }
+.tstemplate-constanteditor .input-group.userTS .input-group-addon.colorbox {
+  display: inline-block;
+  height: 100%;
+  position: absolute;
+}
 .t3-grid-table {
   border-collapse: separate;
   border-spacing: 10px 0;
index ee64ee6..07ffc30 100644 (file)
@@ -26,9 +26,9 @@ define(['jquery'], function($) {
         */
        var ConstantEditor = {
                options: {
-                       editIconSelector: '.typo3-tstemplate-ceditor-control',
-                       colorSelectSelector: '.typo3-tstemplate-ceditor-color-select',
-                       colorInputSelector: '.typo3-tstemplate-ceditor-color-input'
+                       editIconSelector: '.t3js-toggle',
+                       colorSelectSelector: '.t3js-color-select',
+                       colorInputSelector: '.t3js-color-input'
                }
        };
 
@@ -42,14 +42,14 @@ define(['jquery'], function($) {
                var $defaultDiv = $('#defaultTS-' + constantName);
                var $userDiv = $('#userTS-' + constantName);
                var $checkBox = $('#check-' + constantName);
+               var toggleState = $editIcon.data('toggle');
 
-               if ($editIcon.hasClass('editIcon')) {
+               if (toggleState === 'edit') {
                        $defaultDiv.hide();
-                       $userDiv.show().css({background: '#fdf8bd'});
+                       $userDiv.show();
+                       $userDiv.find('input').css({background: '#fdf8bd'});
                        $checkBox.attr('disabled', false).attr('checked', true);
-               }
-
-               if ($editIcon.hasClass('undoIcon')) {
+               } else if (toggleState === 'undo') {
                        $userDiv.hide();
                        $defaultDiv.show();
                        $checkBox.val('').attr('disabled', true);
@@ -91,9 +91,9 @@ define(['jquery'], function($) {
                // no DOMready needed since only events for document are registered
                $(document).on('click', ConstantEditor.options.editIconSelector, function() {
                        ConstantEditor.changeProperty($(this));
-               }).on('click', ConstantEditor.options.colorSelectSelector, function() {
+               }).on('change', ConstantEditor.options.colorSelectSelector, function() {
                        ConstantEditor.updateColorFromSelect($(this));
-               }).on('click', ConstantEditor.options.colorInputSelector, function() {
+               }).on('blur', ConstantEditor.options.colorInputSelector, function() {
                        ConstantEditor.updateColorFromInput($(this));
                });
        };