') + image = kwargs.get('images') + if image: + for img_data in image: + image_data = img_data.get('image_uri') + if image_data: + attachment = self.env['ir.attachment'].create({ + 'name': img_data.get('name'), + 'datas': image_data, + 'res_model': 'mail.mail', + }) + attachment_ids.append((4, attachment.id)) + + mail_id = self.sudo().with_user(user=self.env.user).create({ + "subject": subject, + "email_to": recipient, + "email_from": mail_from, + "body_html": content_html, + "attachment_ids": attachment_ids + }) + + mail_id.send() + return mail_id.read() + + @api.model + def retry_mail(self, *args): + """Method to retry failed messages""" + mail = self.search([('id', '=', int(*args)), + ('create_uid', '=', self.env.user.id)]) + mail.mark_outgoing() + mail.send() diff --git a/odoo_mail_management/models/res_config_settings.py b/odoo_mail_management/models/res_config_settings.py new file mode 100644 index 000000000..25585d602 --- /dev/null +++ b/odoo_mail_management/models/res_config_settings.py @@ -0,0 +1,46 @@ +# -*- coding: utf-8 -*- +############################################################################# +# +# Cybrosys Technologies Pvt. Ltd. +# +# Copyright (C) 2024-TODAY Cybrosys Technologies(
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+ 
+
+ + Email Management in Odoo
++ Odoo Mail Management +
+
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+
+ + This module helps to manage mails in Odoo.Here we can + compose,search,star,archive,delete mail.We can view the outgoing mail,sent + mail,archived mail ,starred mail in separate tabs. +
+ +
+
+
+
+
+
+ + Configuration +
+
+
+
+
+
+ + Configure Outgoing Mail Server
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Community & Enterprise Support
+ +
+
+
+
+
+
+ + Manage mails in Odoo
+ +
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+ 
+
+
+
+ + Manage mails in Odoo.
++ We can see all mails in Odoo. +
+
+
+ 
+
+
+ + Search bar.
++ We can search a mail easily using this search bar. +
+
+
+ 
+
+
+ + Checkbox.
++ Checkbox that can select all mail,multiple mail to delete and archive multiple + mail together. +
+
+
+ 
+
+
+ + Make mails starred.
+
+
+ 
+
+
+ + Delete and archive mail.
+
+
+ 
+
+
+ + Calendar,Notes and Contacts button.
++ Calendar,Notes and Contacts button to redirect into respective modules. +
+
+
+ 
+
+
+ + Compose a mail
+
+
+ 
+
+ + Compose mail window.
++ we can compose mail easily here and have an option to attach file,button to extend + compose mail window. +
+ +
+
+ 
+
+ + Large window to compose mail.
+
+
+ 
+
+
+ + Minimize Feature for the mail.
+
+
+ 
+
+
+ + Sent mails.
+
+
+ 
+
+
+
+
+
+ + Can See the Starred mails, Archived mails and outbox mails individually .
+
+
+ 
+
+
+ + Custom Mail Logo.
++ User can change the mail logo from settings +
+ +
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
diff --git a/odoo_mail_management/static/src/css/main.css b/odoo_mail_management/static/src/css/main.css
new file mode 100644
index 000000000..c710ae332
--- /dev/null
+++ b/odoo_mail_management/static/src/css/main.css
@@ -0,0 +1,1331 @@
+.checkbox,.arrow {
+ background: none;
+ border: none;
+ padding: 0 4px;
+}
+.btn-alt:hover {
+ background-color: var(--fill-hover);
+}
+.btn-page {
+ background: none;
+ border: none;
+ padding: 0 2px;
+}
+.btn-icon-sm {
+ height: 20px;
+ width: 20px;
+ border-radius: 0;
+}
+
+.btn-icon-alt {
+ opacity: var(--opacity);
+}
+
+.hrt-rule {
+ height: 1px;
+ background-color: #dadce0;
+}
+
+/* ---- BODY GRID ---- */
+
+.body-wrapper {
+ display: grid;
+ grid-template-columns: 270px 1fr 55px;
+ grid-template-rows: auto calc(100vh - 64px);
+
+}
+
+/* ==== HEADER ==== */
+
+.head {
+ display: grid;
+ grid-template-columns: 256px 1fr -webkit-min-content;
+ grid-template-columns: 256px 1fr min-content;
+ -ms-flex-pack: justify;
+ -ms-flex-align: center;
+ align-items: center;
+ grid-column-gap: 12px;
+ height: 64px;
+ background-color: white;
+ border-bottom: 1px solid var(--fill-border);
+ grid-column: 1 / -1;
+}
+
+.header-group {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -ms-flex-align: center;
+ margin: 0 6px;
+}
+
+.header-search {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -ms-flex-align: center;
+ -ms-flex-pack: justify;
+ width: 100%;
+ max-width: 720px;
+ background-color: var(--fill-grey);
+ border-radius: 8px;
+ padding: 3px 8px;
+
+}
+
+.header-search:focus-within {
+ background-color: white;
+
+ -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302),
+ 0 1px 3px 1px rgba(60, 64, 67, 0.149);
+
+ box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302),
+ 0 1px 3px 1px rgba(60, 64, 67, 0.149);
+}
+
+.btn[type="reset"] {
+ display: none;
+}
+
+.header-search:focus-within .btn[type="reset"] {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.header-search-input {
+ display: block;
+ font-family: var(--font-sec);
+ font-size: var(--font-m);
+ font-weight: 400;
+ background-color: transparent;
+ width: 100%;
+ padding: 4px;
+ border: none;
+ outline: none;
+}
+
+#header-profile {
+ height: 40px;
+ width: 40px;
+}
+
+.header-profile {
+ height: 32px;
+ width: 32px;
+ opacity: 1;
+}
+
+#header-menu {
+ width: 48px;
+ height: 48px;
+ margin: 4px;
+}
+
+/* ==== LEFT SIDEBAR ==== */
+
+.left-sidebar {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column;
+ flex-flow: column;
+ grid-column: 1 / 2;
+ grid-row: 2 / -1;
+}
+
+.left-sidebar-compose {
+ padding: 0 10px;
+ margin: 16px 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.sidebar-btn-compose {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ font-size: var(--font-m);
+ line-height: 1.5rem;
+ background: white;
+ min-width: 48px;
+ /* width: 145px; */
+ height: 48px;
+ vertical-align: middle;
+ padding: 5px;
+ border: none;
+ border-radius: 999px;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ overflow: hidden;
+ -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302),
+ 0 1px 3px 1px rgba(60, 64, 67, 0.149);
+ box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302),
+ 0 1px 3px 1px rgba(60, 64, 67, 0.149);
+ -webkit-transition: -webkit-box-shadow 150ms ease;
+ transition: -webkit-box-shadow 150ms ease;
+ -o-transition: box-shadow 150ms ease;
+ transition: box-shadow 150ms ease;
+ transition: box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 145px;
+ flex: 0 1 145px;
+}
+
+.sidebar-btn-compose:hover {
+ -webkit-box-shadow: 0 1px 3px 0 rgb(60 64 67 / 30%),
+ 0 4px 8px 3px rgb(60 64 67 / 15%);
+ box-shadow: 0 1px 3px 0 rgb(60 64 67 / 30%), 0 4px 8px 3px rgb(60 64 67 / 15%);
+ background-color: #fafafb;
+}
+
+.sidebar-btn-compose-icon {
+ width: 27px;
+ margin-left: 16px;
+ margin-bottom: 9px;
+}
+
+.sidebar-btn-compose-title {
+ color: var(--grey);
+ font-family: var(--font-sec);
+ font-size: 15px;
+ font-weight: 500;
+ letter-spacing: 0.25px;
+ margin-left: 8px;
+ margin-right: 18px;
+}
+
+.category-item-list {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column;
+ flex-flow: column;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ padding-right: 16px;
+}
+
+.category-item {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ color: var(--grey);
+ font-family: var(--font);
+ font-size: 0.875rem;
+ line-height: 1.1rem;
+ min-height: 32px;
+ padding: 0 12px 0 26px;
+ border-top-right-radius: 999px;
+ border-bottom-right-radius: 999px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-box-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
+}
+
+.category-item:hover {
+ background-color: var(--fill-hover);
+ cursor: pointer;
+}
+
+.category-item > div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.category-item-icon {
+ width: 20px;
+ margin-right: 18px;
+ opacity: var(--opacity);
+}
+
+.category-item.active {
+ color: #7a539e;
+ font-weight: 600;
+ background-color: #fce8e6;
+}
+
+.category-item-active:hover {
+ background-color: #fce8e6;
+}
+
+.category-item.active .category-item-icon {
+ fill: #7a539e;
+ opacity: 1;
+}
+
+
+
+
+.category-title {
+ font-family: var(--font-sec);
+ color: var(--grey);
+ font-size: 0.875rem;
+ font-weight: 500;
+ letter-spacing: 0.25px;
+ padding: 0 12px 0 26px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ margin: 10px 0;
+}
+
+
+.btn-icon-sidebar.btn-icon-sm.active {
+ opacity: 1;
+}
+
+/* ==== BODY ==== */
+
+.mail_inbox {
+ grid-column: 2 / 3;
+ grid-row: 2 / -1;
+
+ overflow: hidden;
+}
+
+/* ==== MAIL ==== */
+
+.inbox-menu {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row;
+ flex-flow: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ height: 48px;
+ width: auto;
+ background-color: white;
+ padding: 0 12px;
+ border-bottom: 1px solid var(--fill-border);
+ margin-right: 16px;
+}
+
+.inbox-container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column;
+ flex-flow: column;
+}
+
+.inbox-menu-group {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row;
+ flex-flow: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ vertical-align: middle;
+}
+
+.inbox-btn-group {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 0;
+}
+
+.inbox-menu-pagination {
+ font-family: var(--font);
+ color: var(--light-grey);
+ font-size: 0.75rem;
+ margin-right: 12px;
+ letter-spacing: 0.25px;
+ margin: 0 6px;
+}
+
+.inbox-menu-pagination-btn {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.inbox-menu-pagination-btn .btn-pagination {
+ margin: 0;
+}
+
+.inbox-category {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ height: 56px;
+ color: var(--light-grey);
+ font-family: var(--font-sec);
+ font-weight: 500;
+ font-size: 0.875rem;
+ letter-spacing: 0.25px;
+ white-space: nowrap;
+ border-bottom: 1px solid var(--fill-border);
+ overflow: hidden;
+ margin-right: 16px;
+}
+
+.inbox-category-item {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ height: 56px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 251px;
+ flex: 0 1 251px;
+}
+
+.inbox-category-title {
+ margin-right: 18px;
+ padding: 0;
+}
+
+.inbox-category-icon {
+ margin-left: 16px;
+ margin-right: 12px;
+
+ -webkit-transition: opacity 350ms ease;
+
+ -o-transition: opacity 350ms ease;
+
+ transition: opacity 350ms ease;
+}
+
+.inbox-category-item:hover {
+ background-color: var(--fill-hover);
+ color: var(--black);
+}
+
+.inbox-category-item:hover .inbox-category-icon {
+ opacity: 1;
+}
+
+.inbox-category-item.active {
+ color: #7a539e;
+}
+
+.inbox-category-icon.active {
+ fill: #7a539e;
+ opacity: 1;
+}
+
+#ctg-primary.inbox-category-item.active::before {
+ content: "";
+ position: absolute;
+ display: block;
+ height: 4px;
+ background-color: #7a539e;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: 0 8px;
+}
+
+/* ==== MAIL CONTENT ==== */
+
+.content {
+ display: block;
+ margin-bottom: 16px;
+ overflow: hidden;
+ overflow-y: scroll;
+ height: 740px;
+}
+
+.mail {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding-bottom: 8px;
+}
+
+.inbox-message-item {
+ position: relative;
+ display: flex;
+ padding-right: 8px;
+ padding-left: 4px;
+ }
+
+.inbox-message-item:hover {
+ cursor: pointer;
+ -webkit-box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0,
+ 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
+ box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0,
+ 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
+ z-index: 1;
+}
+
+.inbox-message-item-options {
+ display: flex;
+}
+
+.inbox-message-item-options * {
+ margin: 0;
+}
+.img-container{
+position:relative;
+transition:all 0.3s linear;
+padding:0px;
+}
+
+.hover-card{
+position:absolute;
+width:100%;
+height:100%;
+background-color:#0000003b;
+top:0;
+opacity:0;
+right:0px;
+display:flex;
+justify-content:center;
+align-items:center;
+color:#fff;
+font-size:2rem;
+font-weight:bold;
+}
+.img-container:hover .hover-card{
+opacity:1;
+}
+
+.message-default {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-family: var(--font);
+ color: var(--light-grey);
+ white-space: nowrap;
+ overflow: hidden;
+ overflow-x: hidden;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.message-content {
+ padding: 2px 2px 2px 0;
+ line-height: 1.1;
+ width: 168px;
+}
+
+.gap.message-content {
+ display: block;
+ background: transparent;
+ min-width: 70px;
+
+ -webkit-box-flex: 0;
+
+ -ms-flex: 0 70px;
+
+ flex: 0 70px;
+}
+
+.message-sender {
+ color: var(--black);
+ padding-right: 2rem;
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+
+ -webkit-box-flex: 0;``
+
+ -ms-flex: 0 0 200px;
+
+ flex: 0 0 200px;
+}
+
+.message-subject {
+ color: var(--black);
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+
+ -webkit-box-flex: 0;
+
+ -ms-flex: 0 0 auto;
+ width: 350px;
+ flex: 0 0 auto;
+}
+
+.message-seperator {
+ vertical-align: middle;
+ line-height: 1;
+ padding: 0 6px;
+ width: 20px;
+ margin-left: -2px;
+}
+
+.message-body {
+ color: var(--light-grey);
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+
+ -webkit-box-flex: 1;
+
+ -ms-flex: 1 1 auto;
+
+ flex: 1 1 auto;
+}
+
+.message-date {
+ position: relative;
+ color: var(--light-grey);
+ height: 40px;
+ right: 0;
+ top: 0;
+ font-size: 0.75rem;
+ text-align: right;
+ letter-spacing: 0.15px;
+ margin-right: 8px;
+ z-index: 1;
+
+ -webkit-box-flex: 0;
+
+ -ms-flex: 0 56px;
+
+ flex: 0 56px;
+}
+
+.message-default-unread {
+ background-color: var(--fill-grey);
+}
+
+.message-default .unread {
+ color: var(--black);
+ font-weight: 600;
+}
+
+.message-default .read {
+ color: var(--light-grey);
+ font-weight: 400;
+}
+
+.message-group-hidden {
+ display: none;
+ -webkit-transition: opacity 150ms ease;
+ -o-transition: opacity 150ms ease;
+ transition: opacity 150ms ease;
+}
+
+.inbox-message-item:hover .message-btn-icon {
+ opacity: 0.55;
+}
+
+.inbox-message-item:hover .message-group-hidden {
+ display: block;
+}
+
+.center-text {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+/* ==== RIGHT SIDEBAR ==== */
+
+.app-container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column;
+ flex-flow: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ padding: 10px;
+ border-left: 1px solid var(--fill-border);
+
+ grid-column: 3 / 4;
+ grid-row: 2 / -1;
+}
+
+.app-item {
+ margin-bottom: 16px;
+}
+
+.app-group > :nth-last-child(3) {
+ margin-bottom: 0;
+}
+.app-group > :nth-last-child(1) {
+ margin-top: 6px;
+}
+
+/* ==== FOOTER ==== */
+
+.footer-container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row;
+ flex-flow: row;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ padding: 12px;
+ margin: 16px 0;
+}
+
+.footer-item {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: var(--light-grey);
+ font-size: 0.875rem;
+ padding: 0;
+ margin: 0;
+ text-decoration: none;
+ letter-spacing: 0.2px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ -webkit-box-flex: 1;
+
+ -ms-flex: 1 1;
+
+ flex: 1 1;
+}
+
+/* ==== MEDIA QUERIES (1200px, 1024px, 950px, 768px) ==== */
+
+/* ---- 1200px ----*/
+
+@media screen and (max-width: 1200px) {
+ .message-default .message-subject {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 25%;
+ flex: 0 0 25%;
+ }
+}
+
+/* ---- 1024px ----*/
+
+@media screen and (max-width: 1024px) {
+ .message-default .message-subject {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 20%;
+ flex: 0 0 20%;
+ }
+}
+
+/* ---- 950px ----*/
+
+@media screen and (max-width: 950px) {
+ .inbox-message-item {
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ height: auto;
+ }
+
+ .message-default {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ white-space: nowrap;
+ padding-left: 10px;
+ margin: 10px 0;
+ }
+
+ .inbox-message-item-options {
+ position: absolute;
+ background-color: transparent;
+ right: 8px;
+ top: 0;
+
+ z-index: 2;
+ }
+
+ .message-seperator {
+ display: none;
+ }
+
+ .message-default .message-sender {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ }
+
+ .message-default .message-subject {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 100%;
+ flex: 0 1 100%;
+ }
+
+ .message-default .message-body {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 80%;
+ flex: 0 1 80%;
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ }
+
+ .message-default .message-date {
+ position: absolute;
+ right: 0;
+ top: 0;
+ margin-right: 8px;
+ z-index: 1;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 56px;
+ flex: 0 0 56px;
+ }
+
+ .star {
+ position: absolute;
+ right: 8px;
+ bottom: 0;
+ z-index: 3;
+ }
+
+ .gap.message-content {
+ -webkit-box-ordinal-group: 4;
+ -ms-flex-order: 3;
+ order: 3;
+ }
+
+ .inbox-message-item:hover .message-date {
+ display: none;
+ }
+
+ .footer-item:nth-child(2) {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column;
+ flex-flow: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ white-space: nowrap;
+ padding-left: 12px;
+ padding-right: 12px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ }
+}
+
+/* ---- 768px ----*/
+
+@media screen and (max-width: 768px) {
+ .inbox-menu-pagination {
+ max-width: 8ch;
+ white-space: nowrap;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ .gap.message-content {
+ display: none;
+ }
+
+ .message-default .message-subject {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 max-content;
+ flex: 0 1 max-content;
+ padding-right: 32px;
+ }
+}
+
+:root {
+
+ /* ==== FONTS ==== */
+ --font: 'Roboto', Arial, Helvetica, sans-serif;
+ --font-sec: 'Google Sans', 'Roboto', Arial, Helvetica, sans-serif;
+
+ --font-m: 1rem;
+ --font-sm: calc(14 / 1rem);
+
+ /* ==== COLORS ==== */
+ --black: #202124;
+ --grey: #3c4043;
+ --light-grey: #5f6368;
+ --red: #d93025;
+ --blue: #427fed;
+ --fill-red: #fce8e6;
+ --fill-grey: #f1f3f4;
+ --fill-hover: #3c404314;
+ --fill-border: #e5e5e5;
+
+ /* UNITS */
+ --opacity: 0.54;
+
+}
+
+/* ==== @FONT-FACE ==== */
+
+@font-face {
+ font-family: 'Google Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/googlesans/v14/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2) format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+ font-family: 'Google Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/googlesans/v14/4UaGrENHsxJlGDuGo1OIlL3Nwp5MKg.woff2) format('woff2');
+ unicode-range: U+0370-03FF;
+}
+
+@font-face {
+ font-family: 'Google Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/googlesans/v14/4UaGrENHsxJlGDuGo1OIlL3Bwp5MKg.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+ font-family: 'Google Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/googlesans/v14/4UaGrENHsxJlGDuGo1OIlL3Awp5MKg.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: 'Google Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/googlesans/v14/4UaGrENHsxJlGDuGo1OIlL3Owp4.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: 'Google Sans';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94Yt3CwZ-Pw.woff2) format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+ font-family: 'Google Sans';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94YtwCwZ-Pw.woff2) format('woff2');
+ unicode-range: U+0370-03FF;
+}
+
+@font-face {
+ font-family: 'Google Sans';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94Yt8CwZ-Pw.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+ font-family: 'Google Sans';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94Yt9CwZ-Pw.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: 'Google Sans';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94YtzCwY.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: 'Product Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/productsans/v9/pxiDypQkot1TnFhsFMOfGShVGdeOcEg.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: 'Product Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/productsans/v9/pxiDypQkot1TnFhsFMOfGShVF9eO.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xFIzIFKw.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xEIzIFKw.woff2) format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xLIzIFKw.woff2) format('woff2');
+ unicode-range: U+0370-03FF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xHIzIFKw.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xGIzIFKw.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
+ unicode-range: U+0370-03FF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
+ unicode-range: U+0370-03FF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
+ unicode-range: U+0370-03FF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: url(//fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+.body-wrapper {
+ position: relative;
+ }
+
+.small-modal {
+ position: absolute;
+ bottom: 0;
+ left: 542px;
+ border-radius:10px;
+ height: 573px;
+}
+
+.image-upload > input
+{
+ display: none;
+}
+
+.image-upload img
+{
+ width: 26px;
+ cursor: pointer;
+ margin-left: 6px;
+}
+.large-modal{
+border-radius:10px
+}
+#checkbox{
+ margin-top: 4px;
+}
+@media screen and (max-width: 1720px) {
+.small-modal{
+ margin-left: 100px;
+ position: absolute;
+ bottom: 25px;
+ left: 496px;
+ border-radius: 10px;
+ height: 557px;
+ width: 481px;
+}
+}@media screen and (max-width: 1550px) {
+.small-modal{
+ margin-left: 80px;
+ position: absolute;
+ bottom: 25px;
+ left: 364px;
+ border-radius: 10px;
+ height: 557px;
+ width: 481px;
+}
+}
diff --git a/odoo_mail_management/static/src/img/archive_black_24dp.svg b/odoo_mail_management/static/src/img/archive_black_24dp.svg
new file mode 100644
index 000000000..dc90e7c9c
--- /dev/null
+++ b/odoo_mail_management/static/src/img/archive_black_24dp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/attachment.svg b/odoo_mail_management/static/src/img/attachment.svg
new file mode 100644
index 000000000..8db5de531
--- /dev/null
+++ b/odoo_mail_management/static/src/img/attachment.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/calendar_month_FILL0_wght400_GRAD0_opsz48.svg b/odoo_mail_management/static/src/img/calendar_month_FILL0_wght400_GRAD0_opsz48.svg
new file mode 100644
index 000000000..637f4d2c6
--- /dev/null
+++ b/odoo_mail_management/static/src/img/calendar_month_FILL0_wght400_GRAD0_opsz48.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/clear_black_24dp.svg b/odoo_mail_management/static/src/img/clear_black_24dp.svg
new file mode 100644
index 000000000..5f1267d71
--- /dev/null
+++ b/odoo_mail_management/static/src/img/clear_black_24dp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/contact_page_FILL0_wght400_GRAD0_opsz48.svg b/odoo_mail_management/static/src/img/contact_page_FILL0_wght400_GRAD0_opsz48.svg
new file mode 100644
index 000000000..a5fb65ac6
--- /dev/null
+++ b/odoo_mail_management/static/src/img/contact_page_FILL0_wght400_GRAD0_opsz48.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/delete_black_24dp.svg b/odoo_mail_management/static/src/img/delete_black_24dp.svg
new file mode 100644
index 000000000..90a74facb
--- /dev/null
+++ b/odoo_mail_management/static/src/img/delete_black_24dp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/edit_square_FILL0_wght400_GRAD0_opsz48.svg b/odoo_mail_management/static/src/img/edit_square_FILL0_wght400_GRAD0_opsz48.svg
new file mode 100644
index 000000000..1529bbbd5
--- /dev/null
+++ b/odoo_mail_management/static/src/img/edit_square_FILL0_wght400_GRAD0_opsz48.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/expand_icon.svg b/odoo_mail_management/static/src/img/expand_icon.svg
new file mode 100644
index 000000000..612e0350c
--- /dev/null
+++ b/odoo_mail_management/static/src/img/expand_icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/logo.png b/odoo_mail_management/static/src/img/logo.png
new file mode 100644
index 000000000..def9f7854
Binary files /dev/null and b/odoo_mail_management/static/src/img/logo.png differ
diff --git a/odoo_mail_management/static/src/img/menu_black_24dp.svg b/odoo_mail_management/static/src/img/menu_black_24dp.svg
new file mode 100644
index 000000000..216dda019
--- /dev/null
+++ b/odoo_mail_management/static/src/img/menu_black_24dp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/note_FILL0_wght400_GRAD0_opsz48.svg b/odoo_mail_management/static/src/img/note_FILL0_wght400_GRAD0_opsz48.svg
new file mode 100644
index 000000000..2245cc11a
--- /dev/null
+++ b/odoo_mail_management/static/src/img/note_FILL0_wght400_GRAD0_opsz48.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/outbox.svg b/odoo_mail_management/static/src/img/outbox.svg
new file mode 100644
index 000000000..ab3e85d05
--- /dev/null
+++ b/odoo_mail_management/static/src/img/outbox.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/pdf.png b/odoo_mail_management/static/src/img/pdf.png
new file mode 100644
index 000000000..6f88832dc
Binary files /dev/null and b/odoo_mail_management/static/src/img/pdf.png differ
diff --git a/odoo_mail_management/static/src/img/refresh_black_24dp.svg b/odoo_mail_management/static/src/img/refresh_black_24dp.svg
new file mode 100644
index 000000000..e217f0350
--- /dev/null
+++ b/odoo_mail_management/static/src/img/refresh_black_24dp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/search_black_24dp.svg b/odoo_mail_management/static/src/img/search_black_24dp.svg
new file mode 100644
index 000000000..593f62809
--- /dev/null
+++ b/odoo_mail_management/static/src/img/search_black_24dp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/star_black_24dp.svg b/odoo_mail_management/static/src/img/star_black_24dp.svg
new file mode 100644
index 000000000..d9e6c2ba6
--- /dev/null
+++ b/odoo_mail_management/static/src/img/star_black_24dp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/star_border_black_24dp.svg b/odoo_mail_management/static/src/img/star_border_black_24dp.svg
new file mode 100644
index 000000000..483bd6465
--- /dev/null
+++ b/odoo_mail_management/static/src/img/star_border_black_24dp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/unarchive_FILL1_wght400_GRAD0_opsz48.svg b/odoo_mail_management/static/src/img/unarchive_FILL1_wght400_GRAD0_opsz48.svg
new file mode 100644
index 000000000..8d04f33bb
--- /dev/null
+++ b/odoo_mail_management/static/src/img/unarchive_FILL1_wght400_GRAD0_opsz48.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/img/yellow_star.svg b/odoo_mail_management/static/src/img/yellow_star.svg
new file mode 100644
index 000000000..d5fbf5763
--- /dev/null
+++ b/odoo_mail_management/static/src/img/yellow_star.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/odoo_mail_management/static/src/js/AttachmentMail.js b/odoo_mail_management/static/src/js/AttachmentMail.js
new file mode 100644
index 000000000..92c9c2f72
--- /dev/null
+++ b/odoo_mail_management/static/src/js/AttachmentMail.js
@@ -0,0 +1,29 @@
+/** @odoo-module **/
+import { Component, useRef} from "@odoo/owl";
+import { _t } from "@web/core/l10n/translation";
+import { Dialog } from "@web/core/dialog/dialog";
+
+export class ImportDialog extends Component {
+ /**
+ *handle the json file and import the data
+ **/
+ setup() {
+ this.file = false
+ }
+ onChangeFileInput(ev) {
+ const { files } = ev.target
+ if (!files[0]) return;
+ this.file = files[0]
+ }
+ async onFileUpload(ev) { if (this.file){
+ this.props.addAttachment(this.file)
+ this.cancel()
+ }
+ }
+ cancel() {
+ this.props.close();
+ }
+}
+
+ImportDialog.template = "ImportDialog"
+ImportDialog.components = { Dialog }
diff --git a/odoo_mail_management/static/src/js/ComposeMail.js b/odoo_mail_management/static/src/js/ComposeMail.js
new file mode 100644
index 000000000..4162963ac
--- /dev/null
+++ b/odoo_mail_management/static/src/js/ComposeMail.js
@@ -0,0 +1,136 @@
+/* @odoo-module*/
+import {Component,useState,useRef} from '@odoo/owl'
+import { useBus, useService } from "@web/core/utils/hooks";
+import {ImportDialog} from "./AttachmentMail";
+/**
+ * ComposeMail component for handling mail composition.
+ * @extends Component
+ */
+export class ComposeMail extends Component {
+ setup() {
+ this.orm = useService('orm')
+ this.root = useRef('root');
+ this.action = useService('action')
+ this.dialog = useService('dialog')
+ this.state = useState({
+ subject: "",
+ recipient: "",
+ content: "",
+ images: [],
+ originalHeight: null,
+ minimized: false,
+ attachedFiles: [],
+ })
+ this.contentState = useState({
+ images: [],
+ })
+
+ }
+ async imageReader(file) {
+ const fileReader = new FileReader();
+ fileReader.onload = (event) => {
+ const imageDataUrl = event.target.result; // Data URL of the image
+ if (imageDataUrl) {
+ this.state.images.push({name: file.name, image_uri: imageDataUrl.split(",")[1]})
+ }
+ };
+ fileReader.readAsDataURL(file);
+
+ }
+ contentHandler(file) {
+ switch (file.type) {
+ case "image/jpeg":
+ case "image/png":
+ case "image/gif":
+ case "image/svg+xml":
+ case "image/webp":
+ return this.imageReader(file);
+ case "application/pdf":
+ return this.imageReader(file);
+ case "text/csv":
+ return this.csvReader(file);
+ default:
+ console.warn(`Unsupported file type: ${file.type}`);
+ }
+}
+ /**
+ * Method to send the composed mail.
+ */
+ async sentMail() {
+ const {
+ subject,
+ recipient,
+ content,
+ images,
+ } = this.state
+ let sendMail = []
+ if (recipient) {
+ sendMail = await this.orm.call('mail.mail', 'sent_mail', [], {
+ subject,
+ recipient,
+ content,
+ images,
+ })
+ this.props.loadMail(...sendMail)
+ this.props.close()
+ window.location.reload()
+ }
+ }
+ /**
+ * Method to maximize or restore the mail composition window.
+ */
+ maximizeMail() {
+ const mailBody = this.root.el;
+ const TextArea = this.root.el.querySelector("#content");
+
+ if (mailBody.classList.contains('maximized')) {
+ mailBody.style.height = '532px';
+ mailBody.style.right = '5%';
+ mailBody.style.width = '30%';
+ mailBody.style.position = 'fixed';
+ TextArea.style.height = '300px';
+ } else {
+ mailBody.style.height = '900px';
+ mailBody.style.right = '5%';
+ mailBody.style.width = '100%';
+ mailBody.style.position = 'absolute';
+
+ }
+ mailBody.classList.toggle('maximized');
+ }
+ /**
+ * Method to close the mail composition window.
+ */
+ Close() {
+ this.props.close()
+ }
+ /**
+ * Method to minimize or restore the mail composition window.
+ */
+ minimizeMail() {
+ const mailBody = this.root.el;
+ if (!this.state.minimized) {
+ this.state.originalHeight = mailBody.style.height;
+ mailBody.style.height = '50px';
+ } else {
+ mailBody.style.height = this.state.originalHeight;
+ }
+ this.state.minimized = !this.state.minimized;
+ }
+ /**
+ * Method to trigger the attachment action.
+ */
+ async attachmentAction() {
+ this.dialog.add(ImportDialog, {
+ addAttachment: this.addAttachment.bind(this)
+ })
+ }
+ closeInput(index){
+ this.state.attachedFiles.splice(index, 1)
+ }
+ addAttachment(attachment) {
+ this.state.attachedFiles.push(attachment)
+ this.contentHandler(attachment)
+ }
+}
+ComposeMail.template = 'ComposeMail'
diff --git a/odoo_mail_management/static/src/js/MailBody.js b/odoo_mail_management/static/src/js/MailBody.js
new file mode 100644
index 000000000..c51ce290d
--- /dev/null
+++ b/odoo_mail_management/static/src/js/MailBody.js
@@ -0,0 +1,83 @@
+/* @odoo-module*/
+import { Component, useRef, useState ,markup} from '@odoo/owl'
+import { useService } from "@web/core/utils/hooks";
+
+/**
+ * MailBody component for displaying mail details.
+ * @extends Component
+ */
+export class MailBody extends Component {
+ setup() {
+ this.ref = useRef('root')
+ this.html_content = this.props.mail.body_html.replace(/
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+ /g, '') + + this.orm = useService('orm') + this.state = useState({ + starred: false, + }) + this.env.bus.addEventListener("SELECT:ALL", (event) => { + const { checked } = event.detail + this.ref.el.querySelector(".mail_check_box").checked = checked + this.props.onSelectMail(this.props.mail.id, checked) + }) + } + /** + * Method triggered on click of the mail selection checkbox. + * @param {Object} ev - Event object. + */ + onClickSelect(ev) { + const checked = ev.target.checked + this.props.onSelectMail(this.props.mail.id, checked) + } + /** + * Method to archive the mail. + * @param {Object} event - Event object. + */ + async archiveMail(event){ + var mail = this.props.mail.id + await this.orm.call('mail.mail','archive_mail',[mail]) + } + /** + * Method to unarchive the mail. + * @param {Object} event - Event object. + */ + async unArchive(event){ + var mail = this.props.mail.id + await this.orm.call('mail.mail','unarchive_mail',[mail]) + } + /** + * Method to resend the mail. + * @param {Object} event - Event object. + */ + async resendMail(){ + var mail = this.props.mail.id + await this.orm.call('mail.mail','retry_mail',[mail]) + } + /** + * Method to delete the mail. + * @param {Object} event - Event object. + */ + async deleteMail(event){ + var mail = this.props.mail.id + await this.orm.call('mail.mail','delete_checked_mail',[mail]) + } + /** + * Method to star or unstar the mail. + * @param {Object} event - Event object. + */ + async starMail(event){ + this.state.starred = !this.state.starred + var mail = this.props.mail.id + this.props.starMail(mail, this.state.starred) + await this.orm.call('mail.mail','star_mail',[mail]) + } + /** + * Method to open the mail. + * @param {Object} event - Event object. + */ + async openMail(event){ + var mail = this.props.mail + this.props.openMail(mail) + } +} +MailBody.template = 'MailBody' diff --git a/odoo_mail_management/static/src/js/MailHome.js b/odoo_mail_management/static/src/js/MailHome.js new file mode 100644 index 000000000..bbe9a15f1 --- /dev/null +++ b/odoo_mail_management/static/src/js/MailHome.js @@ -0,0 +1,276 @@ +/* @odoo-module*/ +import { registry } from '@web/core/registry'; +import { Component , useRef , useState, onWillStart ,onMounted} from '@odoo/owl' +import { useService } from "@web/core/utils/hooks"; +import { MailBody } from './MailBody' +import { SentMail } from './SentMail' +import { MessageView } from './MessageView' +import { ComposeMail } from './ComposeMail' +import { ImportDialog } from './AttachmentMail' +import { session } from "@web/session"; +/** + * odooMail component for handling mail-related functionalities. + * @extends Component + */ +class odooMail extends Component { + setup() { + this.mailState = useState({ + loadLogo: "", + loadMail: [], + getCount: "", + outBox: "", + mode: "tree", + formData: {}, + mailType: "all" + }) + this.dialogService = useService("dialog") + this.root = useRef('root'); + this.action = useService('action') + this.orm = useService('orm') + this.selectedMails = [] + onMounted(() => { + this.allMailView() + }) + onWillStart(async ()=> { + this.mailState.loadLogo = await this.orm.call('mail.icon','load_logo',[]) +// this.allMailView() + this.getCount() + }) + } + /** + * Method to get the count of different mail categories. + */ + async getCount(){ + this.mailState.getCount = await this.orm.call('mail.mail','get_mail_count',[]) + } + /** + * Method to compose a new mail. + */ + async composeMail(){ + this.dialogService.add(ComposeMail, { + loadMail: (mail) => { + this.mailState.loadMail.unshift(mail) + this.getCount() + } + }) + } + /** + * Method triggered on click of the "Select All" checkbox. + * @param {Object} ev - Event object. + */ + onClickSelectAll(ev) { + const checked = ev.target.checked + this.env.bus.trigger("SELECT:ALL", { checked }) + } + /** + * Getter method to get props for MailBody component. + * @returns {Object} - Props for MailBody component. + */ + get mailProps() { + return { + onSelectMail: this.onSelectMail.bind(this), + starMail: this.starMail.bind(this), + openMail: this.openMail.bind(this), + mailType: this.mailType, + } + } + /** + * Method to reset the mail view. + */ + resetView(){ + this.mailState.formData = {} + this.mailState.mode = "tree" + } + /** + * Method to open a specific mail. + * @param {Object} mail - Mail object. + */ + openMail(mail) { + this.mailState.formData = mail + this.mailState.mode = "form" + } + /** + * Method to star or unstar a mail. + * @param {Number} mail - Mail ID. + * @param {Boolean} type - Type of action (star or unstar). + */ + starMail(mail, type){ + if (type) { + this.mailState.getCount.starred_count ++ + } + else this.mailState.getCount.starred_count -- + } + /** + * Method triggered on selecting or deselecting a mail. + * @param {Number} mailId - Mail ID. + * @param {Boolean} check - Checked or not. + */ + onSelectMail(mailId, check) { + if (check) { + this.selectedMails.push(mailId) + } + else { + this.selectedMails.filter(item => item !== mailId) + } + } + /** + * Getter method to get the mail type. + * @returns {String} - Current mail type. + */ + get mailType() { + return this.mailState.mailType + } + /** + * Method to archive selected mails. + * @param {Object} event - Event object. + */ + async archiveMail(event){ + if (this.selectedMails.length){ + this.mailState.loadMail = this.mailState.loadMail.filter(item => !this.selectedMails.includes(item.id)) + await this.orm.call('mail.mail','archive_mail',[this.selectedMails]) + this.getCount() + this.selectedMails = [] + } + } + /** + * Method to refresh the page. + * @param {Object} event - Event object. + */ + refreshPage(event){ + window.location.reload() + } + /** + * Method to delete selected mails. + * @param {Object} event - Event object. + */ + async deleteMail(event){ + if (this.selectedMails.length){ + this.mailState.loadMail = this.mailState.loadMail.filter(item => !this.selectedMails.includes(item.id)) + await this.orm.call('mail.mail','delete_mail',[this.selectedMails]) + this.getCount() + this.selectedMails = [] + } + } + /** + * Method to view all mails. + */ + async allMailView(){ + await $(this.root.el.querySelector('.all_mail')).addClass('active'); + $(this.root.el.querySelector('.archieved-mail')).removeClass('active'); + $(this.root.el.querySelector('.sent-mail')).removeClass('active'); + $(this.root.el.querySelector('.outbox')).removeClass('active'); + $(this.root.el.querySelector('.sent')).removeClass('active'); + this.mailState.mailType = 'all' + this.resetView() + this.mailState.loadMail = await this.orm.searchRead('mail.mail',[['create_uid', '=', session.uid]],[], { order: "create_date desc"}) + } + /** + * Method to view starred mails. + */ + async starredMail(){ + $(this.root.el.querySelector('.sent-mail')).addClass('active'); + $(this.root.el.querySelector('.archieved-mail')).removeClass('active'); + $(this.root.el.querySelector('.outbox')).removeClass('active'); + $(this.root.el.querySelector('.sent')).removeClass('active'); + $(this.root.el.querySelector('.all_mail')).removeClass('active'); + this.mailState.mailType = "starred" + this.resetView() + this.mailState.loadMail = await this.orm.call('mail.mail','get_starred_mail',[]) + } + /** + * Method to view archived mails. + */ + async archivedMail(){ + $(this.root.el.querySelector('.archieved-mail')).addClass('active'); + $(this.root.el.querySelector('.sent-mail')).removeClass('active'); + $(this.root.el.querySelector('.outbox')).removeClass('active'); + $(this.root.el.querySelector('.sent')).removeClass('active'); + $(this.root.el.querySelector('.all_mail')).removeClass('active'); + this.mailState.mailType = 'archive' + this.resetView() + this.mailState.loadMail = await this.orm.call('mail.mail','get_archived_mail',[]) + } + /** + * Method to view outbox mails. + */ + async outboxMailView(){ + $(this.root.el.querySelector('.outbox')).addClass('active'); + $(this.root.el.querySelector('.archieved-mail')).removeClass('active'); + $(this.root.el.querySelector('.sent-mail')).removeClass('active'); + $(this.root.el.querySelector('.sent')).removeClass('active'); + $(this.root.el.querySelector('.all_mail')).removeClass('active'); + this.mailState.mailType = "outbox" + this.resetView() + this.mailState.loadMail = await this.orm.searchRead('mail.mail',[['create_uid', '=', session.uid],['state', '=', 'exception']],[], { order: "create_date desc"}) + } + /** + * Method to view sent mails. + */ + async sentMail(){ + $(this.root.el.querySelector('.sent')).addClass('active'); + $(this.root.el.querySelector('.archieved-mail')).removeClass('active'); + $(this.root.el.querySelector('.sent-mail')).removeClass('active'); + $(this.root.el.querySelector('.outbox')).removeClass('active'); + $(this.root.el.querySelector('.all_mail')).removeClass('active'); + this.resetView() + this.mailState.loadMail = await this.orm.searchRead('mail.mail',[['create_uid', '=', session.uid],['state', '=', 'sent']],[], { order: "create_date desc"}) + } + /** + * Method to redirect to the calendar view. + */ + redirectCalender(){ + this.action.doAction({ + name: "Calender", + type: 'ir.actions.act_window', + res_model: 'calendar.event', + view_mode: 'calendar,tree', + view_type: 'calendar', + views: [[false, 'calendar'], [false, 'tree']], + target: 'current', + }); + } + /** + * Method to redirect to the notes view. + */ + redirectNote(){ + this.action.doAction({ + name: "Notes", + type: 'ir.actions.act_window', + res_model: 'note.note', + view_mode: 'kanban,form,tree,activity', + view_type: 'kanban', + views: [[false, 'kanban'], [false, 'form'], [false, 'tree'], [false, 'activity']], + target: 'current', + }); + } + /** + * Method to redirect to the contacts view. + */ + redirectContacts(){ + this.action.doAction({ + name: "Contacts", + type: 'ir.actions.act_window', + res_model: 'res.partner', + view_mode: 'kanban,form,tree,activity', + view_type: 'kanban', + views: [[false, 'kanban'], [false, 'form'], [false, 'tree'], [false, 'activity']], + target: 'current', + }); + } + /** + * Method to search mails based on user input. + */ + searchMail(){ + var value= this.root.el.querySelector(".header-search-input").value.toLowerCase() + var inboxItems = this.root.el.querySelectorAll(".inbox-message-item"); + inboxItems.forEach(item => { + var itemText = item.textContent.toLowerCase(); + item.style.display = itemText.includes(value) ? "" : "none"; + }) + } +} +odooMail.template = 'OdooMail' +odooMail.components = { + MailBody, SentMail, ComposeMail,MessageView,ImportDialog +} +registry.category('actions').add('odoo_mail', odooMail); diff --git a/odoo_mail_management/static/src/js/MessageView.js b/odoo_mail_management/static/src/js/MessageView.js new file mode 100644 index 000000000..4042e745e --- /dev/null +++ b/odoo_mail_management/static/src/js/MessageView.js @@ -0,0 +1,41 @@ +/* @odoo-module*/ +import { Component } from '@odoo/owl'; +import { useService } from "@web/core/utils/hooks"; +import { useState, onMounted, markup, useRef} from "@odoo/owl"; + + +/** + * MessageView component for displaying a message. + * @extends Component + */ +export class MessageView extends Component { + setup(){ + this.root = useRef("root-mail") + this.action = useService("action"); + this.html_content = markup(this.props.mail.body_html) + this.orm = useService("orm"); + this.state = useState({ + attachments: {}, + data: [], + + }) + onMounted(this.fetch_data); + } + async fetch_data(){ + var self = this + for (const ids in this.props.mail.attachment_ids) { + var value = this.props.mail.attachment_ids + await this.orm.call("ir.attachment", "get_fields", [value], {}).then((result) => { + self.state.attachments = result + }); + } + } + onClickImage(value){ + this.action.doAction({ + type: "ir.actions.act_url", + url: "/web/content/" + value+ "?download=true", + }); + } + +} +MessageView.template = 'MessageView' diff --git a/odoo_mail_management/static/src/js/SentMail.js b/odoo_mail_management/static/src/js/SentMail.js new file mode 100644 index 000000000..31484c836 --- /dev/null +++ b/odoo_mail_management/static/src/js/SentMail.js @@ -0,0 +1,9 @@ +/* @odoo-module*/ +import { Component } from '@odoo/owl' +import { useBus, useService } from "@web/core/utils/hooks"; +/** + * SentMail component for displaying sent mails. + * @extends Component + */ +export class SentMail extends Component {} +SentMail.template = 'SentMail' diff --git a/odoo_mail_management/static/src/xml/attachment_mail_templates.xml b/odoo_mail_management/static/src/xml/attachment_mail_templates.xml new file mode 100644 index 000000000..4ace88ed7 --- /dev/null +++ b/odoo_mail_management/static/src/xml/attachment_mail_templates.xml @@ -0,0 +1,16 @@ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+ Primary
+
+
+
+
+
+
+
+
+
+
+
+
+ Calendar
+
+
+
+ Notes
+
+
+
+ Contacts
+
+
+
+
+
+ +
+ From:
+
+
+
+ To:
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Customize Mail logo
+
+
+
+