[TASK] Optimize usability of new category tree toolbar 21/50421/4
authorFrank Naegler <frank.naegler@typo3.org>
Fri, 28 Oct 2016 13:26:14 +0000 (15:26 +0200)
committerNicole Cordes <typo3@cordes.co>
Sat, 29 Oct 2016 11:30:55 +0000 (13:30 +0200)
This patch improves the usability of the category tree toolbar.

- Add a better icon for the toggle button
- Add a title for the toggle button
- Add tooltip for all buttons
- Group all filter button into one button group

Resolves: #78489
Releases: master
Change-Id: I5a6b30447dbb6b313a3ad00673267208236814be
Reviewed-on: https://review.typo3.org/50421
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Joerg Boesche <typo3@joergboesche.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Nicole Cordes <typo3@cordes.co>
Tested-by: Nicole Cordes <typo3@cordes.co>
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/Element/TreeToolbar.js
typo3/sysext/core/Classes/Imaging/IconRegistry.php
typo3/sysext/lang/locallang_csh_corebe.xlf

index df6f53d..d6ebb58 100644 (file)
@@ -14,7 +14,7 @@
 /**
  * Module: TYPO3/CMS/Backend/FormEngine/Element/TreeToolbar
  */
-define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/FormEngine/Element/SvgTree'], function($, Icons) {
+define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/Tooltip', 'TYPO3/CMS/Backend/FormEngine/Element/SvgTree'], function($, Icons) {
     'use strict';
 
     /**
@@ -66,13 +66,9 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/FormEngine/Eleme
                     '<input type="text" class="form-control search-input" placeholder="' + TYPO3.lang['tcatree.findItem'] + '">' +
                 '</div>' +
                 '<div class="btn-group">' +
-                    '<button type="button" class="btn btn-default expand-all-btn" title="' + TYPO3.lang['tcatree.expandAll'] + '"></button>' +
-                '</div>' +
-                '<div class="btn-group">' +
-                    '<button type="button" class="btn btn-default collapse-all-btn" title="' + TYPO3.lang['tcatree.collapseAll'] + '"></button>' +
-                '</div>' +
-                '<div class="btn-group">' +
-                    '<button type="button" class="btn btn-default hide-unchecked-btn" title="' + TYPO3.lang['tcatree.toggleHideUnchecked'] + '"></button>' +
+                    '<button type="button" data-toggle="tooltip" class="btn btn-default expand-all-btn" title="' + TYPO3.lang['tcatree.expandAll'] + '"></button>' +
+                    '<button type="button" data-toggle="tooltip" class="btn btn-default collapse-all-btn" title="' + TYPO3.lang['tcatree.collapseAll'] + '"></button>' +
+                    '<button type="button" data-toggle="tooltip" class="btn btn-default hide-unchecked-btn" title="' + TYPO3.lang['tcatree.toggleHideUnchecked'] + '"></button>' +
                 '</div>' +
             '</div>'
         )
@@ -114,7 +110,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/FormEngine/Eleme
         Icons.getIcon('apps-pagetree-category-collapse-all', Icons.sizes.small).done(function(icon) {
             $toolbar.find('.collapse-all-btn').append(icon);
         });
-        Icons.getIcon('actions-document-select', Icons.sizes.small).done(function(icon) {
+        Icons.getIcon('apps-pagetree-category-toggle-hide-checked', Icons.sizes.small).done(function(icon) {
             $toolbar.find('.hide-unchecked-btn').append(icon);
         });
 
@@ -124,6 +120,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/FormEngine/Eleme
             me.search.call(me, this);
         });
         $toolbar.find(this.settings.toggleHideUnchecked).on('click', this.toggleHideUnchecked.bind(this));
+        $toolbar.find('[data-toggle="tooltip"]').tooltip();
     };
 
     /**
index 0a61ef9..269561b 100644 (file)
@@ -1426,6 +1426,12 @@ class IconRegistry implements SingletonInterface
                 'source' => 'EXT:core/Resources/Public/Icons/T3Icons/apps/apps-pagetree-category-collaps-all.svg'
             ]
         ],
+        'apps-pagetree-category-toggle-hide-checked' => [
+            'provider' => FontawesomeIconProvider::class,
+            'options' => [
+                'name' => 'check-square'
+            ]
+        ],
         'apps-toolbar-menu-actions' => [
             'provider' => SvgIconProvider::class,
             'options' => [
index a1c0cb8..79edc84 100644 (file)
@@ -159,6 +159,9 @@ If you click the folder title in the Folder Tree you will see the sub-module loa
                        <trans-unit id="tcatree.expandAll">
                                <source>Expand All</source>
                        </trans-unit>
+                       <trans-unit id="tcatree.toggleHideUnchecked">
+                               <source>hide/show unchecked items</source>
+                       </trans-unit>
                        <trans-unit id="tcatree.findItem">
                                <source>Find Item</source>
                        </trans-unit>