Page MenuHomePhabricator
Create Task
Maniphest T214208

mw-datatable/TablePager tables need to be visually updated and aligned to wikitable
Open, Needs TriagePublic
Actions

Description

Coming from T214128, we should also visually update and align TablePager tables to wikitable appearance.
There's no valid reason to have table headers in this distinct color, which is not part of the Wikimedia Design Style Guide color palette, putting interface over content.

It's currently in use at

  • Special:AllMessages
  • Special:BlockList
  • Special:ListFiles
  • Special:ProtectedPages
  • Replace th color
  • Unify padding with wikitable
    • Unify TablePager tables padding (and remove as soon as mw-datatable receives same padding)
  • Cleanup CSS naming scheme
    • Remove TablePager class altogether and only rely on mw-datatable
    • Replace all TablePager derived classes

[[ https://codesearch.wmflabs.org/search/?q=TablePager&i=nope&files=&repos= | TablePager class usage ]]:

  • Extension AbuseFilter
  • Extension CloseWikis
  • Extension SecurePoll
  • Extension PageAssesments
  • Extension Theme
  • Extension Linter
  • Skin Daddio
  • Skin Truglass
  • Skin WPTouch
BeforeAfter
image.png (560×2 px, 121 KB)

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Update table header color of `.mw-datatable`mediawiki/coremaster+1 -1
Datatable: Unify `padding` with `.wikitable`mediawiki/coremaster+1 -1
TablePager: Unify `padding` with `.wikitable`mediawiki/coremaster+6 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

Volker_E created this task.Jan 18 2019, 9:47 PM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptJan 18 2019, 9:47 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Volker_E updated the task description. (Show Details)Jan 18 2019, 10:08 PM
Volker_E added a comment.Jan 18 2019, 10:26 PM

We should not only do this for TablePager, but for .mw-datatable as a whole.

Volker_E added a subscriber: • alexhollender_WMF.Jan 18 2019, 10:45 PM

@alexhollender It might be advantageous to leave a slight touch of purple in the table headers in order to not fall for only grey and blue in those data tables. #eaeeff seems like a good choice to me.
Example of current mw-datatable usage (enwiki): https://en.wikipedia.org/wiki/Special:Tags
Example of current mw-datatable TablePager usage (enwiki): https://en.wikipedia.org/wiki/Special:AllMessages

Would be good to have a second design opinion here…

Izno updated the task description. (Show Details)Jan 18 2019, 11:59 PM
Volker_E added a comment.Jan 19 2019, 12:01 AM

Also, let's state clear that .mw-datatable changes should probably go into a feedback process with community, but we can use .TablePager as testbed for possible changes.

gerritbot subscribed.Jan 19 2019, 12:53 AM

Change 485349 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Datatable: Unify padding with .wikitable

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

gerritbot added a project: Patch-For-Review.Jan 19 2019, 12:53 AM
gerritbot added a comment.Jan 19 2019, 1:03 AM

Change 485350 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] TablePager: Unify padding with .wikitable

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

Volker_E renamed this task from TablePager tables need to be visually updated and aligned to wikitable to mw-datatables/TablePager tables need to be visually updated and aligned to wikitable.Jan 19 2019, 1:05 AM
Volker_E updated the task description. (Show Details)
gerritbot added a comment.Jan 19 2019, 1:40 AM

Change 485350 merged by jenkins-bot:
[mediawiki/core@master] TablePager: Unify padding with .wikitable

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

Volker_E added a subscriber: Krinkle.Jan 19 2019, 1:43 AM

@Krinkle I'd preferably get rid of the whole .TablePager class and just overwrite .mw-datatable in TablePager.less if it were loaded in the right order in RL. It's such schematic mess and after staring at all code applied I see 0 to maximal minimal (!) use cases for it.

Volker_E renamed this task from mw-datatables/TablePager tables need to be visually updated and aligned to wikitable to mw-datatable/TablePager tables need to be visually updated and aligned to wikitable.Jan 19 2019, 1:44 AM
Krinkle added a comment.EditedJan 19 2019, 1:46 AM

I can't say about load order offhand, but I definitely support removing the TablePager CSS class in favour of re-using mw-datatable.

They appear identical to me. Any overrides needed based on unique requirements from a specific special page could indeed be local overrides instead.

ReleaseTaggerBot added a project: MW-1.33-notes (1.33.0-wmf.14; 2019-01-22).Jan 19 2019, 2:00 AM
Volker_E updated the task description. (Show Details)Jan 20 2019, 6:51 PM
gerritbot added a comment.Jan 23 2019, 4:28 AM

Change 485349 merged by jenkins-bot:
[mediawiki/core@master] Datatable: Unify padding with .wikitable

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

ReleaseTaggerBot edited projects, added MW-1.33-notes (1.33.0-wmf.16; 2019-02-05); removed MW-1.33-notes (1.33.0-wmf.14; 2019-01-22).Jan 23 2019, 5:00 AM
• alexhollender_WMF added a comment.Jan 23 2019, 2:44 PM

@Volker_E looks good to me. Just to confirm, with #eaeeff I'm seeing:

Screen Shot 2019-01-23 at 9.43.43 AM.png (959×1 px, 366 KB)

Esanders awarded a token.Jan 23 2019, 7:26 PM
Volker_E updated the task description. (Show Details)Jan 24 2019, 12:07 AM
Volker_E moved this task from Unsorted to Layout/pattern consistency on the UI-Standardization board.Jan 24 2019, 5:58 AM
Volker_E triaged this task as Medium priority.Feb 5 2019, 5:35 AM
Volker_E moved this task from Backlog to Doing… on the UI-Standardization-Kanban board.
Volker_E updated the task description. (Show Details)Mar 13 2019, 7:01 AM
Iniquity subscribed.EditedMar 13 2019, 12:11 PM

Maybe we can use a different color for <th>? For example: #eaf3ff. You can see some information here T167186.

Снимок экрана 2019-03-13 в 15.12.56.png (256×578 px, 18 KB)

Volker_E added a comment.Apr 8 2019, 5:19 AM

Hey @Iniquity, sorry, I haven't seen this.
Thanks for connecting the tasks. I hesitate a bit with using Accent90 as accent colors are meant to signalize interactive elements/feedback on user interaction.
The table headers for mw-datatables are a special element that should probably receive special visual treatment. Without further arguments, I propose to use #eaeeff as agreed upon with Audiences Reading design counterpart @alexhollender above.

Volker_E merged a task: T167186: Tables: 'mw-datatable' class.Apr 8 2019, 5:20 AM
Volker_E added subscribers: TheDJ, putnik.
gerritbot added a comment.Apr 8 2019, 5:31 AM

Change 502048 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update table header color of .mw-datatable

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

gerritbot added a comment.Apr 8 2019, 6:17 PM

Change 502048 merged by jenkins-bot:
[mediawiki/core@master] Update table header color of .mw-datatable

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

ReleaseTaggerBot edited projects, added MW-1.33-notes (1.33.0-wmf.25; 2019-04-09); removed MW-1.33-notes (1.33.0-wmf.16; 2019-02-05).Apr 8 2019, 7:01 PM
Iniquity added a comment.EditedApr 8 2019, 8:15 PM

This color is too purple for me, and purple is not used since monobook. And you have never seen it in StyleGuide :) For example, we completely removed old purple colors from navboxes and other tables in Russian Wikipedia.

