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
OpenNone
OpenNone
OpenNone
Resolvedmatmarex
OpenNone
Resolvedppelberg
ResolvedEsanders
ResolvedBUG REPORTmatmarex
OpenNone
Resolvedmatmarex
OpenNone
Resolved iamjessklein
Resolvedppelberg
ResolvedKieranMcCann
ResolvedKieranMcCann
ResolvedKieranMcCann
ResolvedKieranMcCann
OpenNone
OpenNone
Resolved iamjessklein
ResolvedEsanders
Resolved iamjessklein
Resolvedppelberg
Resolved iamjessklein
Resolvedmatmarex
Resolved iamjessklein
Resolved iamjessklein
Resolved iamjessklein
Resolvedppelberg
ResolvedEsanders
Resolvedmatmarex
InvalidNone
Resolvedppelberg
Resolvedppelberg
Resolvedmatmarex
ResolvedEAkinloose
Resolvedppelberg
Resolvedppelberg
Resolvedppelberg
Resolvedmatmarex
DuplicateKieranMcCann
Resolvedppelberg
ResolvedWhatamidoing-WMF
Resolvedmatmarex
ResolvedRyasmeen
DuplicateNone
ResolvedBUG REPORTnray
Resolvedppelberg
Resolvedppelberg
ResolvedJdlrobson
ResolvedBUG REPORTmatmarex
Resolvedmatmarex
Resolvedppelberg
OpenWhatamidoing-WMF
OpenEsanders
Resolvedmatmarex
OpenNone
OpenNone
Resolvedppelberg
Resolved iamjessklein
DuplicateKieranMcCann
DuplicateNone
ResolvedEsanders
Resolvedppelberg
ResolvedEsanders
Resolvedppelberg
ResolvedDLynch
ResolvedEsanders
Resolvedppelberg
ResolvedWhatamidoing-WMF
Resolvedmatmarex
Resolvedppelberg
ResolvedEsanders
ResolvedEsanders
ResolvedWhatamidoing-WMF
Resolvednayoub
ResolvedWhatamidoing-WMF
Resolvedppelberg
ResolvedDLynch
Resolvedppelberg
Resolvedppelberg
Resolvedppelberg
ResolvedWhatamidoing-WMF
Resolvedmatmarex
Resolvedppelberg
Resolvedmatmarex
OpenNone
OpenWhatamidoing-WMF
ResolvedDLynch
Resolvednayoub
OpenWhatamidoing-WMF
OpenNone
Openmatmarex
OpenWhatamidoing-WMF
OpenNone
OpenNone
OpenVPuffetMichel

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