git-point icon indicating copy to clipboard operation
git-point copied to clipboard

UX: revamp the "Edit comment" screen

Open ShalokShalom opened this issue 6 years ago • 19 comments

How is this supposed to work out? https://pictshare.net/5gig2v2zug.png

ShalokShalom avatar Mar 28 '18 21:03 ShalokShalom

If you scroll down, you should see a green submit button (well, more like a link). Is it there?

machour avatar Mar 28 '18 21:03 machour

Ah yeah.

Is there a way to make it more obvious?

The scrolling also doesnt work well, its kinda tricky to get down. :slightly_smiling_face:

ShalokShalom avatar Mar 28 '18 21:03 ShalokShalom

This screen needs a lot of love indeed, updating this issue title to remember that.

machour avatar Mar 28 '18 21:03 machour

When I edit a long comment: https://pictshare.net/p3x47c8g31.png

ShalokShalom avatar Mar 30 '18 10:03 ShalokShalom

😅

Started looking at solutions for this issue yesterday. My plan is to integrate a nice Markdown editor while revamping the screen. Came across https://github.com/wix/react-native-zss-rich-text-editor which seems really nice (but not actively maintained).

What do you think about this? Any suggestions for this screen ?

machour avatar Mar 30 '18 10:03 machour

There is this, maintained by Facebook: https://draftjs.org/

ShalokShalom avatar Mar 30 '18 11:03 ShalokShalom

Looks slick, but it's meant for React, not React Native. Maybe https://github.com/globocom/react-native-draftjs-render could help

machour avatar Mar 30 '18 11:03 machour

Oh I see. I was too hurry xD

Yes, this looks nice ^-^

ShalokShalom avatar Mar 30 '18 11:03 ShalokShalom

Thanks so much @ShalokShalom, echoing @machour - this screen definitely needs a ton of love. 😅

A markdown editor for this would be amazing - but poses a few questions. Should we allow the user to do that when they also create a new comment? How would that work from a UX perspective, I guess we can have navigation to a separate screen but that adds an extra layer to the stack for posting a new comment 🤔

