search

thunder-app / thunder

Thunder - An open-source cross-platform Lemmy client for iOS and Android built with Flutter
https://thunderapp.dev
GNU Affero General Public License v3.0
732 stars 62 forks source link

Improve Create Post Screen #455

Closed coslu closed 10 months ago

coslu commented 10 months ago

This PR aims to improve the UI of the create post screen.

It replaces the MarkdownTextInput with a standard text field and a row of buttons. This way, the text area can actually expand as you type and does not require a fixed value for max lines, fixing issues like #444 and making better use of vertical space as requested in #393. The same can probably be applied to the comment/reply screens to solve similar issues there as well.

Still want to change a few things, but here is how it looks right now:

https://github.com/thunder-app/thunder/assets/66788877/4b00a846-a861-43b1-91fc-8b29cac57bf8

hjiangsu commented 10 months ago

Hey, I like the overall changes so far, but I'm wondering if it's better to adjust/extend the code for the MarkdownTextInput rather than building out our own formatter.

Currently, Thunder uses a fork of MarkdownTextInput: https://github.com/thunder-app/markdown-editor

I feel like it should be easy enough to adjust the fork to allow for auto-expansion of the text field, and we can still keep the benefits from the MarkdownTextInput

However, I would like to know what you think of this approach!

coslu commented 10 months ago

Sure, that could work. I think in between I might have also changed the UI in a way that made my implementation obsolete anyway. I think my problem was that I couldn't get it to expand into its column but I am not doing that anymore, so I might be able to achieve the same thing without even changing MarkdownTextInput.

CTalvio commented 10 months ago

This is nice, I can spot one potential issue: When editing the first half of a long post, the editor buttons will be off-screen.

I've also been wanting to look at the post and comment editors. The editor buttons, clear, preview, and send, should all be made to work as if part of the users keyboard, or as part of the always visible top bar.

The only scrollable components should be the actual input fields, preview, and content being replied to.

image

Above are two screenshots from Relay, the editor buttons and send button attach themselves to the keyboard, making them always accessible, no matter what portion of a text you are working on.

The view also splits into two, displaying either the item being replied to, or a preview of your own text. A slide gesture switches between these modes. Both are independently scrollable, which I like. (When they contain something tall enough.) This is also really important, as in large discussion you may end up jumping up and down the page between what you are writing, and what you are replying to otherwise.

When creating a post, Relay replaces the view of what you are replying to with the title and link fields.

Adding the post image should also be removed, and replaced with a URL field that has an "add image" button, to enable making link posts. The editor buttons also needs the addition of an image button, rather than the "upload image to post body" button that only appears when the post already has an image.

@coslu, not saying you should or need to do any of this, just keep a plan in mind and take as many steps towards it as you're up for, while leaving things so that you or someone else will be able to continue work on this in the same direction.

notBradPitt commented 10 months ago

Moshidon (Mastodon) also seems to implement the same system, pinning the editor buttons to the bottom.

Screenshot_20230723-231655_Moshidon Screenshot_20230723-232212

Also, it feels cleaner and more simplistic with the text editor filling the screen without the border and the parent post only showing when you scroll up (hidden at first) but that's just my preference.

Voyager (vger.app) does the opposite and have the parent post at the bottom, so it's hidden when you're typing a long body of text but can simply scroll down to see it.

CTalvio commented 10 months ago

Also, it feels cleaner and more simplistic with the text editor filling the screen without the border and the parent post only showing when you scroll up (hidden at first) but that's just my preference.

I'd agree, but I'm already having multi-paragraph discussions on lemmy, where each comment may forward multiple arguments. Being able to reference the text I'm replying to without leaving my place in the text I'm writing, is something I really would use.

On a similar note, the fact that Thunder does not save drafts that come back when you go to reply to the same thing has really hurt me a couple times.

coslu commented 10 months ago

Let me know what you think of this:

https://github.com/thunder-app/thunder/assets/66788877/6dbdc3b0-0308-4e0e-b65f-43392aa9c6ca

