Discourse/discourse
Discourse/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-09-06 10:50:21 +08:00
Code Packages Activity Actions 13

Replace deprecated dropdown-button with DropdownSelectBoxComponent (#6451)

Browse source
This commit is contained in:
Penar Musaraj 2018-10-05 09:48:17 -04:00 • committed by GitHub
parent 6995fd12c6
commit be56f18cdd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 33 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/application.js
View file

@ -73,7 +73,6 @@
//= require ./discourse/controllers/discovery-sortable
//= require ./discourse/controllers/navigation/default
//= require ./discourse/components/edit-category-panel
//= require ./discourse/components/dropdown-button
//= require ./discourse/lib/link-mentions
//= require ./discourse/components/site-header
//= require ./discourse/components/d-editor

78
app/assets/javascripts/discourse/components/dropdown-button.js.es6
View file

@ -1,78 +0,0 @@
import { iconHTML } from "discourse-common/lib/icon-library";
import { bufferedRender } from "discourse-common/lib/buffered-render";
export default Ember.Component.extend(
bufferedRender({
classNameBindings: [":btn-group", "hidden"],
rerenderTriggers: ["text", "longDescription"],
_bindClick: function() {
// If there's a click handler, call it
if (this.clicked) {
const self = this;
this.$().on("click.dropdown-button", "ul li", function(e) {
e.preventDefault();
if ($(e.currentTarget).data("id") !== self.get("activeItem")) {
self.clicked($(e.currentTarget).data("id"));
}
self.$(".dropdown-toggle").dropdown("toggle");
return false;
});
}
}.on("didInsertElement"),
_unbindClick: function() {
this.$().off("click.dropdown-button", "ul li");
}.on("willDestroyElement"),
buildBuffer(buffer) {
const title = this.get("title");
if (title) {
buffer.push("<h4 class='title'>" + title + "</h4>");
}
buffer.push(
`<button class='btn standard dropdown-toggle ${this.get(
"buttonExtraClasses"
) || ""}' data-toggle='dropdown'>${this.get("text")}</button>`
);
buffer.push("<ul class='dropdown-menu'>");
const contents = this.get("dropDownContent");
if (contents) {
const self = this;
contents.forEach(function(row) {
const id = row.id,
className = self.get("activeItem") === id ? "disabled" : "";
buffer.push(
'<li data-id="' + id + '" class="' + className + '"><a href>'
);
if (row.icon) {
let iconClass = "icon";
if (row.iconClass) {
iconClass += ` ${row.iconClass}`;
}
buffer.push(
iconHTML(row.icon, { tagName: "span", class: iconClass })
);
}
buffer.push("<div><span class='title'>" + row.title + "</span>");
buffer.push("<span>" + row.description + "</span></div>");
buffer.push("</a></li>");
});
}
buffer.push("</ul>");
const desc = this.get("longDescription");
if (desc) {
buffer.push("<p>");
buffer.push(desc);
buffer.push("</p>");
}
}
})
);

27
app/assets/javascripts/discourse/components/group-member-dropdown.js.es6
View file

@ -1,19 +1,22 @@
import { iconHTML } from "discourse-common/lib/icon-library";
import DropdownButton from "discourse/components/dropdown-button";
import computed from "ember-addons/ember-computed-decorators";
import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
export default DropdownButton.extend({
buttonExtraClasses: "no-text",
title: "",
text: iconHTML("wrench"),
classNames: ["group-member-dropdown"],
export default DropdownSelectBoxComponent.extend({
pluginApiIdentifiers: ["group-member-dropdown"],
classNames: "group-member-dropdown",
showFullTitle: false,
allowInitialValueMutation: false,
allowAutoSelectFirst: false,
headerIcon: ["wrench"],
autoHighlight() {},
@computed("member.owner")
dropDownContent(isOwner) {
content(isOwner) {
const items = [
{
id: "removeMember",
title: I18n.t("groups.members.remove_member"),
name: I18n.t("groups.members.remove_member"),
description: I18n.t("groups.members.remove_member_description", {
username: this.get("member.username")
}),
@ -25,7 +28,7 @@ export default DropdownButton.extend({
if (isOwner) {
items.push({
id: "removeOwner",
title: I18n.t("groups.members.remove_owner"),
name: I18n.t("groups.members.remove_owner"),
description: I18n.t("groups.members.remove_owner_description", {
username: this.get("member.username")
}),
@ -34,7 +37,7 @@ export default DropdownButton.extend({
} else {
items.push({
id: "makeOwner",
title: I18n.t("groups.members.make_owner"),
name: I18n.t("groups.members.make_owner"),
description: I18n.t("groups.members.make_owner_description", {
username: this.get("member.username")
}),
@ -46,7 +49,7 @@ export default DropdownButton.extend({
return items;
},
clicked(id) {
mutateValue(id) {
switch (id) {
case "removeMember":
this.sendAction("removeMember", this.get("member"));

27
app/assets/javascripts/discourse/components/tags-admin-dropdown.js.es6
View file

@ -1,23 +1,24 @@
import { iconHTML } from "discourse-common/lib/icon-library";
import DropdownButton from "discourse/components/dropdown-button";
import computed from "ember-addons/ember-computed-decorators";
import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
export default DropdownButton.extend({
buttonExtraClasses: "no-text",
title: "",
text: iconHTML("bars") + " " + iconHTML("caret-down"),
classNames: ["tags-admin-menu"],
export default DropdownSelectBoxComponent.extend({
pluginApiIdentifiers: ["tags-admin-dropdown"],
classNames: "tags-admin-dropdown",
showFullTitle: false,
allowInitialValueMutation: false,
headerIcon: ["bars", "caret-down"],
@computed()
dropDownContent() {
autoHighlight() {},
computeContent() {
const items = [
{
id: "manageGroups",
title: I18n.t("tagging.manage_groups"),
name: I18n.t("tagging.manage_groups"),
description: I18n.t("tagging.manage_groups_description"),
icon: "wrench"
}
];
return items;
},
@ -25,7 +26,7 @@ export default DropdownButton.extend({
manageGroups: "showTagGroups"
},
clicked(id) {
this.sendAction("actionNames." + id);
mutateValue(id) {
this.sendAction(`actionNames.${id}`);
}
});

1
app/assets/stylesheets/common/base/_topic-list.scss
View file

@ -33,6 +33,7 @@
}
}
&.categories-admin-dropdown,
&.tags-admin-dropdown,
&.category-notifications-button,
&.tag-notifications-button {
float: right;

3
app/assets/stylesheets/common/components/group-member-dropdown.scss Normal file
View file

@ -0,0 +1,3 @@
.group-member-dropdown {
text-align: left;
}

9
app/assets/stylesheets/desktop/components/group-member-dropdown.scss
View file

@ -1,9 +0,0 @@
.group-member-dropdown {
ul {
width: 250px;
top: 27px;
bottom: auto;
left: -217px;
text-align: left;
}
}

9
app/assets/stylesheets/mobile/components/group-member-dropdown.scss
View file

@ -1,9 +0,0 @@
.group-member-dropdown {
ul {
position: absolute;
top: 27px;
width: 250px;
bottom: auto;
text-align: left;
}
}