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; + } + } } }