CTalvio commented 10 months ago

Now that is very nice. Huge improvement. Nearly exactly what I was planning to do.

What does the eye button do? I see the send button is at the top, which I'm fine with.

I was thinking of removing the "Create Post" title, and putting the community you are posting to there, instead. I was also thinking it should be a drop-down, so you can choose where you are posting, among your subs, or maybe write manually.

On top of that, an info button instead of where send is now, could bring up the sidebar of that community, so you can check the posting rules without leaving the posting screen.

CTalvio commented 10 months ago

Ah! It's preview toggle, how did I miss that?

I think you could make the editing button row edge to edge, and maybe even give it an accent color. You should use an accent color for the preview button, at least (if you aren't already), and maybe for the send button, as well.

If you go for moving the community into the appbar, I think you could try fitting the send button, with its current appearance, to the right of the preview button?

coslu commented 10 months ago

What does the eye button do?

It replaces the old preview button. The old clear button is removed.

I was thinking of removing the "Create Post" title, and putting the community you are posting to there, instead.

I think I prefer it the way it is. Makes it absoulutely clear what action is being performed. But I'm interested to know what the others think.

I like your other ideas but maybe they could be separate PRs.

CTalvio commented 10 months ago

I agree. You've gotten it to a good place, this is merge-worthy.

hjiangsu commented 10 months ago

I think that looks really good! Its a much needed improvement over the current way we do it

I was thinking of removing the "Create Post" title, and putting the community you are posting to there, instead.

I like keeping the "Create Post" there too since it makes it super clear what the action is

machinaeZER0 commented 10 months ago

This looks amazing! My only personal callout is I'd still love the send/post button to be more reachable, rather than at the very top of my screen. Is there any chance it could be put closer to the keyboard? If the preview button in your mockup was the post/send button I'd be over the moon (though I don't know where you'd put the preview button at that point - maybe post gives you preview as an option on long press?)

Thanks so much for working on this!

notBradPitt commented 10 months ago

This is beautiful! Hits the nail on every aspect.

I think the "Create Post" title is fine. Using the community and instance name might make it more complicated, as you'd have to fit the logo and perhaps splitting the community name and instance name into two lines to make both visible.

IMO having the send button at the top is also a good design choice, since it avoids accidentally posting than if it was closer to the keyboard or any of the edit buttons.

machinaeZER0 commented 10 months ago

Can't say I've ever accidentally hit send when it was close to the keyboard, haha. Feel like it's very common in messaging apps for it to be at the top right of the keyboard!

hjiangsu commented 10 months ago

@coslu You can open this up for review whenever you feel like it's good!

coslu commented 10 months ago

@hjiangsu Have you seen my PR over at markdown-editor? This depends on the additions there.

Also, do you mind making a fork of LinkPreviewGenerator? I am trying to add a link preview on this page using a LinkPreviewCard, but the LinkPreviewGenerator inside the card is not updating its url on rebuild, which I can fix with a small change there.

hjiangsu commented 10 months ago

Oh shoot, I don't have notifications on for the other repositories so I didn't see it! I'll definitely make sure to take a look at it soon

Also, do you mind making a fork of LinkPreviewGenerator?

I can do that as well!

hjiangsu commented 10 months ago

@coslu I have merged in the PR you made, and have forked LinkPreviewGenerator as promised!

https://github.com/thunder-app/link_preview_generator

If you do have any future PRs in those repositories, feel free to shoot me a message just in case I don't receive notifications for them!

coslu commented 10 months ago

@hjiangsu Nice, thank you. Just made a PR at LinkPreviewGenerator. This should be ready soon after that is in.

hjiangsu commented 10 months ago

@coslu Approved and updated link preview generator dependencies on Thunder!

coslu commented 10 months ago

@hjiangsu Okay, thanks again. This can be reviewed now.

ajsosa commented 10 months ago

Looks good to me. Merging :)