Tabs, tabs and more tabs! Tabs for User Preferences and Properties
Changes PlannedPublic

Authored by Julian Eisel (Severin) on Jul 21 2014, 6:47 PM.
Tokens
"Love" token, awarded by gandalf3."Mountain of Wealth" token, awarded by januz."Love" token, awarded by venomgfx."Love" token, awarded by dingto.

Details

Summary

Tabs, tabs and more tabs! Tabs for User Preferences and Properties

Motivation

Currently, the User Preferences and the Properties space use buttons that behave like tabs, but don't look like them. A user should be able to expect what happens when he clicks such a button what is not given currently. Since we now have tabs in the UI, it is finally time to tackle this by adding tabs here, too.

Screenshots

Implementation details

  • It seemed like a good idea to add a new ARegion type for tabs, which is called RGN_TYPE_TABS
  • Tabs are drawn as a new button type called TAB what means, we can add tabs everywhere in the UI
  • Feedback on mouse hover
  • Tabs can now be created through Python by
layout.prop_tabs(data, property, text, text_ctxt, translate, icon, alignment, icon_only, separate)
    • data, property, text, text_ctxt, translate, icon : Standart parameters.
    • alignment: The direction to which the tabs will be aligned to. Enum in ['TOP', 'DOWN', 'LEFT', 'RIGHT'].
    • icon_only: Draw only icons in tabs, no text (boolean, default "false").
    • separate: Seperate tabs with some whitespace (boolean, default "true").
  • You can "scroll" through the tabs by either using the mousewheel in the Tab's region, or by using CTRL + mousewheel in the entire Region/Space
  • The tabs are themeable via the color parameters already existing for the toolbar tabs
  • A small (but IMO nice) detail is that the region separators (the lines between the regions) are taking care of the active tab
  • The header of the Properties Space is now aligned to the bottom and as its space isn't needed for the context switches anymore, it now contains the View menu and a pull down style context switcher

Diff Detail

Repository
rB Blender
Branch
arcpatch-D667_1
Julian Eisel (Severin) retitled this revision from to Tabs, tabs and more tabs! Tabs for User Preferences and Properties.Jul 21 2014, 6:47 PM
Julian Eisel (Severin) updated this object.
Julian Eisel (Severin) set the repository for this revision to rB Blender.
Julian Eisel (Severin) updated this object.
Julian Eisel (Severin) updated this object.
Julian Eisel (Severin) updated this object.
Julian Eisel (Severin) updated this object.
Julian Eisel (Severin) updated this object.

I'm attempting to test right now but with this patch I cannot get Blender to start. I get a Segmentation fault: 11 with this output:

# Blender 2.71 (sub 3), Commit date: 2014-07-21 16:55, Hash 6e85ec2

# backtrace
0   blender                             0x00000001097624ab blender_crash_handler + 379
1   libsystem_platform.dylib            0x00007fff838f95aa _sigtramp + 26
2   ???                                 0x0000000000000008 0x0 + 8
3   blender                             0x000000010976817f wm_draw_update + 1743
4   blender                             0x0000000109784b74 ghost_event_proc + 2804
5   blender                             0x0000000109f65f64 _ZN27GHOST_CallbackEventConsumer12processEventEP12GHOST_IEvent + 20
6   blender                             0x0000000109f6742c _ZN18GHOST_EventManager13dispatchEventEP12GHOST_IEvent + 60
7   blender                             0x0000000109f67487 _ZN18GHOST_EventManager13dispatchEventEv + 39
8   blender                             0x0000000109f674e9 _ZN18GHOST_EventManager14dispatchEventsEv + 57
9   blender                             0x0000000109f69033 _ZN12GHOST_System14dispatchEventsEv + 51
10  blender                             0x0000000109f6564d GHOST_DispatchEvents + 13
11  blender                             0x0000000109783df2 wm_window_process_events + 66
12  blender                             0x0000000109764788 WM_main + 24
13  blender                             0x0000000109762324 main + 3412
14  libdyld.dylib                       0x00007fff826925fd start + 1
15  ???                                 0x0000000000000002 0x0 + 2

