Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: extensibility improvements #3729

Merged
merged 7 commits into from
Apr 16, 2023
Merged

chore: extensibility improvements #3729

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3a9d58c
chore: improve tags page extensibility
SychO9 Jan 21, 2023
da789eb
chore: improve discussion list item extensibility
SychO9 Jan 21, 2023
f06659d
chore: improve change password modal extensibility
SychO9 Jan 21, 2023
4fa73f3
chore: item-listify tags page
SychO9 Jan 21, 2023
285d3aa
chore: item-listify change email modal
SychO9 Jan 21, 2023
1f84074
Merge branch 'main' into sm/extensibility-improvements
SychO9 Feb 21, 2023
cf74431
chore: simplify data flow
SychO9 Feb 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion extensions/tags/js/src/common/helpers/tagLabel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export default function tagLabel(tag, attrs = {}) {
link ? Link : 'span',
attrs,
<span className="TagLabel-text">
{tag && tag.icon() && tagIcon(tag, {}, { useColor: false })} {tagText}
{tag && tag.icon() && tagIcon(tag, { className: 'TagLabel-icon' }, { useColor: false })}
<span className="TagLabel-name">{tagText}</span>
</span>
);
}
147 changes: 93 additions & 54 deletions extensions/tags/js/src/forum/components/TagsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import IndexPage from 'flarum/forum/components/IndexPage';
import Link from 'flarum/common/components/Link';
import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
import listItems from 'flarum/common/helpers/listItems';
import ItemList from 'flarum/common/utils/ItemList';
import humanTime from 'flarum/common/helpers/humanTime';
import textContrastClass from 'flarum/common/helpers/textContrastClass';
import classList from 'flarum/common/utils/classList';
Expand Down Expand Up @@ -37,69 +38,107 @@ export default class TagsPage extends Page {
});
}

oncreate(vnode) {
super.oncreate(vnode);

app.setTitle(app.translator.trans('flarum-tags.forum.all_tags.meta_title_text'));
app.setTitleCount(0);
}

view() {
return <div className="TagsPage">{this.pageContent().toArray()}</div>;
}

pageContent() {
const items = new ItemList();

items.add('hero', this.hero(), 100);
items.add('main', <div className="container">{this.mainContent().toArray()}</div>, 10);

return items;
}

mainContent() {
const items = new ItemList();

items.add('sidebar', this.sidebar(), 100);
items.add('content', this.content(), 10);

return items;
}

content() {
return <div className="TagsPage-content sideNavOffset">{this.contentItems().toArray()}</div>;
}

contentItems() {
const items = new ItemList();

if (this.loading) {
return <LoadingIndicator />;
items.add('loading', <LoadingIndicator />);
} else {
const pinned = this.tags.filter((tag) => tag.position() !== null);
const cloud = this.tags.filter((tag) => tag.position() === null);

items.add('tagTiles', this.tagTileListView(pinned), 100);

if (cloud.length) {
items.add('cloud', this.cloudView(cloud), 10);
}
}

const pinned = this.tags.filter((tag) => tag.position() !== null);
const cloud = this.tags.filter((tag) => tag.position() === null);
return items;
}

hero() {
return IndexPage.prototype.hero();
}

sidebar() {
return (
<div className="TagsPage">
{IndexPage.prototype.hero()}
<div className="container">
<nav className="TagsPage-nav IndexPage-nav sideNav">
<ul>{listItems(IndexPage.prototype.sidebarItems().toArray())}</ul>
</nav>

<div className="TagsPage-content sideNavOffset">
<ul className="TagTiles">
{pinned.map((tag) => {
const lastPostedDiscussion = tag.lastPostedDiscussion();
const children = sortTags(tag.children() || []);

return (
<li className={classList('TagTile', { colored: tag.color() }, textContrastClass(tag.color()))} style={{ '--tag-bg': tag.color() }}>
<Link className="TagTile-info" href={app.route.tag(tag)}>
{tag.icon() && tagIcon(tag, {}, { useColor: false })}
<h3 className="TagTile-name">{tag.name()}</h3>
<p className="TagTile-description">{tag.description()}</p>
{children ? (
<div className="TagTile-children">
{children.map((child) => [<Link href={app.route.tag(child)}>{child.name()}</Link>, ' '])}
</div>
) : (
''
)}
</Link>
{lastPostedDiscussion ? (
<Link
className="TagTile-lastPostedDiscussion"
href={app.route.discussion(lastPostedDiscussion, lastPostedDiscussion.lastPostNumber())}
>
<span className="TagTile-lastPostedDiscussion-title">{lastPostedDiscussion.title()}</span>
{humanTime(lastPostedDiscussion.lastPostedAt())}
</Link>
) : (
<span className="TagTile-lastPostedDiscussion" />
)}
</li>
);
})}
</ul>

{cloud.length ? <div className="TagCloud">{cloud.map((tag) => [tagLabel(tag, { link: true }), ' '])}</div> : ''}
</div>
</div>
</div>
<nav className="TagsPage-nav IndexPage-nav sideNav">
<ul>{listItems(this.sidebarItems().toArray())}</ul>
</nav>
);
}

