odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[IMP] view form: one2many_binary, css like chatter attachment 

bzr revid: chm@openerp.com-20121029105947-67lynhgjmbadvb3k
This commit is contained in:
Christophe Matthieu 2012-10-29 11:59:47 +01:00
parent aff07e0ce3
commit 7371f63bd0
4 changed files with 116 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
addons/web/static/src/css/base.css
View File

@ -2932,46 +2932,75 @@ div.ui-widget-overlay {
border-radius: 3px; border-radius: 3px;
} }
.openerp .oe_fileuploader { .openerp .oe_fileupload {
display: inline-block; display: inline-block;
clear: both; clear: both;
width: 100%;
} }
.openerp .oe_fileuploader .oe_add { .openerp .oe_fileupload .oe_add {
float: left; float: left;
width: 24px;
height: 24px;
position: relative; position: relative;
width: 100%;
left: +2px; left: +2px;
top: +7px; top: +7px;
overflow: hidden;
} }
.openerp .oe_fileuploader .oe_add button { .openerp .oe_fileupload .oe_add button{
position: absolute; display: inline;
bottom: +0px;
left: +0px;
height: 24px; height: 24px;
font-size: 12px;
line-height: 12px;
vertical-align: middle;
}
.openerp .oe_fileupload .oe_add button.oe_attach {
width: 24px; width: 24px;
margin: 0px; overflow: hidden;
padding: 0px; background: transparent;
color: #7C7BAD;
box-shadow: none;
border: none;
text-shadow: none;
} }
.openerp .oe_fileuploader .oe_add .oe_hidden_input_file input.oe_form_binary_file { .openerp .oe_fileupload .oe_add .oe_attach_label{
width: 300px; color: #7C7BAD;
left: -100px; margin-left: -3px;
top: 1px;
height: 24px;
width: 300px;
background: transparent;
border: 0;
margin: 0px;
padding: 0px;
color: transparent;
} }
.openerp .oe_fileuploader .oe_add button span { .openerp .oe_fileupload .oe_add button.oe_attach .oe_e{
position: relative; position: relative;
bottom: +4px; top: -1px;
font-size: 30px; 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 { @media print {
.openerp { .openerp {

100
addons/web/static/src/css/base.sass
View File

@ -314,7 +314,7 @@ $sheet-max-width: 860px
text-decoration: none text-decoration: none
.oe_about .oe_about
background-color: white 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) @include radius(0 0 2px 2px)
a a
color: $link-color color: $link-color
@ -679,7 +679,7 @@ $sheet-max-width: 860px
// }}} // }}}
// Login {{{ // Login {{{
.oe_login .oe_login
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=) background-image: url(data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=)
text-align: center text-align: center
font-size: 14px font-size: 14px
height: 100% height: 100%
@ -1026,7 +1026,7 @@ $sheet-max-width: 860px
// About openerp {{{ // About openerp {{{
.oe_about .oe_about
background-color: white 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) @include radius(0 0 2px 2px)
a a
color: $link-color color: $link-color
@ -2277,63 +2277,65 @@ $sheet-max-width: 860px
color: #333 color: #333
// }}} // }}}
.openerp .oe_fileuploader .oe_add .oe_hidden_input_file input.oe_form_binary_file { .openerp
width: 300px; .oe_fileupload
left: -100px;
top: 1px;
height: 24px;
width: 300px;
background: transparent;
border: 0;
margin: 0px;
padding: 0px;
color: transparent;
}
.openerp .oe_fileuploader .oe_add button span {
position: relative;
bottom: +4px;
font-size: 30px;
}
.openerp .oe_fileuploader {
clear: both;
}
.oe_fileuploader
display: inline-block display: inline-block
clear: both clear: both
width: 100%
.oe_add .oe_add
float: left float: left
width: 24px
height: 24px
position: relative position: relative
z-index: 10 width: 100%
left: +2px left: +2px
top: +7px top: +7px
overflow: hidden
button button
position: absolute display: inline
bottom: +0px
left: +0px
height: 24px height: 24px
font-size: 12px
line-height: 12px
vertical-align: middle
button.oe_attach
width: 24px width: 24px
margin: 0px overflow: hidden
padding: 0px 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 input.oe_form_binary_file
width: 300px display: inline-block
left: -100px margin-left: -5px
top: 1px height: 28px
height: 24px width: 52px
width: 300px margin-top: -26px
background: transparent .oe_attach_label
border: 0 color: #7C7BAD
margin: 0px margin-left: -3px
padding: 0px .oe_attachments
color: transparent margin-bottom: 4px
button span margin-right: 0px
position: relative font-size: 12px
bottom: +4px border-radius: 2px
font-size: 30px 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 {{{
.kitten-mode-activated .kitten-mode-activated

8
addons/web/static/src/js/view_form.js
View File

@ -4674,7 +4674,7 @@ instance.web.form.FieldBinary = instance.web.form.AbstractField.extend(instance.
this.binary_value = false; this.binary_value = false;
this.useFileAPI = !!window.FileReader; this.useFileAPI = !!window.FileReader;
if (!this.useFileAPI) { if (!this.useFileAPI) {
this.fileupload_id = _.uniqueId('oe_fileupload'); this.fileupload_id = _.uniqueId('oe_attachmentupload');
$(window).on(this.fileupload_id, function() { $(window).on(this.fileupload_id, function() {
var args = [].slice.call(arguments).slice(1); var args = [].slice.call(arguments).slice(1);
self.on_file_uploaded.apply(self, args); self.on_file_uploaded.apply(self, args);
@ -4906,12 +4906,12 @@ instance.web.form.FieldOne2ManyBinaryMultiFiles = instance.web.form.AbstractFiel
render_value: function () { render_value: function () {
var render = $(instance.web.qweb.render('FieldBinaryFileUploader.files', {'widget': this})); var render = $(instance.web.qweb.render('FieldBinaryFileUploader.files', {'widget': this}));
render.on('click', '.oe_delete', _.bind(this.on_file_delete, this)); render.on('click', '.oe_delete', _.bind(this.on_file_delete, this));
this.$('.oe_placeholder_files, .oe_files').replaceWith( render ); this.$('.oe_placeholder_files, .oe_attachments').replaceWith( render );
// reinit input type file // reinit input type file
var $input = this.$('input.oe_form_binary_file'); var $input = this.$('input.oe_form_binary_file');
$input.after($input.clone(true)).remove(); $input.after($input.clone(true)).remove();
this.$(".oe_fileuploader").show(); this.$(".oe_fileupload").show();
}, },
on_file_change: function (event) { on_file_change: function (event) {
event.stopPropagation(); event.stopPropagation();
@ -4945,7 +4945,7 @@ instance.web.form.FieldOne2ManyBinaryMultiFiles = instance.web.form.AbstractFiel
// submit file // submit file
this.$('form.oe_form_binary_form').submit(); this.$('form.oe_form_binary_form').submit();
this.$(".oe_fileuploader").hide(); this.$(".oe_fileupload").hide();
// add file on result // add file on result
files.push({ files.push({

11
addons/web/static/src/xml/base.xml
View File

@ -1175,9 +1175,9 @@
</div> </div>
</t> </t>
<t t-name="FieldBinaryFileUploader.files"> <t t-name="FieldBinaryFileUploader.files">
<div class="oe_files"> <div class="oe_attachments">
<t t-if="!widget.get('effective_readonly')" t-foreach="widget.get('value')" t-as="file"> <t t-if="!widget.get('effective_readonly')" t-foreach="widget.get('value')" t-as="file">
<div> <div class="oe_attachment">
<span t-if="(file.upload or file.percent_loaded&lt;100)" t-attf-title="{(file.name || file.filename) + (file.date?' \n('+file.date+')':'' )}" t-attf-name="{file.name || file.filename}"> <span t-if="(file.upload or file.percent_loaded&lt;100)" t-attf-title="{(file.name || file.filename) + (file.date?' \n('+file.date+')':'' )}" t-attf-name="{file.name || file.filename}">
<span class="oe_fileuploader_in_process">...Upload in progress...</span> <span class="oe_fileuploader_in_process">...Upload in progress...</span>
<t t-raw="file.name || file.filename"/> <t t-raw="file.name || file.filename"/>
@ -1186,7 +1186,7 @@
<t t-raw="file.name || file.filename"/> <t t-raw="file.name || file.filename"/>
</a> </a>
<t t-if="(!file.upload or file.percent_loaded&gt;=100)"> <t t-if="(!file.upload or file.percent_loaded&gt;=100)">
<a class="oe_delete" title="Delete this file" t-attf-data-id="{file.id}">x</a> <a class="oe_right oe_delete oe_e" title="Delete this file" t-attf-data-id="{file.id}">[</a>
</t> </t>
</div> </div>
</t> </t>
@ -1200,11 +1200,12 @@
</div> </div>
</t> </t>
<t t-name="FieldBinaryFileUploader"> <t t-name="FieldBinaryFileUploader">
<div t-att-style="widget.node.attrs.style" t-attf-class="oe_fileuploader #{widget.node.attrs.class ? widget.node.attrs.class :''}"> <div t-att-style="widget.node.attrs.style" t-attf-class="oe_fileupload #{widget.node.attrs.class ? widget.node.attrs.class :''}">
<div class="oe_placeholder_files"/> <div class="oe_placeholder_files"/>
<div class="oe_add" t-if="!widget.get('effective_readonly')"> <div class="oe_add" t-if="!widget.get('effective_readonly')">
<!-- uploader of file --> <!-- uploader of file -->
<button><span class="oe_e">p</span></button> <button class="oe_attach"><span class="oe_e">'</span></button>
<span class='oe_attach_label'>File</span>
<t t-call="HiddenInputFile"> <t t-call="HiddenInputFile">
<t t-set="fileupload_id" t-value="widget.fileupload_id"/> <t t-set="fileupload_id" t-value="widget.fileupload_id"/>
<t t-set="fileupload_action">/web/binary/upload_attachment</t> <t t-set="fileupload_action">/web/binary/upload_attachment</t>