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
Resolvedmatmarex
OpenNone
Resolved ppelberg
ResolvedEsanders
ResolvedBUG REPORTmatmarex
Resolved ppelberg
Resolvedmatmarex
Resolved ppelberg
Resolved KieranMcCann
Resolved KieranMcCann
Resolved KieranMcCann
Resolved KieranMcCann
Resolved ppelberg
Resolved ppelberg
ResolvedEsanders
Resolvedmatmarex
InvalidNone
Resolved ppelberg
Resolved ppelberg
Resolvedmatmarex
ResolvedEAkinloose
Resolved ppelberg
Resolved ppelberg
Resolved ppelberg
Resolvedmatmarex
Duplicate KieranMcCann
Resolved ppelberg
Resolved Whatamidoing-WMF
Resolvedmatmarex
ResolvedRyasmeen
DuplicateNone
ResolvedBUG REPORT nray
Resolved ppelberg
Resolved ppelberg
ResolvedJdlrobson
ResolvedBUG REPORTmatmarex
Resolvedmatmarex
Resolved ppelberg
Resolved Whatamidoing-WMF
Resolved ppelberg
Resolved iamjessklein
Duplicate KieranMcCann
DuplicateNone
ResolvedEsanders
Resolved ppelberg
ResolvedEsanders
Resolved ppelberg
ResolvedDLynch
ResolvedEsanders
Resolved ppelberg
Resolved Whatamidoing-WMF
Resolvedmatmarex
Resolved ppelberg
ResolvedEsanders
ResolvedEsanders
Resolved Whatamidoing-WMF
Resolvednayoub
Resolved Whatamidoing-WMF
Resolved ppelberg
ResolvedDLynch
Resolved ppelberg
Resolved ppelberg
Resolved ppelberg
Resolved Whatamidoing-WMF
Resolvedmatmarex
Resolved ppelberg
Resolvedmatmarex
Resolved ppelberg
Resolved Whatamidoing-WMF
ResolvedDLynch
Resolvednayoub
Resolved Whatamidoing-WMF
ResolvedEsanders
Resolved ppelberg
Resolvedmatmarex
Resolved Whatamidoing-WMF
Resolvedmatmarex
Resolved ppelberg
OpenVPuffetMichel
Resolvedmatmarex
In ProgressTrizek-WMF
OpenNone
Resolved ppelberg
ResolvedDLynch
Resolved Whatamidoing-WMF
Resolved Whatamidoing-WMF
Resolved ppelberg
OpenNone
Resolved ppelberg
Resolved ppelberg
Resolved ppelberg
Resolvedsgrabarczuk
OpenNone
Resolved iamjessklein
DeclinedNone
OpenNone
In ProgressTrizek-WMF
OpenNone
Resolvedmatmarex
Resolvedovasileva
Resolvedmatmarex
ResolvedDLynch
Resolved ppelberg
Resolved Whatamidoing-WMF
OpenNone
OpenTrizek-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