Feature #53817: Propose a solution for "Tree-Views" inside Tables - TYPO3 Core - TYPO3 Forge

Actions

Copy link

Feature #53817

closed

Propose a solution for "Tree-Views" inside Tables

Added by Ernesto Baschny about 11 years ago. Updated about 6 years ago.

Status:

Closed

Priority:

Should have

Assignee:

Category:

Backend User Interface

Target version:

Start date:

2013-11-20

Due date:

% Done:

Estimated time:

PHP Version:

Tags:

Complexity:

Sprint Focus:

Description

A common widget in our TYPO3 backend are tables containing "connected tree lines" followed usually by some icon. This is currently rendered by placing the images side by side and then followed with the text.

This has several drawbacks:

if the text word-wraps, it gets "really ugly"
if we change font-size and/or line-height the connecting lines might contain gaps in between.

It would be great to have a definitive styleguide for rendering this kind of tables - especially the "tree lines" part in some more modern way and then start adapting our existing tables to it. The new style should be first documented in the "styleguide" extension (https://github.com/7elix/TYPO3.CMS.Styleguide).

Take a look at the following examples to see the complexity involved:

Files

Download all files

treelist-table-info-pagetree.png (22.4 KB) treelist-table-info-pagetree.png		Ernesto Baschny, 2013-11-20 22:33
treelist-table-listview-with-localization.png (38.4 KB) treelist-table-listview-with-localization.png		Ernesto Baschny, 2013-11-20 22:33
treelist-table-localization.png (28.6 KB) treelist-table-localization.png		Ernesto Baschny, 2013-11-20 22:33
treelist-table-template-hierarchy.png (22.9 KB) treelist-table-template-hierarchy.png		Ernesto Baschny, 2013-11-20 22:33
treelist-table-template-object-browser.png (23.4 KB) treelist-table-template-object-browser.png		Ernesto Baschny, 2013-11-20 22:33

Actions

Copy link

Updated by Felix Kopp about 11 years ago

I have a solution at hand:

When higher tree icons are included (https://review.typo3.org/#/c/24474/) - those icons can be included.
Those

<img>

icons must be wrapped in the table td:

<table class="t3-table>>
…
<tbody>
<tr>
<td>
<span class="t3-table-icon"><img src="icon-28px.gif" … width="16" height="28" alt="Tree icon without padding/margin" /></span> <img src="" width="16" height="16" alt="Record icon without SPAN"/> Title height blah blub
</td>
<td>
Normal padding table cell
</td>
</tr>
</tbody>

Necessary in CSS are the negativ margins. Let us put the solution into

.t3-table-icon {
display: inline-block;
margin-top: -6px; /* Remove the td padding */
margin-bottom: -6px; /* Remove the td padding */

Actions

Copy link

Updated by Ernesto Baschny about 11 years ago

Status changed from New to Accepted
Target version set to 6.2.0

@Felix, great! Would you mind turning that into a review request so that we can cherry-pick the "higher tree icons" and the new addition maybe by using your Stylesheet extension where you could also already add a suggested rendering of such a beast? Sounds good enough!

Actions

Copy link