Project

General

Profile

Actions

Feature #53817

closed

Propose a solution for "Tree-Views" inside Tables

Added by Ernesto Baschny over 10 years ago. Updated over 5 years ago.

Status:
Closed
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2013-11-20
Due date:
% Done:

0%

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

Actions #1

Updated by Felix Kopp over 10 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 #2

Updated by Ernesto Baschny over 10 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 #3

Updated by Ernesto Baschny about 10 years ago

  • Target version deleted (6.2.0)
Actions #4

Updated by Felix Kopp about 10 years ago

Solved

Actions #5

Updated by Christian Kuhn over 9 years ago

  • Status changed from Accepted to Resolved

closed as "resolved" as requested by felix.

Actions #6

Updated by Benni Mack over 5 years ago

  • Status changed from Resolved to Closed
Actions

Also available in: Atom PDF