From 3ebcb195d0ba17f0348dd3f23083b4358738ae3a Mon Sep 17 00:00:00 2001
From: Antonin Bourguignon <abo@openerp.com>
Date: Fri, 15 Jun 2012 19:26:47 +0200
Subject: [PATCH] [IMP] continue to improve new messages layout

bzr revid: abo@openerp.com-20120615172647-vfnbd2x4ve0q6w3g
---
 addons/mail/mail_message_demo.xml   | 20 +++---
 addons/mail/static/src/css/mail.css | 97 ++++++++++++++++++++++++++---
 addons/mail/static/src/xml/mail.xml | 71 ++++++++-------------
 3 files changed, 125 insertions(+), 63 deletions(-)

diff --git a/addons/mail/mail_message_demo.xml b/addons/mail/mail_message_demo.xml
index 5ae97e24d65..18da3a9d083 100644
--- a/addons/mail/mail_message_demo.xml
+++ b/addons/mail/mail_message_demo.xml
@@ -5,45 +5,45 @@
         <record id="message_blogpost0" model="mail.message">
             <field name="subject">A cool blogpost about something clean</field>
             <field name="model">mail.group</field>
-            <field name="res_id" ref="group_all_company"></field>
+            <field name="res_id" ref="group_all_company"/>
             <field name="subtype">html</field>
-            <field name="body_html"><![CDATA[Lorem ipsum dolor <b>sit amet</b>, consectetur <i>adipiscing elit</i>. Pellentesque et quam sapien, in sagittis tellus. 
+            <field name="body_html"><![CDATA[Lorem ipsum dolor <b>sit amet</b>, consectetur <em>adipiscing elit</em>. Pellentesque et quam sapien, in sagittis tellus. 
             Praesent vel massa sed massa consequat egestas in tristique orci. Praesent iaculis libero et neque vehicula iaculis. Vivamus placerat tincidunt orci ac ornare. Proin ut dolor fringilla velit ultricies consequat. Maecenas sit amet ipsum non leo interdum imperdiet. Donec sapien mi, varius a consequat id, consectetur sit amet nulla. 
 
 Fusce tempus elit volutpat mi auctor adipiscing. Nam congue luctus suscipit. Duis vestibulum dapibus enim vitae dignissim. Sed tellus libero, venenatis ut mollis ut, luctus quis dui. Sed rhoncus pulvinar orci in consectetur. 
 
 Nulla turpis leo, rhoncus ut egestas sit amet, consectetur vitae urna. Mauris in dolor in sapien tempus vehicula.]]></field>
             <field name="type">comment</field>
-            <field name="user_id" ref="base.user_root"></field>
+            <field name="user_id" ref="base.user_root"/>
         </record>
 
         <record id="message_blogpost0_comment0" model="mail.message">
             <field name="subject">Reply</field>
             <field name="model">mail.group</field>
-            <field name="res_id" ref="group_all_company"></field>
+            <field name="res_id" ref="group_all_company"/>
             <field name="subtype">html</field>
             <field name="body_html"><![CDATA[That was such a <b>tremendous</b> blogpost (first comment) !]]></field>
             <field name="parent_id" ref="message_blogpost0"/>
             <field name="type">comment</field>
-            <field name="user_id" ref="base.user_root"></field>
+            <field name="user_id" ref="base.user_root"/>
         </record>
 
         <record id="message_blogpost0_comment1" model="mail.message">
             <field name="subject">Reply</field>
             <field name="model">mail.group</field>
-            <field name="res_id" ref="group_all_company"></field>
+            <field name="res_id" ref="group_all_company"/>
             <field name="subtype">html</field>
             <field name="body_html"><![CDATA[Agreed !  
-Is it possible to learn more about the author (second comment) ?]]></field>
+Would it be possible to learn more about the author (second comment) ?]]></field>
             <field name="parent_id" ref="message_blogpost0"/>
             <field name="type">comment</field>
-            <field name="user_id" ref="base.user_root"></field>
+            <field name="user_id" ref="base.user_root"/>
         </record>
 
         <record id="message_blogpost0_comment2" model="mail.message">
             <field name="subject">Reply</field>
             <field name="model">mail.group</field>
-            <field name="res_id" ref="group_all_company"></field>
+            <field name="res_id" ref="group_all_company"/>
             <field name="subtype">html</field>
             <field name="body_html"><![CDATA[Sure: Curabitur tempor bibendum diam, et euismod ante rutrum vel. 
             
@@ -51,7 +51,7 @@ Is it possible to learn more about the author (second comment) ?]]></field>
             Donec viverra congue dui eu blandit. In lacinia molestie nulla, ut sagittis risus feugiat eu. (third comment)]]></field>
             <field name="parent_id" ref="message_blogpost0"/>
             <field name="type">comment</field>
-            <field name="user_id" ref="base.user_root"></field>
+            <field name="user_id" ref="base.user_root"/>
         </record>
 
     </data>
