UI: better modal backdrop opacity fading (#26328)

The fading should now be function of the swipe position. We should also correctly instantly remove the fading when closing the modal.

app/assets/javascripts/discourse/app/components/d-modal.gjs

@@ -161,6 +161,9 @@ export default class DModal extends Component {
 
     if (this.site.mobileView) {
       this.animating = true;
+
+      this.#animateBackdropOpacity(window.innerHeight);
+
       await this.wrapperElement.animate(
         [
           // hidding first ms to avoid flicker
@@ -228,7 +231,27 @@ export default class DModal extends Component {
     }
   }
 
+  #animateBackdropOpacity(position) {
+    const backdrop = this.wrapperElement.nextElementSibling;
+
+    if (!backdrop) {
+      return;
+    }
+
+    // 85vh is the max height of the modal
+    const opacity = 1 - position / (window.innerHeight * 0.85);
+    requestAnimationFrame(() => {
+      backdrop.style.setProperty(
+        "opacity",
+        Math.max(0, Math.min(opacity, 0.6)),
+        "important"
+      );
+    });
+  }
+
   async #animateWrapperPosition(position) {
+    this.#animateBackdropOpacity(position);
+
     await this.wrapperElement.animate(
       [{ transform: `translateY(${position}px)` }],
       {

app/assets/stylesheets/common/base/modal.scss

@@ -103,10 +103,6 @@
       animation-duration: 0s;
     }
   }
-
-  &.is-closing + .d-modal__backdrop {
-    display: none;
-  }
 }
 
 //legacy

plugins/chat/spec/system/page_objects/chat/chat_channel.rb

@@ -86,6 +86,7 @@ module PageObjects
       def bookmark_message(message)
         if page.has_css?("html.mobile-view", wait: 0)
           click_message_action_mobile(message, "bookmark")
+          expect(page).to have_css(".d-modal:not(.is-animating)")
         else
           hover_message(message)
           find(".bookmark-btn").click

spec/system/page_objects/components/navigation_menu/base.rb

@@ -161,6 +161,8 @@ module PageObjects
             click_button(class: "sidebar-section-header-button", visible: false)
           end
 
+          expect(page).to have_css(".d-modal:not(.is-animating)")
+
           PageObjects::Modals::SidebarEditTags.new
         end