From ee0a5ca4490ee83a0ed9d6e4f7382246b50da170 Mon Sep 17 00:00:00 2001 From: jpr-odoo Date: Mon, 18 Feb 2019 06:47:16 +0000 Subject: [PATCH] [MOV/IMP] web, mail: update attachment widget and moved the common scss code from mail to web 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 --- addons/mail/static/src/scss/composer.scss | 106 +--------------- .../static/src/js/fields/relational_fields.js | 4 +- .../static/src/scss/attachment_preview.scss | 113 ++++++++++++++++++ addons/web/static/src/scss/form_view.scss | 13 -- addons/web/static/src/xml/base.xml | 63 ++++++---- .../tests/fields/relational_fields_tests.js | 9 +- addons/web/views/webclient_templates.xml | 1 + 7 files changed, 159 insertions(+), 150 deletions(-) create mode 100644 addons/web/static/src/scss/attachment_preview.scss diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss index 75c62bbeae0..3eae93b03cd 100644 --- a/addons/mail/static/src/scss/composer.scss +++ b/addons/mail/static/src/scss/composer.scss @@ -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%; diff --git a/addons/web/static/src/js/fields/relational_fields.js b/addons/web/static/src/js/fields/relational_fields.js index 0f247ba3a8d..642fa55b33e 100644 --- a/addons/web/static/src/js/fields/relational_fields.js +++ b/addons/web/static/src/js/fields/relational_fields.js @@ -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, }))); diff --git a/addons/web/static/src/scss/attachment_preview.scss b/addons/web/static/src/scss/attachment_preview.scss new file mode 100644 index 00000000000..eca2527f523 --- /dev/null +++ b/addons/web/static/src/scss/attachment_preview.scss @@ -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); + } +} diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss index bf909bc915e..8bcaba31ee3 100644 --- a/addons/web/static/src/scss/form_view.scss +++ b/addons/web/static/src/scss/form_view.scss @@ -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; diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml index f2b7c9653c6..6d00f21ab6f 100644 --- a/addons/web/static/src/xml/base.xml +++ b/addons/web/static/src/xml/base.xml @@ -1089,33 +1089,46 @@ -
- -
- -
- - -
- -
- -
+ + + + + + +
+
+ +
+ + + +
+ +
+ +
+
+ +
+
Uploading
- - -
-
-
Uploading...
- - - -
+
+ +
+
×
+
+ + +
+ + + + + + + +
diff --git a/addons/web/static/tests/fields/relational_fields_tests.js b/addons/web/static/tests/fields/relational_fields_tests.js index 406370b0a2b..6f72b827cae 100644 --- a/addons/web/static/tests/fields/relational_fields_tests.js +++ b/addons/web/static/tests/fields/relational_fields_tests.js @@ -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([ diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml index 5e5a19a85ba..47ab9a9af15 100644 --- a/addons/web/views/webclient_templates.xml +++ b/addons/web/views/webclient_templates.xml @@ -185,6 +185,7 @@ +