[TASK] Streamline icons (order/style) in InlineRecordContainer 04/50104/13
authorDaniel Windloff <daniel.jc.windloff@googlemail.com>
Fri, 7 Oct 2016 12:05:47 +0000 (14:05 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Thu, 18 May 2017 13:48:28 +0000 (15:48 +0200)
In order to be consistent, change the button order and styling
(according to the list module) in the InlineRecordContainer.

Resolves: #78174
Releases: master, 8.7
Change-Id: I2f4498f1e822785c2b26dab697ec4fe26aae5ef0
Reviewed-on: https://review.typo3.org/50104
Reviewed-by: Jan Helke <typo3@helke.de>
Tested-by: Jan Helke <typo3@helke.de>
Tested-by: TYPO3com <no-reply@typo3.com>
Tested-by: Riccardo De Contardi <erredeco@gmail.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/backend/Classes/Form/Container/InlineRecordContainer.php
typo3/sysext/backend/Resources/Public/JavaScript/jsfunc.inline.js

index 9e7797b..a678007 100644 (file)
@@ -382,8 +382,18 @@ class InlineRecordContainer extends AbstractContainer
         $languageService = $this->getLanguageService();
         $backendUser = $this->getBackendUserAuthentication();
         // Initialize:
-        $cells = [];
-        $additionalCells = [];
+        $cells = [
+            'edit' => '',
+            'hide' => '',
+            'delete' => '',
+            'info' => '',
+            'new' => '',
+            'sort.up' => '',
+            'sort.down' => '',
+            'dragdrop' => '',
+            'localize' => '',
+            'locked' => '',
+        ];
         $isNewItem = substr($rec['uid'], 0, 3) === 'NEW';
         $isParentExisting = MathUtility::canBeInterpretedAsInteger($data['inlineParentUid']);
         $tcaTableCtrl = $GLOBALS['TCA'][$foreignTable]['ctrl'];
@@ -411,9 +421,9 @@ class InlineRecordContainer extends AbstractContainer
             $hookObj->renderForeignRecordHeaderControl_preProcess($data['inlineParentUid'], $foreignTable, $rec, $inlineConfig, $data['isInlineDefaultLanguageRecordInLocalizedParentContext'], $enabledControls);
         }
         if ($data['isInlineDefaultLanguageRecordInLocalizedParentContext']) {
-            $cells['localize.isLocalizable'] = '<span title="' . htmlspecialchars($languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_misc.xlf:localize.isLocalizable')) . '">'
-                . $this->iconFactory->getIcon('actions-edit-localize-status-low', Icon::SIZE_SMALL)->render()
-                . '</span>';
+            $cells['localize'] = '<span title="' . htmlspecialchars($languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_misc.xlf:localize.isLocalizable')) . '">
+                    ' . $this->iconFactory->getIcon('actions-edit-localize-status-low', Icon::SIZE_SMALL)->render() . '
+                </span>';
         }
         // "Info": (All records)
         // @todo: hardcoded sys_file!
@@ -429,6 +439,8 @@ class InlineRecordContainer extends AbstractContainer
                                <a class="btn btn-default" href="#" onclick="' . htmlspecialchars(('top.launchView(' . GeneralUtility::quoteJSvalue($table) . ', ' . GeneralUtility::quoteJSvalue($uid) . '); return false;')) . '" title="' . htmlspecialchars($languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_mod_web_list.xlf:showInfo')) . '">
                                        ' . $this->iconFactory->getIcon('actions-document-info', Icon::SIZE_SMALL)->render() . '
                                </a>';
+        } else {
+            $cells['info'] = '<span class="btn btn-default disabled">' . $this->iconFactory->getIcon('empty-empty', Icon::SIZE_SMALL)->render() . '</span>';
         }
         // If the table is NOT a read-only table, then show these links:
         if (!$tcaTableCtrl['readOnly'] && !$data['isInlineDefaultLanguageRecordInLocalizedParentContext']) {
@@ -441,27 +453,38 @@ class InlineRecordContainer extends AbstractContainer
                         $style = ' style="' . $inlineConfig['inline']['inlineNewButtonStyle'] . '"';
                     }
                     $cells['new'] = '
-                                               <a class="btn btn-default inlineNewButton ' . $this->inlineData['config'][$nameObject]['md5'] . '" href="#" onclick="' . htmlspecialchars($onClick) . '" title="' . htmlspecialchars($languageService->sL(('LLL:EXT:lang/Resources/Private/Language/locallang_mod_web_list.xlf:new' . ($isPagesTable ? 'Page' : 'Record')))) . '" ' . $style . '>
-                                                       ' . $this->iconFactory->getIcon('actions-' . ($isPagesTable ? 'page' : 'document') . '-new', Icon::SIZE_SMALL)->render() . '
-                                               </a>';
+                        <a class="btn btn-default inlineNewButton ' . $this->inlineData['config'][$nameObject]['md5'] . '" href="#" onclick="' . htmlspecialchars($onClick) . '" title="' . htmlspecialchars($languageService->sL(('LLL:EXT:lang/Resources/Private/Language/locallang_mod_web_list.xlf:new' . ($isPagesTable ? 'Page' : 'Record')))) . '" ' . $style . '>
+                            ' . $this->iconFactory->getIcon('actions-' . ($isPagesTable ? 'page-new' : 'add'), Icon::SIZE_SMALL)->render() . '
+                        </a>';
                 }
             }
             // "Up/Down" links
             if ($enabledControls['sort'] && $permsEdit && $enableManualSorting) {
                 // Up
                 $onClick = 'return inline.changeSorting(' . GeneralUtility::quoteJSvalue($nameObjectFtId) . ', \'1\')';
-                $style = $inlineConfig['inline']['first'] == $rec['uid'] ? 'style="visibility: hidden;"' : '';
+                $icon = 'actions-move-up';
+                $class = '';
+                if ($inlineConfig['inline']['first'] == $rec['uid']) {
+                    $class = ' disabled';
+                    $icon = 'empty-empty';
+                }
                 $cells['sort.up'] = '
-                                       <a class="btn btn-default sortingUp" href="#" onclick="' . htmlspecialchars($onClick) . '" ' . $style . ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_mod_web_list.xlf:moveUp')) . '">
-                                               ' . $this->iconFactory->getIcon('actions-move-up', Icon::SIZE_SMALL)->render() . '
-                                       </a>';
+                    <a class="btn btn-default sortingUp' . $class . '" href="#" onclick="' . htmlspecialchars($onClick) . '" title="' . htmlspecialchars($languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_mod_web_list.xlf:moveUp')) . '">
+                        ' . $this->iconFactory->getIcon($icon, Icon::SIZE_SMALL)->render() . '
+                    </a>';
                 // Down
                 $onClick = 'return inline.changeSorting(' . GeneralUtility::quoteJSvalue($nameObjectFtId) . ', \'-1\')';
