From 6b41d2081532eabb0f6b602f897fbe79ca498b87 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Thu, 28 Jul 2022 19:50:40 +0000
Subject: [PATCH] [ADD] web, *: `transition-x` utility classes

Define classes for some default bootstrap transitions + 'none'.
These values are generic enough to fit different circumstances.

Classes added:
- transition-base
- transition-fade
- transition-none

Part of the overall v16 SCSS optimization/restyle, task-2704984.

task-2918463

closes odoo/odoo#97051

Related: odoo/enterprise#30066
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 .../src/components/attachment_card/attachment_card.scss   | 8 --------
 .../src/components/attachment_card/attachment_card.xml    | 2 +-
 .../components/attachment_viewer/attachment_viewer.scss   | 8 --------
 .../components/attachment_viewer/attachment_viewer.xml    | 2 +-
 addons/rating/static/src/scss/rating_templates.scss       | 1 -
 addons/rating/views/rating_templates.xml                  | 2 +-
 .../web/static/src/libs/bootstrap/utilities_custom.scss   | 8 ++++++++
 7 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/addons/mail/static/src/components/attachment_card/attachment_card.scss b/addons/mail/static/src/components/attachment_card/attachment_card.scss
index 18c3e1ee709..d542778596e 100644
--- a/addons/mail/static/src/components/attachment_card/attachment_card.scss
+++ b/addons/mail/static/src/components/attachment_card/attachment_card.scss
@@ -35,11 +35,3 @@
 .o_AttachmentCard_image.o-attachment-viewable {
     cursor: zoom-in;
 }
-
-// ------------------------------------------------------------------
-// Animation
-// ------------------------------------------------------------------
-
-.o_AttachmentCard_asideItemUnlink.o-pretty {
-    transition: transform 0.3s ease 0s;
-}
diff --git a/addons/mail/static/src/components/attachment_card/attachment_card.xml b/addons/mail/static/src/components/attachment_card/attachment_card.xml
index 528d51272d1..d5202df4109 100644
--- a/addons/mail/static/src/components/attachment_card/attachment_card.xml
+++ b/addons/mail/static/src/components/attachment_card/attachment_card.xml
@@ -42,7 +42,7 @@
                         </t>
                         <!-- Remove button -->
                         <t t-if="attachmentCard.attachment.isDeletable">
-                            <button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUnlink btn top-0 justify-content-center align-items-center d-flex w-100 h-100 rounded-0" t-attf-class="{{ attachmentCard.attachmentList.composerViewOwner ? 'o-pretty position-absolute btn-primary' : 'bg-200' }}" t-on-click="attachmentCard.onClickUnlink" title="Remove">
+                            <button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUnlink btn top-0 justify-content-center align-items-center d-flex w-100 h-100 rounded-0" t-attf-class="{{ attachmentCard.attachmentList.composerViewOwner ? 'o-pretty position-absolute btn-primary transition-base' : 'bg-200' }}" t-on-click="attachmentCard.onClickUnlink" title="Remove">
                                 <i class="fa fa-trash" role="img" aria-label="Remove"/>
                             </button>
                         </t>
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
index b5769565a55..537e076d034 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
@@ -57,11 +57,3 @@
     box-shadow: 0 0 40px $black;
     outline: none;
 }
-
-// ------------------------------------------------------------------
-// Animation
-// ------------------------------------------------------------------
-
-.o_AttachmentViewer_viewImage {
-    transition: transform 0.3s ease;
-}
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
index af4ab450a70..ab7ea6e441b 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
@@ -43,7 +43,7 @@
                                     <i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin text-white" role="img" title="Loading"/>
                                 </div>
                             </t>
-                            <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage mw-100 mh-100 bg-black" t-on-click="attachmentViewer.onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="attachmentViewer.onLoadImage" t-att-src="attachmentViewer.attachmentViewerViewable.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachmentViewerViewable.localId" t-ref="image_{{ attachmentViewer.attachmentViewerViewable.localId }}"/>
+                            <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage mw-100 mh-100 bg-black transition-base" t-on-click="attachmentViewer.onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="attachmentViewer.onLoadImage" t-att-src="attachmentViewer.attachmentViewerViewable.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachmentViewerViewable.localId" t-ref="image_{{ attachmentViewer.attachmentViewerViewable.localId }}"/>
                         </div>
                     </t>
                     <t t-if="attachmentViewer.attachmentViewerViewable.isPdf">
diff --git a/addons/rating/static/src/scss/rating_templates.scss b/addons/rating/static/src/scss/rating_templates.scss
index 389441fe853..137e5152d2e 100644
--- a/addons/rating/static/src/scss/rating_templates.scss
+++ b/addons/rating/static/src/scss/rating_templates.scss
@@ -6,7 +6,6 @@
         margin-left: 0 !important;
     }
     .o_rating_label {
-        transition: .3s;
         &:hover {
             transform: scale(1.1);
         }
diff --git a/addons/rating/views/rating_templates.xml b/addons/rating/views/rating_templates.xml
index 52a68d5a181..e2aadfc628e 100644
--- a/addons/rating/views/rating_templates.xml
+++ b/addons/rating/views/rating_templates.xml
@@ -25,7 +25,7 @@
                         <form class="col-md-6" t-attf-action="/rate/#{token}/submit_feedback" method="post">
                             <div class="btn-group btn-group-toggle row flex-nowrap justify-content-center w-100 mt-5" data-bs-toggle="buttons">
                                 <t t-foreach="rate_names" t-as="rate_name">
-                                    <label t-attf-class="col p-4 btn o_rating_label shadow-none {{rate == rate_name and 'active' or ''}}">
+                                    <label t-attf-class="col p-4 btn o_rating_label shadow-none transition-base {{rate == rate_name and 'active' or ''}}">
                                         <input type="radio" name="rate" t-attf-id="rate_{{rate_name}}" t-att-value="rate_name" t-att-checked="rate == rate_name"/>
                                         <a class="o_rating d-block bg-white rounded-circle" href="#">
                                             <img t-attf-src='/rating/static/src/img/rating_#{rate_name}.svg' t-att-alt="rate_name_value" t-att-title="rate_name_value"/>
diff --git a/addons/web/static/src/libs/bootstrap/utilities_custom.scss b/addons/web/static/src/libs/bootstrap/utilities_custom.scss
index ad9e29d231c..af38346e403 100644
--- a/addons/web/static/src/libs/bootstrap/utilities_custom.scss
+++ b/addons/web/static/src/libs/bootstrap/utilities_custom.scss
@@ -145,6 +145,14 @@ $utilities: map-merge(
             property: overflow-y,
             values: auto hidden visible scroll,
         ),
+        "transition": (
+            property: transition,
+            values: (
+                none: none,
+                base: $transition-base,
+                fade: $transition-fade,
+            ),
+        ),
         "min-width": (
             class: min-w,
             property: min-width,