diff --git a/client/res/templates/email-folder/list-side.tpl b/client/res/templates/email-folder/list-side.tpl
index 506cc9f2d2..2c7e7004a2 100644
--- a/client/res/templates/email-folder/list-side.tpl
+++ b/client/res/templates/email-folder/list-side.tpl
@@ -27,7 +27,7 @@
data-id="{{get this 'id'}}"
class="side-link"
{{#if title}}title="{{title}}"{{/if}}
- >{{get this 'name'}}
+ >{{get this 'name'}}
{{/each}}
diff --git a/client/src/views/email/list.js b/client/src/views/email/list.js
index 0d812dc1c7..668b82ec72 100644
--- a/client/src/views/email/list.js
+++ b/client/src/views/email/list.js
@@ -466,17 +466,29 @@ class EmailListView extends ListView {
this.FOLDER_ARCHIVE,
];
+ const iconMap = {
+ [this.FOLDER_TRASH]: 'far fa-trash-alt',
+ [this.FOLDER_SENT]: 'far fa-paper-plane',
+ [this.FOLDER_INBOX]: 'fas fa-inbox',
+ [this.FOLDER_ARCHIVE]: 'far fa-caret-square-down',
+ [this.FOLDER_DRAFTS]: 'far fa-file',
+ [this.FOLDER_IMPORTANT]: 'far fa-star',
+ }
+
this.getFolderCollection(collection => {
collection.forEach(model => {
if (this.noDropFolderIdList.indexOf(model.id) === -1) {
model.droppable = true;
}
+ model.iconClass = iconMap[model.id];
+
if (model.id.indexOf('group:') === 0) {
model.title = this.translate('groupFolder', 'fields', 'Email');
- }
- else if (auxFolderList.indexOf(model.id) === -1) {
+ model.iconClass = 'far fa-circle';
+ } else if (auxFolderList.indexOf(model.id) === -1) {
model.title = this.translate('folder', 'fields', 'Email');
+ model.iconClass = 'far fa-folder';
}
});
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index dcb24e1281..0c5e4cf35e 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -2577,6 +2577,20 @@ table.table td.cell .html-container {
transition: 900ms linear background-color;
}
}
+
+ .item-icon-container {
+ display: inline-block;
+ width: 18px;
+ margin-left: -2px;
+ margin-right: 8px;
+ text-align: center;
+
+ > span {
+ font-size: 12px;
+ position: relative;
+ top: -1px;
+ }
+ }
}
}