[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

1 files changed, 1 insertions, 105 deletions

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%;