Feature #27758

Adds preview option to the wiki toolbar

Added by Marius BALTEANU about 1 month ago. Updated 11 days ago.

Status:NewStart date:
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:UI
Target version:-
Resolution:

Description

I'm working on a patch that adds the Preview functionality to the wiki toolbar. I find it more friendly to have the preview option for each individual field, instead of the bottom link. Most of the time, when I'm writing the description of an issue, I need to scroll down to the preview link, click it, view the preview and then scroll up to continue writing.

I want to share some screenshoots in order to take some feedback from the community.

1. Write/Preview tabs:

When the preview tab is opened, the textarea field is replaced with the formatted text. In this way, you can easily switch between write/preview modes.

2. Preview button

Instead of the tabs, we can have just a button that toggles between Preview and Write.

write_preview.png (67.9 KB) Marius BALTEANU, 2017-12-07 21:12

preview.png (66.6 KB) Marius BALTEANU, 2017-12-07 21:36

write.png (68.9 KB) Marius BALTEANU, 2017-12-11 19:21

preview.png (66.2 KB) Marius BALTEANU, 2017-12-11 19:21

write_preview_tabs_wip.patch Magnifier (12.8 KB) Marius BALTEANU, 2017-12-11 19:21

27758-many-lines.png (114 KB) Go MAEDA, 2017-12-12 02:54

replace_preview_link_with_a_write_preview_tabs.patch Magnifier (37 KB) Marius BALTEANU, 2018-01-08 20:01

drop-jstoolbar-textile.min.patch Magnifier (11.2 KB) Marius BALTEANU, 2018-01-08 20:01


Related issues

Related to Redmine - Patch #27368: Make preview for comments for news New
Related to Redmine - Feature #2604: Preview comment on news / bulk edit New 2009-01-28
Related to Redmine - Feature #22015: A side by side textile preview would by very helpful New
Related to Redmine - Feature #9174: Suggestion - Preview on Documents New 2011-09-02
Related to Redmine - Feature #7157: Content Editor Preview at the same place where text is New 2010-12-22
Related to Redmine - Feature #4252: Move preview button to before "submit" New 2009-11-20

History

#1 Updated by Marius BALTEANU about 1 month ago

  • Subject changed from Adds preview tab to the wiki toolbar to Adds preview option to the wiki toolbar

#2 Updated by Holger Just about 1 month ago

I really like this proposal as it makes it much more apparent when a preview is available. Using a tab directly besides the respective text field helps users to not lose focus of their work.

UI-wise, I like the tab-approach (your first screen shot) mich better than the button since the tabs make it clear that you change between different views of the same thing (the entered text). This idiom is also common in other software like GitHub or Wordpress. I'd like to propose some slight changes though:

  • We should use the exact visual design of the existing tabs elements already used elsewhere, e.g. in the revision view of the repository where it's possible to switch between the list of changes and the diff or the project's settings tab.
  • I think those edit icons above the text box should be part of the the "Write" tab itself so that they are removed when you switch to the "Preview" tab. Here, we might need to be a bit creative since it is probably desirable to not introduce another "row" of text (tab, icons, tex box). It might be possible to combine the icons and the tabs somehow while still sticking to the existing components used elsewhere in Redmine.

Generally, the layout should also work when there is no explicit preview option for the text box available since this might not strictly be the case for all fields; the welcome text in the settings comes to mind, as well as e.g. text custom fields or stuff added by plugins. It would however be awesome if this preview / tab bar would be as versatile as the existing icon bar, preferably it could even be added with exactly the same code (or just small changes).

All in all though, I like this very much!

#3 Updated by Marius BALTEANU about 1 month ago

Holger Just wrote:

I really like this proposal as it makes it much more apparent when a preview is available. Using a tab directly besides the respective text field helps users to not lose focus of their work.

Thanks for your feedback, Holger.

UI-wise, I like the tab-approach (your first screen shot) mich better than the button since the tabs make it clear that you change between different views of the same thing (the entered text). This idiom is also common in other software like GitHub or Wordpress. I'd like to propose some slight changes though:

  • We should use the exact visual design of the existing tabs elements already used elsewhere, e.g. in the revision view of the repository where it's possible to switch between the list of changes and the diff or the project's settings tab.

Totally agree.

  • I think those edit icons above the text box should be part of the the "Write" tab itself so that they are removed when you switch to the "Preview" tab.

Yes, I've already implemented this feature.

Here, we might need to be a bit creative since it is probably desirable to not introduce another "row" of text (tab, icons, tex box). It might be possible to combine the icons and the tabs somehow while still sticking to the existing components used elsewhere in Redmine.

