Usability Team

Sounds Interesting! :)
Can you create a prototype?

Greez Jens

perhaps related : #3066

Hi,

I have installed the extension... and I like it. Of course, it would need to be polished but this would be something that I would like to have in the Core. It frees up so much space on the screen. What do you think?

On the "polishing" side:

- the default state of the panel should be "expanded"
- the system should remember the collapse / expand state for the next session
- can we make the expand / collapse bar more toward ExtJS style? http://dev.sencha.com/deploy/ext-4.0.0/examples/portal/portal.html
- can we say that if a small resolution (such a mobile device) is detected, the the menu is collapsed by default?

Hint: Steffen K. is currently doing some work toward refactoring the BE using ExtJS only. It sounds as a good idea to get in touch with him at one point.

Next to that, another idea / solution for people "on the go" would be the widget approach. There is the idea to restructure the "About" module in TYPO3 which is pretty much useless and turns in out in a kind of "Dashboard" module where standardised widgets could be installed. And because this widget would follow some standards (e.g. W3C), this would also be possible to install them outside TYPO3 (e.g. mobile phone, external dashboard). The project is still in a brainstorming state but I have designed a few mockup during the #t3csb. (Code Sprint Berlin). And I know there are other initiatives about the Dashboard going on in the community. Is it worth opening a new ticket?

@polishing: for sure, the panel is just extjs, but some options seem to be not resetable after rendering the component. So if the Module Menu is collapsible (e.g. like the pagetree) from the core files there won't be an issue ;)
The styling is simple eye candy and don't forget it's a prototype (e.g. uninstall) ;)

@dashboard:
i uploaded a prototyp to #27486 - would have added you to the watchers - but i'm not allowed to :(

@about:
i like the about module ;) - it activated in every customers install, and so some people donated for TYPO3
But anyway i would like to have a donation API (e.g. simple URI) in the extmgm ;)

Regards
Kay

Thanks for the prototype, Kay.

I would prefer that the condensed mode only shows the icons. What do you think?

under some circumstances this would be ok ;) and would have some positive effects.

1. would be ok, if the text expands on over - there is no built in panel aktion for that in extjs ;)
   (e.g collaps width to 16 px, expand to 200 as overlay when hovering the menu)
2. would be ok, if the module title is shown with extjs quicktips
3. would not be ok, if the text does not appear anymore.

I personally prefer version 2 ;)

Here is an screenshot

Thanks, Kay!
Can the module menu be rendered differently, when it's collapsed? Drop the Sections (Web, Admin, etc.) and only show a separator or just space instead of.

I can imagine also dropping the scrollbar. If sb. has too many modules, I would be fine, to use the mouse wheel to scroll in this mode.

Overlay expansion (as the first version) is IMHO perfect on hover (or with a delay of 1-2 sec).

But maybe Jens has a different opinion..

Steffen

I would easily see three states for the module panel on the left:

- icon + test (as it is currently in TYPO3)
- small icon (as it is in the lastest version of "condensed")
- collapsable (as it is in the first version of "condensed")

Would it be any technical / ideologic issues against that?

I like the "collapsable" view as it frees up so much space and dis-clutter the interface a lot. Next to the taste consideration, it makes sense for a basic editor such a secretary to have a streamlined backend with minimum visual controllers.

The "small icon" view would be more handy for BE Users knowing the Backend Interface off-hand, I believe.

In a further implementation stage, I guess we would have some settings in "User Settings" to control the display of the panel.

I will try to add this functionality in the next week - but can't promise it yet.

Do you think this function will be embeded in the core JS or will it be released as (sys)extensions?

PS: can you point me, how to add options to the user settings ;) otherwise i need to search the appropriate api functions ?

Regards
Kay

@Jens, could we have your opinion about this issue. It could speed up the feature being implemented in TYPO3, I think

Do you think this function will be embeded in the core JS or will it be released as (sys)extensions?

Could be in the Core but someone else must approved. On the other hand, having it as sysextension could lighten the Backend on demand.

PS: can you point me, how to add options to the user settings ;) otherwise i need to search the appropriate api functions ?

I understood, it should be set in $GLOBALS['TYPO3_USER_SETTINGS']

Have a look into typo3/sysext/setup/ext_tables.php

would it be ok, that a reload of the backend is needed to toogle the menu state?

1. one js file for every state
2. less ressources needed

1. Reload needed

would it be ok, that a reload of the backend is needed to toogle the menu state?

For me yes!

It could be put as a side note, next to the setting.

(reload of the Backend needed)

so faster than thought - as it was really easy ;)

The extension supports 3 types of the menu:

1. normal
2. collapsed
3. condensed

The extension can be installed normally, settings are in User Settings > second tab (start) > Displaymode for module menu.

