From b5c1132546028d2a39f85da4e58d2e7979233efb Mon Sep 17 00:00:00 2001 From: Kris Date: Tue, 26 Jul 2022 15:36:35 -0400 Subject: [PATCH] UX: add bulk-select to mobile topic lists (#15386) --- .../app/components/bulk-select-toggle.js | 17 +++ .../discourse/app/components/d-navigation.js | 12 ++ .../discourse/app/components/topic-list.js | 4 +- .../components/bulk-select-toggle.hbs | 1 + .../app/templates/components/d-navigation.hbs | 3 + .../app/templates/components/topic-list.hbs | 33 ++--- .../app/templates/mobile/discovery/topics.hbs | 19 ++- .../templates/mobile/list/topic-list-item.hbr | 8 +- .../templates/topic-list-header-column.hbr | 2 +- .../discourse/app/templates/user/messages.hbs | 9 +- .../mobile-topic-bulk-actions-test.js | 132 ++++++++++++++++++ app/assets/stylesheets/mobile/topic-list.scss | 57 ++++++++ 12 files changed, 271 insertions(+), 26 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/bulk-select-toggle.js create mode 100644 app/assets/javascripts/discourse/app/templates/components/bulk-select-toggle.hbs create mode 100644 app/assets/javascripts/discourse/tests/acceptance/mobile-topic-bulk-actions-test.js diff --git a/app/assets/javascripts/discourse/app/components/bulk-select-toggle.js b/app/assets/javascripts/discourse/app/components/bulk-select-toggle.js new file mode 100644 index 00000000000..80ddbc7decc --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/bulk-select-toggle.js @@ -0,0 +1,17 @@ +import Component from "@ember/component"; +import { action } from "@ember/object"; +import { getOwner } from "discourse-common/lib/get-owner"; + +export default Component.extend({ + parentController: null, + + @action + toggleBulkSelect() { + const controller = getOwner(this).lookup( + `controller:${this.parentController}` + ); + const selection = controller.selected; + controller.toggleProperty("bulkSelectEnabled"); + selection.clear(); + }, +}); diff --git a/app/assets/javascripts/discourse/app/components/d-navigation.js b/app/assets/javascripts/discourse/app/components/d-navigation.js index 266bbf7c4d5..32f8756b42b 100644 --- a/app/assets/javascripts/discourse/app/components/d-navigation.js +++ b/app/assets/javascripts/discourse/app/components/d-navigation.js @@ -4,6 +4,7 @@ import NavItem from "discourse/models/nav-item"; import bootbox from "bootbox"; import discourseComputed from "discourse-common/utils/decorators"; import { NotificationLevels } from "discourse/lib/notification-levels"; +import { getOwner } from "discourse-common/lib/get-owner"; import { inject as service } from "@ember/service"; export default Component.extend(FilterModeMixin, { @@ -128,6 +129,17 @@ export default Component.extend(FilterModeMixin, { }); }, + @discourseComputed("filterType") + notCategoriesRoute(filterType) { + return filterType !== "categories"; + }, + + @discourseComputed() + canBulk() { + const controller = getOwner(this).lookup("controller:discovery/topics"); + return controller.canBulkSelect; + }, + actions: { changeCategoryNotificationLevel(notificationLevel) { this.category.setNotification(notificationLevel); diff --git a/app/assets/javascripts/discourse/app/components/topic-list.js b/app/assets/javascripts/discourse/app/components/topic-list.js index 74fe6518cfb..22b01c759d4 100644 --- a/app/assets/javascripts/discourse/app/components/topic-list.js +++ b/app/assets/javascripts/discourse/app/components/topic-list.js @@ -1,4 +1,4 @@ -import { alias, and, reads } from "@ember/object/computed"; +import { alias, and } from "@ember/object/computed"; import discourseComputed, { observes } from "discourse-common/utils/decorators"; import Component from "@ember/component"; import LoadMore from "discourse/mixins/load-more"; @@ -34,8 +34,6 @@ export default Component.extend(LoadMore, { return !!this.changeSort; }, - skipHeader: reads("site.mobileView"), - @discourseComputed("order") showLikes(order) { return order === "likes"; diff --git a/app/assets/javascripts/discourse/app/templates/components/bulk-select-toggle.hbs b/app/assets/javascripts/discourse/app/templates/components/bulk-select-toggle.hbs new file mode 100644 index 00000000000..4a48158dc45 --- /dev/null +++ b/app/assets/javascripts/discourse/app/templates/components/bulk-select-toggle.hbs @@ -0,0 +1 @@ + diff --git a/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs b/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs index 8b7151b7be3..2e793cfaa8b 100644 --- a/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs @@ -6,6 +6,9 @@ {{/unless}}
+ {{#if (and this.notCategoriesRoute this.site.mobileView this.canBulk)}} + + {{/if}} {{#if this.showCategoryAdmin}} - {{raw "topic-list-header" - canBulkSelect=this.canBulkSelect - toggleInTitle=this.toggleInTitle - hideCategory=this.hideCategory - showPosters=this.showPosters - showLikes=this.showLikes - showOpLikes=this.showOpLikes - order=this.order - ascending=this.ascending - sortable=this.sortable - listTitle=this.listTitle - bulkSelectEnabled=this.bulkSelectEnabled - canDoBulkActions=this.canDoBulkActions - }} - -{{/unless}} + + {{raw "topic-list-header" + canBulkSelect=this.canBulkSelect + toggleInTitle=this.toggleInTitle + hideCategory=this.hideCategory + showPosters=this.showPosters + showLikes=this.showLikes + showOpLikes=this.showOpLikes + order=this.order + ascending=this.ascending + sortable=this.sortable + listTitle=this.listTitle + bulkSelectEnabled=this.bulkSelectEnabled + canDoBulkActions=this.canDoBulkActions}} + + {{/if}} diff --git a/app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr b/app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr index 3755b65584a..6e6ed81e927 100644 --- a/app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr +++ b/app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr @@ -1,7 +1,13 @@ {{~raw-plugin-outlet name="topic-list-before-columns"}}
- {{avatar topic.lastPosterUser imageSize="large"}} + {{#if bulkSelectEnabled}} + + {{else}} + {{avatar topic.lastPosterUser imageSize="large"}} + {{/if}}
{{!-- 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 55d49538591..fb6b7f46351 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 @@ -13,7 +13,7 @@ {{/if ~}} {{/if ~}} - {{view.localizedName}} + {{view.localizedName}} {{~#if view.isSorting}} {{d-icon view.sortIcon}} {{/if ~}} diff --git a/app/assets/javascripts/discourse/app/templates/user/messages.hbs b/app/assets/javascripts/discourse/app/templates/user/messages.hbs index d86df276e5a..bf566c7ba59 100644 --- a/app/assets/javascripts/discourse/app/templates/user/messages.hbs +++ b/app/assets/javascripts/discourse/app/templates/user/messages.hbs @@ -101,8 +101,13 @@
- {{#if (and this.site.mobileView this.showNewPM)}} - + {{#if this.site.mobileView}} + {{#if this.showNewPM}} + + {{/if}} + {{#if this.currentUser.admin}} + + {{/if}} {{/if}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/mobile-topic-bulk-actions-test.js b/app/assets/javascripts/discourse/tests/acceptance/mobile-topic-bulk-actions-test.js new file mode 100644 index 00000000000..82cb0a21189 --- /dev/null +++ b/app/assets/javascripts/discourse/tests/acceptance/mobile-topic-bulk-actions-test.js @@ -0,0 +1,132 @@ +import { + acceptance, + invisible, + query, + queryAll, + updateCurrentUser, +} from "discourse/tests/helpers/qunit-helpers"; +import { click, visit } from "@ember/test-helpers"; +import { test } from "qunit"; +import I18n from "I18n"; + +acceptance("Topic - Bulk Actions - Mobile", function (needs) { + needs.user(); + needs.mobileView(); + + needs.settings({ tagging_enabled: true }); + needs.pretender((server, helper) => { + server.put("/topics/bulk", () => { + return helper.response({ + topic_ids: [], + }); + }); + }); + + test("bulk select - modal", async function (assert) { + updateCurrentUser({ moderator: true, enable_defer: true }); + await visit("/latest"); + await click("button.bulk-select"); + + await click(queryAll("input.bulk-select")[0]); + await click(queryAll("input.bulk-select")[1]); + + await click(".bulk-select-actions"); + + assert.ok( + query("#discourse-modal-title").innerHTML.includes( + I18n.t("topics.bulk.actions") + ), + "it opens bulk-select modal" + ); + + assert.ok( + query(".bulk-buttons").innerHTML.includes( + I18n.t("topics.bulk.change_category") + ), + "it shows an option to change category" + ); + + assert.ok( + query(".bulk-buttons").innerHTML.includes( + I18n.t("topics.bulk.close_topics") + ), + "it shows an option to close topics" + ); + + assert.ok( + query(".bulk-buttons").innerHTML.includes( + I18n.t("topics.bulk.archive_topics") + ), + "it shows an option to archive topics" + ); + + assert.ok( + query(".bulk-buttons").innerHTML.includes( + I18n.t("topics.bulk.notification_level") + ), + "it shows an option to update notification level" + ); + + assert.ok( + query(".bulk-buttons").innerHTML.includes(I18n.t("topics.bulk.defer")), + "it shows an option to reset read" + ); + + assert.ok( + query(".bulk-buttons").innerHTML.includes( + I18n.t("topics.bulk.unlist_topics") + ), + "it shows an option to unlist topics" + ); + + assert.ok( + query(".bulk-buttons").innerHTML.includes( + I18n.t("topics.bulk.reset_bump_dates") + ), + "it shows an option to reset bump dates" + ); + + assert.ok( + query(".bulk-buttons").innerHTML.includes( + I18n.t("topics.bulk.change_tags") + ), + "it shows an option to replace tags" + ); + + assert.ok( + query(".bulk-buttons").innerHTML.includes( + I18n.t("topics.bulk.append_tags") + ), + "it shows an option to append tags" + ); + + assert.ok( + query(".bulk-buttons").innerHTML.includes( + I18n.t("topics.bulk.remove_tags") + ), + "it shows an option to remove all tags" + ); + + assert.ok( + query(".bulk-buttons").innerHTML.includes(I18n.t("topics.bulk.delete")), + "it shows an option to delete topics" + ); + }); + + test("bulk select - delete topics", async function (assert) { + updateCurrentUser({ moderator: true }); + await visit("/latest"); + await click("button.bulk-select"); + + await click(queryAll("input.bulk-select")[0]); + await click(queryAll("input.bulk-select")[1]); + + await click(".bulk-select-actions"); + await click(".modal-body .delete-topics"); + + assert.ok( + invisible(".topic-bulk-actions-modal"), + "it closes the bulk select modal" + ); + }); +}); diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 319c4964484..4d353946862 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -472,3 +472,60 @@ td .main-link { .muted-categories-link { margin-left: 0; } + +// Bulk select + +.topic-list-header { + display: none; +} + +.topic-list.sticky-header { + .topic-list-header { + display: table-header-group; + position: sticky; + z-index: z("base") + 2; + top: var(--header-offset); + background: var(--secondary); + tr { + display: flex; + align-items: center; + border: none; + } + + .topic-list-data { + display: none; + &.bulk-select { + display: inline-block; + } + &.default { + display: flex; + span:not(.bulk-select-topics) { + display: none; + } + } + } + + button.bulk-select { + padding-left: 0.85em; // visual alignment + } + } +} + +.bulk-select-topics { + display: flex; + padding-left: 0.85em; + .btn { + margin-right: 0.5em; + } +} + +.topic-list-data .pull-left { + label { + // bulk select checkbox + display: flex; + width: 45px; + height: 45px; + justify-content: center; + align-items: center; + } +}