| Niharika | |
| Apr 2 2020, 6:37 PM |
| F31746933: Screen Shot 2020-04-09 at 11.16.01.png | |
| Apr 9 2020, 3:17 PM |
| F31746629: image.png | |
| Apr 9 2020, 1:32 PM |
| F31746634: image.png | |
| Apr 9 2020, 1:32 PM |
| F31746688: image.png | |
| Apr 9 2020, 1:32 PM |
| F31746010: Screenshot 2020-04-09 at 1.54.52 PM.png | |
| Apr 9 2020, 8:32 AM |
| F31746018: Screenshot 2020-04-09 at 1.56.37 PM.png | |
| Apr 9 2020, 8:32 AM |
| F31745995: Screenshot 2020-04-09 at 1.52.35 PM.png | |
| Apr 9 2020, 8:32 AM |
| F31743098: image.png | |
| Apr 8 2020, 11:31 AM |
Copied from T246294.
| Subject | Repo | Branch | Lines /- | |
|---|---|---|---|---|
| Make some small design fixes for Special:Investigate | mediawiki/extensions/CheckUser | master | 19 -1 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | Niharika | T246294 [Epic] Iterate on the design of highlighting for Special:Investigate | |||
| Resolved | Tchanders | T249255 Minor design fixes for Special:Investigate [5*XSmall] |
- 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
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 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?
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
- 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).