mirror of
https://github.com/flarum/core.git
synced 2025-07-10 11:26:24 +02:00
The behaviour is not overly intuitive, and the icon wasn't helping (hamburger icon usually means "menu"). Now the back button always goes back to the index, no matter where you are, and there's a tooltip that says "Back to discussion list".
162 lines
4.0 KiB
JavaScript
162 lines
4.0 KiB
JavaScript
import Page from 'flarum/components/Page';
|
|
import ItemList from 'flarum/utils/ItemList';
|
|
import affixSidebar from 'flarum/utils/affixSidebar';
|
|
import UserCard from 'flarum/components/UserCard';
|
|
import LoadingIndicator from 'flarum/components/LoadingIndicator';
|
|
import SelectDropdown from 'flarum/components/SelectDropdown';
|
|
import LinkButton from 'flarum/components/LinkButton';
|
|
import Separator from 'flarum/components/Separator';
|
|
import listItems from 'flarum/helpers/listItems';
|
|
|
|
/**
|
|
* The `UserPage` component shows a user's profile. It can be extended to show
|
|
* content inside of the content area. See `ActivityPage` and `SettingsPage` for
|
|
* examples.
|
|
*
|
|
* @abstract
|
|
*/
|
|
export default class UserPage extends Page {
|
|
init() {
|
|
super.init();
|
|
|
|
/**
|
|
* The user this page is for.
|
|
*
|
|
* @type {User}
|
|
*/
|
|
this.user = null;
|
|
|
|
this.bodyClass = 'App--user';
|
|
}
|
|
|
|
view() {
|
|
return (
|
|
<div className="UserPage">
|
|
{this.user ? [
|
|
UserCard.component({
|
|
user: this.user,
|
|
className: 'Hero UserHero',
|
|
editable: this.user.canEdit() || this.user === app.session.user,
|
|
controlsButtonClassName: 'Button'
|
|
}),
|
|
<div className="container">
|
|
<nav className="sideNav UserPage-nav" config={affixSidebar}>
|
|
<ul>{listItems(this.sidebarItems().toArray())}</ul>
|
|
</nav>
|
|
<div className="sideNavOffset UserPage-content">
|
|
{this.content()}
|
|
</div>
|
|
</div>
|
|
] : [
|
|
LoadingIndicator.component({className: 'LoadingIndicator--block'})
|
|
]}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Get the content to display in the user page.
|
|
*
|
|
* @return {VirtualElement}
|
|
*/
|
|
content() {
|
|
}
|
|
|
|
/**
|
|
* Initialize the component with a user, and trigger the loading of their
|
|
* activity feed.
|
|
*
|
|
* @param {User} user
|
|
* @protected
|
|
*/
|
|
show(user) {
|
|
this.user = user;
|
|
|
|
app.setTitle(user.username());
|
|
|
|
m.redraw();
|
|
}
|
|
|
|
/**
|
|
* Given a username, load the user's profile from the store, or make a request
|
|
* if we don't have it yet. Then initialize the profile page with that user.
|
|
*
|
|
* @param {String} username
|
|
*/
|
|
loadUser(username) {
|
|
const lowercaseUsername = username.toLowerCase();
|
|
|
|
app.store.all('users').some(user => {
|
|
if (user.username().toLowerCase() === lowercaseUsername && user.joinTime()) {
|
|
this.show(user);
|
|
return true;
|
|
}
|
|
});
|
|
|
|
if (!this.user) {
|
|
app.store.find('users', username).then(this.show.bind(this));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Build an item list for the content of the sidebar.
|
|
*
|
|
* @return {ItemList}
|
|
*/
|
|
sidebarItems() {
|
|
const items = new ItemList();
|
|
|
|
items.add('nav',
|
|
SelectDropdown.component({
|
|
children: this.navItems().toArray(),
|
|
className: 'App-titleControl',
|
|
buttonClassName: 'Button'
|
|
})
|
|
);
|
|
|
|
return items;
|
|
}
|
|
|
|
/**
|
|
* Build an item list for the navigation in the sidebar.
|
|
*
|
|
* @return {ItemList}
|
|
*/
|
|
navItems() {
|
|
const items = new ItemList();
|
|
const user = this.user;
|
|
|
|
items.add('posts',
|
|
LinkButton.component({
|
|
href: app.route('user.posts', {username: user.username()}),
|
|
children: [app.translator.trans('core.forum.user.posts_link'), <span className="Button-badge">{user.commentsCount()}</span>],
|
|
icon: 'comment-o'
|
|
}),
|
|
100
|
|
);
|
|
|
|
items.add('discussions',
|
|
LinkButton.component({
|
|
href: app.route('user.discussions', {username: user.username()}),
|
|
children: [app.translator.trans('core.forum.user.discussions_link'), <span className="Button-badge">{user.discussionsCount()}</span>],
|
|
icon: 'reorder'
|
|
}),
|
|
90
|
|
);
|
|
|
|
if (app.session.user === user) {
|
|
items.add('separator', Separator.component(), -90);
|
|
items.add('settings',
|
|
LinkButton.component({
|
|
href: app.route('settings'),
|
|
children: app.translator.trans('core.forum.user.settings_link'),
|
|
icon: 'cog'
|
|
}),
|
|
-100
|
|
);
|
|
}
|
|
|
|
return items;
|
|
}
|
|
}
|