9b10a78d82
* Extract QuickAccessPanel from UserNotifications.
* FEATURE: Quick access panels in user menu.
This feature adds quick access panels for bookmarks and personal
messages. It allows uses to browse recent items directly in the user
menu, without being redirected to the full pages.
* REFACTOR: Use QuickAccessItem for messages.
Reusing `DefaultNotificationItem` feels nice but it actually requires a
lot of extra work that is not needed for a quick access item.
Also, `DefaultNotificationItem` shows an incorrect tooptip ("unread
private message"), and it is not trivial to remove / override that.
* Use a plain JS object instead.
An Ember object was required when `DefaultNotificationItem` was used.
* Prefix instead suffix `_` for private helpers.
* Set to null instead of deleting object keys.
JavaScript engines can optimize object property access based on the
object’s shape. https://mathiasbynens.be/notes/shapes-ics
* Change trivial try/catch to one-liners.
* Return the promise in case needs to be waited on.
* Refactor showAll to a link with href
* Store `emptyStatePlaceholderItemText` in state.
* Store items in Session singleton instead.
We can drop `staleItems` (and `findStaleItems`) altogether. Because
`(old) items === staleItems` when switching back to a quick access
panel.
* Add `limit` parameter to the `user_actions` API.
* Explicitly import Session instead.
144 lines
3.3 KiB
JavaScript
144 lines
3.3 KiB
JavaScript
import Session from "discourse/models/session";
|
|
import { createWidget } from "discourse/widgets/widget";
|
|
import { h } from "virtual-dom";
|
|
import { headerHeight } from "discourse/components/site-header";
|
|
|
|
const AVERAGE_ITEM_HEIGHT = 55;
|
|
|
|
/**
|
|
* This tries to enforce a consistent flow of fetching, caching, refreshing,
|
|
* and rendering for "quick access items".
|
|
*
|
|
* There are parts to introducing a new quick access panel:
|
|
* 1. A user menu link that sends a `quickAccess` action, with a unique `type`.
|
|
* 2. A `quick-access-${type}` widget, extended from `quick-access-panel`.
|
|
*/
|
|
export default createWidget("quick-access-panel", {
|
|
tagName: "div.quick-access-panel",
|
|
emptyStatePlaceholderItemKey: "",
|
|
|
|
buildKey: () => {
|
|
throw Error('Cannot attach abstract widget "quick-access-panel".');
|
|
},
|
|
|
|
markReadRequest() {
|
|
return Ember.RSVP.Promise.resolve();
|
|
},
|
|
|
|
hasUnread() {
|
|
return false;
|
|
},
|
|
|
|
showAllHref() {
|
|
return "";
|
|
},
|
|
|
|
hasMore() {
|
|
return this.getItems().length >= this.estimateItemLimit();
|
|
},
|
|
|
|
findNewItems() {
|
|
return Ember.RSVP.Promise.resolve([]);
|
|
},
|
|
|
|
newItemsLoaded() {},
|
|
|
|
itemHtml(item) {}, // eslint-disable-line no-unused-vars
|
|
|
|
emptyStatePlaceholderItem() {
|
|
if (this.emptyStatePlaceholderItemKey) {
|
|
return h("li.read", I18n.t(this.emptyStatePlaceholderItemKey));
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
|
|
defaultState() {
|
|
return { items: [], loading: false, loaded: false };
|
|
},
|
|
|
|
markRead() {
|
|
return this.markReadRequest().then(() => {
|
|
this.refreshNotifications(this.state);
|
|
});
|
|
},
|
|
|
|
estimateItemLimit() {
|
|
// Estimate (poorly) the amount of notifications to return.
|
|
let limit = Math.round(
|
|
($(window).height() - headerHeight()) / AVERAGE_ITEM_HEIGHT
|
|
);
|
|
|
|
// We REALLY don't want to be asking for negative counts of notifications
|
|
// less than 5 is also not that useful.
|
|
if (limit < 5) {
|
|
limit = 5;
|
|
} else if (limit > 40) {
|
|
limit = 40;
|
|
}
|
|
|
|
return limit;
|
|
},
|
|
|
|
refreshNotifications(state) {
|
|
if (this.loading) {
|
|
return;
|
|
}
|
|
|
|
if (this.getItems().length === 0) {
|
|
state.loading = true;
|
|
}
|
|
|
|
this.findNewItems()
|
|
.then(newItems => this.setItems(newItems))
|
|
.catch(() => this.setItems([]))
|
|
.finally(() => {
|
|
state.loading = false;
|
|
state.loaded = true;
|
|
this.newItemsLoaded();
|
|
this.sendWidgetAction("itemsLoaded", {
|
|
hasUnread: this.hasUnread(),
|
|
markRead: () => this.markRead()
|
|
});
|
|
this.scheduleRerender();
|
|
});
|
|
},
|
|
|
|
html(attrs, state) {
|
|
if (!state.loaded) {
|
|
this.refreshNotifications(state);
|
|
}
|
|
|
|
if (state.loading) {
|
|
return [h("div.spinner-container", h("div.spinner"))];
|
|
}
|
|
|
|
const items = this.getItems().length
|
|
? this.getItems().map(item => this.itemHtml(item))
|
|
: [this.emptyStatePlaceholderItem()];
|
|
|
|
if (this.hasMore()) {
|
|
items.push(
|
|
h(
|
|
"li.read.last.show-all",
|
|
this.attach("link", {
|
|
title: "view_all",
|
|
icon: "chevron-down",
|
|
href: this.showAllHref()
|
|
})
|
|
)
|
|
);
|
|
}
|
|
|
|
return [h("ul", items)];
|
|
},
|
|
|
|
getItems() {
|
|
return Session.currentProp(`${this.key}-items`) || [];
|
|
},
|
|
|
|
setItems(newItems) {
|
|
Session.currentProp(`${this.key}-items`, newItems);
|
|
}
|
|
});
|