Add HTML view for messages

6 files changed, 55 insertions, 9 deletions

diff --git a/CMakeLists.txt b/CMakeLists.txt
index f5683eb..c1743f3 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -17,11 +17,11 @@ set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
 find_package(
   QT NAMES Qt6 Qt5
-  COMPONENTS Core Widgets Quick
+  COMPONENTS Core Widgets Quick WebEngine
   REQUIRED)
 find_package(
   Qt${QT_VERSION_MAJOR}
-  COMPONENTS Core Widgets Quick
+  COMPONENTS Core Widgets Quick WebEngine
   REQUIRED)
 find_package(PkgConfig REQUIRED)
 
@@ -55,7 +55,7 @@ target_compile_definitions(
 target_link_libraries(
   kdeltachat
   PRIVATE Qt${QT_VERSION_MAJOR}::Core Qt${QT_VERSION_MAJOR}::Quick
-          Qt${QT_VERSION_MAJOR}::Widgets
+  Qt${QT_VERSION_MAJOR}::Widgets Qt${QT_VERSION_MAJOR}::WebEngine
   PRIVATE Threads::Threads
   PRIVATE KF5::Kirigami2
   PRIVATE PkgConfig::DeltaChat m dl)
diff --git a/README.md b/README.md
index 227f5b2..ed8c183 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,7 @@ Install QtQuick and required QML modules using your system package manager.
 Build time dependencies:
 - `qtbase5-dev`
 - `qtdeclarative5-dev` (for `/usr/lib/x86_64-linux-gnu/cmake/Qt5Quick/Qt5QuickConfig.cmake`)
+- `qtwebengine5-dev`
 - `cmake`
 - `extra-cmake-modules`
 - `pkg-config`
@@ -77,6 +78,7 @@ Runtime dependencies:
 - `qml-module-qtquick-dialogs` - used for account import file dialog
 - `qml-module-qtquick-layouts`
 - `qml-module-qtmultimedia`
+- `qml-module-qtwebengine`
 - `qt5-image-formats-plugins` - WebP support
 
 ### Arch Linux
diff --git a/main.cpp b/main.cpp
index 6cbb7a3..57334a4 100644
--- a/main.cpp
+++ b/main.cpp
@@ -1,6 +1,7 @@
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
 #include <QMetaType>
+#include <QtWebEngine>
 
 #include "accounts.h"
 #include "message.h"
@@ -13,7 +14,9 @@
 int main(int argc, char *argv[])
 {
     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
 
+    QtWebEngine::initialize();
     QGuiApplication app(argc, argv);
 
     app.setApplicationName("KDeltaChat");
diff --git a/qml.qrc b/qml.qrc
index b750885..d915549 100644
--- a/qml.qrc
+++ b/qml.qrc
@@ -8,6 +8,7 @@
         <file>qml/SettingsPage.qml</file>
         <file>qml/Message.qml</file>
         <file>qml/ComposePane.qml</file>
+        <file>qml/HtmlViewSheet.qml</file>
         <file>qtquickcontrols2.conf</file>
     </qresource>
 </RCC>
diff --git a/qml/HtmlViewSheet.qml b/qml/HtmlViewSheet.qml
new file mode 100644
index 0000000..03e0147
--- /dev/null
+++ b/qml/HtmlViewSheet.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.12
+import QtWebEngine 1.10
+
+import org.kde.kirigami 2.12 as Kirigami
+
+Kirigami.OverlaySheet {
+    property string subject
+    property string html
+
+    header: Kirigami.Heading {
+        text: subject
+    }
+
+    WebEngineView {
+        id: web
+        height: 500
+    }
+
+    onHtmlChanged: {
+        console.log("Loading HTML!")
+        web.loadHtml(html)
+    }
+}
diff --git a/qml/Message.qml b/qml/Message.qml
index 492c5cb..fdd895a 100644
--- a/qml/Message.qml
+++ b/qml/Message.qml
@@ -169,12 +169,29 @@ RowLayout {
                 wrapMode: Text.Wrap
                 font.pixelSize: 14
             }
-            Label {
-                Layout.fillWidth: true
-                text: messageObject.message.state == 26 ? "✓"
-                    : messageObject.message.state == 28 ? "✓✓"
-                    : messageObject.message.state == 24 ? "✗"
-                    : "";
+            Row {
+                HtmlViewSheet {
+                    id: htmlSheet
+                    subject: ""
+                    html: ""
+                }
+
+                Button {
+                    text: "Show full message"
+                    visible: messageObject.message.hasHtml
+                    onPressed: {
+                        htmlSheet.subject = messageObject.message.subject
+                        htmlSheet.html = messageObject.context.getMessageHtml(messageObject.message.id)
+                        htmlSheet.open()
+                    }
+                }
+                Label {
+                    Layout.fillWidth: true
+                    text: messageObject.message.state == 26 ? "✓"
+                        : messageObject.message.state == 28 ? "✓✓"
+                        : messageObject.message.state == 24 ? "✗"
+                        : "";
+                }
             }
         }
     }