UX: revamp the "Edit comment" screen

[ShalokShalom]

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

[machour]

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

[ShalokShalom]

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:

[machour]

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

[ShalokShalom]

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

[machour]

😅

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 ?

[ShalokShalom]

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

[machour]

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

[ShalokShalom]

Oh I see. I was too hurry xD

Yes, this looks nice ^-^

[housseindjirdeh]

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.

[ShalokShalom]

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:

[LeeteqXV]

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

[ShalokShalom]

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:

[LeeteqXV]

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, leeteq@gmail.com 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, notifications@github.com 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" notifications@github.com 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]

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

[machour]

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

[housseindjirdeh]

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 🚀 🚀

[JordanTranchina]

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?

[chinesedfan]

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.

[ShalokShalom]

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