[IMP] web_editor, *: improve file media widget views & selection

* = web_unsplash, website_blog

Rename "image" to "attachment" when appropriate in FileWidget

Improve image selection / highlight code (now based on attachment id)

Improve image grid view:
 - Remove the row mechanism and replace it by a single loop over the images.
 - Take advantage of row wrap for a responsive display.
 - Uniformize the height (prevent tall images from moving down everything).
 - Load a miniature of the images when possible, remove the loading placeholder.
 	This should significantly reduce the download size when opening the dialog,
 	at the cost of CPU usage on the server.
 - Split the existing image view into one view for the loop and one view for the
 	image itself. This way in a following commit we can reuse the image view
 	when adding a new one, instead of having to render everything again.

task-1930726
PR: #31208

1 files changed, 27 insertions, 26 deletions

diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 952944fe4ce..2cdb6ee1fca 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -287,51 +287,52 @@ body .modal {
                 min-height: 300px;
             }
 
-            .existing-attachments {
-                width: 100%;
+            .o_we_images .o_existing_attachment_cell {
+                // give enough space for the hover buttons
+                min-width: 64px;
+                img {
+                    // prevent url images from being too big
+                    max-width: 256px;
+                    max-height: 192px;
+                }
             }
 
             .o_existing_attachment_cell {
-                $o-border-image: 2px;
+                cursor: pointer;
+                list-style: none;
+
+                // prevent hover/select border from flickering
+                border: 1px solid transparent;
 
                 .o_existing_attachment_remove {
-                    @include o-position-absolute($o-border-image, 15px + $o-border-image);
-                    padding: 3px 5px 5px 5px;
-                    background-color: rgba(white, 0.8);
+                    @include o-position-absolute(0, 0);
+                    background-color: scale-color($card-border-color, $alpha: -50%);
                     text-shadow: 0 0 1px white;
                     border-radius: 0 0 0 2px;
                     opacity: 0;
                     cursor: pointer;
 
                     &:hover {
-                        background-color: white;
+                        background-color: $card-border-color;
                         color: $o-wysiwyg-color-danger;
                     }
                 }
 
-                .o_image {
-                    border: $o-border-image solid transparent;
-                    cursor: pointer;
-                    transition: opacity 400ms ease 0s;
-
-                    &.o_webimage {
-                        width: 100%;
-                        height: auto;
-                        background-image: none !important;
+                &:hover {
+                    .o_existing_attachment_remove {
+                        opacity: 1;
                     }
-
-                    &.o_image_loading {
-                        opacity: 0;
+                    &.o_we_attachment_highlight, .o_we_attachment_highlight {
+                        border-color: $card-border-color;
+                        box-shadow: 0px 0px 2px 2px $card-border-color;
                     }
                 }
 
-                &.o_selected .o_image {
-                    border-color: $o-brand-odoo;
-                    box-shadow: 0px 0px 2px 2px $o-brand-secondary;
-                }
-
-                &:hover .o_existing_attachment_remove {
-                    opacity: 1;
+                &.o_we_attachment_selected {
+                    &.o_we_attachment_highlight, .o_we_attachment_highlight {
+                        border-color: $o-brand-primary;
+                        box-shadow: 0px 0px 2px 2px $o-brand-primary;
+                    }
                 }
             }