Add an hamburger icon to a vertical QToolBar

JulienMaille

Did anyone tried to implement this? You may hate those hamburgers menu but I believe it can be nicely implemented (for instance in win10 search window)
gif

I tried to work something out but one of the first issue I have is that it seems impossible to left-align the QToolButton in the QToolBar.

mrjj

@JulienMaille said:

hamburgers menu

Excellent name :)
Not using w10 so I wonder what it really does.

It expands the area and show the text for each icon to the right of it?

JulienMaille

@mrjj said:

It expands the area and show the text for each icon to the right of it?

Yes, these menus are all over the web and mobile applications. Even desktop apps use it (don't you use chrome or firefox?)

mrjj

@JulienMaille
Chrome yes, but I do not see such menu ?
I mean, it does have such icon, but that's just a normal drop menu.

JulienMaille

https://www.google.fr/search?q=chrome+hamburger+menu&tbm=isch&biw=1920

To be honest I don't like this kind of implementation: hiding all the mess behind a button. But I would enjoy using simplified toolbars that only show icons but can be extended with text for newbies (exactly like the gif above in the first post)

mrjj

@JulienMaille
Ahh I thought that the expanding part was also part of "burger", but now I understand.
Yes, I agree, its a neat way for compact layout and then can show text when needed.
Thx for info.

Chris Kawa

I thought this could be a nice exercise. This is my stab at it: burger-menu.
Could use some more customization options but the basic functionality is there.

mrjj

@Chris-Kawa
Very cool !
And it uses actions so actually pretty complete.
Even has animation :)

note:
to make it compile on Win 7, mingw, I had to add
QMAKE_CXXFLAGS += -std=c++0x
to .pro
and const to
void setBurgerIcon(QIcon& icon);
or it did not "see" it.

Chris Kawa

QMAKE_CXXFLAGS += -std=c++0x

Ah... I wish gcc made this the default already ;) Btw. This option is not recognized by MSVC so it's better to add CONFIG += c++11 instead, to let qmake figure out the right flags for the compiler.

and const to void setBurgerIcon(QIcon& icon);

Yup, late night coding ;) Fixed. Thanks!

mrjj

Yeah, when trying code that use lambdas and its not enabled, it really explodes.

Oh, so CONFIG += xx is better to use overall ?

Late night coding is the best :)

I wonder why is was not named more-menu or something like that as burger-menu is so strange. I mean in general, not your widget.

Chris Kawa

Oh, so CONFIG += xx is better to use overall ?

Yes, because it will add the flag you mentioned when it's needed (like for gcc) and do nothing when it's not needed (e.g. MSVC doesn't have language version flags, they have the latest they support always enabled).

I wonder why is was not named more-menu or something like that

It has many names e.g. side drawer, navigation drawer, side menu... hamburger menu is referring to the three bars icon that sorta looks like hamburger if you put your imagination to it :)
It's a controversial pattern. Apple discourages it. Windows has adopted it widely in their store apps. Designers all over can't seem to agree on whether it's a good thing or not. It's the same story as with the ribbon some time ago. I guess we are still looking for that holy grail in menu design :)

mrjj

ahh so that is is much smarter. Will use that from now on.

Well with all design things, they often disagree, also the users. I hate the new look in windows 8+ as I find it too flat and lifeless but my Colleague loves it and find it nice looking.
I think there can only exist a Holy grail for interface design if we remove the users ;)

JulienMaille

Good job Chris,
Unfortunately I would really like to achieve this by subclassing QToolBar instead of creating a brand new class.
Do you see a way to align each item properly within the toolbar?

Chris Kawa

Do you see a way to align each item properly within the toolbar?

The alignment of text on QToolButton seems to be style dependent, so the only way I can think of would be to provide a QStyle subclass and draw the QStyle::CE_ToolButtonLabel the way you want. There might be an easier way but I don't know of any.

JulienMaille

@Chris-Kawa said:

The alignment of text on QToolButton seems to be style dependent, so the only way I can think of would be to provide a QStyle subclass and draw the QStyle::CE_ToolButtonLabel the way you want. There might be an easier way but I don't know of any.

I had a look at QStyle::CE_ToolButtonLabel and I have the feeling this is not the place to achieve left alignement. The rect of the QToolButton is already centered at this step and all you can do is change the way the text and pixmap are drawn within the rect.
I suppose that I should modify the rendering at a higher level (ie. the toolbar and not the toolbaritems) but can't find where.
Do you have any experience to share?
Thanks a lot

Chris Kawa

My comment was on a hunch, but I just had a look at QCommonStyle.cpp and it is indeed the place where the text is centered inside a tool button. Take a look at case CE_ToolButtonLabel: in QCommonStyle::drawControl.
If you meant aligning of the button itself on the toolbar then yeah, I guess you'd have to take a look at how QToolBar is implemented and does it lay the items itself or delegates that to the style. I never had the need to modify it so I don't know.

Btw. Why does it have to be a QToolBar? I think functionality wise it's closer to a QTabBar if anything. Why not a custom class if it does what you need?