-                $style = $inlineConfig['inline']['last'] == $rec['uid'] ? 'style="visibility: hidden;"' : '';
+                $icon = 'actions-move-down';
+                $class = '';
+                if ($inlineConfig['inline']['last'] == $rec['uid']) {
+                    $class = ' disabled';
+                    $icon = 'empty-empty';
+                }
+
                 $cells['sort.down'] = '
-                                       <a class="btn btn-default sortingDown" href="#" onclick="' . htmlspecialchars($onClick) . '" ' . $style . ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_mod_web_list.xlf:moveDown')) . '">
-                                               ' . $this->iconFactory->getIcon('actions-move-down', Icon::SIZE_SMALL)->render() . '
-                                       </a>';
+                    <a class="btn btn-default sortingDown' . $class . '" href="#" onclick="' . htmlspecialchars($onClick) . '" title="' . htmlspecialchars($languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_mod_web_list.xlf:moveDown')) . '">
+                        ' . $this->iconFactory->getIcon($icon, Icon::SIZE_SMALL)->render() . '
+                    </a>';
             }
             // "Edit" link:
             if (($rec['table_local'] === 'sys_file') && !$isNewItem) {
@@ -493,10 +516,10 @@ class InlineRecordContainer extends AbstractContainer
                         'returnUrl' => GeneralUtility::getIndpEnv('REQUEST_URI')
                     ]);
                     $title = $languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_core.xlf:cm.editMetadata');
-                    $cells['editmetadata'] = '
-                                               <a class="btn btn-default" href="' . htmlspecialchars($url) . '" title="' . htmlspecialchars($title) . '">
-                                                       ' . $this->iconFactory->getIcon('actions-open', Icon::SIZE_SMALL)->render() . '
-                                               </a>';
+                    $cells['edit'] = '
+                        <a class="btn btn-default" href="' . htmlspecialchars($url) . '" title="' . htmlspecialchars($title) . '">
+                            ' . $this->iconFactory->getIcon('actions-open', Icon::SIZE_SMALL)->render() . '
+                        </a>';
                 }
             }
             // "Delete" link:
@@ -517,34 +540,34 @@ class InlineRecordContainer extends AbstractContainer
                 $className = 't3js-' . $nameObjectFtId . '_disabled';
                 if ($rec[$hiddenField]) {
                     $title = htmlspecialchars($languageService->sL(('LLL:EXT:lang/Resources/Private/Language/locallang_mod_web_list.xlf:unHide' . ($isPagesTable ? 'Page' : ''))));
-                    $cells['hide.unhide'] = '
-                                               <a class="btn btn-default hiddenHandle ' . $className . '" href="#" onclick="'
-                        . htmlspecialchars($onClick) . '"' . 'title="' . $title . '">' .
-                        $this->iconFactory->getIcon('actions-edit-unhide', Icon::SIZE_SMALL)->render() . '
-                                               </a>';
+                    $cells['hide'] = '
+                        <a class="btn btn-default hiddenHandle ' . $className . '" href="#" onclick="
+                            ' . htmlspecialchars($onClick) . '"' . 'title="' . $title . '">
+                            ' . $this->iconFactory->getIcon('actions-edit-unhide', Icon::SIZE_SMALL)->render() . '
+                        </a>';
                 } else {
                     $title = htmlspecialchars($languageService->sL(('LLL:EXT:lang/Resources/Private/Language/locallang_mod_web_list.xlf:hide' . ($isPagesTable ? 'Page' : ''))));
-                    $cells['hide.hide'] = '
-                                               <a class="btn btn-default hiddenHandle ' . $className . '" href="#" onclick="'
-                        . htmlspecialchars($onClick) . '"' . 'title="' . $title . '">' .
-                        $this->iconFactory->getIcon('actions-edit-hide', Icon::SIZE_SMALL)->render() . '
-                                               </a>';
+                    $cells['hide'] = '
+                        <a class="btn btn-default hiddenHandle ' . $className . '" href="#" onclick="
+                            ' . htmlspecialchars($onClick) . '"' . 'title="' . $title . '">
+                            ' . $this->iconFactory->getIcon('actions-edit-hide', Icon::SIZE_SMALL)->render() . '
+                        </a>';
                 }
             }
             // Drag&Drop Sorting: Sortable handler for script.aculo.us
             if ($enabledControls['dragdrop'] && $permsEdit && $enableManualSorting && $inlineConfig['appearance']['useSortable']) {
-                $additionalCells['dragdrop'] = '
-                                       <span class="btn btn-default sortableHandle" data-id="' . htmlspecialchars($rec['uid']) . '" title="' . htmlspecialchars($languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_core.xlf:labels.move')) . '">
-                                               ' . $this->iconFactory->getIcon('actions-move-move', Icon::SIZE_SMALL)->render() . '
-                                       </span>';
+                $cells['dragdrop'] = '
+                    <span class="btn btn-default sortableHandle" data-id="' . htmlspecialchars($rec['uid']) . '" title="' . htmlspecialchars($languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_core.xlf:labels.move')) . '">
+                        ' . $this->iconFactory->getIcon('actions-move-move', Icon::SIZE_SMALL)->render() . '
+                    </span>';
             }
         } elseif ($data['isInlineDefaultLanguageRecordInLocalizedParentContext'] && $isParentExisting) {
             if ($enabledControls['localize'] && $data['isInlineDefaultLanguageRecordInLocalizedParentContext']) {
                 $onClick = 'inline.synchronizeLocalizeRecords(' . GeneralUtility::quoteJSvalue($nameObjectFt) . ', ' . GeneralUtility::quoteJSvalue($rec['uid']) . ');';
                 $cells['localize'] = '
-                                       <a class="btn btn-default" href="#" onclick="' . htmlspecialchars($onClick) . '" title="' . htmlspecialchars($languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_misc.xlf:localize')) . '">
-                                               ' . $this->iconFactory->getIcon('actions-document-localize', Icon::SIZE_SMALL)->render() . '
-                                       </a>';
+                    <a class="btn btn-default" href="#" onclick="' . htmlspecialchars($onClick) . '" title="' . htmlspecialchars($languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_misc.xlf:localize')) . '">
+                        ' . $this->iconFactory->getIcon('actions-document-localize', Icon::SIZE_SMALL)->render() . '
+                    </a>';
             }
         }
         // If the record is edit-locked by another user, we will show a little warning sign:
