Task #8739: Create a new tree based breadcrumb menu component - TYPO3.Neos - TYPO3 Forge

Base Distribution TYPO3.Form TYPO3.Imagine TYPO3.Media TYPO3.Neos TYPO3.Neos.NodeTypes TYPO3.Party TYPO3.Setup TYPO3.SiteKickstarter TYPO3.Twitter.Bootstrap TYPO3.TYPO3CR TYPO3.TypoScript Coordination Group Website and Communication

Task #8739

Create a new tree based breadcrumb menu component

Added by Nils Dehl about 5 years ago. Updated almost 3 years ago.

Status:

Resolved

Start date:

2010-07-08

Priority:

Should have

Due date:

Assigned To:

Rens Admiraal

% Done:

100%

Category:

Target version:

Description

Create a new breadcrumb menu component based on a Ext.tree.TreePanel.

Behaviour see TYPO3 5.0 Experience Concept Presentation starting with slide 150.

The tree data structure allows us to have hierarchical menus. Add and remove childnodes or dynamical reload them.

technical todos:

Create a abstract breadcrumb menu component based on Ext.tree.TreePanel
Creat a NodeUi class which render the tree horizontal
add the animations and behaviour jens described in the slides.

Additionally, see the JavaScript class F3.TYPO3.UserInterface.BreadcrumbMenu for the (currently quite hacky) implementation, which needs to be refactored.

tmp.html - test case for slide-in. (1 kB) Sebastian Kurfuerst, 2010-07-24 11:10

Related issues

History

#1 Updated by Rens Admiraal about 5 years ago

I'm working on this one...

#2 Updated by Sebastian Kurfuerst about 5 years ago

Status changed from New to Accepted

#3 Updated by Sebastian Kurfuerst about 5 years ago

Hey Rens,

I just wanted to ask what the current status on this issue is. Do you have any open questions, or is there anything we can do to support you solving this issue? You'll find us in the usual Jabber chatroom.

Thanks in advance for a short status!

Greets,
Sebastian

#4 Updated by Sebastian Kurfuerst about 5 years ago

Assigned To set to Rens Admiraal

#5 Updated by Rens Admiraal about 5 years ago

Hi Sebastian,

My time has been stuffed with a deadline for work... Will be working on this one tonight.

Status:
Menu is horizontal, some styling has still to be done, and the effects have to be added. Maybe we can chat a bit about the effects today / this evening? Will get online on jabber also...

Greetz

#6 Updated by Sebastian Kurfuerst about 5 years ago

Great! I'll have time until 15:00 today, after that I won't be online anymore.

Greets,
Sebastian

#7 Updated by Sebastian Kurfuerst about 5 years ago

File tmp.html added

Hey,

I have been trying to fix the issue with the horizontal slide-in. So far, I have been mostly able to isolate the issue -- see the attached "tmp.html" file for a test.

The problem is that the el.slideIn() function cannot work with inline elements, as it seems.

That's why I have tried out something else: Make all the elements Block Elements, and make them float to the left. Then, just animate the width of the element. This works, but then one needs the target size of the element. However, as only the icons should be slided out at the current point, this should be pretty easy to calculate. If we need to slide out text, we could use Ext.util.TextMetrics.measure() to measure the size of the text.

Hope this already helps,
Sebastian

#8 Updated by Rens Admiraal about 5 years ago

Hi Sebastian: it worked ;-)

Needs some finetuning for 2nd and higher levels, but will be working on this today. I wasn't sure if it was a good thing to use the Git repository for the standalone menu, so I created my own repo for this one: http://github.com/radmiraal/Horizontal-ExtJS-Menu