Rename preview button when preview is active

[oneiros]

First of all thanks for this wonderful project.

I am currently implementing it for a customer and got some interesting feedback: They thought it was not straightforward to get out of the preview mode.

They suggested replacing the preview button text with "Back" or something similar when the preview is active to make it super-obvious how to exit the preview mode.

I will probably implement this in our project but was wondering what you thought of this. Are you open to such a change? And if yes, would you accept a PR?

[toopay]

@oneiros Thanks for the kind word. Regarding "Back" text suggestion, i would prefer to stay with "Preview" as its more literal and as concise as "Back". Anyone who want to customized their buttons text, can simply create a custom locale file and use it on initialization.

[acrobat]

@toopay maybe it's a good practice to have this button text switch build-in but default translate the two text's as "preview". That way the editor still works like you would like to have it, but the end user has the possibility to define a custom translation for the "back" text

[toopay]

@acrobat Sound like a viable plan.

[jerone]

:+1: I prefer the button to say something like Edit in preview mode.

[Ede123]

Stumbled over this since I reported this issue to OpenUserJs/OpenUserJS.org#618 where Bootstrap Markdown is used, too. Initially I had the problem myself: I was looking for a button to disable the preview until I figured out I had to press "Preview" again.

I therefore support @jerone's suggestion. "Edit" would be a clear and precise wording for the buttons inverted functionality when in preview mode.

An alternative would be to actually make it clear to the user that the button is "sticking" by using appropriate styling. With a 3D-like style the difference between "pressed" and "released" states could be easily visualized. With the flat button style it's more difficult however. The slight color change that currently is used is much too faint for a user to actually be able to tell the difference.

[Martii]

The user requested issue and their owned followup with changing the text, as it has been mentioned, may optionally include translations which leads into possible screen flicker and possible layout busting depending on how narrow/wide the text becomes and the device viewport it is displayed upon.

I am at 0 for this change... perhaps until a test pull request (even if rejected it may useful for testing purposes) can be done for this project to be tested on a few devices. The CSS coloring on bootstrap buttons is defaulted to a slight difference in general for active and inactive states for all buttons and not limited to bootstrap-markdown even with .user.js.

[tingley]

As an alternative, what about adding a callback that fires when we exit preview? Changing "Preview" to "Edit" (which I also prefer) can already be done using onPreview, it's just that there's no way to change the label back. A second callback would solve this.

(Very simple PR on the way.)