Page MenuHomePhabricator

Minor design fixes for Special:Investigate [5*XSmall]
Closed, ResolvedPublic

Description

Copied from T246294.

  • Match the spacing of the "New investigation / Logs" buttons to the prototype (Chrome).
  • Buttons should be quiet We can't do this yet - see T249841
  • Pin button should be progressive @Prtksxna to file separate task
  • Filter button should use the funnel icon
  • Reduce UA's font size to 13px
  • Table headers background should be #EBECF0, with a 2px border at the bottom
  • Date range text should be right-aligned

Event Timeline

Niharika created this task.Apr 2 2020, 6:37 PM
Niharika triaged this task as Medium priority.Apr 2 2020, 6:41 PM
Niharika moved this task from Untriaged to The Letter Song on the Anti-Harassment board.
Prtksxna updated the task description. (Show Details)Apr 6 2020, 4:25 AM
Tchanders moved this task from Ready to In Progress on the Anti-Harassment (The Letter Song) board.
  • Match the spacing of the "New investigation / Logs" buttons to the prototype (Chrome).

@Prtksxna For the button spacing, I'm not sure what's meant by matching the prototype. In the prototype, the spacing is defined by giving the buttons a 10px margin-top from the padding of the container:

On Special:Investigate, the buttons are right up against the padding of the container:

Is the intention is to move the buttons upwards? If so, we can give them a negative margin-top, but they seem a bit out of line with the page title:

  • Filter button should be quiet and progressive

Just to clarify for code review and QA, quiet means the button is unframed. Here's an example of quiet and progressive: https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonWidget-quiet-progressive

  • Table headers background should be #EBECF0, with a 2px border at the bottom

@Prtksxna Is this meant to be #eaecf0 (@colorGray14), which we use elsewhere in the table?

Change 587508 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[mediawiki/extensions/CheckUser@master] Make some small design fixes for Special:Investigate

https://gerrit.wikimedia.org/r/587508

On Special:Investigate, the buttons are right up against the padding of the container:

On Chrome 80 on MacOS I see this:

Is the intention is to move the buttons upwards? If so, we can give them a negative margin-top, but they seem a bit out of line with the page title:

Yes. The intention would be to match the baseline of the text with the bottom of the buttons.


Just to clarify for code review and QA, quiet means the button is unframed. Here's an example of quiet and progressive: https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonWidget-quiet-progressive

Yes, without a frame and blue inside. Those links don't take me to the right widget any more, so here is a screenshot to confirm:


  • Table headers background should be #EBECF0, with a 2px border at the bottom

@Prtksxna Is this meant to be #eaecf0 (@colorGray14), which we use elsewhere in the table?

I am confused about where to best pick some of these colors from. As you point out it would be better to pick from the style guide (#eaecf0), but I saw tables on Wikipedia using this color (#EBECF0) as the table header and thought it was some sort of default. Do you know where this color might be coming from?

We are also currently using #EBECF0 for the username cell, if we do decide to change the color, we should change it here too.

The intention would be to match the baseline of the text with the bottom of the buttons.

The space between the text and the line can vary between broswers and systems, so there's no way to align a block element precisely with the bottom of the text. With my setup, it aligns if I move the buttons 4px upwards (narrow screenshots to help make the alignment clear):

...though, as noted, this may not align as precisely on every system, and makes the space above the buttons small as they encroach into the padding of the container.

I'm updating the patch to do this, but just want to be clear about what's happening.

[...] here is a screenshot to confirm [...]

Thanks for doing that!

I am confused about where to best pick some of these colors from. As you point out it would be better to pick from the style guide (#eaecf0), but I saw tables on Wikipedia using this color (#EBECF0) as the table header and thought it was some sort of default. Do you know where this color might be coming from?

We are also currently using #EBECF0 for the username cell, if we do decide to change the color, we should change it here too.

I can't find #ebecf0 in the codebase (https://codesearch.wmflabs.org/deployed/?q=ebecf0&i=nope&files=&repos=), but #eaecf0 is used a fair amount (https://codesearch.wmflabs.org/deployed/?q=eaecf0&i=nope&files=&repos=).

It's #eaecf0 that we use in the Special:Investigate target cells: https://gerrit.wikimedia.org/g/mediawiki/extensions/CheckUser/+/c0feb3f862820da84ecd8fad9342606411d5cdf1/modules/ext.checkuser.investigate.less#4

I'm also seeing #eaecf0 in the example you linked to:

Could some custom CSS be overriding it for you?

@Prtksxna It seems weird to me that the pin button isn't also quiet? Does this seem correct to you?

@dbarratt That's a good question! Something I wondered too... It seems that quiet isn't implemented for the toggle buttons - if you remove the frame from this one, there's no change between the on and off states. I do wonder if it would be worth us implementing a quiet version of the toggle button for this purpose though?

Tchanders updated the task description. (Show Details)Apr 9 2020, 4:16 PM
Tchanders updated the task description. (Show Details)Apr 9 2020, 7:13 PM

I've split out making the filter button destructive into a separate task: T249938. Doing that depends on an OOUI update which won't be available for a few weeks (see T249853#6047063).

Change 587508 merged by jenkins-bot:
[mediawiki/extensions/CheckUser@master] Make some small design fixes for Special:Investigate

https://gerrit.wikimedia.org/r/587508

  • Match the spacing of the "New investigation / Logs" buttons to the prototype (Chrome).

Looks fine on Firefox, Chrome, IE11.

  • Filter button should use the funnel icon

Yep. But changed in T249938.

  • Reduce UA's font size to 13px

It is ~0.92em on Firefox, Chrome, IE11 and Safari 13.

  • Table headers background should be #EBECF0, with a 2px border at the bottom

Is #EAECF0, if it matters.

  • Date range text should be right-aligned

Yep (on Compare tab).

dbarratt closed this task as Resolved.Apr 15 2020, 3:27 PM