Note to readers-web team - RW backlog is tagged here just to track my own work :) ignore this card

I applied the UI style guide to the interaction timeline
https://wikimedia.invisionapp.com/share/VRG4FI7NDJY#/282441034_Landing

• The changes proposed here are only visual changes. mostly css related.
• The only extra added feature I would say is shortcuts for last24hours, last 7 days, I thought that would be a convenient thing to add
• Date formats are humanised
• Colors, fonts, shapes are updated and accessible by WCAG standards T188664
• Layout uses paper-base metaphor from style guide T188665
• UI components used match the spec from OOUI

as you can see the overall outcome of applying our styles is making the interface look on-brand like
this https://wikimedia.github.io/WikimediaUI-Style-Guide/ or http://research.wikimedia.org or https://en.m.wikipedia.org/wiki/Bruno_Munari

Hi Nirzar;

I think your suggested changes look great. I love the shortcuts, that's pretty smart.

I think a lot of these visual changes will be simple and unintrusive, but I'm concerned about the spacing of elements. We've worked really hard on making sure the tools has high information density so our target users (administrators and power users) can see a lot of information in one go. The margins, spacing of elements, and font sizes were all decreased to have as many 'edit cards' on a 1366x768 monitor. This is the timeline now versus last November.

I'll have to discuss with David about what's easy to get from OOUI and what's not — we wanted to originally use OOUI assets but are building on toolforge, which added a level of complexity.

I think a lot of these visual changes will be simple and unintrusive, but I'm concerned about the spacing of elements. We've worked really hard on making sure the tools has high information density so our target users (administrators and power users) can see a lot of information in one go. The margins, spacing of elements, and font sizes were all decreased to have as many 'edit cards' on a 1366x768 monitor. This is the timeline now versus last November.

very good point. I will create a compact version of this. designers love whitespaces :P

I'll have to discuss with David about what's easy to get from OOUI and what's not — we wanted to originally use OOUI assets but are building on toolforge, which added a level of complexity.

integration with actual OOUI library would be a tough one, matching the style of UI components would be easier. that kinda goes against consistency principles for future generations but again, the elements used here are basic. textbox, dropdown and calendar. should be fine.

@TBolliger Here's a compact version with exact same content and comparison with current version.

we will be saving vertical space with new design. it's easier to scan yet dense in information.

I love it.

❤️ for using a real world example.

We may want a smaller calendar date treatment, though. We've seen some examples where there is only one edit per day (extreme example)

In T188435#4016264, @Nirzar wrote:

designers love whitespaces

I must be a designer then. 😍

I really like your designs in T188435#4015634

@Nirzar is this still being worked on?

The Anti-Harassment Tools team cannot commit any additional development time for the Timeline (outside of urgent bugfixes) for the remainder of calendar year 2018.

There is a Patch-For-Review for some of these changes https://github.com/wikimedia/InteractionTimeline/pull/85

https://github.com/wikimedia/InteractionTimeline/pull/115

This looks good to me so I've merged it, I can deploy it whenever, but wanted to give @dom_walden an opportunity to QA (if you want) before deployment. :)

Comparing my local version of InteractionTimeline running in docker with the production version, I am seeing very few differences except the content being narrower.

New UI:

Comparing the interaction of two of my own test users on testwiki, everything else works the same as in production and all the data that is returned is the same.