diff --git a/addons/mail/static/src/css/mail.css b/addons/mail/static/src/css/mail.css
index f8975d67b78..55efc7ff42c 100644
--- a/addons/mail/static/src/css/mail.css
+++ b/addons/mail/static/src/css/mail.css
@@ -56,6 +56,7 @@
 }
 
 .openerp div.oe_mail_msg_content {
+    position: relative;
     width: 486px;
 }
 
@@ -284,20 +285,98 @@
     -box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
 }
 
-.openerp p.oe_mail_msg {
+.openerp div.oe_mail_msg {
     padding: 0;
     margin: 0 0 4px 0;
 }
 
-.openerp a.oe_mail_oe_intlink {
-    color: #8786b7;
-}
-
 .openerp .oe_mail_oe_bold {
     font-weight: bold;
 }
 
-/*.openerp .oe_mail_oe_space:after {*/
-    /*content: " · ";*/
-    /*margin-right: 2px;*/
-/*}*/
+/* ------------------------------ */
+/* New layouts' style             */
+/* ------------------------------ */
+
+.openerp .oe_mail_msg .oe_mail_msg_title {
+    font-size: 1.3em;
+    font-weight: bold;
+}
+.openerp .oe_mail_msg .oe_mail_msg_title a:link,
+.openerp .oe_mail_msg .oe_mail_msg_title a:visited {
+    color: #4C4C4C;
+    text-decoration: none;
+}
+
+.openerp .oe_mail_msg_intlinks,
+.openerp .oe_mail_msg_subtitle {
+    color: #888;
+}
+.openerp .oe_mail_msg_intlinks a:link {
+    color: #8786b7;
+}
+
+/* Gear menu */
+.openerp .oe_mail_msg_comment a.oe_gear_menuaction {
+  position: absolute;
+  top: 0px;
+  right: 3px;
+  display: none;
+  color: #4c4c4c;
+  cursor: pointer;
+}
+.openerp .oe_mail_msg_comment:hover .oe_gear_menuaction {
+  display: block;
+}
+.openerp .oe_mail_msg_comment a.oe_gear_menuaction:hover {
+  text-decoration: none;
+}
+.openerp .oe_mail_msg_comment a.oe_gear_menuaction:hover {
+  text-decoration: none;
+}
+.openerp .oe_mail_msg_comment ul.oe_gear_menu {
+  list-style-type: none;
+  display: none;
+  position: absolute;
+  top: 30px;
+  right: -140px;
+  padding: 4px;
+  border: 1px solid #afafb6;
+  min-width: 160px;
+  overflow-x: hidden;
+  z-index: 900;
+  background: white;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+.openerp .oe_mail_msg_comment a.oe_gear_menuaction:hover ~ .oe_gear_menu {
+    display: block;
+}
+.openerp .oe_mail_msg_comment ul.oe_gear_menu > li {
+    float: none;
+}
+.openerp .oe_mail_msg_comment .oe_gear_menu > li > a {
+  display: block;
+  padding: 3px 6px;
+  line-height: 14px;
+  color: #4c4c4c;
+  text-decoration: none;
+}
+.openerp .oe_mail_msg_comment .oe_gear_menu > li > a:hover {
+  background: #f0f0fa;
+  background: -moz-linear-gradient(#f0f0fa, #eeeef6);
+  background: -webkit-gradient(linear, left top, left bottom, from(#f0f0fa), to(#eeeef6));
+  background: -webkit-linear-gradient(#f0f0fa, #eeeef6);
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  -box-shadow: none;
+}
+.openerp .oe_mail_msg_comment .oe_gear_menu p {
+  margin-left: 12px;
+}
+
+
diff --git a/addons/mail/static/src/xml/mail.xml b/addons/mail/static/src/xml/mail.xml
index 69012ae77ee..7458f972fa2 100644
--- a/addons/mail/static/src/xml/mail.xml
+++ b/addons/mail/static/src/xml/mail.xml
@@ -65,9 +65,9 @@
             <img t-if="record.type == 'notification' || record.type == 'comment'" class="oe_mail_msg_image oe_left" t-att-src="record.mini_url"/>
             <div class="oe_mail_msg_content">
                 <t t-if="record.type == 'email'"><t t-call="mail.Thread.default.EmailDisplay"/></t>
-                <t t-if="record.type == 'notification' || record.type == 'comment'"><t t-call="mail.Thread.default.NoteDisplay" /></t>
+                <t t-if="record.type == 'notification' || record.type == 'comment'"><t t-call="mail.Thread.default.NoteDisplay"/></t>
             </div>
-            <t t-if="record.type == 'tmp'"><t t-call="ThreadDisplay" /></t>
+            <t t-if="record.type == 'tmp'"><t t-call="ThreadDisplay"/></t>
         </div>
     </li>
 
@@ -138,21 +138,39 @@
             <img t-if="record.type == 'email'" class="oe_email_icon oe_left" src="/mail/static/src/img/email_icon.png"/>
             <img t-if="record.type == 'notification' || record.type == 'comment'" class="oe_mail_msg_image oe_left" t-att-src="record.mini_url"/>
             <div class="oe_mail_msg_content">
-                <t t-if="record.type == 'email'"><t t-call="mail.Thread.new.EmailDisplay" /></t>
-                <t t-if="record.type == 'notification' || record.type == 'comment'"><t t-call="mail.Thread.new.NoteDisplay" /></t>
+                <t t-call="mail.Thread.new.NoteDisplay"/>
             </div>
-            <t t-if="record.type == 'tmp'"><t t-call="mail.Thread.new.ThreadDisplay" /></t>
+            <t t-if="record.type == 'tmp'"><t t-call="mail.Thread.new.ThreadDisplay"/></t>
         </div>
     </li>
 
     <t t-name="mail.Thread.new.NoteDisplay">
-        <p class="oe_mail_msg">
+        <a class="oe_gear_menuaction oe_i">B</a>
+        <ul class="oe_gear_menu">
+            <li><a href="#">Delete</a></li>
+            <li><a href="#">Hide</a></li>
+        </ul>
+        <div class="oe_mail_msg">
+            <!--
             <t t-if="params.thread_level > 0">
                 <a href="#" class="intlink oe_mail_oe_intlink" t-attf-data-res-model='{params.res_model}' t-attf-data-res-id='{params.res_id}'><t t-raw="record.record_name"/></a>
             </t>
+            -->
+            <t t-if="record.subject">
+                <h1 class="oe_mail_msg_title">
+                    <a href="#permalink"><t t-raw="record.subject"/></a>
+                </h1>
+            </t>
+            <p class="oe_mail_msg_subtitle">
+                <a href="#" class="intlink" data-res-model='res.users' t-attf-data-res-id='{record.user_id[0]}'><t t-raw="record.user_id[1]"/></a>
+                 · 
+                <t t-raw="record.date"/>
+            </p>
             <span class="oe_mail_msg_body"><t t-raw="record.body"/></span>
-            <t t-if="record.tr_body"><span class="oe_mail_msg_body_short"><t t-raw="record.tr_body"/></span></t><br/>
-            <ul>
+            <t t-if="record.tr_body">
+                <span class="oe_mail_msg_body_short"><t t-raw="record.tr_body"/></span>
+            </t><br/>
+            <ul class="oe_mail_msg_intlinks">
               <t t-if="display['show_reply']">
                 <li><a href="#" class="oe_mail_msg_reply oe_mail_oe_intlink">Reply</a><span class="oe_mail_oe_space oe_fade"> · </span></li>
               </t>
@@ -166,43 +184,8 @@
                   <li><a href="#" t-attf-data-id='{record.id}' class="oe_mail_msg_hide oe_mail_oe_intlink">Hide</a><span class="oe_mail_oe_space oe_fade"> · </span></li>
                 </t>
               </t>
-              <li>
-                <span class="oe_fade"><t t-raw="record.date"/>
-                  by <a href="#" class="intlink oe_mail_oe_intlink" data-res-model='res.users' t-attf-data-res-id='{record.user_id[0]}'><t t-raw="record.user_id[1]"/></a>
-                </span>
-              </li>
             </ul>
-        </p>
-    </t>
-
-    <t t-name="mail.Thread.new.EmailDisplay">
-        <p class="oe_mail_msg oe_mail_msg_p_email_header">
-            <t t-if="params.thread_level > 0">
-                <a href="#" class="intlink oe_mail_oe_intlink" t-attf-data-res-model='{params.res_model}' t-attf-data-res-id='{params.res_id}'><t t-raw="record.record_name"/></a>
-            </t>
-        </p>
-        <p><span class="oe_mail_oe_bold">From:</span> <t t-esc="record.email_from"/></p>
-        <p><span class="oe_mail_oe_bold">Subject:</span> <t t-esc="record.subject"/></p>
-        <p class="oe_mail_msg">
-            <span class="oe_mail_msg_body"><t t-raw="record.body"/></span>
-            <t t-if="record.tr_body"><span class="oe_mail_msg_body_short"><t t-raw="record.tr_body"/></span></t>
-        </p>
-
-        <ul>
-          <t t-if="display['show_delete']">
-            <t t-if="thread._is_author(record.user_id[0])">
-              <li><a href="#" t-attf-data-id='{record.id}' class="oe_mail_msg_delete oe_mail_oe_intlink">Delete</a><span class="oe_mail_oe_space oe_fade"> · </span></li>
-            </t>
-          </t>
-          <t t-if="display['show_hide']">
-            <t t-if="!(thread._is_author(record.user_id[0]))">
-              <li><a href="#" t-attf-data-id='{record.id}' class="oe_mail_msg_hide oe_mail_oe_intlink">Hide</a><span class="oe_mail_oe_space oe_fade"> · </span></li>
-            </t>
-          </t>
-          <li>
-            <span class="oe_fade"><t t-raw="record.date"/></span>
-          </li>
-        </ul>
+        </div>
     </t>
 
 </template>