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

Enhancement: styling preview #164

Closed
rootion opened this Issue May 9, 2016 · 10 comments

Comments

Projects
None yet
3 participants
@rootion

rootion commented May 9, 2016

Hello,

Thanks so much for this fantastic app. I felt in love with it and immediately ditched evernote :-)

Is it possible to offer more options to customize the view in the preview mode? I tried in ubuntu and windows 7, they both look slightly different, and I can specify the font-family and font-size in options but I can't specify line-height or how certain elements are going to be rendered. The quote preview in windows for me looks strange, it almost doesn't look like a quote and it's not easy to read.

I work as a designer & front-end developer and unfortunately I can only think in terms of css and stylesheets at the moment—I am obviously aware that's not the way an .exe application works. But is there room for contributions in terms of visual enhancement and styling? If so, I will happy to contribute.

@pbek

This comment has been minimized.

Owner

pbek commented May 9, 2016

Thank you very much for your kind words!

When you say "quote" you you mean the preview of > quoted text?
Right now the preview is no fully fledged web-browser, but only a QTextBrowser with a very limited subset of CSS: http://doc.qt.io/qt-5/richtext-html-subset.html

I'm not sure yet if we should migrate to a full web-browser (and increase the size of the app dramatically).

You can however provide some stylesheets for the current preview (and possibly even one for a future fully fledged web-browser version).

@pbek pbek added the enhancement label May 9, 2016

@pbek

This comment has been minimized.

Owner

pbek commented May 9, 2016

If you want to play around with the styling, then you might want to build QOwnNotes yourself:
http://www.qownnotes.org/installation#building
and take a look at QString Note::toMarkdownHtml at https://github.com/pbek/QOwnNotes/blob/develop/src/entities/note.cpp#L782
This is where the preview styling happens.

@pbek

This comment has been minimized.

Owner

pbek commented May 18, 2016

In version 16.05.15:

  • there now is a new scripting hook noteToMarkdownHtmlHook(note, html)
    that is called when the markdown html of a note is generated
    (for Issue #164)
    • it allows you to modify this html
    • this is for example called before by the note preview
    • there is an example call in
      example.qml

Now you could easily play around with the CSS styles...

@rootion

This comment has been minimized.

rootion commented May 21, 2016

Fantastic, thanks a lot for the update. I am swamped with work at the moment, but I will play around with css when I have a bit of time and report back.

@rootion

This comment has been minimized.

rootion commented May 29, 2016

Unfortunately I didn't manage to modify any css. I got stuck trying to build the souce using Qt Creator as the installation guide specifies (Qt crashes constantly in Ubuntu 14.04 when I try to open the source file).

Could you generate maybe a html output and give me a base stylesheet so I could play around with that and send it back?

@pbek

This comment has been minimized.

Owner

pbek commented May 29, 2016

You don't need to compile QOwnNotes to use above scripting examples. You just load the script in the scripting settings at runtime.
Plus you can also export a note as html (although the generated html is a bit different that the one used in the preview).

@pbek

This comment has been minimized.

Owner

pbek commented Jul 17, 2016

I will close this issue until there is more information.

@Siedlerchr

This comment has been minimized.

Siedlerchr commented Nov 3, 2016

QT has the new QTWebEngine module which could be used as a replacement for the QTextBrowser, it supports also javascript:
http://doc.qt.io/qt-5/qtwebengine-overview.html

Don't know if that's much effort, but would be very cool.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 3, 2016

QT has the new QTWebEngine

I know and it only works from Qt 5.4 on. QOwnNotes also supports Qt 5.3 (mainly for Debian 8.0).
QtWebEngine doesn't yet support printing (and exporting) and it will eat up a lot of RAM, not everyone would like that. QtWebEngine does need qml, quick and opengl, I've no idea if that will add some additional troubles...
The old QWebView is practically deprecated...

@Siedlerchr

This comment has been minimized.

Siedlerchr commented Nov 3, 2016

Ah okay. Thanks for clarification 👍 Better to wait until it gets better and more supported.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment