Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Simplify 'dismiss' button display logic (#22467) 

Previously we were using the `didInsertElement` hook and querying the DOM to check whether the other button was visible. This is problematic from a performance point of view because it forces the browser to render the layout prematurely. It can also lead to subtle bugs based on the current scroll position.

In addition, having this logic on a `didInsertElement` hook makes it totally incompatible with the new 'loading slider' feature (because the component is not re-rendered between different topic lists).

This commit updates the logic to be based simply on the count of topics in the list. If there are fewer than 5 topics, the top button is hidden.
This commit is contained in:
David Taylor 2023-07-06 15:28:45 +01:00 committed by GitHub
parent b40347dcac
commit f0f0c7cd6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/javascripts/discourse/app/components/topic-dismiss-buttons.js
View File

@ -1,8 +1,6 @@
import { action } from "@ember/object";
import showModal from "discourse/lib/show-modal";
import discourseLater from "discourse-common/lib/later";
import isElementInViewport from "discourse/lib/is-element-in-viewport";
import discourseComputed, { on } from "discourse-common/utils/decorators";
import discourseComputed from "discourse-common/utils/decorators";
import I18n from "I18n";
import Component from "@ember/component";
import { inject as service } from "@ember/service";
@ -31,23 +29,13 @@ export default Component.extend({
return `dismiss-new-${position}`;
},
@discourseComputed(
"position",
"isOtherDismissUnreadButtonVisible",
"isOtherDismissNewButtonVisible"
)
showBasedOnPosition(
position,
isOtherDismissUnreadButtonVisible,
isOtherDismissNewButtonVisible
) {
@discourseComputed("position", "model.topics.length")
showBasedOnPosition(position, topicCount) {
if (position !== "top") {
return true;
}
return !(
isOtherDismissUnreadButtonVisible || isOtherDismissNewButtonVisible
);
return topicCount > 5;
},
@discourseComputed("selectedTopics.length")
@ -72,28 +60,6 @@ export default Component.extend({
});
},
// we want to only render the Dismiss... button at the top of the
// page if the user cannot see the bottom Dismiss... button based on their
// viewport, or if too many topics fill the page
@on("didInsertElement")
_determineOtherDismissVisibility() {
discourseLater(() => {
if (this.position === "top") {
this.set(
"isOtherDismissUnreadButtonVisible",
isElementInViewport(document.getElementById("dismiss-topics-bottom"))
);
this.set(
"isOtherDismissNewButtonVisible",
isElementInViewport(document.getElementById("dismiss-new-bottom"))
);
} else {
this.set("isOtherDismissUnreadButtonVisible", true);
this.set("isOtherDismissNewButtonVisible", true);
}
});
},
@action
dismissReadPosts() {
let dismissTitle = "topics.bulk.dismiss_read";