oncreate(vnode) {
super.oncreate(vnode);
sidebarItems() {
return IndexPage.prototype.sidebarItems();
}

app.setTitle(app.translator.trans('flarum-tags.forum.all_tags.meta_title_text'));
app.setTitleCount(0);
tagTileListView(pinned) {
return <ul className="TagTiles">{pinned.map(this.tagTileView.bind(this))}</ul>;
}

tagTileView(tag) {
const lastPostedDiscussion = tag.lastPostedDiscussion();
const children = sortTags(tag.children() || []);

return (
<li className={classList('TagTile', { colored: tag.color() }, textContrastClass(tag.color()))} style={{ '--tag-bg': tag.color() }}>
<Link className="TagTile-info" href={app.route.tag(tag)}>
{tag.icon() && tagIcon(tag, {}, { useColor: false })}
<h3 className="TagTile-name">{tag.name()}</h3>
<p className="TagTile-description">{tag.description()}</p>
{children ? (
<div className="TagTile-children">{children.map((child) => [<Link href={app.route.tag(child)}>{child.name()}</Link>, ' '])}</div>
) : (
''
)}
</Link>
{lastPostedDiscussion ? (
<Link className="TagTile-lastPostedDiscussion" href={app.route.discussion(lastPostedDiscussion, lastPostedDiscussion.lastPostNumber())}>
<span className="TagTile-lastPostedDiscussion-title">{lastPostedDiscussion.title()}</span>
{humanTime(lastPostedDiscussion.lastPostedAt())}
</Link>
) : (
<span className="TagTile-lastPostedDiscussion" />
)}
</li>
);
}

cloudView(cloud) {
return <div className="TagCloud">{cloud.map((tag) => [tagLabel(tag, { link: true }), ' '])}</div>;
}
}
131 changes: 74 additions & 57 deletions framework/core/js/src/forum/components/ChangeEmailModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import app from '../../forum/app';
import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
import Button from '../../common/components/Button';
import Stream from '../../common/utils/Stream';
import Mithril from 'mithril';
import type Mithril from 'mithril';
import RequestError from '../../common/utils/RequestError';
import ItemList from '../../common/utils/ItemList';

/**
* The `ChangeEmailModal` component shows a modal dialog which allows the user
Expand Down Expand Up @@ -41,60 +42,75 @@ export default class ChangeEmailModal<CustomAttrs extends IInternalModalAttrs =
}

content() {
return (
<div className="Modal-body">
<div className="Form Form--centered">{this.fields().toArray()}</div>
</div>
);
}

fields(): ItemList<Mithril.Children> {
const items = new ItemList<Mithril.Children>();

if (this.success) {
return (
<div className="Modal-body">
<div className="Form Form--centered">
<p className="helpText">
{app.translator.trans('core.forum.change_email.confirmation_message', { email: <strong>{this.email()}</strong> })}
</p>
<div className="Form-group">
<Button className="Button Button--primary Button--block" onclick={this.hide.bind(this)}>
{app.translator.trans('core.forum.change_email.dismiss_button')}
</Button>
</div>
</div>
items.add(
'help',
<p className="helpText">
{app.translator.trans('core.forum.change_email.confirmation_message', {
email: <strong>{this.email()}</strong>,
})}
</p>
);

items.add(
'dismiss',
<div className="Form-group">
<Button className="Button Button--primary Button--block" onclick={this.hide.bind(this)}>
{app.translator.trans('core.forum.change_email.dismiss_button')}
</Button>
</div>
);
} else {
items.add(
'email',
<div className="Form-group">
<input
type="email"
name="email"
className="FormControl"
placeholder={app.session.user!.email()}
bidi={this.email}
disabled={this.loading}
/>
</div>
);
}

return (
<div className="Modal-body">
<div className="Form Form--centered">
<div className="Form-group">
<input
type="email"
name="email"
className="FormControl"
placeholder={app.session.user!.email()}
bidi={this.email}
disabled={this.loading}
/>
</div>
<div className="Form-group">
<input
type="password"
name="password"
className="FormControl"
autocomplete="current-password"
placeholder={app.translator.trans('core.forum.change_email.confirm_password_placeholder')}
bidi={this.password}
disabled={this.loading}
/>
</div>
<div className="Form-group">
{Button.component(
{
className: 'Button Button--primary Button--block',
type: 'submit',
loading: this.loading,
},
app.translator.trans('core.forum.change_email.submit_button')
)}
</div>
items.add(
'password',
<div className="Form-group">
<input
type="password"
name="password"
className="FormControl"
autocomplete="current-password"
placeholder={app.translator.trans('core.forum.change_email.confirm_password_placeholder')}
bidi={this.password}
disabled={this.loading}
/>
</div>
</div>
);
);

items.add(
'submit',
<div className="Form-group">
<Button className="Button Button--primary Button--block" type="submit" loading={this.loading}>
{app.translator.trans('core.forum.change_email.submit_button')}
</Button>
</div>
);
}

return items;
}

onsubmit(e: SubmitEvent) {
Expand All @@ -111,20 +127,21 @@ export default class ChangeEmailModal<CustomAttrs extends IInternalModalAttrs =
this.alertAttrs = null;

app.session
.user!.save(
{ email: this.email() },
{
errorHandler: this.onerror.bind(this),
meta: { password: this.password() },
}
)
.user!.save(this.requestAttributes(), {
errorHandler: this.onerror.bind(this),
meta: { password: this.password() },
})
.then(() => {
this.success = true;
})
.catch(() => {})
.then(this.loaded.bind(this));
}

requestAttributes() {
return { email: this.email() };
}

onerror(error: RequestError) {
if (error.status === 401 && error.alert) {
error.alert.content = app.translator.trans('core.forum.change_email.incorrect_password_message');
Expand Down
Loading