[FEATURE] Introduce tree node labels
We've upgraded the backend tree component by extending tree nodes to incorporate labels, offering enhanced functionality and additional information. Before the implementation of labels, developers and integrators relied on `pageTree.backgroundColor.<pageid>` for visual cues. However, these background colors lacked accessibility and meaningful context, catering only to users with perfect eyesight and excluding those dependent on screen readers or contrast modes. With labels, we now cater to all editors. These labels not only offer customizable color markings for tree nodes but also require an associated label for improved accessibility. Each node can support multiple labels, sorted by priority, with the highest priority label taking precedence over others. Users can assign a label to a node via tsconfig, noting that only one label can be set through this method. ``` options.pageTree.label.<pageid> { label = Campaign A color = #ff8700 } ``` The labels can also be added by using the event `\TYPO3\CMS\Backend\Controller\Event\AfterPageTreeItemsPreparedEvent`. ``` $items = $event->getItems(); foreach ($items as &$item) { $item['labels'][] = new Label( label: 'Campaign B', color: #00658f, priority: 1, ); } ``` Please note that only the marker for the label with the highest priority is rendered. All additional labels will only be added to the title of the node. Resolves: #103211 Releases: main Change-Id: I5daaa1efe6e11c506bd5f5f86770bf9895bb6789 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83143 Tested-by:Oliver Bartsch <bo@cedev.de> Reviewed-by:
Oliver Bartsch <bo@cedev.de> Tested-by:
core-ci <typo3@b13.com> Reviewed-by:
Benjamin Kott <benjamin.kott@outlook.com> Tested-by:
Benjamin Kott <benjamin.kott@outlook.com> Tested-by:
Benjamin Franzke <ben@bnf.dev> Reviewed-by:
Benjamin Franzke <ben@bnf.dev>
Showing
- Build/Sources/Sass/component/_tree.scss 12 additions, 1 deletionBuild/Sources/Sass/component/_tree.scss
- Build/Sources/TypeScript/backend/tree/page-tree-element.ts 1 addition, 0 deletionsBuild/Sources/TypeScript/backend/tree/page-tree-element.ts
- Build/Sources/TypeScript/backend/tree/tree-node.ts 7 additions, 0 deletionsBuild/Sources/TypeScript/backend/tree/tree-node.ts
- Build/Sources/TypeScript/backend/tree/tree.ts 43 additions, 3 deletionsBuild/Sources/TypeScript/backend/tree/tree.ts
- typo3/sysext/backend/Classes/Controller/FileStorage/TreeController.php 1 addition, 0 deletions...backend/Classes/Controller/FileStorage/TreeController.php
- typo3/sysext/backend/Classes/Controller/FormSelectTreeAjaxController.php 1 addition, 0 deletions...ckend/Classes/Controller/FormSelectTreeAjaxController.php
- typo3/sysext/backend/Classes/Controller/Page/TreeController.php 35 additions, 0 deletions...sysext/backend/Classes/Controller/Page/TreeController.php
- typo3/sysext/backend/Classes/Dto/Tree/Label/Label.php 35 additions, 0 deletionstypo3/sysext/backend/Classes/Dto/Tree/Label/Label.php
- typo3/sysext/backend/Classes/Dto/Tree/TreeItem.php 3 additions, 0 deletionstypo3/sysext/backend/Classes/Dto/Tree/TreeItem.php
- typo3/sysext/backend/Resources/Public/Css/backend.css 2 additions, 1 deletiontypo3/sysext/backend/Resources/Public/Css/backend.css
- typo3/sysext/backend/Resources/Public/JavaScript/tree/page-tree-element.js 1 addition, 1 deletion...end/Resources/Public/JavaScript/tree/page-tree-element.js
- typo3/sysext/backend/Resources/Public/JavaScript/tree/tree.js 6 additions, 3 deletions...3/sysext/backend/Resources/Public/JavaScript/tree/tree.js
- typo3/sysext/core/Documentation/Changelog/13.1/Deprecation-103211-DeprecatePageTreebackgroundColor.rst 54 additions, 0 deletions...1/Deprecation-103211-DeprecatePageTreebackgroundColor.rst
- typo3/sysext/core/Documentation/Changelog/13.1/Feature-103211-IntroduceTreeNodeLabels.rst 64 additions, 0 deletions...Changelog/13.1/Feature-103211-IntroduceTreeNodeLabels.rst
- typo3/sysext/core/Resources/Private/Language/locallang_core.xlf 3 additions, 0 deletions...sysext/core/Resources/Private/Language/locallang_core.xlf
- typo3/sysext/core/Tests/Acceptance/Application/FormEngine/CategoryTreeCest.php 2 additions, 2 deletions...ts/Acceptance/Application/FormEngine/CategoryTreeCest.php
- typo3/sysext/core/Tests/Acceptance/Application/Impexp/ExportCest.php 2 additions, 2 deletions...t/core/Tests/Acceptance/Application/Impexp/ExportCest.php
- typo3/sysext/core/Tests/Acceptance/Application/IndexedSearch/IndexedSearchModuleCest.php 1 addition, 1 deletion...nce/Application/IndexedSearch/IndexedSearchModuleCest.php
- typo3/sysext/core/Tests/Acceptance/Application/Page/PageModuleCest.php 1 addition, 1 deletion...core/Tests/Acceptance/Application/Page/PageModuleCest.php
- typo3/sysext/core/Tests/Acceptance/Application/Template/TemplateCest.php 1 addition, 1 deletion...re/Tests/Acceptance/Application/Template/TemplateCest.php
Please register or sign in to comment