Implement improved actionsheet designs
The current implementation of action sheets varies somewhat from screen to screen. Some screens use a native implementation, whereas others use custom styling.
In an attempt to streamline UI assets and make the overall UX more predictable, we should consolidate all action sheets, to use a single and improved design. In addition, action sheet functionality could be extended to cover select/dropdown controls.
The following areas in the mobile application should be addressed.
Comments
-
Comments (tapping on a comment ellipsis, on a post authored by the current user) - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/l1Qrbw7 -
Comments (tapping comment ellipsis as a comment owner) - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/v81x8KM -
Create comment (tapping on the ellipsis relative to the add comment component) - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/4aE9axd
Newsfeed
-
Post (viewer) - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/l1rqOnd -
Post (owner) - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/agbk4mz -
Filter feed (channel) - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/VrvZ3Do -
Remind/quote post - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/paA9vWQ
Wallet
-
Filter transactions - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/kaLrg8l (TBD how date range selection would function here - could be omitted if proving too complicated) -
Wallet balance ellipsis - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/oYL1ag0
Channels
-
General channel ellipsis - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/agbqD9z
Other
- Light mode example - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/xr2yJJV
Structure
You can see attached the building blocks of a action sheet here. https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/52AYxGx
Animation
See example animation using the following framer URL -> https://framer.com/share/Mobile-Navigation-Minds-iOS--ogwGjNnMFrUaSpljQJ2A/q0H8kNRcv?editor=1
Notes
We would in the future like to be able to use the action sheet concept to communicate important user messages. For example, notices such as 'Upgrade to Minds+', 'Setup your wallet' or 'Download chat'. See -> https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/1KLGyQp - https://www.sketch.com/s/ed8346e7-232d-4278-9fdf-aefbb31c1f30/a/1KLGyQp - We're not in a position to implement this now, but is possibly worth considering at this point.
Once we're happy with the above proposition, I'll remove the WIP tag from this issue.