From 277c5770b0c38506e3b1eba32b4dc49d9bfb5dab Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Thu, 2 Feb 2023 15:00:02 -0600
Subject: [PATCH] UX: Add transition to glimmer-topic-timeline fullscreen view
 (#20149)

- Rename `class` getter -> `classes` seeing that we are dealing with multiple classes
- Add `show` class to fullscreen topic timeline via `did-insert` to handle how CSS transitions only apply when an existing element changes its properties. We need to wait until `timeline-fullscreen` is painted to the DOM, and then add the `show` class later.
---
 .../app/components/glimmer-topic-timeline.hbs |  5 ++++-
 .../app/components/glimmer-topic-timeline.js  | 20 +++++++++----------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.hbs b/app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.hbs
index d2f7554e385..bfa892fe884 100644
--- a/app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.hbs
+++ b/app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.hbs
@@ -1,4 +1,7 @@
-<div class={{concat "timeline-container " this.class}}>
+<div
+  class={{concat "timeline-container " this.classes}}
+  {{did-insert this.addShowClass}}
+>
   <div class="topic-timeline">
     <TopicTimeline::Container
       @model={{@model}}
diff --git a/app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.js b/app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.js
index 7c7f7889321..0eafc12bc82 100644
--- a/app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.js
+++ b/app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.js
@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import optionalService from "discourse/lib/optional-service";
 import { inject as service } from "@ember/service";
+import { bind } from "discourse-common/utils/decorators";
 
 export default class GlimmerTopicTimeline extends Component {
   @service site;
@@ -55,14 +56,10 @@ export default class GlimmerTopicTimeline extends Component {
     );
   }
 
-  get class() {
+  get classes() {
     const classes = [];
     if (this.args.fullscreen) {
-      if (this.addShowClass) {
-        classes.push("timeline-fullscreen show");
-      } else {
-        classes.push("timeline-fullscreen");
-      }
+      classes.push("timeline-fullscreen");
     }
 
     if (this.dockAt) {
@@ -75,14 +72,17 @@ export default class GlimmerTopicTimeline extends Component {
     return classes.join(" ");
   }
 
-  get addShowClass() {
-    return this.args.fullscreen && !this.args.addShowClass;
-  }
-
   get createdAt() {
     return new Date(this.args.model.created_at);
   }
 
+  @bind
+  addShowClass(element) {
+    if (this.args.fullscreen && !this.args.addShowClass) {
+      element.classList.add("show");
+    }
+  }
+
   willDestroy() {
     if (!this.site.mobileView) {
       this.intersectionObserver?.disconnect();