Maintenance_bot removed a project: Patch-For-Review.May 22 2019, 3:39 PM
Volker_E mentioned this in T277047: Design inventory of Wikiverse (Codex design system, OOUI, MediaWiki widgets) UI components.Apr 13 2021, 4:11 PM
RHo added a parent task: T280727: Define and add the data table component to the DSG.May 4 2021, 3:37 PM
Esanders unsubscribed.May 5 2021, 3:44 PM
Iniquity mentioned this in T287997: Community expectation that mw-datatable styles are loaded on pages which use it.Aug 26 2021, 11:02 AM
XanonymusX subscribed.Aug 26 2021, 11:08 AM
Izno subscribed.Aug 26 2021, 1:30 PM
Aklapper mentioned this in T293576: TablePager on Special:ListFiles shows contextless "Yes" above each picture with small screen width.Oct 17 2021, 4:31 PM
Volker_E edited projects, added Codex; removed UI-Standardization, UI-Standardization-Kanban.Feb 5 2024, 3:53 PM
Volker_E removed a subscriber: • alexhollender_WMF.
Restricted Application added a project: Design-System-Team. · View Herald TranscriptFeb 5 2024, 3:53 PM
CCiufo-WMF raised the priority of this task from Medium to Needs Triage.Feb 6 2024, 8:51 PM
CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.
• AnneT mentioned this in T361048: Table: Investigate implications of migrating TablePager to Codex.Mar 26 2024, 7:28 PM
• AnneT mentioned this in T366850: TablePager: consider long-term migration plan.Jun 6 2024, 9:01 PM
Izno mentioned this in T370188: mw-datatable tables overlap UI.Jul 16 2024, 8:55 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits