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 e3359e1f73..69d95709c8 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 761208516f..28d6ea5c6e 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 48fe538576..3ee95b5ced 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 ffd83a263c..fe255814bb 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 bd33f879ec..bb5bc22b5f 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 77306f93e1..0000000000 --- a/app/assets/javascripts/discourse/app/templates/components/bulk-select-button.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{#if canDoBulkActions}} - {{#if selected}} -
- {{d-button class="btn-default bulk-select-btn" action=(action "showBulkActions") icon="wrench"}} -
- {{/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 d524cdaffb..fd20bde47c 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 + }} {{/unless}} diff --git a/app/assets/javascripts/discourse/app/templates/discovery/topics.hbs b/app/assets/javascripts/discourse/app/templates/discovery/topics.hbs index df483cd3f0..9178f3ef8c 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 1beb63acca..02635003ae 100644 --- a/app/assets/javascripts/discourse/app/templates/full-page-search.hbs +++ b/app/assets/javascripts/discourse/app/templates/full-page-search.hbs @@ -73,7 +73,9 @@
{{#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}} diff --git a/app/assets/javascripts/discourse/app/templates/group-index.hbs b/app/assets/javascripts/discourse/app/templates/group-index.hbs index 89154497f3..86aaea824b 100644 --- a/app/assets/javascripts/discourse/app/templates/group-index.hbs +++ b/app/assets/javascripts/discourse/app/templates/group-index.hbs @@ -32,7 +32,7 @@ {{#if hasMembers}} {{#load-more selector=".group-members tr" action=(action "loadMore")}} - +
{{#if isBulk}} {{/if}} {{table-header-toggle order=order asc=asc field="username_lower" labelKey="username" class="username" automatic=true}} @@ -51,15 +60,7 @@ {{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}} - + diff --git a/app/assets/javascripts/discourse/app/templates/tags/show.hbs b/app/assets/javascripts/discourse/app/templates/tags/show.hbs index 25ac3540cf..f435b40ee3 100644 --- a/app/assets/javascripts/discourse/app/templates/tags/show.hbs +++ b/app/assets/javascripts/discourse/app/templates/tags/show.hbs @@ -58,11 +58,6 @@ {{period-chooser period=period action=(action "changePeriod") fullDay=false}} {{/if}} - {{bulk-select-button - selected=selected - action=(action "refresh") - category=category - }} {{#if list.topics}} {{topic-list @@ -70,8 +65,10 @@ canBulkSelect=canBulkSelect toggleBulkSelect=(action "toggleBulkSelect") bulkSelectEnabled=bulkSelectEnabled + bulkSelectAction=(action "refresh") updateAutoAddTopicsToBulkSelect=(action "updateAutoAddTopicsToBulkSelect") selected=selected + category=category showPosters=true order=order ascending=ascending diff --git a/app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr b/app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr index cb4b746d1b..218d2f5d30 100644 --- a/app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr +++ b/app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr @@ -5,6 +5,9 @@ {{/if ~}} {{~#if bulkSelectEnabled}} + {{~#if canDoBulkActions}} + + {{/if ~}} diff --git a/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr b/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr index 2f785f6065..0d47362b71 100644 --- a/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr +++ b/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr @@ -6,7 +6,7 @@ {{/if}} {{/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}} diff --git a/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs b/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs index b507cb4ecb..afe4706efd 100644 --- a/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs +++ b/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs @@ -6,12 +6,6 @@ {{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" diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-bulk-actions-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-bulk-actions-test.js index 79d89893e7..bfd8e811ce 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/topic-bulk-actions-test.js +++ b/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( diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index 32bdb9a24e..6cf2ac186e 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/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); diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss index f0e65814a0..7ca7384c57 100644 --- a/app/assets/stylesheets/common/base/group.scss +++ b/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 { diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index 9caa91b85e..6050bf9f6d 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -34,11 +34,6 @@ padding-right: 10px; } } - th { - button .d-icon { - color: var(--primary-med-or-secondary-med); - } - } button.bulk-select { padding: 0; @@ -173,29 +168,11 @@ } } -.bulk-select-container { - @supports (position: sticky) { - @media screen and (min-width: 1250px) { - position: sticky; - position: -webkit-sticky; - } - } -} - -#bulk-select { - position: fixed; - right: 10px; // match horizontal padding on .wrap - padding-top: 12px; // match .topic-list th padding - background-color: var(--secondary); - z-index: z("dropdown"); - @supports (position: sticky) { - @media screen and (min-width: 1250px) { - body:not(.search-page):not(.user-messages-page) & { - position: absolute; - right: -60px; - top: 0; - } - } +.bulk-select-topics { + display: inline-flex; + margin-left: -5px; + .btn { + margin-right: 0.5em; } }
@@ -42,8 +42,17 @@ - {{d-button action=(action "bulkSelectAll") label="topics.bulk.select_all"}} - {{d-button action=(action "bulkClearAll") label="topics.bulk.clear_all"}} + + {{#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"}} + - {{#if isBulk}} - {{group-member-dropdown - bulkSelection=bulkSelection - canAdminGroup=model.can_admin_group - onChange=(action "actOnSelection" bulkSelection) - }} - {{/if}} -