Page MenuHomePhabricator

Implement Topic Container design adjustments (desktop + mobile)
Closed, ResolvedPublic

Description

We will use this ticket to:

  1. Define the final state of Topic Containers we intend to deploy in T282639
  2. Centralize the requirements that will guide the QA that will precede T282639 and
  3. Relate/attach the various patches related to Topic Containers we've written to-date.*

*Note: once this initial set of patches is deployed, we'll work on iterative improvements in new tickets.

Requirements

Desktop + Mobile
  • Namespace(s): User talk + Article talk per T304750
Desktop

Meta

User Experience

  • The == H2 == section title should contain affordances that enable people to do the following:
    • Subscribe to be notified when other people add new comments to the conversation happening within the boundaries of the section they are viewing (if logged in)
    • Unsubscribe from being notified when other people add new comments to the conversation happening within the boundaries of the section they are viewing (if logged in)
    • Open the source for the specific section/topic they are viewing so they can edit and/or inspect it
  • Beneath the section title, the following pieces of metadata should appear
    • Priority position (left-most in LTR; right-most in RTL): when the latest comment was posted within the topic.
      • Note: people should be able to click the date the last comment was published and be taken to that comment highlighted in context. See: T309751.
    • Middle position: The total number of unique comments that people have posted within the topic
    • Last position: The total number of unique people who have posted a comment within a topic.
      • For now, the # of people count will NOT be interactive. We will revisit this in T309752.
Mobile

Meta

User Experience

  • The == H2 == section title should contain affordances that enable people to do the following:
    • Subscribe to be notified when other people add new comments to the conversation happening within the boundaries of the section they are viewing (if logged in)
    • Unsubscribe from being notified when other people add new comments to the conversation happening within the boundaries of the section they are viewing (if logged in)
    • Edit a discussion. Note: the edit button should live inside an overflow menu (e.g. •••) that will appear within the top-right of the Topic Container in LTR languages and in the top-left of the Topic Container in RTL languages.
  • Beneath the section title, the following pieces of metadata should appear
    • When the latest comment was posted within the topic
      • Note: people should be able to click the date the last comment was published and be taken to that comment highlighted in context. See: T309751.

Designs

Mobile (Minerva Neue)Desktop (Vector 2022)Desktop
Topic-Containers-Mobile-Minerva.png (2×3 px, 968 KB)
Topic-Containers-Desktop-Vector2022.png (3×3 px, 969 KB)
Topic-Containers-Desktop-Vector.png (3×3 px, 970 KB)
NOTE: @KieranMcCann to populate the table above with final mocks from the [Talk Page Visual Improvements Figma file](https://www.figma.com/file/DDPwDc8T6b97Vy7uNYyBUp/Talk-Pages-Visual-Improvements-T269950?node-id=3037%3A37007.

Open questions

  • 1. Does the design of the mobile Topic Container work well in languages where the "Latest comment" indicator is likely to span multiple lines? We'll explore this question once the design has been implemented, potentially in a separate ticket.

Done

  • Answers to all Open questions are documented
  • All Requirements are verified as having been implemented as they've been described

Related Objects

StatusSubtypeAssignedTask
ResolvedEAkinloose
OpenNone
OpenNone
OpenNone
Resolvedmatmarex
OpenTrizek-WMF
Resolvedppelberg
Resolved Esanders
ResolvedBUG REPORTmatmarex
Resolvedppelberg
Resolvedmatmarex
Resolvedppelberg
Resolved KieranMcCann
Resolved KieranMcCann
Resolved KieranMcCann
Resolved KieranMcCann
Resolvedppelberg
Resolvedppelberg
Resolved Esanders
Resolvedmatmarex
InvalidNone
Resolvedppelberg
Resolvedppelberg
Resolvedmatmarex
ResolvedEAkinloose
Resolvedppelberg
Resolvedppelberg
Resolvedppelberg
Resolvedmatmarex
Duplicate KieranMcCann
Resolvedppelberg
Resolved Whatamidoing-WMF
Resolvedmatmarex
ResolvedRyasmeen
DuplicateNone
ResolvedBUG REPORT nray
Resolvedppelberg
Resolvedppelberg
ResolvedJdlrobson
ResolvedBUG REPORTmatmarex
Resolvedmatmarex
Resolvedppelberg
Resolved Whatamidoing-WMF
Resolvedppelberg
Resolved iamjessklein
Duplicate KieranMcCann
DuplicateNone
Resolved Esanders
Resolvedppelberg
Resolved Esanders
Resolvedppelberg
ResolvedDLynch
Resolved Esanders
Resolvedppelberg
Resolved Whatamidoing-WMF
Resolvedmatmarex
Resolvedppelberg
Resolved Esanders
Resolved Esanders
Resolved Whatamidoing-WMF
Resolvednayoub
Resolved Whatamidoing-WMF
Resolvedppelberg
ResolvedDLynch
Resolvedppelberg
Resolvedppelberg
Resolvedppelberg
Resolved Whatamidoing-WMF
Resolvedmatmarex
Resolvedppelberg
Resolvedmatmarex
Resolvedppelberg
Resolved Whatamidoing-WMF
ResolvedDLynch
Resolvednayoub
Resolved Whatamidoing-WMF
Resolved Esanders
Resolvedppelberg
Resolvedmatmarex
Resolved Whatamidoing-WMF
Resolvedmatmarex
Resolvedppelberg
OpenVPuffetMichel
Resolvedmatmarex
In ProgressTrizek-WMF
OpenNone
Resolvedppelberg
ResolvedDLynch
Resolved Whatamidoing-WMF
Resolved Whatamidoing-WMF
Resolvedppelberg
OpenNone
Resolvedppelberg
Resolvedppelberg
Resolvedppelberg
Resolvedsgrabarczuk
OpenNone
Resolved iamjessklein
DeclinedNone
ResolvedNone
ResolvedTrizek-WMF
DuplicateNone
Resolvedmatmarex
Resolvedovasileva
Resolvedmatmarex
ResolvedDLynch
Resolvedppelberg
Resolved Whatamidoing-WMF
Resolved Esanders
ResolvedTrizek-WMF

Event Timeline

  • Beneath the section title, the following pieces of metadata should appear
    • Priority position (left-most in LTR; right-most in RTL): when the latest comment was posted within the topic.
      • Note: people should be able to click the date the last comment was published and be taken to that comment highlighted in context. See: T309751.
    • Middle position: The total number of unique people who have posted a comment within a topic.
      • For now, the # of people count will NOT be interactive. We will revisit this in T309752.
    • Last position: The total number of unique comments that people have posted within the topic

The middle and last are the opposite than in the latest designs. I assume the designs reflect latest plans, so I am updating the task summary.

Change 808273 had a related patch set uploaded (by Bartosz Dziewoński; author: Esanders):

[mediawiki/extensions/DiscussionTools@master] Topic containers: Design iterations

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

Change 808273 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Topic containers: Design iterations

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

I know it's technically not, but the "Subscribe" link looks like it's misaligned to me. It feels like it's below the rest of it unless I draw lines on the screen to prove to myself that it's not.

The spacing away from the heading feels a little bit too much to me as well, though that might be pure personal-preference.

I know it's technically not, but the "Subscribe" link looks like it's misaligned to me. It feels like it's below the rest of it unless I draw lines on the screen to prove to myself that it's not.

The spacing away from the heading feels a little bit too much to me as well, though that might be pure personal-preference.

Filed as T312674