[FEATURE] Use dropdown for secondary action items

This change replaces the "collapse-horizontal" functionality of the extended view icons into a dropdown from Bootstrap, allowing users to understand the icons better because the text is now also written next to the icon (similar to the Context Menu). The horizontal collapsing is removed as a UX improvement to a) give consistency around other areas in TYPO3 Backend b) was intended as a workaround to solve the Extended View rendering and to avoid button-hell c) avoid confusion around editors when buttons are visually moving horizontally d) the Extended View feature was unclear for editors when to enable it In addition the "View" link is now moved into the secondary button group. The Extended View checkbox is therefore removed as all secondary options are always available. Same functionality is also replaced in the File List module to use the "..." icon to show that there are more actions available. Side note: The dropdown needs a position-static due to overflow-x: auto - see twbs/bootstrap#29313 (comment) Resolves: #94390 Releases: master Change-Id: I925aa7690068fbde3f3aa5217f3f5629a2a890d1 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67458 Tested-by: core-ci <typo3@b13.com> Tested-by: Oliver Bartsch <bo@cedev.de> Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de> Reviewed-by: Oliver Bartsch <bo@cedev.de> Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
TYPO3 · Jun 21, 2021 · ceebe9b · ceebe9b
1 parent c9e6a55
commit ceebe9b
Show file tree

Hide file tree

Showing 15 changed files with 197 additions and 194 deletions.
diff --git a/Build/Sources/Sass/typo3/_element_panel.scss b/Build/Sources/Sass/typo3/_element_panel.scss
@@ -115,24 +115,6 @@ $panel-lg-padding: 35px;
     }
 }
 
-.recordlist {
-    .table-fit {
-        margin-bottom: 0;
-    }
-
-    // 'panel-heading' is replaced with '.card-header' in twbs4
-    .card-header,
-    .panel-heading {
-        padding: 0.625rem 1rem;
-
-        > a,
-        > span {
-            padding: 4px 0;
-            display: inline-block;
-        }
-    }
-}
-
 //
 // Panel hover
 //

diff --git a/Build/Sources/Sass/typo3/_icons.scss b/Build/Sources/Sass/typo3/_icons.scss
@@ -17,3 +17,15 @@
         font-size: 14px;
     }
 }
+
+.dropdown-toggle-no-chevron:after {
+    display: none;
+}
+
+.dropdown-list .dropdown-item {
+    .icon {
+        margin-right: 0.5rem;
+    }
+
+    padding: 0.375rem 1rem 0.375rem 0.75rem;
+}
diff --git a/Build/Sources/Sass/typo3/structure/_module_web_list.scss b/Build/Sources/Sass/typo3/structure/_module_web_list.scss
@@ -5,6 +5,18 @@
 .recordlist {
     overflow: unset;
 
+    .recordlist-heading {
+        font-weight: 700;
+        background-color: #d7d7d7;
+        padding: 0.625rem 1rem;
+
+        > a,
+        > span {
+            padding: 4px 0;
+            display: inline-block;
+        }
+    }
+
     table tr {
         td.deletePlaceholder {
             text-decoration: line-through;

diff --git a/Build/Sources/TypeScript/filelist/Resources/Public/TypeScript/FileList.ts b/Build/Sources/TypeScript/filelist/Resources/Public/TypeScript/FileList.ts
@@ -92,7 +92,7 @@ class Filelist {
       new RegularEvent('click', (event: Event, target: HTMLElement): void => {
         event.preventDefault();
         Filelist.openInfoPopup('_FILE', target.dataset.identifier);
-      }).delegateTo(document, 'a.btn.filelist-file-info');
+      }).delegateTo(document, 'a.filelist-file-info');
 
       new RegularEvent('click', (event: Event, target: HTMLElement): void => {
         event.preventDefault();
@@ -106,7 +106,7 @@ class Filelist {
           ? encodeURIComponent(url)
           : encodeURIComponent(top.list_frame.document.location.pathname + top.list_frame.document.location.search);
         top.list_frame.location.href = url + '&redirect=' + redirectUrl;
-      }).delegateTo(document, 'a.btn.filelist-file-copy');
+      }).delegateTo(document, 'a.filelist-file-copy');
 
       // clipboard events
       const clipboardCmd = document.querySelector('[data-event-name="filelist:clipboard:cmd"]');

diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
diff --git a/typo3/sysext/core/Configuration/DefaultConfiguration.php b/typo3/sysext/core/Configuration/DefaultConfiguration.php
@@ -1193,7 +1193,6 @@
         'checkStoredRecords' => true,
         'checkStoredRecordsLoose' => true,
         'defaultUserTSconfig' => 'options.enableBookmarks=1
-            options.file_list.enableDisplayBigControlPanel=selectable
             options.file_list.enableDisplayThumbnails=selectable
             options.file_list.enableClipBoard=selectable
             options.file_list.thumbnail {
@@ -1223,7 +1222,6 @@
         ',
         // String (exclude). Enter lines of default backend user/group TSconfig.
         'defaultPageTSconfig' => '
-            mod.web_list.enableDisplayBigControlPanel=selectable
             mod.web_list.enableClipBoard=selectable
             mod.web_list.tableDisplayOrder {
                 be_users.after = be_groups

diff --git a/.../master/Feature-94390-DropdownForRecordListAndFileListInFavorOfExtendedView.rst b/.../master/Feature-94390-DropdownForRecordListAndFileListInFavorOfExtendedView.rst
@@ -0,0 +1,30 @@
+.. include:: ../../Includes.txt
+
+==================================================================================
+Feature: #94390 - Dropdown for record list and file list in favor of Extended View
+==================================================================================
+
+See :issue:`94390`
+
+Description
+===========
+
+The option "Extended View", which was used in the TYPO3 Backend
+modules "Web => List" and "File => Filelist" to show additional icons,
+has been removed in favor of a dropdown with all items which is
+always available.
+
+
+Impact
+======
+
+This change is added as a UX Improvement over an additional
+configuration option to give editors a unified experience, as
+the additional menu with alternative items is common in other
+web applications.
+
+The TSconfig options `options.file_list.enableDisplayBigControlPanel`
+and `mod.web_list.enableDisplayBigControlPanel` have no effect anymore,
+because the checkboxes are removed.
+
+.. index:: Backend, ext:backend
diff --git a/typo3/sysext/filelist/Classes/Controller/FileListController.php b/typo3/sysext/filelist/Classes/Controller/FileListController.php
@@ -275,7 +275,6 @@ protected function menuConfig()
             'reverse' => '',
             'displayThumbs' => '',
             'clipBoard' => '',
-            'bigControlPanel' => ''
         ];
         // CLEANSE SETTINGS
         $this->MOD_SETTINGS = BackendUtility::getModuleData(
@@ -312,14 +311,8 @@ protected function initializeView(ViewInterface $view)
     protected function initializeIndexAction()
     {
         // Apply predefined values for hidden checkboxes
-        // Set predefined value for DisplayBigControlPanel:
         $backendUser = $this->getBackendUser();
         $userTsConfig = $backendUser->getTSConfig();
-        if (($userTsConfig['options.']['file_list.']['enableDisplayBigControlPanel'] ?? '') === 'activated') {
-            $this->MOD_SETTINGS['bigControlPanel'] = true;
-        } elseif (($userTsConfig['options.']['file_list.']['enableDisplayBigControlPanel'] ?? '') === 'deactivated') {
-            $this->MOD_SETTINGS['bigControlPanel'] = false;
-        }
         // Set predefined value for DisplayThumbnails:
         if (($userTsConfig['options.']['file_list.']['enableDisplayThumbnails'] ?? '') === 'activated') {
             $this->MOD_SETTINGS['displayThumbs'] = true;
@@ -393,8 +386,7 @@ protected function indexAction(): ResponseInterface
                 MathUtility::forceIntegerInRange($this->pointer, 0, 100000),
                 $this->MOD_SETTINGS['sort'],
                 (bool)($this->MOD_SETTINGS['reverse'] ?? false),
-                (bool)($this->MOD_SETTINGS['clipBoard'] ?? false),
-                (bool)($this->MOD_SETTINGS['bigControlPanel'] ?? false)
+                (bool)($this->MOD_SETTINGS['clipBoard'] ?? false)
             );
             // Generate the list, if accessible
             if ($this->folderObject->getStorage()->isBrowsable()) {
@@ -435,18 +427,6 @@ protected function indexAction(): ResponseInterface
             $this->view->assign('headline', $this->getModuleHeadline());
 
             $this->view->assign('checkboxes', [
-                'bigControlPanel' => [
-                    'enabled' => ($userTsConfig['options.']['file_list.']['enableDisplayBigControlPanel'] ?? '') === 'selectable',
-                    'label' => htmlspecialchars($this->getLanguageService()->getLL('bigControlPanel')),
-                    'html' => BackendUtility::getFuncCheck(
-                        $this->id,
-                        'SET[bigControlPanel]',
-                        $this->MOD_SETTINGS['bigControlPanel'] ?? '',
-                        '',
-                        '',
-                        'id="bigControlPanel"'
-                    ),
-                ],
                 'displayThumbs' => [
                     'enabled' => $GLOBALS['TYPO3_CONF_VARS']['GFX']['thumbnails'] && ($userTsConfig['options.']['file_list.']['enableDisplayThumbnails'] ?? '') === 'selectable',
                     'label' => htmlspecialchars($this->getLanguageService()->getLL('displayThumbs')),
@@ -783,18 +763,6 @@ protected function buildListOptionCheckboxes(string $searchWord = ''): void
             $addParams .= '&tx_filelist_file_filelistlist%5BsearchWord%5D=' . htmlspecialchars($searchWord);
         }
         $this->view->assign('checkboxes', [
-            'bigControlPanel' => [
-                'enabled' => $userTsConfig['options.']['file_list.']['enableDisplayBigControlPanel'] === 'selectable',
-                'label' => htmlspecialchars($this->getLanguageService()->getLL('bigControlPanel')),
-                'html' => BackendUtility::getFuncCheck(
-                    $this->id,
-                    'SET[bigControlPanel]',
-                    $this->MOD_SETTINGS['bigControlPanel'] ?? '',
-                    '',
-                    $addParams,
-                    'id="bigControlPanel"'
-                ),
-            ],
             'displayThumbs' => [
                 'enabled' => $GLOBALS['TYPO3_CONF_VARS']['GFX']['thumbnails'] && $userTsConfig['options.']['file_list.']['enableDisplayThumbnails'] === 'selectable',
                 'label' => htmlspecialchars($this->getLanguageService()->getLL('displayThumbs')),

diff --git a/typo3/sysext/filelist/Classes/FileList.php b/typo3/sysext/filelist/Classes/FileList.php
@@ -212,9 +212,8 @@ public function __construct()
      * @param string $sort Sorting column
      * @param bool $sortRev Sorting direction
      * @param bool $clipBoard
-     * @param bool $bigControlPanel Show clipboard flag
      */
-    public function start(Folder $folderObject, $pointer, $sort, $sortRev, $clipBoard = false, $bigControlPanel = false)
+    public function start(Folder $folderObject, $pointer, $sort, $sortRev, $clipBoard = false)
     {
         $this->folderObject = $folderObject;
         $this->counter = 0;
@@ -223,12 +222,9 @@ public function start(Folder $folderObject, $pointer, $sort, $sortRev, $clipBoar
         $this->sortRev = $sortRev;
         $this->firstElementNumber = $pointer;
         // Cleaning rowlist for duplicates and place the $titleCol as the first column always!
-        $rowlist = 'file,_LOCALIZATION_,fileext,tstamp,size,rw,_REF_';
+        $rowlist = 'file,_LOCALIZATION_,_CONTROL_,fileext,tstamp,size,rw,_REF_';
         if ($clipBoard) {
-            $rowlist = str_replace('_LOCALIZATION_,', '_LOCALIZATION_,_CLIPBOARD_,', $rowlist);
-        }
-        if ($bigControlPanel) {
-            $rowlist = str_replace('_LOCALIZATION_,', '_LOCALIZATION_,_CONTROL_,', $rowlist);
+            $rowlist = str_replace('_CONTROL_,', '_CONTROL_,_CLIPBOARD_,', $rowlist);
         }
         $this->fieldArray = explode(',', $rowlist);
     }
@@ -343,8 +339,8 @@ public function getTable()
         }
 
         return '
-            <div class="panel panel-default">
-                <div class="table-fit">
+            <div class="mb-4 mt-4">
+                <div class="table-fit mb-0">
                     <table class="table table-striped table-hover" id="typo3-filelist">
                         <thead>' . $this->addElement('', $theData, 'th') . '</thead>
                         <tbody>' . $iOut . '</tbody>
@@ -1133,8 +1129,36 @@ public function makeEdit($fileOrFolderObject)
             $hookObject->manipulateEditIcons($cells, $this);
         }
         unset($cells['__fileOrFolderObject']);
-        // Compile items into a DIV-element:
-        return '<div class="btn-group">' . implode('', $cells) . '</div>';
+        // Compile items into a dropdown
+        $cellOutput = '';
+        $output = '';
+        foreach ($cells as $key => $action) {
+            if (in_array($key, ['view', 'metadata', 'delete'])) {
+                $output .= $action;
+                continue;
+            }
+            if ($action === $this->spaceIcon) {
+                continue;
+            }
+            // This is a backwards-compat layer for the existing hook items, which will be removed in TYPO3 v12.
+            $action = str_replace('btn btn-default', 'dropdown-item', $action);
+            $title = [];
+            preg_match('/title="([^"]*)"/', $action, $title);
+            if (empty($title)) {
+                preg_match('/aria-label="([^"]*)"/', $action, $title);
+            }
+            if (!empty($title[1] ?? '')) {
+                $action = str_replace('</a>', ' ' . $title[1] . '</a>', $action);
+                $action = str_replace('</button>', ' ' . $title[1] . '</button>', $action);
+            }
+            $cellOutput .= '<li>' . $action . '</li>';
+        }
+        $icon = $this->iconFactory->getIcon('actions-menu-alternative', Icon::SIZE_SMALL);
+        $output .= '<div class="btn-group dropdown position-static">' .
+            '<a href="#actions_' . $fileOrFolderObject->getHashedIdentifier() . '" class="btn btn-default dropdown-toggle dropdown-toggle-no-chevron" data-bs-toggle="dropdown" data-bs-boundary="window" aria-expanded="false">' . $icon->render() . '</a>' .
+            '<ul id="actions_' . $fileOrFolderObject->getHashedIdentifier() . '" class="dropdown-menu dropdown-list">' . $cellOutput . '</ul>' .
+            '</div>';
+        return '<div class="btn-group position-static">' . $output . '</div>';
     }
 
     /**

diff --git a/typo3/sysext/filelist/Resources/Private/Language/locallang_mod_file_list.xlf b/typo3/sysext/filelist/Resources/Private/Language/locallang_mod_file_list.xlf
@@ -3,9 +3,6 @@
 	<file source-language="en" datatype="plaintext" original="EXT:filelist/Resources/Private/Language/locallang_mod_file_list.xlf" date="2011-10-17T20:22:34Z" product-name="lang">
 		<header/>
 		<body>
-			<trans-unit id="bigControlPanel" resname="bigControlPanel">
-				<source>Extended view</source>
-			</trans-unit>
 			<trans-unit id="clipBoard" resname="clipBoard">
 				<source>Show clipboard</source>
 			</trans-unit>

diff --git a/typo3/sysext/filelist/Resources/Private/Partials/ListOptions.html b/typo3/sysext/filelist/Resources/Private/Partials/ListOptions.html
@@ -2,14 +2,6 @@
     Listing options for extended view, clipboard and thumbnails
 -->
 <div class="typo3-listOptions">
-    <f:if condition="{checkboxes.bigControlPanel.enabled}">
-        <div class="form-check">
-            {checkboxes.bigControlPanel.html -> f:format.raw()}
-            <label for="bigControlPanel" class="form-check-label">
-                {checkboxes.bigControlPanel.label}
-            </label>
-        </div>
-    </f:if>
     <f:if condition="{checkboxes.displayThumbs.enabled}">
         <div class="form-check">
             {checkboxes.displayThumbs.html -> f:format.raw()}