Add formatting help modal (Fixes #1941)

[mejo-]

Desktop

Full screen:

Toolbar on wide screen:

Toolbar on narrow screen:

Mobile

Toolbar:

• Target version: master

[mejo-]

After playing around with examples below the table I finally decided to get rid of them altogether. It's just too much information for such a short overview in a modal and toggling between syntax view and formatted view really doesn't work well for formats like heading1. Especially Cc @nimishavijay

[szaimen]

How does it look like on very small display sizes? E.g. 360px wide?

[mejo-]

How does it look like on very small display sizes? E.g. 360px wide?

Good question :) See the updated screenshot in the PR description above. It's not super smooth there, you have to scroll from left to right to read the full syntax.

Do you have a good idea how to improve the mobile experience?

[szaimen]

Do you have a good idea how to improve the mobile experience?

Maybe hide the keyboard shortcuts column and make the modal full-screen on such small screens?

[mejo-]

Maybe hide the keyboard shortcuts column and make the modal full-screen on such small screens?

Keyboard shortcuts are already hidden on mobile 😊

And modals alread have full width on mobile per default. The non-used space on both sides seems to come from the invisible prev/next elements. If I override their width to 0, the button to close the modal is no longer visible 😞

[szaimen]

The non-used space on both sides seems to come from the invisible prev/next elements. If I override their width to 0, the button to close the modal is no longer visible 😞

Strange!
Would maybe the following work?

	.prev,
	.next { display:none !important }

[jancborchardt]

Looks very nice now! :) Only thing: Would be better to put the button as last item of the fornatting bar instead of next to sharing. That way on narrower viewports it doesnt take a space but gets ellipsized away, as it also isnt always needed. :)

[azul]

This looks great! I particularly like the i next to the save indicator as the trigger.

Just a minor note: The description on mobile still talks about keyboard shortcuts.
I'd also remove the 'experience'. 'Speed up your writing with simple shortcuts' is enough i think.

How about using the icons instead of words for the style in mobile? That would also serve as an explaination for the icons. Something like this (with the icons from the menu bar on the left obviously):

style	syntax
B	**Bold**
I	*Italic*
S	~~Strikethrough~~
H1	# largest heading
H6	###### small heading

This way people would also know it's the same thing as that button.

[mejo-]

Looks very nice now! :) Only thing: Would be better to put the button as last item of the fornatting bar instead of next to sharing. That way on narrower viewports it doesnt take a space but gets ellipsized away, as it also isnt always needed. :)

Agreed, done so now:

[szaimen]

Would maybe the following work?

	.prev,
	.next { display:none !important }

So I suppose this doesn't work either?

[mejo-]

The non-used space on both sides seems to come from the invisible prev/next elements. If I override their width to 0, the button to close the modal is no longer visible disappointed

Strange! Would maybe the following work?

	.prev,
	.next { display:none !important }

Yep, that indeed works, but as written the button to close the modal is hidden in this case (it's not really hidden, but it's white on white). Also, being able to click into the prev/next areas for closing the modal is no longer possible.

Do you have a good idea how to tackle this? 🤔

[szaimen]

Do you have a good idea how to tackle this? 🤔

I think it will be already resolved with vue 5.0 due to my changes here: https://github.com/nextcloud/nextcloud-vue/pull/2126/files#diff-907877e92ada6bf9340562928a4046f5a937f4985041a4f2e3981313538f8f5dR679-R697
Maybe this could be of some inspiration?

[mejo-]

Do you have a good idea how to tackle this? thinking

I think it will be already resolved with vue 5.0 due to my changes here: https://github.com/nextcloud/nextcloud-vue/pull/2126/files#diff-907877e92ada6bf9340562928a4046f5a937f4985041a4f2e3981313538f8f5dR679-R697 Maybe this could be of some inspiration?

Uh nice, that helped a lot! Thanks @szaimen 😊

I'm now setting position: absolute and top: 50px on mobile, see my last commit: 1048884

I updated the screenshots above.

[mejo-]

This looks great! I particularly like the i next to the save indicator as the trigger.

Just a minor note: The description on mobile still talks about keyboard shortcuts. I'd also remove the 'experience'. 'Speed up your writing with simple shortcuts' is enough i think.

How about using the icons instead of words for the style in mobile? That would also serve as an explaination for the icons. Something like this (with the icons from the menu bar on the left obviously):
style syntax
B **Bold**
I *Italic*
S ~~Strikethrough~~
H1 # largest heading
H6 ###### small heading

This way people would also know it's the same thing as that button.

Nice idea! I gave it a try, but found the written style ("Bold", ...) to be much clearer. Now that all content fits on mobile screens (at least for english), I'd prefer to keep it that way.

Here's how it looked with the buttons:

[jancborchardt]

Except the "Show formatting help" → "Formatting help" as mentioned @mejo- this is super nice work design-wise! :)

[juliusknorr]

Very nice 👍 Good to go from my side