Design Message Type Cells in SwiftUI

[mplorentz]

Since we will soon be rewriting our cell views in SwiftUI it would be great to have mockups of our ideal cells for common message types so we can build with those in mind. I think we have designs for basic cells, but I think it would be great to have mockups of future features so that we have them in mind while building the current cells. Here is a list of mockups I would love to have, separated by post type:

• [x] truncated
• [x] not truncated
• [x] emoji reactions
• [x] unread/read state
• [x] what does a reply look like vs. a root post
• [x] backlinks #778
• [x] content warnings
• [x] with/without images, both inline and attached.
• [x] other blob types, videos, gifs, arbitrary files
• [x] missing messages warning in threads

[Chardot]

Also Gatherings

[rabble]

First code done so far by @mplorentz and design in progress by @Chardot

[Chardot]

@rabble This is my progress on message cells: https://www.figma.com/file/6oTsbY3vHME19RNtgSGdAw/Planetary-Design-Plan?node-id=2885%3A27007

[rabble]

Needs still: Block / Unblock, posts containing markdown code snippits.

[Chardot]

1) Truncated message

2) Short new message

3) Short new message with replies

4) Short new message with emoji reactions

5) Message with inline images, emoji reactions and replies

6) Message with attached video file, emoji reactions and replies

7) Attached image, emoji reactions and replies

8) Inline Youtube link, emoji reactions and replies

9) Inline web link, emoji reactions and replies

10) Attached media gallery, emoji and replies

11) Attached media gallery, text and replies

12) Hidden message

13) Reply to message

14) New message with backlinks

15) Message detail with image gallery, emoji reactions, backlinks and replies

[mplorentz]

@Chardot after using the new "Read more" button for a few days I feel like it is simultaneously too small to tap and takes up too much space. Could we potentially move it back inline with the text like the old "See more" button? Or maybe just fading out the last line of text would be enough to get the user to tap on it, at which point we show the whole post in the thread view?

[mplorentz]

@mplorentz @danlatorre are going to review these designs

[mplorentz]

@Chardot is going to make one more change then ping @mplorentz and @danlatorre again.

[Chardot]

@mplorentz @danlatorre

I made these two alternatives which allow us to save screen real estate while providing the same functionality. I'm leaning towards the white one, but wanted to try with more chromatic contrast using the same orange gradient as in other call to actions.

Matt, can you confirm that it's possible to fade out the last line in a text block?

[mplorentz]

@Chardot I did some research and it looks like the fade is possible. I really like how much space this design saves, however I'm pretty concerned about the size of that button. The Apple HIGs say "On a touchscreen, buttons need a hit target of at least 44x44 points to accommodate a fingertip."

Should we just make the touch target much larger than the button? It may cover up other tappable elements like links and hashtags in that case, but it's not the end of the world.

[Chardot]

@mplorentz I was actually thinking the entire text block would be a link to the note detail view, but I'm good with keeping the bottom right quarter of the text block being the actionable element that opens the detail view.

[mplorentz]

Ok I filed #251 to implement this.

[Chardot]

Ok I filed #251 to implement this.

That issue is about private key backups 🤔 Were you trying to reference a different issue?

[mplorentz]

Yes, thank you. I meant planetary-social/nos#251