From 38a28e7ae555694901e3a17a9dc04fbf88da4b3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20van=20der=20Essen?= Date: Wed, 17 Oct 2012 11:43:22 +0200 Subject: [PATCH 001/106] [WIP] openchatter: css and dom refactor bzr revid: fva@openerp.com-20121017094322-h0z9jjuod5q9up1y --- addons/mail/static/src/css/mail.css | 460 +++------------------------- addons/mail/static/src/js/mail.js | 10 +- addons/mail/static/src/xml/mail.xml | 136 ++++---- 3 files changed, 111 insertions(+), 495 deletions(-) diff --git a/addons/mail/static/src/css/mail.css b/addons/mail/static/src/css/mail.css index 1592d79e18d..a8089bb9629 100644 --- a/addons/mail/static/src/css/mail.css +++ b/addons/mail/static/src/css/mail.css @@ -1,424 +1,64 @@ -/* ------------------------------------------------------------ */ -/* Reset because of ugly display of end of August -/* ------------------------------------------------------------ */ - -.openerp .oe_mail_wall ul, .openerp .oe_mail_wall li { - list-style-type: none; - padding: 0; - margin: 0; +.openerp .oe_mail, .openerp .oe_mail *{ + box-sizing: border-box; } - -.openerp .oe_chatter ul, .openerp .oe_chatter li { - list-style-type: none; - padding: 0; - margin: 0; -} - -/* ------------------------------------------------------------ */ -/* Wall -/* ------------------------------------------------------------ */ - -.openerp div.oe_mail_wall { - overflow: auto; - padding: 0; - background: white; -} - -.openerp div.oe_mail_wall div.oe_mail_wall_aside { - margin-left: 565px; - margin: 8px; -} - -.openerp div.oe_mail_wall ul.oe_mail_wall_threads { - float: left; +.openerp .oe_mail { + position: relative; width: 560px; - margin: 8px; - list-style-type: none; -} - -/* ------------------------------------------------------------ */ -/* Followers -/* ------------------------------------------------------------ */ - -.openerp div.oe_mail_recthread_aside h4 { - display: inline-block; -} -.openerp div.oe_mail_recthread_aside button { - position: relative; -} -.openerp div.oe_mail_recthread_aside label, -.openerp div.oe_mail_recthread_aside input { - cursor:pointer; -} - -/* Specific display of threads in the wall */ -/* ------------------------------------------------------------ */ - -.openerp ul.oe_mail_wall_threads .oe_mail_msg_content textarea.oe_mail_compose_textarea { - width: 434px; - height: 30px; - padding: 4px; -} - -.openerp li.oe_mail_wall_thread:first .oe_mail_msg_notification { - border-top: 0; -} - -.openerp div.oe_thread_placeholder img { - width: 28px; - height: 28px; -} - -.openerp div.oe_thread_placeholder div.oe_mail_msg_content { - width: 440px; -} - - -/* ------------------------------------------------------------ */ -/* RecordThread -/* ------------------------------------------------------------ */ - -.openerp .oe_form div.oe_chatter { - overflow: auto; -} - -.openerp .oe_mail_record_wall { - margin: auto; - width: 560px; -} - -.openerp .oe_mail_record_wall > .oe_mail_wall_threads { - float: left; -} - -.openerp div.oe_mail_recthread_aside { - float: right; - width: 250px; -} - -.openerp div.oe_mail_recthread_actions { - margin-bottom: 8px; -} - -.openerp div.oe_mail_recthread_actions button { - width: 120px; -} - -.openerp .oe_mail_recthread_aside .oe_follower.oe_follow { - color: white; - background-color: #8a89ba; - background-image: -webkit-gradient(linear, left top, left bottom, from(#8a89ba), to(#807fb4)); - background-image: -webkit-linear-gradient(top, #8a89ba, #807fb4); - background-image: -moz-linear-gradient(top, #8a89ba, #807fb4); - background-image: -ms-linear-gradient(top, #8a89ba, #807fb4); - background-image: -o-linear-gradient(top, #8a89ba, #807fb4); - background-image: linear-gradient(to bottom, #8a89ba, #807fb4); -} -.openerp .oe_mail_recthread_aside .oe_follower.oe_following { - color: white; - background-color: #dc5f59; - background-image: -webkit-gradient(linear, left top, left bottom, from(#dc5f59), to(#b33630)); - background-image: -webkit-linear-gradient(top, #dc5f59, #b33630); - background-image: -moz-linear-gradient(top, #dc5f59, #b33630); - background-image: -ms-linear-gradient(top, #dc5f59, #b33630); - background-image: -o-linear-gradient(top, #dc5f59, #b33630); - background-image: linear-gradient(to bottom, #dc5f59, #b33630); -} - - -.openerp .oe_mail_recthread_aside .oe_follower span { - display:none; -} -.openerp .oe_mail_recthread_aside .oe_following span.oe_following, -.openerp .oe_mail_recthread_aside .oe_notfollow span.oe_follow { - display:block; -} - -.openerp div.oe_mail_recthread_followers { - margin-bottom: 8px; -} - - -/* ------------------------------------------------------------ */ -/* subtypes -/* ------------------------------------------------------------ */ - -.openerp .oe_mouse_subtypes { - display:inline-block; - position: relative; - z-index: 5; -} -.openerp .oe_mouse_subtypes .oe_recthread_subtypes { - background: #fff; - padding: 2px; - border: 1px solid #aaaaaa; - border-top: 0px; - position: absolute; - z-index: 2; -} -.openerp .oe_mouse_subtypes.oe_mouseout .oe_recthread_subtypes { - display: none; -} -.openerp .oe_mouse_subtypes.oe_mouseover .oe_recthread_subtypes { - display: block; -} - -/* ------------------------------------------------------------ */ -/* Thread -/* ------------------------------------------------------------ */ - -.openerp div.oe_mail_thread_action { - white-space: normal; - padding: 8px; - z-index:5; - background: #fff; -} - -.openerp div.oe_mail_thread_action:after { - content: ""; - display: block; - clear: both; -} - -/* default textarea (oe_mail_compose_textarea), and body textarea for compose form view */ -.openerp .oe_mail_msg_content textarea.oe_mail_compose_textarea:focus, -.openerp .oe_mail_msg_content div.oe_mail_compose_message_body textarea:focus { - outline: 0; - border-color: rgba(82, 168, 236, 0.8); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - -box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); -} - -.openerp .oe_mail_vote_count, -.openerp .oe_mail_msg_vote{ - vertical-align: bottom; -} - -.openerp div.oe_mail_thread_display { - white-space: normal; -} - -.openerp div.oe_thread_placeholder { - margin-left: 66px; -} - -.openerp li.oe_mail_thread_msg { - width: 560px; -} - -.openerp div.oe_thread_placeholder li.oe_mail_thread_msg:last-child { - margin-bottom: 8px; -} - -.openerp div.oe_mail_thread_more { - display: none; - border-bottom: 1px solid #D2D9E7; -} - -.openerp li.oe_mail_thread_msg:after { - content: ""; - display: block; - clear: both; -} - -.openerp li.oe_mail_thread_msg.oe_mail_read, -.openerp li.oe_mail_thread_msg.oe_mail_read div { - border-left: #F0F0F0; -} -.openerp li.oe_mail_thread_msg.oe_mail_read li.oe_mail_thread_msg.oe_mail_unread, -.openerp li.oe_mail_thread_msg.oe_mail_read li.oe_mail_thread_msg.oe_mail_unread div { - background-color: #F6F6F6; -} - -.openerp li.oe_mail_thread_msg.oe_mail_unread>div>ul>li.oe_unread, -.openerp li.oe_mail_thread_msg.oe_mail_read>div>ul>li.oe_read { - display: none; -} - -.openerp li.oe_mail_thread_msg > div:after { - content: ""; - display: block; - clear: both; -} - -.openerp div.oe_mail_msg { - padding: 0; - margin: 0 0 4px 0; -} - -.openerp .oe_mail_msg_notification, -.openerp .oe_mail_msg_expandable, -.openerp .oe_mail_msg_comment, -.openerp .oe_mail_msg_email { - padding: 8px; - background: white; - position: relative; -} - -.openerp .oe_mail_msg_notification:after, -.openerp .oe_mail_msg_comment:after, -.openerp .oe_mail_msg_email:after { - content: ""; - display: block; - clear: both; -} - -.openerp div.oe_mail_msg_content { - float: left; - position: relative; - width: 486px; -} - -.openerp div.oe_mail_msg_content > li { - float: left; - margin-right: 3px; -} - -.openerp .oe_mail_msg_content:after { - content: ""; - display: block; - clear: both; -} - -.openerp .oe_chatter a { - cursor: pointer; -} - -.openerp img.oe_mail_icon { - width: 50px; - height: 50px; -} - -.openerp img.oe_mail_thumbnail { - width: 28px; - height: 28px; - margin: 4px; -} - -.openerp img.oe_mail_frame { - text-align: center; - overflow: hidden; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -o-border-radius: 3px; - -ms-border-radius: 3px; + margin: 20px; + background: #EEE; + border: solid 1px #ccc; border-radius: 3px; - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); - -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); - -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); - clip: rect(5px, 40px, 45px, 0px); + padding: 8px; } - -.openerp .oe_mail_invisible { - display: none; +.openerp .oe_mail .oe_thread{ + margin-left: 8px; } - -/* ------------------------------------------------------------ */ -/* Messages layout -/* ------------------------------------------------------------ */ - -.openerp .oe_mail_msg .oe_mail_msg_title { - margin: 0; - font-size: 1.3em; - font-weight: bold; +.openerp .oe_mail .oe_thread.oe_root_thread{ + margin-left: 0px; } -.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 .oe_mail_msg_body { - margin-bottom: .5em; - text-align: justify; -} - -.openerp .oe_mail_msg .oe_mail_msg_body pre { - font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; - margin: 0px; - white-space: pre-wrap; - display: inline; -} - -/* Read more/less link */ -.openerp .oe_mail_msg span.oe_mail_reduce { - position: absolute; - right: 0; -} - -/* Dropdown menu */ - -.openerp .oe_mail ul.oe_mail_thread_display ul.oe_mail_thread_display { +.openerp .oe_mail .oe_msg{ position: relative; - border-left: 1px #DDD dashed; + background: blue; + margin-bottom: 4px; + min-height: 100px; } - -.openerp .oe_mail ul.oe_header { +.openerp .oe_mail .oe_msg .oe_msg_left{ position: absolute; - right: 3px; - top: -6px; - z-index: 10; + left:0; top: 0; bottom: 0; width: 75px; + background: red; + overflow: hidden; } - -.openerp .oe_mail ul.oe_header a { +.openerp .oe_mail .oe_msg .oe_msg_center{ + position: relative; + display: block; + margin-left: 75px; + margin-right: 32px; + background: gray; +} +.openerp .oe_mail .oe_msg .oe_msg_right{ + position: absolute; + right:0; top:0; bottom: 0; width: 32px; + background: fuchsia; + overflow: hidden; +} +.openerp .oe_mail .oe_msg .oe_msg_footer{ + height: 32px; + background: purple; + overflow: hidden; +} +.openerp .oe_mail .oe_msg .oe_msg_content{ + display: block; + background: yellow; +} +.openerp .oe_mail .oe_msg .oe_msg_icons a{ text-decoration: none; + display: block; + text-align: center; } - -.openerp .oe_mail ul.oe_header>li { - display: inline-block; - height: 20px; - text-align: right; -} - -/* Message footer */ -.openerp .oe_mail_msg .oe_mail_msg_footer { - color: #888; -} -.openerp .oe_mail_msg .oe_mail_msg_footer li { - float: left; - margin-right: 3px; -} -.openerp .oe_mail_msg .oe_mail_msg_footer li:after { - content: " · "; -} -.openerp .oe_mail_msg .oe_mail_msg_footer li:last-child:after { - content: ""; -} - -/* Attachments list */ -.openerp .oe_mail_msg_content ul.oe_mail_msg_attachments { +.openerp .oe_mail .oe_msg .oe_msg_content textarea{ width: 100%; - margin: .5em 0 0 0; - padding: .5em 0; - list-style-position: inside; + height: 100%; + margin: 0px; + padding: 0px; + resize: vertical; } -.openerp .oe_mail_msg_content ul.oe_mail_msg_attachments.oe_hidden { - display: none; -} -.openerp .oe_mail_msg_content ul.oe_mail_msg_attachments li { - float: none; - height: 20px; - line-height: 20px; - margin: 0; - padding: 0; - list-style-type: square; -} -.openerp .oe_mail_msg_content ul.oe_mail_msg_attachments .oe_upload_in_process { - float: right; - width: 200px; - height: 16px; -} -.openerp .oe_mail_msg_content ul.oe_mail_msg_attachments .oe_upload_in_process div { - float: left; - width: 38px; - height: 16px; - margin-right: 2px; - background: #66FF66; -} -.openerp .oe_mail_msg_content ul.oe_mail_msg_attachments .oe_upload_in_process span { - color: #aaaaaa; - position: absolute; -} - diff --git a/addons/mail/static/src/js/mail.js b/addons/mail/static/src/js/mail.js index d2f2358af5f..f3bf7e9b9fa 100644 --- a/addons/mail/static/src/js/mail.js +++ b/addons/mail/static/src/js/mail.js @@ -503,7 +503,7 @@ openerp.mail = function(session) { // record parameters var param = options.parameters; - for(var i in param){ + for(var i in param){ //FIXME this[i] = param[i]; } this.id = param.id || -1; @@ -644,7 +644,7 @@ openerp.mail = function(session) { } ); /*insert thread in parent message*/ - self.thread.appendTo(self.$el.find('div.oe_thread_placeholder')); + self.thread.replace(self.$('.oe_thread_placeholder')); }, animated_destroy: function(options) { @@ -1052,7 +1052,7 @@ openerp.mail = function(session) { 'parameters': message }); } else { - var message = new mail.ThreadMessage(self, { + var message = new mail.ThreadMessage(self, { //FIXME 'domain': message.domain, 'context': { 'default_model': message.model, @@ -1227,7 +1227,7 @@ openerp.mail = function(session) { var thread_displayed = this.message_render(); this.options.domain = this.options.domain.concat(this.search_results['domain']); this.bind_events(); - return (searchview_ready && thread_displayed); + return (searchview_ready && thread_displayed); //FIXME }, /** @@ -1293,7 +1293,7 @@ openerp.mail = function(session) { bind_events: function(){ var self=this; - this.$("button.oe_write_full:first").click(function(){ self.thread.ComposeMessage.on_compose_fullmail(); }); + this.$("button.oe_write_full:first").click(function(){ self.thread.ComposeMessage.on_compose_fullmail(); }); //FIXME this.$("button.oe_write_onwall:first").click(function(){ self.thread.ComposeMessage.$el.toggle(); }); } }); diff --git a/addons/mail/static/src/xml/mail.xml b/addons/mail/static/src/xml/mail.xml index 7ef47986542..14e656cc6fe 100644 --- a/addons/mail/static/src/xml/mail.xml +++ b/addons/mail/static/src/xml/mail.xml @@ -1,6 +1,12 @@