Merge branch 'dev'

# Conflicts:
#	package-lock.json

Author: ThorstenSuckow

.gitignore

@@ -1,6 +1,4 @@
-/docs
 /build
-/tests/tests.config.js
 /tests/index.html
 /.idea
 /node_modules/

README.md

@@ -1,12 +1,9 @@
 # @conjoon/extjs-app-webmail ![MIT](https://img.shields.io/npm/l/@conjoon/extjs-app-webmail) [![npm version](https://badge.fury.io/js/@conjoon%2Fextjs-app-webmail.svg)](https://badge.fury.io/js/@conjoon%2Fextjs-app-webmail)
 
-
-This Sencha ExtJS NPM package is built with the [coon.js-library](https://github.com/coon.js) and provides a webmail client
-implementation for the [conjoon](https://github.com/conjoon/conjoon) application.
-
+JavaScript email client module for [conjoon](https://conjoon.org), powered by [Sencha Ext JS](https://sencha.com) and [coon.js](https://github.com/coon-js).
 ## Installation
 ```bash
-$ npm install --save-dev @conjoon/extjs-app-webmail
+$ npm i @conjoon/extjs-app-webmail
 ```
 If you want to develop with this package, run the `build:dev`-script afterwards:
 ```bash
@@ -18,10 +15,8 @@ Testing environment will then be available via
 npm test
 ```
 
-For using the package as an external dependency in an application, use
-```bash
-$ npm install --save-prod @conjoon/extjs-app-webmail
-```
+For using the package as an external dependency in an application:
+<br>
 In your `app.json`, add this package as a requirement, and make sure your ExtJS `workspace.json`
 is properly configured to look up local repositories in the `node_modules`-directory.
 
@@ -35,23 +30,31 @@ Example (`workspace.json`) :
 }
 ```
 
-## Usage
-When using this package without a backend implementation, make sure your app uses the [extjs-dev-webmailsim](https://github.com/conjoon/extjs-dev-webmailsim) package  of the [conjoon](https://github.com/conjoon) project.
-
-### Required Services
-This package requires a service that complies with the REST API described in `rest-imap` which can be found
-in the [REST API description](https://github.com/conjoon/rest-api-description) of the **conjoon**-project.
-
-The url of this service can be configured in the configuration file for this package.
+Update the `app.json` of the application by specifying this package in the `uses`-property in
+either the `development` and/or `prodution` section:
 
+*Example:*
 ```json
 {
-    "service": {
-        "rest-imap": {
-            "base" : "https://localhost/rest-imap/api/v1"
-        }
+    "development": {
+        "uses": [
+            "extjs-dev-imapusersim",
+            "extjs-app-imapuser",
+            "extjs-app-webmail",
+            "extjs-dev-webmailsim"
+        ]
+    },
+    "production": {
+        "uses": [
+            "extjs-app-imapuser",
+            "extjs-app-webmail"
+        ]
     }
-} 
+}
 ```
-Please refer to the documentation of [extjs-lib-core](https://github.com/coon-js/extjs-lib-core) on how to
-create package-specific configurations.
+
+## Configuration and Usage
+For more information on how to configure and use the package, refer to the [documentation](./docs/README.md).
+
+## Tests
+Tests are written with [Siesta](https://bryntum.com/siesta). Documentation can be found [here](./tests/README.md).

classic/src/view/mail/folder/MailFolderTreeColumn.js

@@ -55,14 +55,15 @@ Ext.define("conjoon.cn_mail.view.mail.folder.MailFolderTreeColumn", {
         "<div class=\"{parent.childCls} {parent.elbowCls}-img ",
         "{parent.elbowCls}-<tpl if=\".\">line<tpl else>empty</tpl>\" role=\"presentation\"></div>",
         "</tpl>",
-
         "<tpl if=\"glyph\">",
         "<span class=\"{baseIconCls}\" ",
         "<tpl if=\"glyphFontFamily\">",
         "style=\"font-family:{glyphFontFamily}\"",
         "</tpl>",
         ">{glyph}</span>",
         "<tpl else>",
+
+        "<tpl if=\"iconCls\">",
         "<tpl if=\"icon\">",
         "<img src=\"{blankUrl}\"",
         "<tpl else>",
@@ -71,20 +72,19 @@ Ext.define("conjoon.cn_mail.view.mail.folder.MailFolderTreeColumn", {
         " role=\"presentation\" class=\"{childCls} {baseIconCls} {customIconCls} ",
         "{baseIconCls}-<tpl if=\"leaf\">leaf<tpl else><tpl if=\"expanded\">parent-expanded<tpl else>parent</tpl></tpl> {iconCls}\" ",
         "<tpl if=\"icon\">style=\"background-image:url({icon})\"/>" +
-        "<tpl else>" +
-        "></div>" +
+            "<tpl else>" +
+            "></div>" +
+        "</tpl>",
         "</tpl>",
         "</tpl>",
         "<tpl if=\"href\">",
         "<a href=\"{href}\" role=\"link\" target=\"{hrefTarget}\" class=\"{textCls} {childCls}\">{value}</a>",
         "<tpl else>",
         "<span class=\"{textCls} {childCls}\">{value}</span>",
         "</tpl>",
-
         "<div class=\"{childCls} {elbowCls}-img {elbowCls}",
         "<tpl if=\"isLast\">-end</tpl>" +
         "<tpl if=\"expandable\">-plus {expanderCls}</tpl>\" role=\"presentation\"></div>"
-
     ],
 
 
@@ -104,19 +104,18 @@ Ext.define("conjoon.cn_mail.view.mail.folder.MailFolderTreeColumn", {
 
         // do not set record data via set() as it seems to trigger
         // immediate update which calls this method in return (?)
-        if (ret.lines.length === 1) {
-            record.data.iconCls = me.getIconClsForMailFolderType(type);
+        if (ret.lines.length <= 1) {
+            // we could also assign a type-property to ret, but a blank space will do
+            // to properly render ACCOUNT nodes with the given template
+            record.data.iconCls = ret.lines.length === 0 ? " " : me.getIconClsForMailFolderType(type);
         } else {
             record.data.iconCls = "";
         }
 
         if (ret.lines && ret.lines.length < 2) {
             ret.lines = [];
-        } else {
-            ret.lines.pop();
         }
 
-
         return ret;
     },
 
@@ -157,4 +156,4 @@ Ext.define("conjoon.cn_mail.view.mail.folder.MailFolderTreeColumn", {
         return iconCls;
     }
 
-});
+});

classic/src/view/mail/message/AbstractAttachmentList.js

@@ -161,7 +161,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.AbstractAttachmentList", {
             return "fa-file-pdf";
 
         case "text/plain":
-            return  "fa-file-alt";
+            return "fa-file-alt";
 
         case "text/html":
         case "application/json":
@@ -170,12 +170,13 @@ Ext.define("conjoon.cn_mail.view.mail.message.AbstractAttachmentList", {
         case "application/gzip":
         case "application/zip":
         case "application/x-rar-compressed":
+        case "application/x-zip-compressed":
             return "fa-file-archive";
 
         }
 
-        return "fa-file-o";
+        return "fa-file";
     }
 
 
-});
+});

classic/src/view/mail/message/MessageGrid.js

@@ -1,7 +1,7 @@
 /**
  * conjoon
  * extjs-app-webmail
- * Copyright (C) 2019-2021 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
+ * Copyright (C) 2019-2022 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
  *
  * Permission is hereby granted, free of charge, to any person
  * obtaining a copy of this software and associated documentation
@@ -35,6 +35,8 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
     extend: "Ext.grid.Panel",
 
     requires: [
+        // @see conjoon/extjs-app-webmail#178
+        "Ext.grid.column.Date",
         "coon.comp.grid.feature.RowBodySwitch",
         "conjoon.cn_mail.view.mail.message.grid.feature.Livegrid",
         "conjoon.cn_mail.view.mail.message.grid.feature.PreviewTextLazyLoad",
@@ -45,6 +47,12 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
 
     alias: "widget.cn_mail-mailmessagegrid",
 
+    /**
+     * Gets fired with initComponent to signal that the component is about to get initialized.
+     * @event cn_init
+     * @param {conjoon.cn_mail.view.mail.message.MessageGrid} this
+     */
+
     /**
      * Gets fired when the conjoon.cn_mail.store.mail.message.MessageItemStore
      * beforeload-event fires. This relay is needed due to the late binding behavior
@@ -98,9 +106,6 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
     features: [{
         ftype: "cn_mail-mailmessagegridfeature-livegrid",
         id: "cn_mail-mailMessageFeature-livegrid"
-    }, {
-        ftype: "cn_webmailplug-previewtextlazyload",
-        id: "cn_webmailplug-previewtextlazyload"
     }, {
         ftype: "cn_comp-gridfeature-rowbodyswitch",
         variableRowHeight: false,
@@ -126,9 +131,11 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
 
             return {
                 rowBody:
-                          "<div class=\"head" + (!record.get("seen") ? " unread" : "")+"\">" +
-                          "<div class=\"subject"+ (!record.get("seen") ? " unread" : "")+"\">" +
-                             (record.get("answered") ? "<span class=\"fa fa-mail-reply\"></span>" : "")+
+                          "<div class=\"head" + (!record.get("seen") ? " unread" : "") +
+                                                (record.get("recent") ? " recent" : "")+"\">" +
+                          "<div class=\"subject"+ (!record.get("seen") ? " seen" : "") +
+                                                  (record.get("recent") ? " recent" : "")+"\">" +
+                             (record.get("answered") ? "<span class=\"fa fa-reply\"></span>" : "")+
                              (record.get("flagged") ? "<span class=\"fa fa-flag\"></span>" : "")+
                              (record.get("draft") ? "<span class=\"draft\">[Draft]</span>" : "") +
 
@@ -175,9 +182,8 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
     viewConfig: {
         markDirty: false,
         getRowClass: function (record, rowIndex, rowParams, store){
-            let cls = record.get("seen")
-                ? ""
-                : "boldFont";
+            let cls = record.get("recent") ? "recent" : "";
+            cls  += record.get("seen") ? "" : " boldFont";
 
             if (record.get("cn_deleted")) {
                 cls += " cn-deleted";
@@ -286,6 +292,8 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
 
         const me = this;
 
+        me.fireEvent("cn_init", me);
+
         // apply Renderer to draftDisplayAddress columns
         for (let i = 0, len = me.columns.length; i < len; i++) {
             if (me.columns[i].dataIndex === "draftDisplayAddress") {

classic/src/view/mail/message/editor/HtmlEditor.js

@@ -68,6 +68,10 @@ Ext.define("conjoon.cn_mail.view.mail.message.editor.HtmlEditor", {
             }
         });
 
+        let overflowHandler = tbar.getLayout().overflowHandler;
+
+        overflowHandler.addComponentToMenu = me.createOverflowHandlerInterceptor(overflowHandler.addComponentToMenu);
+
         return tbar;
     },
 
@@ -149,6 +153,29 @@ Ext.define("conjoon.cn_mail.view.mail.message.editor.HtmlEditor", {
             "<style type=\"text/css\">",
             "</style></head><body></body></html>"
         ].join("");
+    },
+
+
+    /**
+     * Used to hide the Attachment-Button in the menu that gets rendered with the overflow-handler
+     * of this editor's toolbar.
+     * Creates an interceptor for the passed func that will not call the
+     * passed func if teh component passed to it is of the type
+     * coon.comp.form.field.FileButton.
+     *
+     * @private
+     *
+     * returns function
+     */
+    createOverflowHandlerInterceptor (func) {
+        "use strict";
+
+        return Ext.Function.createInterceptor(func, function (menu, component) {
+            if (component instanceof coon.comp.form.field.FileButton) {
+                return false;
+            }
+        });
     }
 
+
 });