mirror of
https://github.com/discourse/discourse.git
synced 2024-11-29 05:23:39 +08:00
35343e7f91
This commit adds a hover effect for drag and drop in the admin emoji uploader. It also changes the "Add New Emoji" button to open the file selector; previously it was useless because it was disabled unless a name was entered (which is not even a requirement for the emoji) and also it didn't actually do anything on click even if it wasn't disabled. Now we have a way of adding files without having to drag and drop them, which is nice. Also in this PR, there was no indication before that the upload was complete apart from the button becoming enabled again. This commit adds the highlight class to the emoji list and removes it once the highlight fade animation is done, like we do for new posts.
91 lines
2.1 KiB
JavaScript
91 lines
2.1 KiB
JavaScript
import EmberObject, { action, computed } from "@ember/object";
|
|
import Controller from "@ember/controller";
|
|
import I18n from "I18n";
|
|
import { ajax } from "discourse/lib/ajax";
|
|
import bootbox from "bootbox";
|
|
import { sort } from "@ember/object/computed";
|
|
|
|
const ALL_FILTER = "all";
|
|
|
|
export default Controller.extend({
|
|
filter: null,
|
|
sorting: null,
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
|
|
this.setProperties({
|
|
filter: ALL_FILTER,
|
|
sorting: ["group", "name"],
|
|
});
|
|
},
|
|
|
|
sortedEmojis: sort("filteredEmojis.[]", "sorting"),
|
|
|
|
emojiGroups: computed("model", {
|
|
get() {
|
|
return this.model.mapBy("group").uniq();
|
|
},
|
|
}),
|
|
|
|
sortingGroups: computed("emojiGroups.[]", {
|
|
get() {
|
|
return [ALL_FILTER].concat(this.emojiGroups);
|
|
},
|
|
}),
|
|
|
|
filteredEmojis: computed("model.[]", "filter", {
|
|
get() {
|
|
if (!this.filter || this.filter === ALL_FILTER) {
|
|
return this.model;
|
|
} else {
|
|
return this.model.filterBy("group", this.filter);
|
|
}
|
|
},
|
|
}),
|
|
|
|
_highlightEmojiList() {
|
|
const customEmojiListEl = document.querySelector("#custom_emoji");
|
|
if (
|
|
customEmojiListEl &&
|
|
!customEmojiListEl.classList.contains("highlighted")
|
|
) {
|
|
customEmojiListEl.classList.add("highlighted");
|
|
customEmojiListEl.addEventListener("animationend", () => {
|
|
customEmojiListEl.classList.remove("highlighted");
|
|
});
|
|
}
|
|
},
|
|
|
|
@action
|
|
filterGroups(value) {
|
|
this.set("filter", value);
|
|
},
|
|
|
|
@action
|
|
emojiUploaded(emoji, group) {
|
|
emoji.url += "?t=" + new Date().getTime();
|
|
emoji.group = group;
|
|
this.model.pushObject(EmberObject.create(emoji));
|
|
this._highlightEmojiList();
|
|
},
|
|
|
|
@action
|
|
destroyEmoji(emoji) {
|
|
return bootbox.confirm(
|
|
I18n.t("admin.emoji.delete_confirm", { name: emoji.get("name") }),
|
|
I18n.t("no_value"),
|
|
I18n.t("yes_value"),
|
|
(destroy) => {
|
|
if (destroy) {
|
|
return ajax("/admin/customize/emojis/" + emoji.get("name"), {
|
|
type: "DELETE",
|
|
}).then(() => {
|
|
this.model.removeObject(emoji);
|
|
});
|
|
}
|
|
}
|
|
);
|
|
},
|
|
});
|