Another alternative (for the meantime if we're still exploring whether we should have something like draftjs) is having a button fixed on the bottom right Submit of the edit comment screen. That way users can always see the button?

Definitely open to thinking how we can use something like draftjs however, I think that could be so nice for the user.

housseindjirdeh avatar Mar 31 '18 00:03 housseindjirdeh

I always hate it, when Facebook gives me ten different editors with different features in the different clients and modes.

Its confusing and inconsistent, so I vote for a unified editor, yes also for creating issues of course.

Otherwise do you have to initially write something and edit then in order to get into the markdown editor.

What is that for a workflow? :D

I would embed the editor, an extra layer is also distracting, while still preferred compared to two editors.

The fixed button is nice, since probably quickly implemented and a nice feature for the new version.

Thanks a ton :smiley:

ShalokShalom avatar Mar 31 '18 06:03 ShalokShalom

The best Markdown example I have seen so far, is how thevAndroid app "Markor" handles the combination of markdown syntax, live highlighting/coloring and final output.

Even if this might not be a suitable code base for this platform, it is well worth a look just for the impression.

Attaching 2 screenshots with an example edit moment.

(Notice that it automatically formats and colors the text as you are writing, while keeping the editable markdown syntax, and offers a preview button to see the result without the coloring effects.)

(Edit: attaching missing files + removing clutter from replying via Gmail on Android.)

img_20180331_101930

img_20180331_101527

LeeteqXV avatar Mar 31 '18 08:03 LeeteqXV

So we can also use it for syntax highlighting? I see no screenshots and you can delete the quotes in your answer, in order to prevent clutter, thanks. :slightly_smiling_face:

ShalokShalom avatar Mar 31 '18 08:03 ShalokShalom

Oh, and unlike many (most?) others, it automatically inserts the next number or bullet point for you when pressing Enter in a list.

The toolbar buttons inserts markdown WITH these live visual formatting effects in normal "source code" edit view.

Unlike the normal situation with integration into a WYSIYG editor, you do not have to struggle with the HTML code going back and forth between markdown edit mode and preview. In fact, this "hybrid" solution works so well that I rarely use/need the preview view at all.

("Markor" is just a native Android editor, so the point with my example here is the way Markdown has been elegantly implemented.)

On Sat, Mar 31, 2018, 10:25 Leeteq XV, GM, [email protected] wrote:

The best Markdown example I have seen so far, is how thevAndroid app "Markor" handles the combination of markdown syntax, live highlighting/coloring and final output.

Even if this might not be a suitable code base for this platform, it is well worth a look just for the impression.

Attaching 2 screenshots with an example edit moment.

(Notice that it automatically formats and colors the text as you are writing, while keeping the editable markdown syntax, and offers a preview button to see the result without the coloring effects.)

On Sat, Mar 31, 2018, 08:42 MatthiasSchuster, [email protected] wrote:

I always hate it, when Facebook gives me ten different editors with different features in the different clients and modes.

Its confusing and inconsistent, so I vote for a unified editor, yes also for creating issues of course.

Otherwise do you have to initially write something and edit then in order to get into the markdown editor.

What is that for a workflow? :D

I would embed the editor, an extra layer is also distracting, while still preferred compared to two editors.

The fixed button is nice, since probably quickly implemented and a nice feature for the new version.

Thanks a ton 😃

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/gitpoint/git-point/issues/754#issuecomment-377670992, or mute the thread https://github.com/notifications/unsubscribe-auth/ASzGVPZNji2xZnVEj5cGavGQNmg5F6lMks5tjyVBgaJpZM4S_XtQ .

On Mar 31, 2018 08:42, "MatthiasSchuster" [email protected] wrote:

I always hate it, when Facebook gives me ten different editors with different features in the different clients and modes.

Its confusing and inconsistent, so I vote for a unified editor, yes also for creating issues of course.

Otherwise do you have to initially write something and edit then in order to get into the markdown editor.

What is that for a workflow? :D

I would embed the editor, an extra layer is also distracting, while still preferred compared to two editors.

The fixed button is nice, since probably quickly implemented and a nice feature for the new version.

Thanks a ton 😃

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/gitpoint/git-point/issues/754#issuecomment-377670992, or mute the thread https://github.com/notifications/unsubscribe-auth/ASzGVPZNji2xZnVEj5cGavGQNmg5F6lMks5tjyVBgaJpZM4S_XtQ .

LeeteqXV avatar Mar 31 '18 08:03 LeeteqXV

(Attached missing files to my original comment above here. Sorry for the noise.)

LeeteqXV avatar Mar 31 '18 09:03 LeeteqXV

Agreeing with @housseindjirdeh, for now this revamping could be as simple as putting the submit button on the top right corner. @meetmangukiya reached out on gitter to start helping with GitPoint, I think this could be a first nice task for starters.

We'll dive into in-place markdown editing after that. I think react-native 0.55+ will make this even easier: https://twitter.com/brunolemos/status/977037390429777920

machour avatar Mar 31 '18 10:03 machour

I'll make sure this gets resolved before our next release 🙏

Consolidating our discussion to just fixing a submit button to the bottom right of the screen. Should be a relatively simple fix 🚀 🚀

housseindjirdeh avatar Apr 17 '18 21:04 housseindjirdeh

Hey y'all! I'm a UX Designer. I can help with the redesign here. What are the requirements for the edit? Read through the above thread but confused as to what needs to be done. Is it just adding a submit button before the page fold?

If so, is there an svg of a submit button somewhere in the github files?

JordanTranchina avatar Feb 18 '19 14:02 JordanTranchina

Consolidating our discussion to just fixing a submit button to the bottom right of the screen.

@JordanTranchina Thanks for your help. But seems @housseindjirdeh has made the final decision.

chinesedfan avatar Feb 23 '19 02:02 chinesedfan

When I look at the date, is help surely welcome :dagger:

ShalokShalom avatar Mar 01 '19 10:03 ShalokShalom