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