Read email content for each email in Thread #23

dab246 · 2021-08-13T02:26:21Z

Implement get email content when click each email
Mark unread email, flagged email in list email
Display message content with text/plain format
Display address To, Cc, Bcc header with Collapse/Expand mode
Display message content with text/html format

Screen.Recording.2021-08-13.at.18.25.32.mov

Demo Display email content with html format

content_html.mov

Screen.Recording.2021-08-19.at.18.12.55.mov

chibenwa · 2021-08-13T02:52:42Z

Looks good so far.

Tiny remarks:

Inlined attachment should not be rendered as attachments: exclude them from attachment list
I'm slightly concered about display when we have say 20+ attachments: they would take all of the space.
- I would recommand that when we have 4 or + attachments we only display 20 attachments (expend button) (mobile, on tablet today behaviour likely is acceptable.)
Be sure you do display Cc and Bcc headers if present on the detailed email view.

Use sentDate for the date display in email detailed view and email list view.

chibenwa · 2021-08-13T02:54:33Z

Using Mailbox/query you can be able to load the mailbox list in parallel to the email list: this will fasten the loading time.

(I have the impression you load the email list then the mailbox list...)

chibenwa · 2021-08-13T02:56:43Z

One other display remark: it is hard for me to distinguish from the email list read emails from unread emails.

Let me suggest you to render the subject in bold when the email is unread, normally when it is read, this might be enough to be doing the trick.

chibenwa · 2021-08-13T02:58:27Z

Do we support display of Important / flagged messages ? IE the Star ?

You can star messages in OpenPaaS and try to support that as well in TMail.

chibenwa · 2021-08-13T02:59:49Z

(And of course I trust @hoangdat or prioritizing my remarks :-) )

Arsnael · 2021-08-13T03:08:36Z

Wow, impressive! Good job guys, looks damn great!

chibenwa · 2021-08-13T11:48:16Z

I am not convinced of the folding of To, Cc Bcc... I would prefer to have it always expended to be honest.

(At least when it fits in 3-4 lines.)

It is important information and in the detailed email view we have room. We likely should use it.

dab246 · 2021-08-16T01:58:47Z

I am not convinced of the folding of To, Cc Bcc... I would prefer to have it always expended to be honest.

(At least when it fits in 3-4 lines.)

It is important information and in the detailed email view we have room. We likely should use it.

What do you mean? Please be more specific. Can you draw detailed pictures so I can understand you.

chibenwa · 2021-08-16T02:06:05Z

THis one is cool:

This one can be improved (display of important information takes extra clicks while it would not harm the display...

hoangdat · 2021-08-16T08:48:17Z

model/lib/mailbox/presentation_mailbox.dart

    }
