[MERGE] OpenChatter 5.Pi "Stylin' in the rain", with a better Chatter widget, CSS and behavior.

This web-side revision brings a new web widget for attachments, in order to upload one or more file in same time and display them as a list. Files deletion is supported. The blockui option allows to block the UI while the file is uploaded.

bzr revid: tde@openerp.com-20121029144755-7xibc7a3ndmby898

2 files changed, 134 insertions, 3 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 17b65ae91be..2ab5b9dc2d3 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -2931,6 +2931,76 @@ div.ui-widget-overlay {
   border-radius: 3px;
 }
 
+.openerp .oe_fileupload {
+    display: inline-block;
+    clear: both;
+    width: 100%;
+}
+.openerp .oe_fileupload .oe_add {
+    float: left;
+    position: relative;
+    width: 100%;
+    left: +2px;
+    top: +7px;
+}
+.openerp .oe_fileupload .oe_add button{
+    display: inline;
+    height: 24px;
+    font-size: 12px;
+    line-height: 12px;
+    vertical-align: middle;
+}
+.openerp .oe_fileupload .oe_add button.oe_attach {
+    width: 24px;
+    overflow: hidden;
+    background: transparent; 
+    color: #7C7BAD;
+    box-shadow: none;
+    border: none;
+    text-shadow: none;
+}
+.openerp .oe_fileupload .oe_add .oe_attach_label{
+    color: #7C7BAD;
+    margin-left: -3px;
+}
+.openerp .oe_fileupload .oe_add button.oe_attach .oe_e{
+    position: relative;
+    top: -1px;
+    left: -9px;
+}
+.openerp .oe_fileupload .oe_add input.oe_form_binary_file{
+    display: inline-block;
+    margin-left: -5px;
+    height: 28px;
+    width: 52px;
+    margin-top: -26px;
+}
+.openerp .oe_fileupload .oe_attachments {
+    margin-bottom: 4px;
+    margin-right: 0px;
+    font-size: 12px;
+    border-radius: 2px;
+    border: solid 1px rgba(124,123,173,0.14);
+}
+.openerp .oe_fileupload .oe_attachments .oe_attachment{
+    padding: 2px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+.openerp .oe_fileupload .oe_attachments .oe_attachment .oe_e{
+    font-size: 23px;
+    margin-top: -5px;
+}
+.openerp .oe_fileupload .oe_attachments .oe_attachment .oe_e:hover{
+    text-decoration: none;
+}
+.openerp .oe_fileupload .oe_attachments .oe_attachment:nth-child(odd){
+    background:white;
+}
+.openerp .oe_fileupload .oe_attachments .oe_attachment:nth-child(even){
+    background: #F4F5FA;
+}
+
 @media print {
   .openerp {
     text-shadow: none;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 15e1898883d..76951a09ba5 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -316,7 +316,7 @@ $sheet-padding: 16px
                     text-decoration: none
         .oe_about
             background-color: white
-            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
+            background-image: url(data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
             @include radius(0 0 2px 2px)
             a
                 color: $link-color
@@ -681,7 +681,7 @@ $sheet-padding: 16px
     // }}}
     // Login {{{
     .oe_login
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
+        background-image: url(data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
         text-align: center
         font-size: 14px
         height: 100%
@@ -1028,7 +1028,7 @@ $sheet-padding: 16px
     // About openerp {{{
     .oe_about
         background-color: white
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
+        background-image: url(data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
         @include radius(0 0 2px 2px)
         a
             color: $link-color
@@ -2278,6 +2278,67 @@ $sheet-padding: 16px
         float: right
         color: #333
     // }}}
+
+.openerp
+    .oe_fileupload
+        display: inline-block
+        clear: both
+        width: 100%
+        .oe_add
+            float: left
+            position: relative
+            width: 100%
+            left: +2px
+            top: +7px
+            button
+                display: inline
+                height: 24px
+                font-size: 12px
+                line-height: 12px
+                vertical-align: middle
+            button.oe_attach
+                width: 24px
+                overflow: hidden
+                width: 24px
+                overflow: hidden
+                background: transparent 
+                color: #7C7BAD
+                box-shadow: none
+                border: none
+                text-shadow: none
+                .oe_e
+                    position: relative
+                    top: -1px
+                    left: -9px
+            input.oe_form_binary_file
+                display: inline-block
+                margin-left: -5px
+                height: 28px
+                width: 52px
+                margin-top: -26px
+            .oe_attach_label
+                color: #7C7BAD
+                margin-left: -3px
+        .oe_attachments
+            margin-bottom: 4px
+            margin-right: 0px
+            font-size: 12px
+            border-radius: 2px
+            border: solid 1px rgba(124,123,173,0.14)
+            .oe_attachment
+                padding: 2px
+                padding-left: 4px
+                padding-right: 4px
+                .oe_e
+                    font-size: 23px
+                    margin-top: -5px
+                .oe_e:hover
+                    text-decoration: none
+            .oe_attachment:nth-child(odd)
+                background:white
+            .oe_attachment:nth-child(even)
+                background: #F4F5FA
+
 // Kitten Mode {{{
 .kitten-mode-activated
     background-image: url(http://placekitten.com/g/1365/769)