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:
parent
b40347dcac
commit
f0f0c7cd6c
|
@ -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";
|
||||
|
|
Loading…
Reference in New Issue