1. condensed mode don't support scrolling
2. csh isn't working as expected in settings window

 Used 

 t3lib_extMgm::addLLrefForTCAdescr('_MOD_user_setup','EXT:condensed/locallang_csh_mod.xml');

 on line 21 in EXT:condensed/ext_tables.php in ...

A customer of mine had an interesting idea (don't know wether this is usefull/sensefull):

1. implement a macosx like dock ...
   http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html
   http://ndesign-studio.com/blog/css-dock-menu
   http://www.sencha.com/learn/Extension:Fisheye

Hi,

I'm against an option in the user settings - doesn't matter if with or without reload. It should IMHO work like collapsing of the tree frame, thus an ExtJS-only implementation.

Steffen

And please not as system extension. Just make the module menu not only resizable, but also collapsible.

Thanks
Steffen

mhmm ... :(

basicly the module menu behaviour can be changed directly in the core.
On way would be to have a listerner for onresize to change the xtemplate based on the width ...

I will take a look.

Why should such minor change not be included in the core?

Regards
Kay

hi steffen,

i added a new mode called auto.

This mode switches automatically from big to small and vice versa after resize. (currently not after loading).

Some whiches are currently impossible to implement.

1. collapse = true
2. collapseMode = mini

Both options are not changeable after rendering.
That's why there need to be a modification of the following file:
typo3/js/modulemenu.js

The config of the module menu must be moved to a static variable (like for the other stuff), which is not only available during the execution of the function, but during loading before onReady is fired.

Currently this can be solved with an DelayedTask - but that's not really nice ;) .

@Core, for me that is a really small change, which adds really cool functionality. That's why i can imagine to integrate that directly in the modulemenu.js file, to include it into the TYPO3 core ...

idea for scrolling in the condensed version:

something similar to:

http://www.dynamicdrive.com/dynamicindex17/iframescroll.htm#

1. mousewheel
2. top and bottom edge

Kay, as I said:

And please not as system extension. Just make the module menu not only resizable, but also collapsible.

Read: Make a patch for the core, please! ;-)

So, I understood there will be three states:

- expanded (icon + text, default case)
- condensed (icon only)
- collapsed (no panel)

You can change from one state to another by dragging the frame as demoed in the extension.

But how will you change from the expanded state (icon + text) -> condensed state (icon only). Do you plan to drop the text according to a certain width? It didn't work for me in the extension.

Thanks for your work!

uploaded it to gerrit ... now i do really have gray hair ;)

https://review.typo3.org/#change,2869

don't know if the user experience is consistent than:

extjs panels can collapse if:
http://dev.sencha.com/deploy/ext-3.4.0/examples/layout/column.html

a) the title is enable for collapsing
b) the title has a collapse tool (icon)
c) with the mini collapse tool
d) via API - can be used by button

How do you think the panels should uncollapse with the icon? - I have no UI idea for that.
ExtJS solves that by a collapsion placeholder, but this is currently supressed in the TYPO3 BE. (Your example is extjs 4, please look at the extjs 3.4 one ;) )

I uploaded a change to gerrit:
https://review.typo3.org/#change,2869

Patch set 2 of change I1be33f86c35ea49ad4b53bf15ed9e4035cf6f487 has been pushed to the review server.
It is available at http://review.typo3.org/2869

IIRC the additional button to collapse is not desired by the Usability Team (at least Lars I remember).

I still think that we don't need collapsed + condensed mode. I'd prefer that collapsing ends up in condensed mode.

i talked to 20 persons with small screens, they liked the posibility to really collapse the modulemenu and not just minimizing it.

So i like the current implementation - technically can be hard to change the collapsing behaviour ;)

+1 for the collapsed view. It visually simplifies / streamlines the BE, in my eyes. Useful for editors who only work with the module "pages" for instance.

Patch set 1 of change I03c5f37f5b76b4e1b31fd5fa427189dd8e350f76 has been pushed to the review server.
It is available at http://review.typo3.org/2904

Patch set 3 of change I1be33f86c35ea49ad4b53bf15ed9e4035cf6f487 has been pushed to the review server.
It is available at http://review.typo3.org/2869

Steffen gave me a login to a test site.
I will do it this week but I can't do it now.
And I like to have feedback from Lars.

perfect

I tested your patch using the master source code. Personally, I like this addition.

There would be some refinement needed in my eyes:

- Dragging of the panel is a bit patchy for me. Sometimes it works, sometimes it selects the text of the Backend.
- When panel is collapsed, it is hard to see the dragging handle. It would be good if one can make it more visible on mouse over.
- Icon to collapse / extend is a bit too discret, I find. It should be a bit emphasized

Again!

I will try to sum up possible User Interactions and also describe a new Interaction I wish we could have whenever the panel is collapsed: on mouse over the menu panel is expanded in "detached" mode (I mean over the content).

