Suggestion: TabbedButtonBar with moveable TabBarButton's


#1

The first thing I want to say is: JUCE is awesome, it really fits my needs. Thank you Jules for the good work.

The second thing is a suggestion for the TabbedButtonBar: If there are more TabBarButton’s than displayable at once, it will show a little plus-button with a menu to access the hidden TabBarButton’s. But the TabbedButtonBar can’t reorder its TabBarButton’s, so the currently selected TabBarButton could be hidden and you have to remember which one it is or have to open up the menu and look which one is ticked.
My suggestion for this is to give the TabbedButtonBar the ability to reorder its TabBarButton’s like the TableHeaderComponent is able to get its columns reorderd, by programm and by user.
This way it would be possible to move a hidden TabBarButton to the visible area of the TabbedButtonBar when the user selects it from the menu. Also the user would have the possibility to reorder (drag’n’drop around) the TabBarButton’s like the columns of the TableHeaderComponent or the tabs of a tabbed-browser like Firefox.
I didn’t take a closer look at the code for all details yet, but I think it could be possible to use some code and logic from the TableHeaderComponent to do this.

An other thing I just noticed is the way the message given by setTextToShowWhenEmpty(…) to a TextEditor is displayed. It’s drawn a bit nearer to the top border. As I looked at the code this behaviour seems to be intended, but it looks odd in my opinion.


#2

Hi there, and thanks for the compliments. Yep, it’d be a nice feature to add some tab reordering, and I’ll certainly add a method to move a tab around. The user-dragging stuff would be fun, but a lot of effort, so will put it on the to-do-list for sometime in the future.

And you’re right, the text placement does seem slightly wrong - how about this instead:

if (isMultiLine()) { g.drawText (textToShowWhenEmpty, 0, 0, getWidth(), getHeight(), Justification::centred, true); } else { g.drawText (textToShowWhenEmpty, leftIndent, topIndent, viewport->getWidth() - leftIndent, textHolder->getHeight() - topIndent, Justification::centredLeft, true); }


#3

Good to hear that about the TabbedButtonBar.

For the TextEditor, I would suggest to modify the code slightly different:

if (isMultiLine()) { g.drawText (textToShowWhenEmpty, 0, 0, getWidth(), getHeight(), Justification::centred, true); } else { g.drawText (textToShowWhenEmpty, leftIndent, topIndent, viewport->getWidth() - leftIndent, viewport->getHeight() - topIndent, Justification::centredLeft, true); }

To center the text in multiline-mode is a nice idea. For singleline-mode it’s better to center vertical on the viewport height rather than on textholder height, because if normal text is present in the TextEditor it’ll get drawn centered on the total height of the TextEditor. With your code the textToShowWhenEmpty will be draw topleft. If you test it with a 24px height singleline-texteditor there is no difference visible because the difference is only 1px in size, but with a 30px height singleline-texteditor you’ll see it immediately.
An other 1px difference appears still in singleline-mode between normal text and textToShowWhenEmpty. The textToShowWhenEmpty is drawn 1px left of the normal text, but I was’t able find out why yet.


#4

Ok, good call there about using the viewport height.


#5