Threads Beta — Design implementation review

[janogarcia]

Resources

• Figma: Reference screenshots

---

Room: Top bar

• Distribute the button widths more evenly, making all of them at least 40dp as a workaround until we have the chance to redesign the top bar properly (screenshot: currently there’s a huge difference between the 48dp for the threads button and the 34dp for the voice/video call buttons).
  ❌ Apr. 7 Still not evenly distributed (video call 34dp, threads 38dp, overflow 40dp)
  (aris: changed the threads icon to be 34dp, until we refactor the toolbar lets not make them all 40dp while it would be to large for some devices)

Room: Message tile bottom sheet

• Change thread action copy to Reply in thread (instead of Reply in Thread, uppercase T)·

Thread summary

• Change thread icon size to 18dp (screenshot: currently it’s rendered at 16dp)
• Horizontal inner padding should be 12dp (screenshot: currently it seems to be set to 13dp)
• Make the thread summary container the same width as the messageTextView container, aligning the edges of both containers (screenshot: the thread summary container doesn’t match the width of messageTextView and it doesn’t align to its edges)
• Make the vertical gap with messageTextView 8dp (screenshot: currently it’s 4dp)

Thread: Top bar

• Change overflow button width to 40dp (screenshot: currently set to 34dp)
• Change View in room icon (top/bottom solid lines should be dotted). [Aris: SVG cannot be rendered correctly from AS]
  ⚙️ Apr. 7 Jano: I'll try re-exporting it in a way that is compatible with Android Studio.
• Room avatar should be 16dp (instead of 20dp)
• Room name text size should be 16dp (instead of 18dp)
• Show room name instead of root message author until the proper behavior is implemented (navigate back to top).
  → Figma
  ❌ Apr. 7 Works as expected only if opening the thread from the room timeline, fails if opening it from the thread list.

Thread

• Align timeline to the top.
  → Figma
  ❌ Apr. 7 It's still aligned to the bottom.
  ❌ May. 26 We're dropping this requirement for the thread timeline.
• Set the input focus on the composer when following the Reply in thread action so that the on-screen keyboard is automatically revealed on replying.
  → Figma
  ❌ Apr. 7 Works as expected only if a thread didn't exist for that message, fails if it's a thread already.

Thread list

• Make the thread icon in the summary 18dp (instead of 16dp)
• Right margin should be 28dp (screenshot: currently set to 25dp)
• Make the spacing between threadSummaryTitleTextView and threadSummaryRootMessageTextView 2dp (instead of 3dp)
• The spacing between the avatar in the thread summary messageThreadSummaryAvatarImageView and the root message threadSummaryRootMessageTextView should be of 8dp (screenshot: currently there’s a gap of 10px)
• Message deleted text should be gray/secondary color (screenshot: currently set to black)
• Implement missing thread tile actions on long tap.
  → Figma
  ❌ Apr. 7 Not implemented yet.
  Tracked here: Threads: Long press on message in Thread List view #4687
• Empty state: Change copy to Reply in thread, making Thread lowercase (screenshot).
  → Figma.
• Empty state: Remove filter button when there’s no threads in room (screenshot).
  → Figma.
• Empty state: Implement missing empty state for the My threads filter enabled.
  → Figma
  ❌ Apr. 7 Not implemented yet.

Thread list: Filters bottom sheet

Refer to screenshots: 1, 2, 3.

• Use expected gray color for the unselected state of bottomSheetActionIcon (instead of black)
• Make the spacing/gap between bottomSheetActionClickableZone 4dp (instead of 24dp)
• Make the spacing between threadListModalTitle and bottomSheetActionClickableZone 12dp (instead of 24dp)
• Make the bottom sheet's bottom padding 16dp (instead of 8dp)

Thread search: Keyword match in thread root message

• Taping on the thread summary in a search result should display the thread.
  → Figma
  ❌ Apr. 7 Not implemented yet.

Dark mode

• Use hollow icon in thread summary in room timeline and thread list. [Aris: SVG cannot be rendered correctly from AS]
  ⚙️ Apr. 7 Jano: I'll try re-exporting it in a way that is compatible with Android Studio.

---

Added for 1.4.10 [40104102] (G-b7320):

Thread summary: room timeline, thread list

• The gap between the reply count and avatar should be constant (instead of getting narrower when the reply count has two digits vs one digit).

Thread list

• Make the filter button width 48dp (instead of 34px)
• The gap between messageThreadSummaryAvatarImageView and the gray border below it should be 12pt (instead of 8pt)
• My threads: Update icon when filter is enabled.
  → Figma

---

Added for 1.4.16 [40104162] (G-b8288)):

Thread list

• The gap between messageThreadSummaryCounterTextView and messageThreadSummaryAvatarImageView should be 12dp instead of 4dp.

[rubo77]

What are "threads"?

Is there a documentation?

[janogarcia]

@rubo77 Unfortunately, there’s no proper documentation yet in the Help Centre. That is something we plan on improving, though.

In short, threads allow you to discuss separate subjects in a room and track those over time. It’s a complementary way of discussing stuff in a room that can better fit some teams and groups’ workflows and communication styles/needs (asynchronous vs. real-time).

---

---

[bmarty]

in 1.4.10

[novocaine]

@janogarcia please review this and close the ticket if we are done