UX: Better placement for bulk select actions button (#14419)

UX: Better placement for bulk select actions button (#14419)

diff --git a/app/assets/javascripts/discourse/app/components/bulk-select-button.js b/app/assets/javascripts/discourse/app/components/bulk-select-button.js
index e3359e1..69d9570 100644
--- a/app/assets/javascripts/discourse/app/components/bulk-select-button.js
+++ b/app/assets/javascripts/discourse/app/components/bulk-select-button.js
@@ -1,39 +1,4 @@
 import Component from "@ember/component";
-import { schedule } from "@ember/runloop";
-import { reads } from "@ember/object/computed";
-import showModal from "discourse/lib/show-modal";
 
-export default Component.extend({
-  classNames: ["bulk-select-container"],
-
-  didInsertElement() {
-    this._super(...arguments);
-
-    schedule("afterRender", () => {
-      let headerHeight =
-        document.querySelector(".d-header-wrap").offsetHeight || 0;
-
-      document.querySelector(".bulk-select-container").style.top =
-        headerHeight + 20 + "px";
-    });
-  },
-
-  canDoBulkActions: reads("currentUser.staff"),
-
-  actions: {
-    showBulkActions() {
-      const controller = showModal("topic-bulk-actions", {
-        model: {
-          topics: this.selected,
-          category: this.category,
-        },
-        title: "topics.bulk.actions",
-      });
-
-      const action = this.action;
-      if (action) {
-        controller.set("refreshClosure", () => action());
-      }
-    },
-  },
-});
+// TODO: Remove in December 2021
+export default Component.extend({});
diff --git a/app/assets/javascripts/discourse/app/components/topic-list.js b/app/assets/javascripts/discourse/app/components/topic-list.js
index 7612085..28d6ea5 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list.js
+++ b/app/assets/javascripts/discourse/app/components/topic-list.js
@@ -1,16 +1,19 @@
-import { alias, reads } from "@ember/object/computed";
+import { alias, and, reads } from "@ember/object/computed";
 import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import LoadMore from "discourse/mixins/load-more";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { on } from "@ember/object/evented";
 import { schedule } from "@ember/runloop";
+import showModal from "discourse/lib/show-modal";
 
 export default Component.extend(LoadMore, {
   tagName: "table",
   classNames: ["topic-list"],
+  classNameBindings: ["bulkSelectEnabled:sticky-header"],
   showTopicPostBadges: true,
   listTitle: "topic.title",
+  canDoBulkActions: and("currentUser.staff", "selected.length"),
 
   // Overwrite this to perform client side filtering of topics, if desired
   filteredTopics: alias("topics"),
@@ -191,6 +194,21 @@ export default Component.extend(LoadMore, {
       this.changeSort(e2.data("sort-order"));
       this.rerender();
     });
+
+    onClick("button.bulk-select-actions", function () {
+      const controller = showModal("topic-bulk-actions", {
+        model: {
+          topics: this.selected,
+          category: this.category,
+        },
+        title: "topics.bulk.actions",
+      });
+
+      const action = this.bulkSelectAction;
+      if (action) {
+        controller.set("refreshClosure", () => action());
+      }
+    });
   },
 
   keyDown(e) {
diff --git a/app/assets/javascripts/discourse/app/controllers/full-page-search.js b/app/assets/javascripts/discourse/app/controllers/full-page-search.js
index 48fe538..3ee95b5 100644
--- a/app/assets/javascripts/discourse/app/controllers/full-page-search.js
+++ b/app/assets/javascripts/discourse/app/controllers/full-page-search.js
@@ -17,6 +17,7 @@ import { scrollTop } from "discourse/mixins/scroll-top";
 import { setTransient } from "discourse/lib/page-tracker";
 import { Promise } from "rsvp";
 import { search as searchCategoryTag } from "discourse/lib/category-tag-search";
+import showModal from "discourse/lib/show-modal";
 import userSearch from "discourse/lib/user-search";
 
 const SortOrders = [
@@ -411,6 +412,17 @@ export default Controller.extend({
       this.selected.clear();
     },
 
+    showBulkActions() {
+      const modalController = showModal("topic-bulk-actions", {
+        model: {
+          topics: this.selected,
+        },
+        title: "topics.bulk.actions",
+      });
+
+      modalController.set("refreshClosure", () => this._search());
+    },
+
     search(options = {}) {
       if (options.collapseFilters) {
         document
diff --git a/app/assets/javascripts/discourse/app/routes/group-messages.js b/app/assets/javascripts/discourse/app/routes/group-messages.js
index ffd83a2..fe25581 100644
--- a/app/assets/javascripts/discourse/app/routes/group-messages.js
+++ b/app/assets/javascripts/discourse/app/routes/group-messages.js
@@ -18,4 +18,10 @@ export default DiscourseRoute.extend({
       this.transitionTo("group.members", group);
     }
   },
+
+  actions: {
+    refresh() {
+      this.refresh();
+    },
+  },
 });
diff --git a/app/assets/javascripts/discourse/app/templates/components/basic-topic-list.hbs b/app/assets/javascripts/discourse/app/templates/components/basic-topic-list.hbs
index bd33f87..bb5bc22 100644
--- a/app/assets/javascripts/discourse/app/templates/components/basic-topic-list.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/basic-topic-list.hbs
@@ -7,6 +7,7 @@
       topics=topics
       expandExcerpts=expandExcerpts
       bulkSelectEnabled=bulkSelectEnabled
+      bulkSelectAction=bulkSelectAction
       canBulkSelect=canBulkSelect
       selected=selected
       tagsForUser=tagsForUser
diff --git a/app/assets/javascripts/discourse/app/templates/components/bulk-select-button.hbs b/app/assets/javascripts/discourse/app/templates/components/bulk-select-button.hbs
deleted file mode 100644
index 77306f9..0000000
--- a/app/assets/javascripts/discourse/app/templates/components/bulk-select-button.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-{{#if canDoBulkActions}}
-  {{#if selected}}
-    <div id="bulk-select">
-      {{d-button class="btn-default bulk-select-btn" action=(action "showBulkActions") icon="wrench"}}
-    </div>
-  {{/if}}
-{{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs
index d524cda..fd20bde 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs
@@ -11,7 +11,9 @@
       ascending=ascending
       sortable=sortable
       listTitle=listTitle
-      bulkSelectEnabled=bulkSelectEnabled}}
+      bulkSelectEnabled=bulkSelectEnabled
+      canDoBulkActions=canDoBulkActions
+    }}
   </thead>
 {{/unless}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/discovery/topics.hbs b/app/assets/javascripts/discourse/app/templates/discovery/topics.hbs
index df483cd..9178f3e 100644
--- a/app/assets/javascripts/discourse/app/templates/discovery/topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/discovery/topics.hbs
@@ -16,8 +16,6 @@ model=model showResetNew=showResetNew showDismissRead=showDismissRead resetNew=(
     discoveryList=true}}
 {{/if}}
 
-{{bulk-select-button selected=selected action=(action "refresh") category=category}}
-
 {{#discovery-topics-list
   model=model
   refresh=(action "refresh")
@@ -55,6 +53,7 @@ model=model showResetNew=showResetNew showDismissRead=showDismissRead resetNew=(
       order=order
       ascending=ascending
       bulkSelectEnabled=bulkSelectEnabled
+      bulkSelectAction=(action "refresh")
       selected=selected
       expandGloballyPinned=expandGloballyPinned
       expandAllPinned=expandAllPinned
diff --git a/app/assets/javascripts/discourse/app/templates/full-page-search.hbs b/app/assets/javascripts/discourse/app/templates/full-page-search.hbs
index 1beb63a..0263500 100644
--- a/app/assets/javascripts/discourse/app/templates/full-page-search.hbs

[... diff too long, it was truncated ...]

GitHub sha: 8115e5ef76495e00297348eaf580fa0ce2741cc6

This commit appears in #14419 which was approved by CvX and eviltrout. It was merged by pmusaraj.