UX: Better placement for bulk select actions button

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({});

app/assets/javascripts/discourse/app/components/topic-list.js

@@ -5,10 +5,12 @@ 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",
 
@@ -39,6 +41,11 @@ export default Component.extend(LoadMore, {
     return order === "likes";
   },
 
+  @discourseComputed("selected")
+  canDoBulkActions(selected) {
+    return this.currentUser?.staff && selected;
+  },
+
   @discourseComputed("order")
   showOpLikes(order) {
     return order === "op_likes";
@@ -191,6 +198,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) {

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

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

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}}
 

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

app/assets/javascripts/discourse/app/templates/full-page-search.hbs

@@ -73,7 +73,9 @@
         <div class={{searchInfoClassNames}} role="region" ariaLabel={{i18n "search.sort_or_bulk_actions"}}>
           {{#if canBulkSelect}}
             {{d-button icon="list" class="btn-default bulk-select" title="topics.bulk.toggle" action=(action "toggleBulkSelect")}}
-            {{bulk-select-button selected=selected category=category action=(action "search")}}
+            {{#if selected}}
+              {{d-button class="btn-default bulk-select-btn" selected=selected action=(action "showBulkActions") icon="wrench"}}
+            {{/if}}
           {{/if}}
 
           {{#if bulkSelectEnabled}}

app/assets/javascripts/discourse/app/templates/group-index.hbs

@@ -32,7 +32,7 @@
 
   {{#if hasMembers}}
     {{#load-more selector=".group-members tr" action=(action "loadMore")}}
-      <table class="group-members">
+      <table class={{if isBulk "group-members sticky-header" "group-members"}}>
         <thead>
           <tr>
             <th class="bulk-select">
@@ -42,24 +42,25 @@
             </th>
             {{#if isBulk}}
               <th class="bulk-select-buttons">
-                {{d-button action=(action "bulkSelectAll") label="topics.bulk.select_all"}}
-                {{d-button action=(action "bulkClearAll") label="topics.bulk.clear_all"}}
+                <span class="bulk-select-buttons-wrap">
+                  {{#if bulkSelection}}
+                    {{group-member-dropdown
+                      bulkSelection=bulkSelection
+                      canAdminGroup=model.can_admin_group
+                      onChange=(action "actOnSelection" bulkSelection)
+                    }}
+                  {{/if}}
+                  {{d-button action=(action "bulkSelectAll") label="topics.bulk.select_all"}}
+                  {{d-button action=(action "bulkClearAll") label="topics.bulk.clear_all"}}
+                </span>
               </th>
             {{/if}}
             {{table-header-toggle order=order asc=asc field="username_lower" labelKey="username" class="username" automatic=true}}
             <th class="group-owner"></th>
             {{table-header-toggle order=order asc=asc field="added_at" labelKey="groups.member_added" automatic=true}}
             {{table-header-toggle order=order asc=asc field="last_posted_at" labelKey="last_post" automatic=true}}
             {{table-header-toggle order=order asc=asc field="last_seen_at" labelKey="last_seen" automatic=true}}
-            <th>
-              {{#if isBulk}}
-                {{group-member-dropdown
-                  bulkSelection=bulkSelection
-                  canAdminGroup=model.can_admin_group
-                  onChange=(action "actOnSelection" bulkSelection)
-                }}
-              {{/if}}
-            </th>
+            <th></th>
           </tr>
         </thead>
 

app/assets/javascripts/discourse/app/templates/tags/show.hbs

@@ -58,20 +58,17 @@
                   {{period-chooser period=period action=(action "changePeriod") fullDay=false}}
                 </div>
               {{/if}}
-              {{bulk-select-button
-                selected=selected
-                action=(action "refresh")
-                category=category
-              }}
 
               {{#if list.topics}}
                 {{topic-list
                   topics=list.topics
                   canBulkSelect=canBulkSelect
                   toggleBulkSelect=(action "toggleBulkSelect")
                   bulkSelectEnabled=bulkSelectEnabled
+                  bulkSelectAction=(action "refresh")
                   updateAutoAddTopicsToBulkSelect=(action "updateAutoAddTopicsToBulkSelect")
                   selected=selected
+                  category=category
                   showPosters=true
                   order=order
                   ascending=ascending

app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr

@@ -5,6 +5,9 @@
     {{/if ~}}
     {{~#if bulkSelectEnabled}}
       <span class='bulk-select-topics'>
+        {{~#if canDoBulkActions}}
+          <button class='btn btn-icon no-text bulk-select-actions'>{{d-icon "cog"}}&#8203;</button>
+        {{/if ~}}
         <button class='btn btn-default bulk-select-all'>{{i18n "topics.bulk.select_all"}}</button>
         <button class='btn btn-default bulk-clear-all'>{{i18n "topics.bulk.clear_all"}}</button>
       </span>

app/assets/javascripts/discourse/app/templates/topic-list-header.hbr

@@ -6,7 +6,7 @@
     {{/if}}
   </th>
 {{/if}}
-{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
+{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect canDoBulkActions=canDoBulkActions}}
 {{#if showPosters}}
   {{raw "topic-list-header-column" order='posters' ariaLabel=(i18n "category.sort_options.posters")}}
 {{/if}}

app/assets/javascripts/discourse/app/templates/user-topics-list.hbs

@@ -6,12 +6,6 @@
     </div>
   </div>
 {{else}}
-  {{#unless site.mobileView}}
-    {{#if showToggleBulkSelect}}
-      {{bulk-select-button canDoBulkActions=true selected=selected action=(route-action "refresh")}}
-    {{/if}}
-  {{/unless}}
-
   {{#load-more class="paginated-topics-list" selector=".paginated-topics-list .topic-list tr" action=(action "loadMore")}}
     {{topic-dismiss-buttons
       position="top"
@@ -30,16 +24,18 @@
     {{/if}}
 
     {{basic-topic-list topicList=model
-       hideCategory=hideCategory
-       showPosters=showPosters
-       bulkSelectEnabled=bulkSelectEnabled
-       selected=selected
-       tagsForUser=tagsForUser
-       onScroll=saveScrollPosition
-       canBulkSelect=canBulkSelect
-       scrollOnLoad=true
-       toggleBulkSelect=(action "toggleBulkSelect")
-       updateAutoAddTopicsToBulkSelect=(action "updateAutoAddTopicsToBulkSelect")}}
+      hideCategory=hideCategory
+      showPosters=showPosters
+      bulkSelectEnabled=bulkSelectEnabled
+      bulkSelectAction=(route-action "refresh")
+      selected=selected
+      tagsForUser=tagsForUser
+      onScroll=saveScrollPosition
+      canBulkSelect=canBulkSelect
+      scrollOnLoad=true
+      toggleBulkSelect=(action "toggleBulkSelect")
+      updateAutoAddTopicsToBulkSelect=(action "updateAutoAddTopicsToBulkSelect")
+    }}
 
     {{topic-dismiss-buttons
       position="bottom"

app/assets/javascripts/discourse/tests/acceptance/topic-bulk-actions-test.js

@@ -27,7 +27,7 @@ acceptance("Topic - Bulk Actions", function (needs) {
     await click(queryAll("input.bulk-select")[0]);
     await click(queryAll("input.bulk-select")[1]);
 
-    await click(".bulk-select-btn");
+    await click(".bulk-select-actions");
 
     assert.ok(
       queryAll("#discourse-modal-title")
@@ -113,7 +113,7 @@ acceptance("Topic - Bulk Actions", function (needs) {
     await click(queryAll("input.bulk-select")[0]);
     await click(queryAll("input.bulk-select")[1]);
 
-    await click(".bulk-select-btn");
+    await click(".bulk-select-actions");
     await click(".modal-body .delete-topics");
 
     assert.ok(

app/assets/stylesheets/common/base/_topic-list.scss

@@ -169,6 +169,14 @@
   }
 }
 
+.sticky-header thead {
+  @include sticky;
+  // TODO: Use calculated header height
+  top: 60px;
+  background: var(--secondary);
+  z-index: 2;
+}
+
 .topic-list {
   width: 100%;
   border-collapse: collapse;
@@ -213,10 +221,8 @@
     text-align: left;
     vertical-align: middle;
   }
-  th {
-    button .d-icon {
-      color: var(--primary-medium);
-    }
+  th .btn-flat .d-icon {
+    color: currentColor;
   }
   td {
     color: var(--primary-medium);

app/assets/stylesheets/common/base/group.scss

@@ -135,6 +135,12 @@ table.group-members {
     &.bulk-select-buttons {
       text-align: left;
       width: 20%;
+      .bulk-select-buttons-wrap {
+        display: inline-flex;
+        .btn {
+          margin-right: 0.5em;
+        }
+      }
     }
 
     &.username {