@@ -560,12 +583,21 @@ class InlineRecordContainer extends AbstractContainer
         }
 
         $out = '';
+        if (!empty($cells['edit']) || !empty($cells['hide']) || !empty($cells['delete'])) {
+            $out .= '<div class="btn-group btn-group-sm" role="group">' . $cells['edit'] . $cells['hide'] . $cells['delete'] . '</div>';
+            unset($cells['edit'], $cells['hide'], $cells['delete']);
+        }
+        if (!empty($cells['info']) || !empty($cells['new']) || !empty($cells['sort.up']) || !empty($cells['sort.down']) || !empty($cells['dragdrop'])) {
+            $out .= '<div class="btn-group btn-group-sm" role="group">' . $cells['info'] . $cells['new'] . $cells['sort.up'] . $cells['sort.down'] . $cells['dragdrop'] . '</div>';
+            unset($cells['info'], $cells['new'], $cells['sort.up'], $cells['sort.down'], $cells['dragdrop']);
+        }
+        if (!empty($cells['localize'])) {
+            $out .= '<div class="btn-group btn-group-sm" role="group">' . $cells['localize'] . '</div>';
+            unset($cells['localize']);
+        }
         if (!empty($cells)) {
             $out .= ' <div class="btn-group btn-group-sm" role="group">' . implode('', $cells) . '</div>';
         }
-        if (!empty($additionalCells)) {
-            $out .= ' <div class="btn-group btn-group-sm" role="group">' . implode('', $additionalCells) . '</div>';
-        }
         return $out;
     }
 
index 63c5f1f..11247b1 100644 (file)
@@ -633,7 +633,7 @@ var inline = {
        },
 
        redrawSortingButtons: function (objectPrefix, records) {
-               var i, $headerObj, sortUp, sortDown;
+               var i, $headerObj, sortUp, sortDown, partOfHeaderObj, iconIdentifier;
 
                // if no records were passed, fetch them from form field
                if (typeof records == 'undefined') {
@@ -644,23 +644,41 @@ var inline = {
                                records = this.trimExplode(',', formObj[0].value);
                        }
                }
-
-               for (i = 0; i < records.length; i++) {
-                       if (!records[i].length) {
-                               continue;
-                       }
-
-                       $headerObj = $('#' + this.escapeObjectId(objectPrefix) + this.structureSeparator + records[i] + '_header');
-                       sortUp = $headerObj.find('.sortingUp');
-                       sortDown = $headerObj.find('.sortingDown');
-
-                       if (sortUp) {
-                               sortUp.css('visibility', (i == 0 ? 'hidden' : 'visible'));
-                       }
-                       if (sortDown) {
-                               sortDown.css('visibility', (i == records.length - 1 ? 'hidden' : 'visible'));
+               partOfHeaderObj = this.escapeObjectId(objectPrefix) + this.structureSeparator;
+               require(['TYPO3/CMS/Backend/Icons'], function(Icons) {
+                       for (i = 0; i < records.length; i++) {
+                               if (!records[i].length) {
+                                       continue;
+                               }
+                               $headerObj = TYPO3.jQuery('#' + partOfHeaderObj + records[i] + '_header');
+                               sortUp = $headerObj.find('.sortingUp');
+                               iconIdentifier = 'actions-move-up';
+                               if (sortUp) {
+                                       if (i == 0) {
+                                               sortUp.addClass('disabled');
+                                               iconIdentifier = 'empty-empty';
+                                       } else {
+                                               sortUp.removeClass('disabled');
+                                       }
+                                       Icons.getIcon(iconIdentifier, Icons.sizes.small).done(function(markup) {
+                                               sortUp.find('.t3js-icon').replaceWith(markup);
+                                       });
+                               }
+                               sortDown = $headerObj.find('.sortingDown');
+                               iconIdentifier = 'actions-move-down';
+                               if (sortDown) {
+                                       if (i == records.length - 1) {
+                                               sortDown.addClass('disabled');
+                                               iconIdentifier = 'empty-empty';
+                                       } else {
+                                               sortDown.removeClass('disabled');
+                                       }
+                                       Icons.getIcon(iconIdentifier, Icons.sizes.small).done(function(markup) {
+                                               sortDown.find('.t3js-icon').replaceWith(markup);
+                                       });
+                               }
                        }
-               }
+               });
        },
 
        memorizeAddRecord: function (objectPrefix, newUid, afterUid, selectedValue) {