pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[MOV/IMP] web, mail: update attachment widget and moved the common scss code from mail to web

Browse Source 
with this commit, we have updated the attachment widget view same as like chatter attachment view
moved the common scss code from mail to web for many2many_binary widget, which is used for attachment
and update test case according to the widget

Task ID: 1930087
This commit is contained in:
jpr-odoo
2019-04-12 09:04:28 +00:00
parent d6d7554a6e
commit ee0a5ca449
7 changed files with 159 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/scss/composer.scss
+1 -105
View File
@@ -284,116 +284,12 @@
}
// Attachment Icons (common for chat thread and chat composer)
// ------------------------------------------------------------------
$o-mail-attachment-image-size: 38px;
$o-mail-attachment-margin: 5px;
.o_attachments_list, .o_attachments_previews {
margin: 0 (-$o-mail-attachment-margin) 0;
margin: 0 (-$o-attachment-margin) 0;
display: flex;
flex-flow: row wrap;
}
.o_attachment {
position: relative;
width: 100%;
padding: $o-mail-attachment-margin;
@include media-breakpoint-up(md) {
width: 50%;
}
@include media-breakpoint-up(lg) {
width: 25%;
}
.o_attachment_wrap {
overflow: hidden;
position: relative;
border-bottom: 1px solid rgba(black, 0.1);
border-radius: 2px;
padding: 4px 6px 0 4px;
background-color: rgba(black, 0.05);
.o_attachment_delete_cross {
float: right;
cursor: pointer;
}
}
&.o_attachment_editable .o_attachment_wrap {
padding-right: 40px;
}
.o_image {
width: $o-mail-attachment-image-size;
height: $o-mail-attachment-image-size;
image-orientation: from-image; // Only supported in Firefox
&.o_hover {
@include o-hover-opacity($default-opacity: 1, $hover-opacity: 0.7);
}
}
.o_attachment_view {
cursor: zoom-in;
}
.caption {
@include o-text-overflow(block);
a {
@include o-hover-text-color($default-color: $o-main-text-color, $hover-color: $headings-color);
}
}
.o_attachment_progress_bar {
display: none;
}
.o_attachment_uploaded, .o_attachment_delete {
@include o-position-absolute(0, 0, 0, $left: auto);
display: flex;
align-items: center;
justify-content: center;
width: 45px;
}
.o_attachment_delete {
background: desaturate(theme-color('primary'), 50%);
color: white;
cursor: pointer;
font-size: 20px;
transform: translateX(100%);
transition: all 0.3s ease 0s;
&:hover {
background: theme-color('primary');
}
}
&.o_attachment_uploading {
.o_attachment_progress_bar {
display: inline-block;
margin: 0 0 0 8px;
border-radius: 2px;
vertical-align: bottom;
> div {
font-size: 11px;
padding: 0 7px;
}
}
.o_attachment_delete, .o_attachment_uploaded {
display: none;
}
}
&:hover .o_attachment_delete {
transition: all 0.1s ease 0s;
transform: translateX(0);
}
}
.o_attachments_previews {
> .o_attachment {
width: 50%;
addons/web/static/src/js/fields/relational_fields.js
+2 -2
View File
@@ -1752,7 +1752,7 @@ var FieldMany2ManyBinaryMultiFiles = AbstractField.extend({
},
events: {
'click .o_attach': '_onAttach',
'click .oe_delete': '_onDelete',
'click .o_attachment_delete': '_onDelete',
'change .o_input_file': '_onFileChanged',
},
/**
@@ -1817,7 +1817,7 @@ var FieldMany2ManyBinaryMultiFiles = AbstractField.extend({
// render the attachments ; as the attachments will changes after each
// _setValue, we put the rendering here to ensure they will be updated
this._generatedMetadata();
this.$('.oe_placeholder_files, .oe_attachments')
this.$('.oe_placeholder_files, .o_attachments')
.replaceWith($(qweb.render(this.template_files, {
widget: this,
})));
addons/web/static/src/scss/attachment_preview.scss
+113
View File
@@ -0,0 +1,113 @@
// Attachment Icons (common for many2many_binary widget and chat thread and chat composer)
// ------------------------------------------------------------------
$o-attachment-image-size: 38px;
$o-attachment-margin: 5px;
.o_attachment {
position: relative;
width: 100%;
padding: $o-attachment-margin;
@include media-breakpoint-up(md) {
width: 50%;
}
@include media-breakpoint-up(lg) {
width: 25%;
}
// many2many_binary widget for send mail with attachment
&.o_attachment_many2many {
@include media-breakpoint-up(md) {
width: 50%;
}
@include media-breakpoint-up(lg) {
width: 62%;
}
}
.o_attachment_wrap {
overflow: hidden;
position: relative;
border-bottom: 1px solid rgba(black, 0.1);
border-radius: 2px;
padding: 4px 6px 0 4px;
background-color: rgba(black, 0.05);
.o_attachment_delete_cross {
float: right;
cursor: pointer;
}
}
&.o_attachment_editable .o_attachment_wrap {
padding-right: 40px;
}
.o_image {
width: $o-attachment-image-size;
height: $o-attachment-image-size;
image-orientation: from-image; // Only supported in Firefox
&.o_hover {
@include o-hover-opacity($default-opacity: 1, $hover-opacity: 0.7);
}
}
.o_attachment_view {
cursor: zoom-in;
}
.caption {
@include o-text-overflow(block);
a {
@include o-hover-text-color($default-color: $o-main-text-color, $hover-color: $headings-color);
}
}
.o_attachment_progress_bar {
display: none;
}
.o_attachment_uploaded, .o_attachment_delete {
@include o-position-absolute(0, 0, 0, $left: auto);
display: flex;
align-items: center;
justify-content: center;
width: 45px;
}
.o_attachment_delete {
background: desaturate(theme-color('primary'), 50%);
color: white;
cursor: pointer;
font-size: 20px;
transform: translateX(100%);
transition: all 0.3s ease 0s;
&:hover {
background: theme-color('primary');
}
}
&.o_attachment_uploading {
.o_attachment_progress_bar {
display: inline-block;
margin: 0 0 0 8px;
border-radius: 2px;
vertical-align: bottom;
> div {
font-size: 11px;
padding: 0 7px;
}
}
.o_attachment_delete, .o_attachment_uploaded {
display: none;
}
}
&:hover .o_attachment_delete {
transition: all 0.1s ease 0s;
transform: translateX(0);
}
}
addons/web/static/src/scss/form_view.scss
-13
View File
@@ -574,19 +574,6 @@
display: none; // Hide the handler on readonly fields
}
// Attachments
.oe_attachment {
display: inline-block;
border: 1px solid $o-brand-lightsecondary;
margin: 0 $o-form-spacing-unit $o-form-spacing-unit 0;
padding: $o-form-spacing-unit;
width:45%;
background-color: rgba(black, 0.05);
.caption {
@include o-text-overflow(block);
}
}
&.oe_form_configuration {
.o_group .o_form_label {
white-space: nowrap;
addons/web/static/src/xml/base.xml
+38 -25
View File
@@ -1089,33 +1089,46 @@
</t>
</div>
</div>
<div t-name="FieldBinaryFileUploader.files" class="oe_attachments" aria-atomic="true">
<t t-if="widget.mode === 'readonly'">
<div t-foreach="widget.value.data" t-as="file">
<a target="_blank" t-att-href="widget.metadata[file.id].url" t-attf-title="#{(file.data.name || file.data.filename) + (file.data.date?' \n('+file.data.date+')':'' )}"><t t-raw="file.data.name || file.data.filename"/></a>
</div>
</t>
<t t-else="1">
<div t-foreach="widget.value.data" t-as="file" class="oe_attachment">
<t t-if="!file.data.upload">
<div>
<a href="#" class="fa fa-times float-right oe_delete" title="Delete this file" aria-label="Delete this file" t-att-data-id="file.data.id"/>
<div class="caption"><t t-raw="file.data.name || file.data.filename"/></div>
<t t-name="FieldBinaryFileUploader.attachment_preview">
<t t-set="url" t-value="widget.metadata[file.id] ? widget.metadata[file.id].url : false"/>
<t t-if="file.data" t-set="file" t-value="file.data"/>
<t t-set="editable" t-value="widget.mode === 'edit'"/>
<t t-if="file.mimetype" t-set="mimetype" t-value="file.mimetype"/>
<div t-attf-class="o_attachment o_attachment_many2many #{ editable ? 'o_attachment_editable' : '' } #{upload ? 'o_attachment_uploading' : ''}" t-att-title="file.name">
<div class="o_attachment_wrap">
<t t-set="ext" t-value="file.name.replace(/^.*\./, '')"/>
<div class="o_image_box float-left" t-att-data-id="file.id">
<a t-att-href="url" t-att-title="'Download ' + file.name" aria-label="Download">
<span class="o_image o_hover" t-att-data-mimetype="mimetype" t-att-data-ext="ext" role="img"/>
</a>
</div>
<div class="caption">
<a class="ml4" t-att-href="url" t-att-title="'Download ' + file.name"><t t-esc='file.name'/></a>
</div>
<div class="caption small">
<a class="ml4 small text-uppercase" t-att-href="url" t-att-title="'Download ' + file.name"><b><t t-esc='ext'/></b></a>
<div t-if="editable" class="progress o_attachment_progress_bar">
<div class="progress-bar progress-bar-striped active" style="width: 100%">Uploading</div>
</div>
<a class="o_image" target="_blank" t-att-href="widget.metadata[file.id] ? widget.metadata[file.id].url : false"
t-att-title="file.data.name"
t-att-aria-label="file.data.name"
t-att-data-mimetype="file.data.mimetype"
t-attf-data-src="/web/image/#{file.data.id}/100x80"/>
</t>
</div>
<div t-foreach="widget.uploadingFiles" t-as="file" class="oe_attachment">
<div>Uploading...</div>
<a t-att-title="file.name" t-att-aria-label="file.name" t-att-name="file.name" class="o_image">
<i class="fa fa-spinner fa-spin fa-5x fa-fw" role="img" aria-label="Loading, please wait..." title="Loading, please wait..."></i>
</a>
<div><t t-esc="file.name"/></div>
</div>
<div t-if="editable" class="o_attachment_uploaded"><i class="text-success fa fa-check" role="img" aria-label="Uploaded" title="Uploaded"/></div>
<div t-if="editable" class="o_attachment_delete" t-att-data-id="file.id"><span class="text-white" role="img" aria-label="Delete" title="Delete">×</span></div>
</div>
</div>
</t>
<div t-name="FieldBinaryFileUploader.files" class="o_attachments" aria-atomic="true">
<!-- uploaded files -->
<t t-foreach="widget.value.data" t-as="file">
<t t-if="!file.data.upload" t-call="FieldBinaryFileUploader.attachment_preview"/>
</t>
<!-- uploading files -->
<t t-foreach="widget.uploadingFiles" t-as="file">
<t t-set="upload" t-value="true"/>
<t t-call="FieldBinaryFileUploader.attachment_preview"/>
</t>
</div>
addons/web/static/tests/fields/relational_fields_tests.js
+4 -5
View File
@@ -2253,11 +2253,11 @@ QUnit.module('relational_fields', {
assert.containsOnce(form, 'div.o_field_widget.oe_fileupload',
"there should be the attachment widget");
assert.strictEqual(form.$('div.o_field_widget.oe_fileupload .oe_attachments').children().length, 1,
assert.strictEqual(form.$('div.o_field_widget.oe_fileupload .o_attachments').children().length, 1,
"there should be no attachment");
assert.containsNone(form, 'div.o_field_widget.oe_fileupload .o_attach',
"there should not be an Add button (readonly)");
assert.containsNone(form, 'div.o_field_widget.oe_fileupload .oe_attachment .oe_delete',
assert.containsNone(form, 'div.o_field_widget.oe_fileupload .o_attachment .o_attachment_delete',
"there should not be a Delete button (readonly)");
// to edit mode
@@ -2273,8 +2273,7 @@ QUnit.module('relational_fields', {
// no idea how to test this
// delete the attachment
await testUtils.dom.click(form.$('div.o_field_widget.oe_fileupload .oe_attachment .oe_delete'));
await testUtils.dom.click(form.$('div.o_field_widget.oe_fileupload .o_attachment .o_attachment_delete'));
assert.verifySteps([
'/web/dataset/call_kw/turtle/read',
@@ -2283,7 +2282,7 @@ QUnit.module('relational_fields', {
await testUtils.form.clickSave(form);
assert.strictEqual(form.$('div.o_field_widget.oe_fileupload .oe_attachments').children().length, 0,
assert.strictEqual(form.$('div.o_field_widget.oe_fileupload .o_attachments').children().length, 0,
"there should be no attachment");
assert.verifySteps([
addons/web/views/webclient_templates.xml
+1
View File
@@ -185,6 +185,7 @@
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/search_view_extra.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/data_export.scss"/>
<link rel="stylesheet" type="text/scss" href="/base/static/src/scss/onboarding.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/attachment_preview.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/base_settings.scss"/>
<script type="text/javascript" src="/base/static/src/js/res_config_settings.js"></script>