mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 09:42:07 +08:00
39f3dbd945
* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:
```
computeValue()
computeContent()
mutateValue()
```
56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
|
|
import { on } from "ember-addons/ember-computed-decorators";
|
|
import { iconHTML } from 'discourse-common/lib/icon-library';
|
|
|
|
export default DropdownSelectBoxComponent.extend({
|
|
pluginApiIdentifiers: ["pinned-options"],
|
|
classNames: "pinned-options",
|
|
allowInitialValueMutation: false,
|
|
|
|
autoHighlight() {},
|
|
|
|
computeHeaderContent() {
|
|
let content = this.baseHeaderComputedContent();
|
|
const pinnedGlobally = this.get("topic.pinned_globally");
|
|
const pinned = this.get("computedValue");
|
|
const globally = pinnedGlobally ? "_globally" : "";
|
|
const state = pinned ? `pinned${globally}` : "unpinned";
|
|
const title = I18n.t(`topic_statuses.${state}.title`);
|
|
|
|
content.name = `${title}${iconHTML("caret-down")}`.htmlSafe();
|
|
content.dataName = title;
|
|
content.icon = `thumb-tack ${state === "unpinned" ? "unpinned" : null}`;
|
|
return content;
|
|
},
|
|
|
|
@on("init")
|
|
_setContent() {
|
|
const globally = this.get("topic.pinned_globally") ? "_globally" : "";
|
|
|
|
this.set("content", [
|
|
{
|
|
id: "pinned",
|
|
name: I18n.t("topic_statuses.pinned" + globally + ".title"),
|
|
description: I18n.t('topic_statuses.pinned' + globally + '.help'),
|
|
icon: "thumb-tack"
|
|
},
|
|
{
|
|
id: "unpinned",
|
|
name: I18n.t("topic_statuses.unpinned.title"),
|
|
icon: "thumb-tack unpinned",
|
|
description: I18n.t('topic_statuses.unpinned.help'),
|
|
}
|
|
]);
|
|
},
|
|
|
|
mutateValue(value) {
|
|
const topic = this.get("topic");
|
|
|
|
if (value === "unpinned") {
|
|
topic.clearPin();
|
|
} else {
|
|
topic.rePin();
|
|
}
|
|
}
|
|
});
|