repeater styling

[interactivellama]

• [ ] Column header gradient colours: what ought they be exactly ?
• [ ] List row hover colour: what should it be?
• [ ] List row selected colour: what should it be?
• [ ] List column sorted colour: what should it be?
• [ ] List column sorted within a selected row colour: what should it be?
• [ ] List column sorted within a selected and hovered row colour: what should it be?
• [ ] Header and footer button padding: 6px is specified, but doesn't appear to work in the real world, see below.

  Column header with sortable items should have gradient to indicate the interactivity

Evaluate table header and footer height

Decrease font size for table footer

Evaluate row hover color (in relation to other blue hover effects)

The row hover colour is simply inheriting from the fuelux project, and needs to be overridden.

Evaluate button size

Also please review the DesignMap PDF on grids.

You can get the ET Fuel UX Grid Recommendations 23 Jan 2012 PDF from the source-art project.

[chriscorwin]

[Update] Answered by @jamin-hall below. Upshot is:

In this case I'd say let's stick with the spelled out values #DEEDF4 to #E4EEF3 for now.

Original Question

I'm digging into this, and will have several questions.

First one is regarding

Column header with sortable items should have gradient to indicate the interactivity

As you can see in the first image below, the style guide says to make the gradient go from #DEEDF4 to #E4EEF3.

...which, as you can see, is what is currently coded in the theme:

That is in this file:

https://github.com/chriscorwin/fuelux-mctheme/blob/master/less/fuelux-override/repeater-list.less#L119

When examined up close, we can see that the gradient is actually appearing, and is as specified:

However, when the style guide is closely examined, we find that the colours shown do not match what is specified:

I know we can't exactly trust the eyedropper, but in this case it shows us well enough that whomever built the style guide either:

(a) Did not put the correct colours in the specification

or

(b) Did not match the colours of the gradient shown to what they wanted.

My main question is: which is correct?

Do we go with the colours specified (as is currently in the theme) ? Or do we go with a stronger gradient as is shown but not specified in the style guide?

As I side note: I fully expect to find heaps of discrepancies like this as I dig into these redlines issues. Is this sort of nitpicking useful, @jamin-hall ?

[jamin-hall]

Great eye, Corwin. Yes. Please feel free to come to us with any questions. I can't guarantee the I will always have an immediate answer, but I will make sure we get them. In this case I'd say let's stick with the spelled out values #DEEDF4 to #E4EEF3 for now. I'm not sure if something happened during the export or if there were color resolution issues along the way with the conflicting screenshot. I'll note this as something to verify with Kana.

[interactivellama]

Maybe it's a CMYK PDF? :smile_cat:

[chriscorwin]

Notes on: “Evaluate row hover color (in relation to other blue hover effects)”

@jamin-hall and @chriscorwin discussed this and it was decided, at least for now to go with #EBF7FC but will ask for clarification from Kana.

It was also discovered by @chriscorwin at this point that the background colours of columns, when sorted, were not correct, and that's been fixed.

[chriscorwin]

Evaluate button size

I am unsure exactly what this may mean, but while investigating it (I assumed the padding/spacing must be off in the footer or header buttons) I discovered this guidance:

A close examination of the thing shows a discrepancy between what is specified and what is shown:

The specification says 6 pixels padding is to be used, but the artwork shows that it is actually drawn as 8 pixels.

Which is correct?

An even bigger question is about which elements get the padding?

Do we make the padding above and below buttons 6px, as specified? If so, is this only for the "buttons" and not for drop downs and such (which will almost certainly be taller) ?

If we make sure the padding for buttons is only 6px, the filter drop down will look strangely close to the top and bottom of the footer or header.

If we make sure the tallest item in the group has the 6px, the buttons will almost always end up with way more than 6px.

Make sense?

Help?

[janeWaterbury]

Hey everyone I'm one of the visual designers from DesignMap. These are the colors from the vis designs. I'm looking in to the padding questions for the header and footer.

Column header bar gradient: I’ll get back to you on this one, it’s complicated there’s a white inner shadow and a gradient.

Sorted column header gradient:

e5f0f6 to #c8e1ec

There’s a hover state for the sortable column headers that is #e4eef3 to #deedf4 or the sorted column gradient with an opacity of .4

List column sorted colour: gray96 or black with an opacity of .04

List row hover colour:

ebf6fb

List column sorted within a hover row colour:

e4eef2 or you can put a black color above the row hover color that has an opacity of .04

List row selected colour:

b9dff1

List column sorted within a selected row colour:

b2d6e8 or you can put a black color above the row selected color that has an an opacity of .04

Let me know if you you have any questions.