Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

preview mode #315

Merged
merged 5 commits into from
Jun 7, 2019
Merged

preview mode #315

merged 5 commits into from
Jun 7, 2019

Conversation

korelstar
Copy link
Member

This adds a preview mode, in which the formatted text is shown without any possibility to edit. Implementation uses MarkdownIt. Fixes #23.

  • new component EditorMarkdownIt for preview mode
  • toggle preview mode with action button (bottom right)
  • introduce three-dot-menu for action buttons (bottom right)

Screenshots

Normal editor (like before)

editor

Action menu closed (bottom right)

action menu closed

Action menu opened (bottom right)

action menu opened

Action menu: Preview active (bottom right)

action menu preview active

New Preview

preview

@korelstar korelstar added enhancement New feature or request feature: editor Related to generic parts of the editor, e.g. loading/saving notes labels May 26, 2019
@korelstar korelstar added this to the 3.0.0 milestone May 26, 2019
@korelstar korelstar added the feature: Markdown-it Related to preview mode using Markdown-it label May 26, 2019
@korelstar korelstar mentioned this pull request May 26, 2019
@phsc84
Copy link

phsc84 commented May 26, 2019

Looks great! Thank you for implementing this feature.

@korelstar korelstar marked this pull request as ready for review May 26, 2019 12:22
@korelstar korelstar requested a review from jancborchardt May 26, 2019 12:23
@korelstar
Copy link
Member Author

Please have a look @nextcloud/designers / @jancborchardt : are the action buttons at bottom right fine?

@jancborchardt
Copy link
Member

@korelstar the 3-dot button is fine, but for the actions in there, could you use the popover menu: https://docs.nextcloud.com/server/latest/developer_manual/design/popovermenu.html
That has icons and the text next to it, because the icons are not self-explanatory. :)

@skjnldsv
Copy link
Member

Even Better, the vue Actions component (Jan, at some point we will stop supporting the design html standards in favour of the vue components :) )

@korelstar
Copy link
Member Author

@jancborchardt @skjnldsv Good idea, thank! I will do that ...

@korelstar
Copy link
Member Author

@jancborchardt Where is the best position for the three-dot-button? bottom-right or top-right?

Background for this question: the actions component from nextcloud-vue supports positioning the popover menu below of the button, only.

@skjnldsv
Copy link
Member

skjnldsv commented Jun 3, 2019

I would say top right :)

@jancborchardt
Copy link
Member

Agree with @skjnldsv, top-rigth. Reason being that whenever we have additional controls (like in the Files app or in the Talk app for example) they are always top right.

@korelstar
Copy link
Member Author

Here is the new design using the actions component from nextcloud-vue:

Actions menu closed

Screenshot

Actions menu opened

Screenshot

@skjnldsv
Copy link
Member

skjnldsv commented Jun 7, 2019

Oh yes! Me likey!! 😍

@korelstar korelstar merged commit a40d98b into master Jun 7, 2019
@korelstar korelstar deleted the preview branch June 7, 2019 14:07
@jancborchardt
Copy link
Member

@korelstar looks fabulous! Very well made :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request feature: editor Related to generic parts of the editor, e.g. loading/saving notes feature: Markdown-it Related to preview mode using Markdown-it
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add edit/preview toggle
4 participants