Pls remove text highlights for tabs or add options for it :`-(

Personally, I think the visual style could be more boxy with with less surrounding space above and between the tabs (if only to somewhat emulate the style of the old buttons while keeping the advantage of the tab design).

I don't really have much of a argument otherwise, as I think this is already far more indicative of what those regions do when you click on them.

Currently the changes increase the readability of the Preferences and Properties areas (which is a great incentive), but the Preferences look a bit worse. While the size and colors of the tabs work well in the toolbar, they fail a bit in the Preferences window. Could you try increasing the size of the tabs there?

The Preferences tabs on the other hand look good, but could be tighter, to fit the window selector there as well.

I suggest we keep the styling discussion out of this for now. To keep them consistent with the Toolbar Tabs is a good first goal. This is much more about the actual functionality. Alternative styling should be done as a separate task I think.

I am wondering what future for Properties editor.
I mean how will it evolve by addition of new tabs or panels ?
Tabs helps to get rid of scrollbar in toolbar.
If we would have verticals tabs in Properties Editor for same purpose; then should it be secondary vertical tabs, child of actual horizontal ones ? or could it be possible to split actual horizontal tabs into more smaller vertical ones that would stay meaningful ? (like relatively recent splitting of render tab into render tab and renderlayers tab)

Add missing Python files

Hey @Julian Eisel (Severin) thanks for tackling this! It looks to me like you've made a great start. I cannot speak to the code side, but the decision to make an actual TAB button type seems like a good one. If @Campbell Barton (campbellbarton) has no issue with it, then it'd probably be good to apply the new TAB button to the Toolbar as well before this gets committed (if and after approval of course).

So far I'm seeing a few issues.

User Preferences Tabs

The User Preferences tabs are drawing very large for me, and much larger than in your screenshots. Using factory settings on a 1080p monitor it looks like this:

Additionally, the User Preferences tabs do not scale with the window size right now. I think they should scale in this case, and always stay left-aligned to the current position prior to scaling.


Tab Themes

I don't feel strongly either way, but some users will want to theme the Active Tab in a color other than the Window/Region Background. For example, this theme: http://blenderartists.org/forum/showthread.php?343400-Theme-Ultimate-Dark-2014

I think there's good arguments both ways, just something to keep in mind while tabs are getting further developed.

Region Header for Properties

Currently you have separated the Region Header and the Tab Region. I think this makes good sense, but it does have the nasty consequence of making the Properties header worthless and causes it to take up a lot of space.

I really don't have a good answer or alternative to this issue at the moment, but I think something should be done to improve this.

Space Usage

I don't personally think this is an issue, but it may warrant some tweaks to the system-wide tab designs (such as the spacing between tabs). Even though the Window Type menu is moved from the header, the tabs actually cause more space to be used than before. However, I believe this space loss is balanced out by the added visual benefit and clarity of tabs in this case.

Click to Play GIF:

Here is a design mockup (click to play gif):

Julian Eisel (Severin) updated this object.

Updated to match @Jonathan Williamson (carter2422)'s suggestions

  • Fixes layout issues
  • User Preference tabs are now using the entire region width and scale with it
  • The active tab now uses the "Active Tab" theme value instead of the region background (I thought this would be nice to have, but I retracted it due to consistency)
  • Moved the tab theming colors to a separate section in the User Preferences (A bit off topic and of course an optional change)
  • I reduced space usage for the Properties tabs a tiny little bit to save space

Update from August 3rd UI Meeting

This was discussed during today's meeting. Agreement was reached that User Preferences tabs are good, just need a final check from myself and @Pablo Vazquez (venomgfx), followed by a code-review from @cambellbarton.

However, the Properties editor tabs have issues. Primary issue is they take up more space than before and don't really offer more benefit. They likely need to wait on a more comprehensive tab design update (perhaps after @Pablo Vazquez (venomgfx)'s widget designs T38037).

@Julian Eisel (Severin) can you please split off the Properties tabs into a separate patch so that we move forward with the review?

Remove Properties tabs

Note:

moved properties tabs proposal to T41700

Hi.

This is the greatest project. I would like to have tabs for any window. As this makes workflow much better.

Here is i would like to show you how cool tabs in modo/houdini: http://youtu.be/JfYe1vTNPO0

Also "+" button is important to add new tabs.
Also, "x" button on a tab is important too. To close a tab quickly.

PS: in modo i had lags a bit because of recording.

Julian Eisel (Severin) updated this revision to Diff 4071.EditedApr 26 2015, 2:27 AM

Tedious update to latest master (this can now also be tested in the UI-experiments branch)

Julian Eisel (Severin) planned changes to this revision.Apr 26 2015, 2:30 AM

Note: This is by far not ready for review yet. Will try to find the time to rework this soon.

  • Update for latest master
  • Remove off-topic changes for tab theme colors
  • Make patch based on D1371
Julian Eisel (Severin) planned changes to this revision.Jul 7 2015, 3:49 AM

Still not ready for review.