planetary-ios icon indicating copy to clipboard operation
planetary-ios copied to clipboard

Design Message Type Cells in SwiftUI

Open mplorentz opened this issue 1 year ago • 14 comments

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

mplorentz avatar Sep 06 '22 17:09 mplorentz

Also Gatherings

Chardot avatar Sep 12 '22 19:09 Chardot

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

rabble avatar Oct 10 '22 19:10 rabble

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

Chardot avatar Oct 10 '22 19:10 Chardot

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

rabble avatar Oct 24 '22 19:10 rabble

@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 avatar Dec 14 '22 20:12 mplorentz

@mplorentz @danlatorre are going to review these designs

mplorentz avatar Jan 02 '23 19:01 mplorentz

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

mplorentz avatar Apr 11 '23 18:04 mplorentz

@mplorentz @danlatorre

Image

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?

Chardot avatar Apr 13 '23 19:04 Chardot

@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.

mplorentz avatar Apr 18 '23 18:04 mplorentz

@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.

Group 97

Chardot avatar Apr 18 '23 18:04 Chardot

Ok I filed #251 to implement this.

mplorentz avatar Apr 19 '23 18:04 mplorentz

Ok I filed #251 to implement this.

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

Chardot avatar Apr 20 '23 12:04 Chardot

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

mplorentz avatar May 01 '23 22:05 mplorentz