Threads Beta — Design implementation review

janogarcia commented 2 years ago

Resources

Figma: Reference screenshots

Room: Top bar

[x] 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
[x] Change thread action copy to Reply in thread (instead of Reply in Thread, uppercase T)·

Thread summary

[x] Change thread icon size to 18dp (screenshot: currently it’s rendered at 16dp)
[x] Horizontal inner padding should be 12dp (screenshot: currently it seems to be set to 13dp)
[x] 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)
[x] Make the vertical gap with messageTextView 8dp (screenshot: currently it’s 4dp)

Thread: Top bar

[x] 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.
[x] Room avatar should be 16dp (instead of 20dp)
[x] Room name text size should be 16dp (instead of 18dp)
[x] 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

[x] 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.
[x] 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

[x] Make the thread icon in the summary 18dp (instead of 16dp)
[x] Right margin should be 28dp (screenshot: currently set to 25dp)
[x] Make the spacing between threadSummaryTitleTextView and threadSummaryRootMessageTextView 2dp (instead of 3dp)
[x] 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)
[x] 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: https://github.com/vector-im/element-android/issues/4687
[x] Empty state: Change copy to Reply in thread, making Thread lowercase (screenshot).
→ Figma.
[x] 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.

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

Thread search: Keyword match in thread root message

[x] 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

[x] 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

[x] Make the filter button width 48dp (instead of 34px)
[x] The gap between messageThreadSummaryAvatarImageView and the gray border below it should be 12pt (instead of 8pt)
[x] 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 commented 2 years ago

What are "threads"?

Is there a documentation?

janogarcia commented 2 years ago

@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 commented 2 years ago

in 1.4.10

novocaine commented 2 years ago

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

janogarcia commented 2 years ago

@ariskotsomitopoulos I've added a task for a layout regression I spotted in latest Beta, v1.4.16.

As for the other tasks in the issue description:

I'm sharing with you via DM an alternative version of the two offending SVGs that hopefully work correctly in Android Studio.
There are couple of tasks that are pending implementation: Implement missing thread tile actions on long tap. and Empty state: Implement missing empty state for the My threads filter enabled.

ariskotsomitopoulos commented 2 years ago

The DM icon for filtering seems to render correctly. However, I implemented this icon custom with drawables so there is not need to add that. For sure it is needed your approach for the other problematic icons
Yes, those features where added for P2 release, for sure we can prioritise them

janogarcia commented 2 years ago

Sorry, I sent you the wrong .zip file. You don't need to update the filter icon, but the Thread and View in room icons I sent you over instead.

janogarcia commented 2 years ago

Yes, those features where added for P2 release, for sure we can prioritise them

In that case, we may have labeled those tasks wrong in the project board, or they weren't captured appropriately in the first place, as both features are available on all other platforms.

The missing empty state would be part of this closed issue: https://github.com/vector-im/element-android/issues/4899
Unsure about what would be the correct issue (if any) for the missing thread tile actions on long tap: https://www.figma.com/file/T309ztx0sNyOOK6NKVLHsK/Threads?node-id=1304%3A244172

daniellekirkwood commented 1 year ago

Closing this as complete - any outstanding work or further enhancements should be raised as issues against the android repo independently of this ticket.

element-hq / element-android