mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
UX: Move top dismiss button from topics
to d-navigation
(#26032)
This commit is contained in:
parent
0c827980e6
commit
5c1147adf3
@ -21,6 +21,16 @@
|
|||||||
<BulkSelectToggle @bulkSelectHelper={{@bulkSelectHelper}} />
|
<BulkSelectToggle @bulkSelectHelper={{@bulkSelectHelper}} />
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
<TopicDismissButtons
|
||||||
|
@position="top"
|
||||||
|
@selectedTopics={{@bulkSelectHelper.selected}}
|
||||||
|
@model={{@model}}
|
||||||
|
@showResetNew={{@showResetNew}}
|
||||||
|
@showDismissRead={{@showDismissRead}}
|
||||||
|
@resetNew={{@resetNew}}
|
||||||
|
@dismissRead={{@dismissRead}}
|
||||||
|
/>
|
||||||
|
|
||||||
{{#if this.showCategoryAdmin}}
|
{{#if this.showCategoryAdmin}}
|
||||||
{{#if this.fixedCategoryPositions}}
|
{{#if this.fixedCategoryPositions}}
|
||||||
<CategoriesAdminDropdown
|
<CategoriesAdminDropdown
|
||||||
|
@ -55,6 +55,11 @@
|
|||||||
@skipCategoriesNavItem={{this.skipCategoriesNavItem}}
|
@skipCategoriesNavItem={{this.skipCategoriesNavItem}}
|
||||||
@toggleInfo={{@toggleTagInfo}}
|
@toggleInfo={{@toggleTagInfo}}
|
||||||
@tagNotification={{@tagNotification}}
|
@tagNotification={{@tagNotification}}
|
||||||
|
@model={{@model}}
|
||||||
|
@showDismissRead={{@showDismissRead}}
|
||||||
|
@showResetNew={{@showResetNew}}
|
||||||
|
@dismissRead={{@dismissRead}}
|
||||||
|
@resetNew={{@resetNew}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{{#if @category}}
|
{{#if @category}}
|
||||||
|
@ -6,16 +6,6 @@
|
|||||||
<div class="alert alert-info">{{this.redirectedReason}}</div>
|
<div class="alert alert-info">{{this.redirectedReason}}</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<TopicDismissButtons
|
|
||||||
@position="top"
|
|
||||||
@selectedTopics={{@bulkSelectHelper.selected}}
|
|
||||||
@model={{@model}}
|
|
||||||
@showResetNew={{@showResetNew}}
|
|
||||||
@showDismissRead={{@showDismissRead}}
|
|
||||||
@resetNew={{this.resetNew}}
|
|
||||||
@dismissRead={{this.dismissRead}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{{#if @model.sharedDrafts}}
|
{{#if @model.sharedDrafts}}
|
||||||
<TopicList
|
<TopicList
|
||||||
@listTitle="shared_drafts.title"
|
@listTitle="shared_drafts.title"
|
||||||
@ -137,8 +127,8 @@
|
|||||||
@model={{@model}}
|
@model={{@model}}
|
||||||
@showResetNew={{@showResetNew}}
|
@showResetNew={{@showResetNew}}
|
||||||
@showDismissRead={{@showDismissRead}}
|
@showDismissRead={{@showDismissRead}}
|
||||||
@resetNew={{this.resetNew}}
|
@resetNew={{@resetNew}}
|
||||||
@dismissRead={{this.dismissRead}}
|
@dismissRead={{@dismissRead}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<FooterMessage
|
<FooterMessage
|
||||||
|
@ -2,11 +2,9 @@ import Component from "@glimmer/component";
|
|||||||
import { tracked } from "@glimmer/tracking";
|
import { tracked } from "@glimmer/tracking";
|
||||||
import { action } from "@ember/object";
|
import { action } from "@ember/object";
|
||||||
import { inject as service } from "@ember/service";
|
import { inject as service } from "@ember/service";
|
||||||
import DismissNew from "discourse/components/modal/dismiss-new";
|
|
||||||
import { popupAjaxError } from "discourse/lib/ajax-error";
|
import { popupAjaxError } from "discourse/lib/ajax-error";
|
||||||
import { filterTypeForMode } from "discourse/lib/filter-mode";
|
import { filterTypeForMode } from "discourse/lib/filter-mode";
|
||||||
import { userPath } from "discourse/lib/url";
|
import { userPath } from "discourse/lib/url";
|
||||||
import Topic from "discourse/models/topic";
|
|
||||||
import I18n from "discourse-i18n";
|
import I18n from "discourse-i18n";
|
||||||
|
|
||||||
export default class DiscoveryTopics extends Component {
|
export default class DiscoveryTopics extends Component {
|
||||||
@ -55,52 +53,6 @@ export default class DiscoveryTopics extends Component {
|
|||||||
return filterTypeForMode(this.args.model.filter) === "new";
|
return filterTypeForMode(this.args.model.filter) === "new";
|
||||||
}
|
}
|
||||||
|
|
||||||
async callResetNew(
|
|
||||||
dismissPosts = false,
|
|
||||||
dismissTopics = false,
|
|
||||||
untrack = false
|
|
||||||
) {
|
|
||||||
const isTracked =
|
|
||||||
(this.router.currentRoute.queryParams["f"] ||
|
|
||||||
this.router.currentRoute.queryParams["filter"]) === "tracked";
|
|
||||||
|
|
||||||
let topicIds = this.args.bulkSelectHelper.selected.map((topic) => topic.id);
|
|
||||||
const result = await Topic.resetNew(
|
|
||||||
this.args.category,
|
|
||||||
!this.args.noSubcategories,
|
|
||||||
{
|
|
||||||
tracked: isTracked,
|
|
||||||
tag: this.args.tag,
|
|
||||||
topicIds,
|
|
||||||
dismissPosts,
|
|
||||||
dismissTopics,
|
|
||||||
untrack,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (result.topic_ids) {
|
|
||||||
this.topicTrackingState.removeTopics(result.topic_ids);
|
|
||||||
}
|
|
||||||
this.router.refresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
resetNew() {
|
|
||||||
if (!this.currentUser.new_new_view_enabled) {
|
|
||||||
return this.callResetNew();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.modal.show(DismissNew, {
|
|
||||||
model: {
|
|
||||||
selectedTopics: this.args.bulkSelectHelper.selected,
|
|
||||||
subset: this.args.model.listParams?.subset,
|
|
||||||
dismissCallback: ({ dismissPosts, dismissTopics, untrack }) => {
|
|
||||||
this.callResetNew(dismissPosts, dismissTopics, untrack);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show newly inserted topics
|
// Show newly inserted topics
|
||||||
@action
|
@action
|
||||||
async showInserted(event) {
|
async showInserted(event) {
|
||||||
@ -227,14 +179,4 @@ export default class DiscoveryTopics extends Component {
|
|||||||
get expandAllPinned() {
|
get expandAllPinned() {
|
||||||
return this.args.tag || this.args.category;
|
return this.args.tag || this.args.category;
|
||||||
}
|
}
|
||||||
|
|
||||||
@action
|
|
||||||
dismissRead(dismissTopics) {
|
|
||||||
const operationType = dismissTopics ? "topics" : "posts";
|
|
||||||
this.args.bulkSelectHelper.dismissRead(operationType, {
|
|
||||||
categoryId: this.args.category?.id,
|
|
||||||
tagName: this.args.tag?.id,
|
|
||||||
includeSubcategories: this.args.noSubcategories,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{{#if this.showBasedOnPosition}}
|
{{~#if this.showBasedOnPosition}}
|
||||||
<div class="row {{this.containerClass}}">
|
<div class="row {{this.containerClass}}">
|
||||||
{{#if this.showDismissRead}}
|
{{~#if this.showDismissRead}}
|
||||||
<DButton
|
<DButton
|
||||||
@action={{this.dismissReadPosts}}
|
@action={{this.dismissReadPosts}}
|
||||||
@translatedLabel={{this.dismissLabel}}
|
@translatedLabel={{this.dismissLabel}}
|
||||||
@ -8,8 +8,8 @@
|
|||||||
id={{this.dismissReadId}}
|
id={{this.dismissReadId}}
|
||||||
class="btn-default dismiss-read"
|
class="btn-default dismiss-read"
|
||||||
/>
|
/>
|
||||||
{{/if}}
|
{{/if~}}
|
||||||
{{#if this.showResetNew}}
|
{{~#if this.showResetNew}}
|
||||||
<DButton
|
<DButton
|
||||||
@action={{this.resetNew}}
|
@action={{this.resetNew}}
|
||||||
@icon="check"
|
@icon="check"
|
||||||
@ -17,6 +17,6 @@
|
|||||||
id={{this.dismissNewId}}
|
id={{this.dismissNewId}}
|
||||||
class="btn-default dismiss-read"
|
class="btn-default dismiss-read"
|
||||||
/>
|
/>
|
||||||
{{/if}}
|
{{/if~}}
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if~}}
|
@ -34,10 +34,9 @@ export default Component.extend({
|
|||||||
@discourseComputed("position", "model.topics.length")
|
@discourseComputed("position", "model.topics.length")
|
||||||
showBasedOnPosition(position, topicCount) {
|
showBasedOnPosition(position, topicCount) {
|
||||||
if (position !== "top") {
|
if (position !== "top") {
|
||||||
return true;
|
return topicCount > 5;
|
||||||
}
|
}
|
||||||
|
return true;
|
||||||
return this.currentUser?.new_new_view_enabled || topicCount > 5;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
@discourseComputed("selectedTopics.length")
|
@discourseComputed("selectedTopics.length")
|
||||||
|
@ -2,10 +2,12 @@ import { tracked } from "@glimmer/tracking";
|
|||||||
import Controller from "@ember/controller";
|
import Controller from "@ember/controller";
|
||||||
import { action } from "@ember/object";
|
import { action } from "@ember/object";
|
||||||
import { inject as service } from "@ember/service";
|
import { inject as service } from "@ember/service";
|
||||||
|
import DismissNew from "discourse/components/modal/dismiss-new";
|
||||||
import BulkSelectHelper from "discourse/lib/bulk-select-helper";
|
import BulkSelectHelper from "discourse/lib/bulk-select-helper";
|
||||||
import { filterTypeForMode } from "discourse/lib/filter-mode";
|
import { filterTypeForMode } from "discourse/lib/filter-mode";
|
||||||
import { disableImplicitInjections } from "discourse/lib/implicit-injections";
|
import { disableImplicitInjections } from "discourse/lib/implicit-injections";
|
||||||
import { defineTrackedProperty } from "discourse/lib/tracked-tools";
|
import { defineTrackedProperty } from "discourse/lib/tracked-tools";
|
||||||
|
import Topic from "discourse/models/topic";
|
||||||
|
|
||||||
// Just add query params here to have them automatically passed to topic list filters.
|
// Just add query params here to have them automatically passed to topic list filters.
|
||||||
export const queryParams = {
|
export const queryParams = {
|
||||||
@ -49,6 +51,9 @@ export default class DiscoveryListController extends Controller {
|
|||||||
@service siteSettings;
|
@service siteSettings;
|
||||||
@service site;
|
@service site;
|
||||||
@service currentUser;
|
@service currentUser;
|
||||||
|
@service router;
|
||||||
|
@service topicTrackingState;
|
||||||
|
@service modal;
|
||||||
|
|
||||||
@tracked model;
|
@tracked model;
|
||||||
|
|
||||||
@ -111,6 +116,52 @@ export default class DiscoveryListController extends Controller {
|
|||||||
return this.order ?? this.model.list.get("params.order") ?? "activity";
|
return this.order ?? this.model.list.get("params.order") ?? "activity";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async callResetNew(
|
||||||
|
dismissPosts = false,
|
||||||
|
dismissTopics = false,
|
||||||
|
untrack = false
|
||||||
|
) {
|
||||||
|
const isTracked =
|
||||||
|
(this.router.currentRoute.queryParams["f"] ||
|
||||||
|
this.router.currentRoute.queryParams["filter"]) === "tracked";
|
||||||
|
|
||||||
|
let topicIds = this.bulkSelectHelper.selected.map((topic) => topic.id);
|
||||||
|
const result = await Topic.resetNew(
|
||||||
|
this.model.category,
|
||||||
|
!this.model.noSubcategories,
|
||||||
|
{
|
||||||
|
tracked: isTracked,
|
||||||
|
tag: this.model.tag,
|
||||||
|
topicIds,
|
||||||
|
dismissPosts,
|
||||||
|
dismissTopics,
|
||||||
|
untrack,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.topic_ids) {
|
||||||
|
this.topicTrackingState.removeTopics(result.topic_ids);
|
||||||
|
}
|
||||||
|
this.router.refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
resetNew() {
|
||||||
|
if (!this.currentUser.new_new_view_enabled) {
|
||||||
|
return this.callResetNew();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.modal.show(DismissNew, {
|
||||||
|
model: {
|
||||||
|
selectedTopics: this.bulkSelectHelper.selected,
|
||||||
|
subset: this.model.listParams?.subset,
|
||||||
|
dismissCallback: ({ dismissPosts, dismissTopics, untrack }) => {
|
||||||
|
this.callResetNew(dismissPosts, dismissTopics, untrack);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
@action
|
@action
|
||||||
createTopic() {
|
createTopic() {
|
||||||
this.composer.openNewTopic({
|
this.composer.openNewTopic({
|
||||||
@ -148,4 +199,9 @@ export default class DiscoveryListController extends Controller {
|
|||||||
toggleTagInfo() {
|
toggleTagInfo() {
|
||||||
this.toggleProperty("showTagInfo");
|
this.toggleProperty("showTagInfo");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
dismissRead(operationType, options) {
|
||||||
|
this.bulkSelectHelper.dismissRead(operationType, options);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -16,6 +16,11 @@
|
|||||||
@canCreateTopicOnTag={{this.model.canCreateTopicOnTag}}
|
@canCreateTopicOnTag={{this.model.canCreateTopicOnTag}}
|
||||||
@toggleTagInfo={{this.toggleTagInfo}}
|
@toggleTagInfo={{this.toggleTagInfo}}
|
||||||
@tagNotification={{this.model.tagNotification}}
|
@tagNotification={{this.model.tagNotification}}
|
||||||
|
@model={{this.model.list}}
|
||||||
|
@showDismissRead={{this.showDismissRead}}
|
||||||
|
@showResetNew={{this.showResetNew}}
|
||||||
|
@dismissRead={{this.dismissRead}}
|
||||||
|
@resetNew={{this.resetNew}}
|
||||||
/>
|
/>
|
||||||
</:navigation>
|
</:navigation>
|
||||||
|
|
||||||
@ -44,6 +49,8 @@
|
|||||||
@tag={{this.model.tag}}
|
@tag={{this.model.tag}}
|
||||||
@changeSort={{this.changeSort}}
|
@changeSort={{this.changeSort}}
|
||||||
@changeNewListSubset={{this.changeNewListSubset}}
|
@changeNewListSubset={{this.changeNewListSubset}}
|
||||||
|
@dismissRead={{this.dismissRead}}
|
||||||
|
@resetNew={{this.resetNew}}
|
||||||
/>
|
/>
|
||||||
</:list>
|
</:list>
|
||||||
</Discovery::Layout>
|
</Discovery::Layout>
|
@ -170,7 +170,7 @@ acceptance("Keyboard Shortcuts - Authenticated Users", function (needs) {
|
|||||||
"mark read has been called on the backend once"
|
"mark read has been called on the backend once"
|
||||||
);
|
);
|
||||||
|
|
||||||
// we get rid of all but one topic so the top dismiss button doesn't
|
// we get rid of all but one topic so the bottom dismiss button doesn't
|
||||||
// show up, as it only appears if there are too many topics pushing
|
// show up, as it only appears if there are too many topics pushing
|
||||||
// the bottom button out of the viewport
|
// the bottom button out of the viewport
|
||||||
let originalTopics = [...topicList.topic_list.topics];
|
let originalTopics = [...topicList.topic_list.topics];
|
||||||
@ -180,8 +180,8 @@ acceptance("Keyboard Shortcuts - Authenticated Users", function (needs) {
|
|||||||
await visit("/");
|
await visit("/");
|
||||||
await visit("/unread");
|
await visit("/unread");
|
||||||
assert.notOk(
|
assert.notOk(
|
||||||
exists("#dismiss-topics-top"),
|
exists("#dismiss-topics-bottom"),
|
||||||
"dismiss unread top button is hidden"
|
"dismiss unread bottom button is hidden"
|
||||||
);
|
);
|
||||||
await triggerKeyEvent(document, "keypress", "X");
|
await triggerKeyEvent(document, "keypress", "X");
|
||||||
await triggerKeyEvent(document, "keypress", "T");
|
await triggerKeyEvent(document, "keypress", "T");
|
||||||
@ -216,7 +216,7 @@ acceptance("Keyboard Shortcuts - Authenticated Users", function (needs) {
|
|||||||
await triggerKeyEvent(document, "keypress", "R");
|
await triggerKeyEvent(document, "keypress", "R");
|
||||||
assert.strictEqual(resetNewCalled, 1);
|
assert.strictEqual(resetNewCalled, 1);
|
||||||
|
|
||||||
// we get rid of all but one topic so the top dismiss button doesn't
|
// we get rid of all but one topic so the bottom dismiss button doesn't
|
||||||
// show up, as it only appears if there are too many topics pushing
|
// show up, as it only appears if there are too many topics pushing
|
||||||
// the bottom button out of the viewport
|
// the bottom button out of the viewport
|
||||||
let originalTopics = [...topicList.topic_list.topics];
|
let originalTopics = [...topicList.topic_list.topics];
|
||||||
@ -226,8 +226,8 @@ acceptance("Keyboard Shortcuts - Authenticated Users", function (needs) {
|
|||||||
await visit("/");
|
await visit("/");
|
||||||
await visit("/new");
|
await visit("/new");
|
||||||
assert.notOk(
|
assert.notOk(
|
||||||
exists("#dismiss-new-top"),
|
exists("#dismiss-new-bottom"),
|
||||||
"dismiss new top button has been hidden"
|
"dismiss new bottom button has been hidden"
|
||||||
);
|
);
|
||||||
await triggerKeyEvent(document, "keypress", "X");
|
await triggerKeyEvent(document, "keypress", "X");
|
||||||
await triggerKeyEvent(document, "keypress", "R");
|
await triggerKeyEvent(document, "keypress", "R");
|
||||||
|
@ -76,6 +76,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dismiss-container-top:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-heading {
|
.category-heading {
|
||||||
|
@ -449,10 +449,6 @@ tr.category-topic-link {
|
|||||||
margin: 1.5em 0 1em;
|
margin: 1.5em 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.dismiss-read {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// base defines extra padding for easier click/top of title field
|
// base defines extra padding for easier click/top of title field
|
||||||
// this is a bit too much for mobile
|
// this is a bit too much for mobile
|
||||||
td .main-link {
|
td .main-link {
|
||||||
|
@ -26,14 +26,14 @@ module PageObjects
|
|||||||
end
|
end
|
||||||
|
|
||||||
def dismiss_unread(untrack: false)
|
def dismiss_unread(untrack: false)
|
||||||
click_button("dismiss-topics-bottom")
|
click_button("dismiss-topics-top")
|
||||||
find(".dismiss-read-modal__stop-tracking").click if untrack
|
find(".dismiss-read-modal__stop-tracking").click if untrack
|
||||||
click_button("dismiss-read-confirm")
|
click_button("dismiss-read-confirm")
|
||||||
self
|
self
|
||||||
end
|
end
|
||||||
|
|
||||||
def dismiss_new
|
def dismiss_new
|
||||||
click_button("dismiss-new-bottom")
|
click_button("dismiss-new-top")
|
||||||
self
|
self
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
Loading…
Reference in New Issue
Block a user