Tabbutton active colors set to white

[level420]

Hi John,

I've also noticed that you changed the active tab color to a plain white, which seems to be inconsistent compared to the button design.

https://github.com/johnspackman/aristo/commit/a7712f76cbb8685b483ef848d8050c4d56ec2e10

Was this a commit which is intended to persist?

Regards Dietrich

[level420]

Hi John

would you mind have a look at this issue?

I've overriden this localy in my derived appearance, but I think the white active bar color is inconsistent with the aristo design.

[johnspackman]

Hi Dietrich

Sorry for the delay in getting back to you; yes, it was deliberate for a couple of reasons:

The initial problem was that the active tab is hard to differentiate if the only difference is the lack of a border on the bottom of the button; previously the active tab was made bigger by boosting the margin or padding but this does not work correctly on Qooxdoo (not on 3.x anyway) because the layout code does not support varying sizes and doing so makes odd resizing issues where tabs appear to shift position unexpectedly.

Also, when the tab does not have a distinct edge where it meets the pane it looks a little odd because having no border on that side makes the tab look as though it is part of the pane; because the pane has a white background like other containers, and the tab appears part of the pane, it seemed reasonable to make it the same colour.

Although I had to come round to it at first, conceptually I think it's the right choice because for inactive tabs the greyed-out colour implies that it's in shadow and therefore along with the whole pane.

An alternative design would be to separate the tab buttons from the pages completely, style the tabs like buttons and use a pushed-in appearance for the active button (ie as in OS X); IMHO this would work when the buttons are separated from the panes and are styles look different to ordinary buttons but I settles on the simpler option at the time of joining the tab into the pane.

John

[level420]

Hi John,

please have a look at http://demodb.reanimationsregister.de/ (username: test, password: test) app is german, sorry).

You'll find the version of my tab buttons ( text "Erstversorgung", "Weiterversorgung") where the active tab is blue and the inactive tab is gray.

[johnspackman]

In your original version, it has the blue line across the top of the pane and while I can see that's there to visually bridge the tab button into the pane, I'm not sure that works so well because I don't think that fits in with the design either.

I think in your use case where there is a table right up at the top (as opposed to lots of controls which are in white space, eg https://www.dropbox.com/s/ce3f37phsctxvpz/Screen%20Shot%202015-07-14%20at%2014.07.55.png?dl=0) it changes how that blue line would come across, ie it has less impact in your version.

But it's been a while since I've looked at that colour scheme and I'm open to ideas - if you checkout the level420-tabview branch I've just created and make the changes including the blue line and issue a pull request we can experiment and I'll load it up on some sample apps here.

You'll need to change your version (or use mine as a base) because it uses the scheme where the buttons get larger to show the active tab and this does cause problems with the layout; this becomes more apparent when you have a number of tabs and this had the effect that switching from tab #1 to tab #2 could cause tab #4 to jump. There's a comment in theme/Appearance.js on line 1549 about this, and that it affects the Qooxdoo Modern theme too.

Looking at your demo, the other difference is that the padding on the buttons is larger (I've reduced the padding to be more in line with ordinary buttons).

[level420]

Thank you John for your explanations.

I think you're right. My tabs, if there would be more than two of them, would jump as you described.

But in my app I have another tab button appearance, which is used in the case editors. To see this, please double click on a yellow or red line in table of the app (resuscitation cases).

The editor shows tabs, colored green or red, depending on the content in the tab page being valid.

For our discussion let's assume that the active tab button is blue and the inactive tab button is grey.

The active tab button is additionally a few pixels higher than the inactive tab buttons. Would this be enough to distinguish between active and non active tab button?

I'll try modify your level420 branch during this week.

[level420]

here we go: pull request https://github.com/johnspackman/aristo/pull/4

A first try.

[johnspackman]

great, thanks - I've merged it but i can't look at it until Friday (manic day at work tomorrow)