github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-30 07:13:44 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Add transition to glimmer-topic-timeline fullscreen view (#20149)

Browse Source 
- 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.
This commit is contained in:
Isaac Janzen 2023-02-02 15:00:02 -06:00 committed by GitHub
parent 8226fca6ed
commit 277c5770b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.hbs
View File

@ -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}}

20
app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.js
View File

@ -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();