For now, I chose to create the tabs from javascript, in the same way how the toolbar buttons are created and most of the changes are made in the jstoolbar.js file. If you think that is better to create the tabs using the existing render_tabs method, I think that I can find a solution.

Generally, the layout should also work when there is no explicit preview option for the text box available since this might not strictly be the case for all fields; the welcome text in the settings comes to mind, as well as e.g. text custom fields or stuff added by plugins. It would however be awesome if this preview / tab bar would be as versatile as the existing icon bar, preferably it could even be added with exactly the same code (or just small changes).

In the current implementation, the Preview works wherever the wikitoolbar_for method is called because I've added a default method preview#text.

All in all though, I like this very much!

I'm going to post this weekend a fist version of my patch and I think that we can discuss more about the technical solution after that.

#4 Updated by Marius BALTEANU about 1 month ago

Holger, attached is an working version (only for markdown) of my patch. I still have some things to do (like adding support for textile, removing preview links, add tests), but if you're interested to test it, is enough. The functionality and the design are the final one (attached also 2 screenshots). I'm not 100% happy which the results from UI perspective, but is the best that I can do which my current CSS skills, using the existing Redmine components and not adding to many changes.

Any feedback is really appreciated. My intention is to have a final version of this patch until 21.12.

Write tab:

Preview tab:

#5 Updated by Go MAEDA about 1 month ago

Thank you for working on this feature. I think that this is an awesome improvement.

But I noticed that the preview is not perfectly displayed when I enter text with many lines. Maybe we need a vertical scroll bar or a responsive preview area.

#6 Updated by Marius BALTEANU about 1 month ago

Go MAEDA wrote:

But I noticed that the preview is not perfectly displayed when I enter text with many lines. Maybe we need a vertical scroll bar or a responsive preview area.

Thanks. I've fixed the issue on my local development.

#7 Updated by Mischa The Evil 12 days ago

I'll start by saying that I'm also in favor of an overall change as here proposed. That said, I just came around another UI-wise slightly similar plugin implementation (mostly done using JavaSCript), where seeing its screenshots reminded me about this issue: https://github.com/tleish/redmine_editor_preview_tab. The respective screenshots:
  • Write tab:
  • Preview tab:
Comparing the plugin with your implementation as of note#4 (further referred to as '[the] patch':
  • I think that a UI-design like provided by your patch is preferred, for the same reasons as mentioned by Holger in note#2;
  • your patch is already more complete/polished (think e.g. access-keys);
  • your patch is a bit less JavaScript heavy;
  • your approach of implementing this in a similar fashion as (other) toolbar buttons is interesting, creative and (visually) neat.

Nice job. I'm interested in seeing subsequent iterations of this patch.

#8 Updated by Marius BALTEANU 11 days ago

I've finished most of the work for this feature. UI tests are missing currently, but I'll add a new patch with them next days. Until then, the patches can be tested and/or reviewed.

1. drop-jstoolbar-textile.min.patch:
This patch removes the jstoolbar-textile.min.js file and uses for textile formatting the same jstoolbar.js file. I chose to remove this file because I wasn't able to figure out which is the "official" way to generate a new merged and minified version from the new jstoolbar. In the same time, if it is desired to use a minified version (which is a good idea), we should document the tools and the steps to generate it and we should apply the same logic also for markdown formatting (at least).

2. replace_preview_link_with_a_write_preview_tabs.patch:
- adds the write preview tabs to the text formatting toolbar
- removes all the existing Preview links
- adds a default preview url that can be used to preview simple texts (eg: project description from the project settings)
- on responsive mode, when the screen resolution width in less than the total width of the js toolbar (tabs + buttons), some buttons become hidden. I'm not happy with the current solution, but is not a blocker from my point of view and we can improve this later when we have a better solution.

Considering that the changes are quite big, I think that it is a good opportunity to discuss the implementation of this feature in Redmine 4.0.0.

#9 Updated by Marius BALTEANU 2 days ago

  • Related to Patch #27368: Make preview for comments for news added

#10 Updated by Marius BALTEANU 2 days ago

  • Related to Feature #2604: Preview comment on news / bulk edit added

#11 Updated by Marius BALTEANU 2 days ago

  • Related to Feature #22015: A side by side textile preview would by very helpful added

#12 Updated by Marius BALTEANU 2 days ago

  • Related to Feature #9174: Suggestion - Preview on Documents added

#13 Updated by Marius BALTEANU 2 days ago

  • Related to Feature #7157: Content Editor Preview at the same place where text is added

#14 Updated by Marius BALTEANU 2 days ago

  • Related to Feature #4252: Move preview button to before "submit" added

Also available in: Atom PDF