+
+    if (unreadThreads == null || unreadThreads!.value.value <= 0) {


IMO, unreadEmails is better.

hoangdat · 2021-08-16T08:49:25Z

android/app/src/main/AndroidManifest.xml

   <application
+        android:name="io.flutter.app.FlutterApplication"


Why not TMail?

core/lib/presentation/views/list/sliver_grid_delegate_fixed_height.dart

chibenwa · 2021-08-18T11:01:04Z

Can you update the video now that text/html is supported? <3

dab246 · 2021-08-18T11:24:45Z

Can you update the video now that text/html is supported? <3

Please see the video I attached above. It's not complete yet, I'm testing and fixing some bugs.

chibenwa · 2021-08-18T11:41:35Z

Huge thanks and nice work!

chibenwa · 2021-08-18T12:08:13Z

Remember to get rid of John Doe // user@exemple.com on the top of the mailbox view ;-)

hoangdat · 2021-08-19T07:54:31Z

android/app/src/main/kotlin/com/linagora/android/tmail/MainActivity.kt

+import io.flutter.embedding.engine.FlutterEngine
+import io.flutter.plugins.GeneratedPluginRegistrant
+
+class MainActivity: FlutterFragmentActivity() {


why we need to create this file?

run android

But you delete another MainActivity. Please help me to understand more in one comment, no need to save the time with short sentences.

Because I renamed packagegage, git saved it like that.

pubspec.yaml

lib/features/email/domain/extensions/presentation_email_extension.dart

lib/features/email/domain/usecases/get_email_content_interactor.dart

lib/features/email/domain/repository/email_repository.dart

lib/features/email/data/datasource/email_datasource.dart

lib/features/email/data/network/email_api.dart

lib/features/email/presentation/email_view.dart

lib/features/email/presentation/widgets/message_content_tile_builder.dart

lib/features/email/presentation/model/message_content.dart

dab246 · 2021-08-23T04:34:28Z

NOTE

Some Emails with content in the form of a full web page have not been displayed, including full tags such as:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>

Specific email address:
noreply@qa.open-paas.org (Web: Dislplay | Mobile, Tablet: Not display)
robin@thebusinessanalystjobdescription.com

REASON

Many tags are formatted with css properties that cannot be parsed by the library resulting in nullable objects.

chibenwa · 2021-08-23T04:48:48Z

Many tags are formatted with css properties that cannot be parsed by the library resulting in nullable objects.

As a safe guard can we sanitize such CSS properties before the display?

Did you reported the bug upstream?

Do we have other HTML libraries to try out?

dab246 · 2021-08-23T05:00:37Z

Many tags are formatted with css properties that cannot be parsed by the library resulting in nullable objects.
As a safe guard can we sanitize such CSS properties before the display?

Did you reported the bug upstream?

Do we have other HTML libraries to try out?

If you delete some important css, it will affect the display interface.
I tried the two most popular libraries on pub dev, but the results are still not satisfactory. I gave them feedback to fix the problem. Meanwhile I'm trying to get their project on git to debug and fix the problem.
If possible can you give me the code for handling this display on the font-end side of the web team

chibenwa · 2021-08-23T06:12:19Z

If possible can you give me the code for handling this display on the font-end side of the web team

cc @fabienmoyon ?

fabienmoyon · 2021-08-23T08:02:22Z

@dab246 and @chibenwa for this we used https://github.com/cure53/DOMPurify like others projects like Protonmail ;)

hoangdat · 2021-08-23T08:43:45Z

@dab246 and @chibenwa for this we used https://github.com/cure53/DOMPurify like others projects like Protonmail ;)

It quite complicated, and IMO, we should create an issue and move it to the relevant sprint to solve that. We still have an useable reading mail widget. WDYT? @dab246 @chibenwa

hoangdat · 2021-08-23T08:45:03Z

btw, how about it: https://pub.dev/packages/sanitize_html

dab246 · 2021-08-23T09:26:48Z

@dab246 and @chibenwa for this we used https://github.com/cure53/DOMPurify like others projects like Protonmail ;)

I sanitizing the HTML content and it showed up. But it has removed some of the styles of the tags so the interface is not displayed correctly. How did you handle it after sanitizing the HTML @fabienmoyon

dab246 · 2021-08-23T10:23:16Z

Issues: #51

fabienmoyon · 2021-08-23T11:07:00Z

I sanitizing the HTML content and it showed up. But it has removed some of the styles of the tags so the interface is not displayed correctly. How did you handle it after sanitizing the HTML @fabienmoyon

@dab246 Yes you need to authorize some CSS and HTML tag like https://github.com/linagora/esn-frontend-common-libs/blob/ffdd13b42ca611d480f90761a879b0166348ba06/src/frontend/js/modules/core.js#L235

core/lib/presentation/validator/sane_html_validator.dart

lib/features/email/presentation/widgets/message_content_tile_builder.dart

core/pubspec.yaml

core/lib/presentation/validator/sanitize_html.dart

fabienmoyon · 2021-10-08T09:46:21Z

One more thing to this issue, we will also use https://github.com/Automattic/juice to be able to inline style tag in the email body, like this we will be able to display the expected result and to not impact our style

hoangdat · 2021-10-08T09:50:53Z

One more thing to this issue, we will also use https://github.com/Automattic/juice to be able to inline style tag in the email body, like this we will be able to display the expected result and to not impact our style

so cool, we should investigate more.

btw, @fabienmoyon please download our application, try to use to read email, and feedback to us, may be give us more idea for html rendering https://app.bitrise.io/artifact/94688104/p/edd9b9adf8b0e1d30e537108230dc096

dab246 force-pushed the get_email_content branch from 8665393 to b06e51a Compare August 13, 2021 06:07

hoangdat reviewed Aug 16, 2021

View reviewed changes

android/app/src/main/AndroidManifest.xml Outdated

<application

android:name="io.flutter.app.FlutterApplication"

Copy link

Member

hoangdat Aug 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not TMail?

hoangdat reviewed Aug 16, 2021

View reviewed changes

core/lib/presentation/views/list/sliver_grid_delegate_fixed_height.dart Show resolved Hide resolved

dab246 force-pushed the get_email_content branch 4 times, most recently from 472cb90 to b4b7940 Compare August 18, 2021 10:51