Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Penar Musaraj 2021-09-23 10:50:10 -04:00 committed by GitHub
parent 456189795a
commit 8115e5ef76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 101 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/assets/javascripts/discourse/app/components/bulk-select-button.js
View File

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

20
app/assets/javascripts/discourse/app/components/topic-list.js
View File

@ -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) {

12
app/assets/javascripts/discourse/app/controllers/full-page-search.js
View File

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

6
app/assets/javascripts/discourse/app/routes/group-messages.js
View File

@ -18,4 +18,10 @@ export default DiscourseRoute.extend({
this.transitionTo("group.members", group);
}
},
actions: {
refresh() {
this.refresh();
},
},
});

1
app/assets/javascripts/discourse/app/templates/components/basic-topic-list.hbs
View File

@ -7,6 +7,7 @@
topics=topics
expandExcerpts=expandExcerpts
bulkSelectEnabled=bulkSelectEnabled
bulkSelectAction=bulkSelectAction
canBulkSelect=canBulkSelect
selected=selected
tagsForUser=tagsForUser

7
app/assets/javascripts/discourse/app/templates/components/bulk-select-button.hbs
View File

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

4
app/assets/javascripts/discourse/app/templates/components/topic-list.hbs
View File

@ -11,7 +11,9 @@
ascending=ascending
sortable=sortable
listTitle=listTitle
bulkSelectEnabled=bulkSelectEnabled}}
bulkSelectEnabled=bulkSelectEnabled
canDoBulkActions=canDoBulkActions
}}
</thead>
{{/unless}}

3
app/assets/javascripts/discourse/app/templates/discovery/topics.hbs
View File

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

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

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

25
app/assets/javascripts/discourse/app/templates/group-index.hbs
View File

@ -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,8 +42,17 @@
</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}}
@ -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}}
<th>
{{#if isBulk}}
{{group-member-dropdown
bulkSelection=bulkSelection
canAdminGroup=model.can_admin_group
onChange=(action "actOnSelection" bulkSelection)
}}
{{/if}}
</th>
<th></th>
</tr>
</thead>

7
app/assets/javascripts/discourse/app/templates/tags/show.hbs
View File

@ -58,11 +58,6 @@
{{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
@ -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

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

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

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

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

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

@ -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"

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

@ -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(

14
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -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);

6
app/assets/stylesheets/common/base/group.scss
View File

@ -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 {

33
app/assets/stylesheets/desktop/topic-list.scss
View File

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