FEATURE: Allow topic pin toggle when header is docked (#15438)

Meta topic: https://meta.discourse.org/t/cant-pin-unpin-topic-from-the-title/213444?u=osama.

I know there is an inconsistency between the category of the linked topic (#bug) and the title prefix of this PR, but I really couldn't find anything in the code base that suggested this ever worked before, so I'm categorizing this PR as a feature.
This commit is contained in:
Osama Sayegh 2022-01-03 15:21:06 +03:00 committed by GitHub
parent 810e040f17
commit 61bb0df3f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 1 deletions

View File

@ -21,9 +21,20 @@ export default createWidget("topic-status", {
const attributes = {
title: escapeExpression(I18n.t(`topic_statuses.${key}.help`)),
};
result.push(h(`${canAct ? "a" : "span"}.topic-status`, attributes, icon));
let klass = "topic-status";
if (key === "unpinned" || key === "pinned") {
klass += `.pin-toggle-button.${key}`;
}
result.push(h(`${canAct ? "a" : "span"}.${klass}`, attributes, icon));
});
return result;
},
click(e) {
const parent = e.target.closest(".topic-statuses");
if (parent?.querySelector(".pin-toggle-button")?.contains(e.target)) {
this.attrs.topic.togglePinnedForUser();
}
},
});

View File

@ -2,6 +2,7 @@ import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers";
import { click } from "@ember/test-helpers";
import TopicStatusIcons from "discourse/helpers/topic-status-icons";
import hbs from "htmlbars-inline-precompile";
@ -42,5 +43,40 @@ discourseModule(
assert.ok(exists(".topic-status .d-icon-far-check-square"));
},
});
componentTest("toggling pin status", {
template: hbs`{{mount-widget widget="topic-status" args=args}}`,
beforeEach(store) {
this.set("args", {
topic: store.createRecord("topic", { closed: true, pinned: true }),
});
},
async test(assert) {
assert.ok(exists(".topic-statuses .pinned"), "pinned icon is shown");
assert.ok(
!exists(".topic-statuses .unpinned"),
"unpinned icon is not shown"
);
await click(".topic-statuses .pin-toggle-button");
assert.ok(
!exists(".topic-statuses .pinned"),
"pinned icon is not shown"
);
assert.ok(
exists(".topic-statuses .unpinned"),
"unpinned icon is shown"
);
await click(".topic-statuses .pin-toggle-button");
assert.ok(exists(".topic-statuses .pinned"), "pinned icon is shown");
assert.ok(
!exists(".topic-statuses .unpinned"),
"unpinned icon is not shown"
);
},
});
}
);