What I will call the "collapsed line" bellow, is the border when the panel is collapsed. I don't have better word right now...

Current User Interaction¶

situation: panel is collapsed

- User action: mouse over the collapsed line
effect: the mouse cursor changes "resize"

- User action: drag the collapsed line
event: expand the panel as wished. If width is < 100px (?) icon only are displayed other wise icon + text

situation: panel is collapsed

- User action: mouse over the handle
effect: the mouse cursor changes "resize"

- User action: double click the "handle"
event: expand the panel at once to the last width

- User action: alternatively the User can drag the "handle"
event: cf. above "drag"

Additional User Interaction wished¶

situation: panel is collapsed

- User action: mouse over the collapsed line
effect: the panel expands in detach mode (over the tree panel for "WEB") according to the last size. The Use can click on a module

- User action: mouse out of the panel
event: collapse again the panel

To better illustrate what I mean, let take the example of the Dock of Mac. It could be minimized but when the mouse approaches the corner, it pops up until mouse goes away. If it may be fairly difficulter to have exactly the same behaviour, we could have the mouse over the collapsed line to prompt the action.

- Dragging of the panel is a bit patchy for me. Sometimes it works, sometimes it selects the text of the Backend.

This was introduced in current master - not my fault - seems to be an extjs 3.4.0 issue ... :(
This behaviour is the same if you make a git pull origin master

- When panel is collapsed, it is hard to see the dragging handle. It would be good if one can make it more visible on mouse over.

Can be achieved with a bit CSS. It's the same you can find beside the pagetree :(

- Icon to collapse / extend is a bit too discret, I find. It should be a bit emphasized

Can be achieved with a bit CSS. It's the same you can find beside the pagetree :(

The detached mode is just possible if the module is collapsed like it is done here (left panel):

http://dev.sencha.com/deploy/ext-3.4.0/examples/layout/complex.html

So we need to add the title and the buttons :(

So can we merge that (with or without collapse) and start tasks for the improvements?

any news on that?

Hi here,

We spent some time talking about this issue during the Developer Days and here would be the outcome we agreed on:

• 3 Version are possible (Default, Condensed & Floating) but are not mixed up together

Default <-> Condensed (default mode)

Default <-> Floating

• Which version will be used is setup in the user settings (Condensed or Floating)
  We have not totally decided the spot and the text to put yet
• The state switch need to be all-time a bit visible and bigger (easier to click)

• The menu adapts the minimum/maximum width automatically
• There is no dynamic drag & drop resizement possible, only a state switching

• Menu-Icons MUST stay visible
  • User could loose his context
  • User could experience fear be loosing via accident the menu
  • Only way to work on a touchdivice
• Group-Label Arrows must stay (Text should be hidden)
  • Icons shouldn't jump at all!
  • ExtJS-Tooltip in condensed mode with little Arrow in front
    • Like the page-property tooltips for eg.

• The menu gets fully hidden
• On rollover at the left browser area (15px) the overlapping menu gets triggered
• Menu will contain of icon+text
• The Width of the menu must be big enough to do proper mouse movement
• The movement of the menu has a transition

Jens should ask Lars in these coming days to produce some wireframes that we can use as reference for the skin.

@Kay come back to me over Skype if things are unclear.

can we merge the current state just to ensure, that we are not scared by the feature freeze?

Patch set 4 of change I1be33f86c35ea49ad4b53bf15ed9e4035cf6f487 has been pushed to the review server.
It is available at http://review.typo3.org/2869

Shall I test the new version?

But what is about scrolling?

Right, it isn't highlighted it enough on the wireframes. -> vertical scroll bar should appear and width should be adapted on condensed mode so that icons get not masked.

you may test it - but it's far from being perfect.
The small collapse tool is not built to do partial collapsing :( The tool is thought to really collapse the modulemenu.

The modulemenu collapsebutton in the top of the modulemenu can do both (expand/partial collapse = condensed).

It currently looks a bit ugly.

So my current suggestion is to push one of the previous states to the master, just to have a resizing based condension possibility.
This way we can do further improvements as bugfixing ;)

Patch set 5 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/2869

@Kay what about this one. Will it be easier to implement after migration to ExtJS4?

jupp, i'm already working on that, first step for me is to use the scrolling used in

http://docs.sencha.com/ext-js/4-0/

Greetzz Kay

We a currently rebuilding the module menu... Daniel settler rewrites it with jquery using the new module objects and Sven wolfermann already worked on CSS allowing fluent collapsing with media queries as well as a toggle to have a behavior like known from Facebook app.

Please consider:
https://twitter.com/irnnr/status/249156320660422656

Also new ideas came up in:
http://forge.typo3.org/issues/41166