Browse Source

usability features

This are all the commits from another PR combined into a single commit.
richardj-feature/frontend-a11y
Richard 2 years ago
parent
commit
2f9a052f89
  1. 25
      ui/src/components/communities.tsx
  2. 28
      ui/src/components/community-form.tsx
  3. 12
      ui/src/components/community.tsx
  4. 2
      ui/src/components/create-community.tsx
  5. 2
      ui/src/components/create-post.tsx
  6. 10
      ui/src/components/footer.tsx
  7. 26
      ui/src/components/inbox.tsx
  8. 53
      ui/src/components/login.tsx
  9. 10
      ui/src/components/main.tsx
  10. 14
      ui/src/components/modlog.tsx
  11. 13
      ui/src/components/navbar.tsx
  12. 2
      ui/src/components/password_change.tsx
  13. 40
      ui/src/components/post-form.tsx
  14. 49
      ui/src/components/post-listing.tsx
  15. 11
      ui/src/components/post-listings.tsx
  16. 27
      ui/src/components/post.tsx
  17. 22
      ui/src/components/search.tsx
  18. 27
      ui/src/components/setup.tsx
  19. 21
      ui/src/components/sidebar.tsx
  20. 27
      ui/src/components/site-form.tsx
  21. 18
      ui/src/components/sort-select.tsx
  22. 16
      ui/src/components/sponsors.tsx
  23. 81
      ui/src/components/user.tsx
  24. 64
      ui/src/translations/de.ts
  25. 2
      ui/src/translations/en.ts

25
ui/src/components/communities.tsx

@ -76,37 +76,37 @@ export class Communities extends Component<any, CommunitiesState> {
return (
<div class="container">
{this.state.loading ? (
<h5 class="">
<p class="text-center">
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
</svg>
</h5>
</p>
) : (
<div>
<h5>
<T i18nKey="list_of_communities">#</T>
{ i18n.t('list_of_communities') }
</h5>
<div class="table-responsive">
<table id="community_table" class="table table-sm table-hover">
<thead class="pointer">
<tr>
<th>
<T i18nKey="name">#</T>
{ i18n.t('name') }
</th>
<th class="d-none d-lg-table-cell">
<T i18nKey="title">#</T>
{ i18n.t('title') }
</th>
<th>
<T i18nKey="category">#</T>
{ i18n.t('category') }
</th>
<th class="text-right">
<T i18nKey="subscribers">#</T>
{ i18n.t('subscribers') }
</th>
<th class="text-right d-none d-lg-table-cell">
<T i18nKey="posts">#</T>
{ i18n.t('posts') }
</th>
<th class="text-right d-none d-lg-table-cell">
<T i18nKey="comments">#</T>
{ i18n.t('comments') }
</th>
<th></th>
</tr>
@ -149,7 +149,7 @@ export class Communities extends Component<any, CommunitiesState> {
this.handleSubscribe
)}
>
<T i18nKey="subscribe">#</T>
{ i18n.t('subscribe') }
</span>
)}
</td>
@ -173,15 +173,16 @@ export class Communities extends Component<any, CommunitiesState> {
class="btn btn-sm btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
<T i18nKey="prev">#</T>
{ i18n.t('prev') }
</button>
)}
{this.state.communities.length == communityLimit && (
<button
class="btn btn-sm btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
<T i18nKey="next">#</T>
{ i18n.t('next') }
</button>
)}
</div>

28
ui/src/components/community-form.tsx

@ -108,12 +108,13 @@ export class CommunityForm extends Component<
return (
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
<div class="form-group row">
<label class="col-12 col-form-label">
<T i18nKey="name">#</T>
<label class="col-12 col-form-label" for="community-name">
{ i18n.t('name') }
</label>
<div class="col-12">
<input
type="text"
id="community-name"
class="form-control"
value={this.state.communityForm.name}
onInput={linkEvent(this, this.handleCommunityNameChange)}
@ -125,13 +126,15 @@ export class CommunityForm extends Component<
/>
</div>
</div>
<div class="form-group row">
<label class="col-12 col-form-label">
<T i18nKey="title">#</T>
<label class="col-12 col-form-label" for="community-title">
{ i18n.t('title') }
</label>
<div class="col-12">
<input
type="text"
id="community-title"
value={this.state.communityForm.title}
onInput={linkEvent(this, this.handleCommunityTitleChange)}
class="form-control"
@ -142,13 +145,14 @@ export class CommunityForm extends Component<
</div>
</div>
<div class="form-group row">
<label class="col-12 col-form-label">
<T i18nKey="sidebar">#</T>
<label class="col-12 col-form-label" for="community-sidebar">
{ i18n.t('sidebar') }
</label>
<div class="col-12">
<textarea
id={this.id}
value={this.state.communityForm.description}
id="community-sidebar"
onInput={linkEvent(this, this.handleCommunityDescriptionChange)}
class="form-control"
rows={3}
@ -157,12 +161,13 @@ export class CommunityForm extends Component<
</div>
</div>
<div class="form-group row">
<label class="col-12 col-form-label">
<T i18nKey="category">#</T>
<label class="col-12 col-form-label" for="community-category">
{ i18n.t('category') }
</label>
<div class="col-12">
<select
class="form-control"
id="community-category"
value={this.state.communityForm.category_id}
onInput={linkEvent(this, this.handleCommunityCategoryChange)}
>
@ -179,12 +184,13 @@ export class CommunityForm extends Component<
<div class="form-check">
<input
class="form-check-input"
id="community-nsfw"
type="checkbox"
checked={this.state.communityForm.nsfw}
onChange={linkEvent(this, this.handleCommunityNsfwChange)}
/>
<label class="form-check-label">
<T i18nKey="nsfw">#</T>
<label class="form-check-label" for="community-nsfw">
{ i18n.t('nsfw') }
</label>
</div>
</div>
@ -209,7 +215,7 @@ export class CommunityForm extends Component<
class="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)}
>
<T i18nKey="cancel">#</T>
{ i18n.t('cancel') }
</button>
)}
</div>

12
ui/src/components/community.tsx

@ -128,11 +128,11 @@ export class Community extends Component<any, State> {
return (
<div class="container">
{this.state.loading ? (
<h5>
<p class="text-center">
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
</svg>
</h5>
</p>
) : (
<div class="row">
<div class="col-12 col-md-8">
@ -140,12 +140,12 @@ export class Community extends Component<any, State> {
{this.state.community.title}
{this.state.community.removed && (
<small className="ml-2 text-muted font-italic">
<T i18nKey="removed">#</T>
{ i18n.t('removed') }
</small>
)}
{this.state.community.nsfw && (
<small className="ml-2 text-muted font-italic">
<T i18nKey="nsfw">#</T>
{ i18n.t('nsfw') }
</small>
)}
</h5>
@ -192,7 +192,7 @@ export class Community extends Component<any, State> {
class="btn btn-sm btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
<T i18nKey="prev">#</T>
{ i18n.t('prev') }
</button>
)}
{this.state.posts.length == fetchLimit && (
@ -200,7 +200,7 @@ export class Community extends Component<any, State> {
class="btn btn-sm btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
<T i18nKey="next">#</T>
{ i18n.t('next') }
</button>
)}
</div>

2
ui/src/components/create-community.tsx

@ -23,7 +23,7 @@ export class CreateCommunity extends Component<any, any> {
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>
<T i18nKey="create_community">#</T>
{ i18n.t('create_community') }
</h5>
<CommunityForm onCreate={this.handleCommunityCreate} />
</div>

2
ui/src/components/create-post.tsx

@ -23,7 +23,7 @@ export class CreatePost extends Component<any, any> {
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>
<T i18nKey="create_post">#</T>
{ i18n.t('create_post') }
</h5>
<PostForm onCreate={this.handlePostCreate} params={this.params} />
</div>

10
ui/src/components/footer.tsx

@ -2,7 +2,7 @@ import { Component } from 'inferno';
import { Link } from 'inferno-router';
import { repoUrl } from '../utils';
import { version } from '../version';
import { T } from 'inferno-i18next';
import { i18n } from '../i18next';
export class Footer extends Component<any, any> {
constructor(props: any, context: any) {
@ -19,22 +19,22 @@ export class Footer extends Component<any, any> {
</li>
<li class="nav-item">
<Link class="nav-link" to="/modlog">
<T i18nKey="modlog">#</T>
{ i18n.t('modlog') }
</Link>
</li>
<li class="nav-item">
<a class="nav-link" href={'/docs/index.html'}>
<T i18nKey="docs">#</T>
{ i18n.t('docs') }
</a>
</li>
<li class="nav-item">
<Link class="nav-link" to="/sponsors">
<T i18nKey="donate">#</T>
{ i18n.t('donate') }
</Link>
</li>
<li class="nav-item">
<a class="nav-link" href={repoUrl}>
<T i18nKey="code">#</T>
{ i18n.t('code') }
</a>
</li>
</ul>

26
ui/src/components/inbox.tsx

@ -122,7 +122,7 @@ export class Inbox extends Component<any, InboxState> {
<ul class="list-inline mb-1 text-muted small font-weight-bold">
<li className="list-inline-item">
<span class="pointer" onClick={this.markAllAsRead}>
<T i18nKey="mark_all_as_read">#</T>
{ i18n.t('mark_all_as_read') }
</span>
</li>
</ul>
@ -148,13 +148,14 @@ export class Inbox extends Component<any, InboxState> {
class="custom-select custom-select-sm w-auto mr-2"
>
<option disabled>
<T i18nKey="type">#</T>
{ i18n.t('type') }
</option>
<option value={UnreadOrAll.Unread}>
<T i18nKey="unread">#</T>
{ i18n.t('unread') }
</option>
<option value={UnreadOrAll.All}>
<T i18nKey="all">#</T>
{ i18n.t('all') }
</option>
</select>
<select
@ -163,19 +164,22 @@ export class Inbox extends Component<any, InboxState> {
class="custom-select custom-select-sm w-auto mr-2"
>
<option disabled>
<T i18nKey="type">#</T>
{ i18n.t('type') }
</option>
<option value={UnreadType.All}>
<T i18nKey="all">#</T>
{ i18n.t('all') }
</option>
<option value={UnreadType.Both}>
{ i18n.t('both') }
</option>
<option value={UnreadType.Replies}>
<T i18nKey="replies">#</T>
{ i18n.t('replies') }
</option>
<option value={UnreadType.Mentions}>
<T i18nKey="mentions">#</T>
{ i18n.t('mentions') }
</option>
<option value={UnreadType.Messages}>
<T i18nKey="messages">#</T>
{ i18n.t('messages') }
</option>
</select>
<SortSelect
@ -248,14 +252,14 @@ export class Inbox extends Component<any, InboxState> {
class="btn btn-sm btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
<T i18nKey="prev">#</T>
{ i18n.t('prev') }
</button>
)}
<button
class="btn btn-sm btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
<T i18nKey="next">#</T>
{ i18n.t('next') }
</button>
</div>
);

53
ui/src/components/login.tsx

@ -78,15 +78,16 @@ export class Login extends Component<any, State> {
return (
<div>
<form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
<h5>Login</h5>
<h2>{ i18n.t('login') }</h2>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="email_or_username">#</T>
<label class="col-sm-2 col-form-label" for="login-email-or-username">
{ i18n.t('email_or_username') }
</label>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="login-email-or-username"
value={this.state.loginForm.username_or_email}
onInput={linkEvent(this, this.handleLoginUsernameChange)}
required
@ -95,12 +96,13 @@ export class Login extends Component<any, State> {
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="password">#</T>
<label class="col-sm-2 col-form-label" for="login-password">
{ i18n.t('password') }
</label>
<div class="col-sm-10">
<input
type="password"
id="login-password"
value={this.state.loginForm.password}
onInput={linkEvent(this, this.handleLoginPasswordChange)}
class="form-control"
@ -111,7 +113,7 @@ export class Login extends Component<any, State> {
onClick={linkEvent(this, this.handlePasswordReset)}
className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold"
>
<T i18nKey="forgot_password">#</T>
{ i18n.t('forgot_password') }
</button>
</div>
</div>
@ -135,16 +137,19 @@ export class Login extends Component<any, State> {
registerForm() {
return (
<form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
<h5>
<T i18nKey="sign_up">#</T>
</h5>
<h2>
{ i18n.t('sign_up') }
</h2>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="username">#</T>
<label class="col-sm-2 col-form-label" for="register-username">
{ i18n.t('username') }
</label>
<div class="col-sm-10">
<input
type="text"
id="register-username"
class="form-control"
value={this.state.registerForm.username}
onInput={linkEvent(this, this.handleRegisterUsernameChange)}
@ -155,13 +160,15 @@ export class Login extends Component<any, State> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="email">#</T>
<label class="col-sm-2 col-form-label" for="register-email">
{ i18n.t('email') }
</label>
<div class="col-sm-10">
<input
type="email"
id="register-email"
class="form-control"
placeholder={i18n.t('optional')}
value={this.state.registerForm.email}
@ -170,13 +177,15 @@ export class Login extends Component<any, State> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="password">#</T>
<label class="col-sm-2 col-form-label" for="register-password">
{ i18n.t('password') }
</label>
<div class="col-sm-10">
<input
type="password"
id="register-password"
value={this.state.registerForm.password}
onInput={linkEvent(this, this.handleRegisterPasswordChange)}
class="form-control"
@ -184,13 +193,15 @@ export class Login extends Component<any, State> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="verify_password">#</T>
<label class="col-sm-2 col-form-label" for="register-verify-password">
{ i18n.t('verify_password') }
</label>
<div class="col-sm-10">
<input
type="password"
id="register-verify-password"
value={this.state.registerForm.password_verify}
onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
class="form-control"
@ -198,18 +209,20 @@ export class Login extends Component<any, State> {
/>
</div>
</div>
{this.state.enable_nsfw && (
{ this.state.enable_nsfw && (
<div class="form-group row">
<div class="col-sm-10">
<div class="form-check">
<input
class="form-check-input"
id="register-show-nsfw"
type="checkbox"
checked={this.state.registerForm.show_nsfw}
onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
/>
<label class="form-check-label">
<T i18nKey="show_nsfw">#</T>
<label class="form-check-label" for="register-show-nsfw">
{ i18n.t('show_nsfw') }
</label>
</div>
</div>

10
ui/src/components/main.tsx

@ -159,8 +159,8 @@ export class Main extends Component<any, MainState> {
return (
<div class="container">
<div class="row">
<div class="col-12 col-md-8">{this.posts()}</div>
<div class="col-12 col-md-4">{this.my_sidebar()}</div>
<main role="main" class="col-12 col-md-8">{this.posts()}</main>
<aside class="col-12 col-md-4">{this.my_sidebar()}</aside>
</div>
</div>
);
@ -413,13 +413,13 @@ export class Main extends Component<any, MainState> {
posts() {
return (
<div>
<div class="main-content-wrapper">
{this.state.loading ? (
<h5>
<p class="text-center">
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
</svg>
</h5>
</p>
) : (
<div>
{this.selects()}

14
ui/src/components/modlog.tsx

@ -343,7 +343,7 @@ export class Modlog extends Component<any, ModlogState> {
return (
<div class="container">
{this.state.loading ? (
<h5 class="">
<h5 class="text-center">
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
</svg>
@ -359,15 +359,15 @@ export class Modlog extends Component<any, ModlogState> {
/c/{this.state.communityName}{' '}
</Link>
)}
<span>Modlog</span>
<span>{ i18n.t('modlog') }</span>
</h5>
<div class="table-responsive">
<table id="modlog_table" class="table table-sm table-hover">
<thead class="pointer">
<tr>
<th>Time</th>
<th>Mod</th>
<th>Action</th>
<th> { i18n.t('time')}</th>
<th>{ i18n.t('mod')}</th>
<th>{ i18n.t('action')}</th>
</tr>
</thead>
{this.combined()}
@ -388,14 +388,14 @@ export class Modlog extends Component<any, ModlogState> {
class="btn btn-sm btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
Prev
{ i18n.t('prev') }
</button>
)}
<button
class="btn btn-sm btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
Next
{ i18n.t('next') }
</button>
</div>
);

13
ui/src/components/navbar.tsx

@ -102,6 +102,7 @@ export class Navbar extends Component<any, NavbarState> {
<button
class="navbar-toggler"
type="button"
aria-label="menu"
onClick={linkEvent(this, this.expandNavbar)}
>
<span class="navbar-toggler-icon"></span>
@ -112,12 +113,12 @@ export class Navbar extends Component<any, NavbarState> {
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<Link class="nav-link" to="/communities">
<T i18nKey="communities">#</T>
{ i18n.t('communities') }
</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/search">
<T i18nKey="search">#</T>
{ i18n.t('search') }
</Link>
</li>
<li class="nav-item">
@ -128,17 +129,17 @@ export class Navbar extends Component<any, NavbarState> {
state: { prevPath: this.currentLocation },
}}
>
<T i18nKey="create_post">#</T>
{ i18n.t('create_post') }
</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/create_community">
<T i18nKey="create_community">#</T>
{ i18n.t('create_community') }
</Link>
</li>
<li className="nav-item">
<Link
class="nav-link"
class="nav-link ml-2"
to="/sponsors"
title={i18n.t('donate_to_lemmy')}
>
@ -186,7 +187,7 @@ export class Navbar extends Component<any, NavbarState> {
</>
) : (
<Link class="nav-link" to="/login">
<T i18nKey="login_sign_up">#</T>
{ i18n.t('login_sign_up') }
</Link>
)}
</ul>

2
ui/src/components/password_change.tsx

@ -59,7 +59,7 @@ export class PasswordChange extends Component<any, State> {
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>
<T i18nKey="password_change">#</T>
{ i18n.t('password_change') }
</h5>
{this.passwordChangeForm()}
</div>

40
ui/src/components/post-form.tsx

@ -151,12 +151,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div>
<form onSubmit={linkEvent(this, this.handlePostSubmit)}>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="url">#</T>
<label class="col-sm-2 col-form-label" for="post-url">
{ i18n.t('url') }
</label>
<div class="col-sm-10">
<input
type="url"
id="post-url"
class="form-control"
value={this.state.postForm.url}
onInput={linkEvent(this, this.handlePostUrlChange)}
@ -181,7 +182,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
className={`${UserService.Instance.user &&
'pointer'} d-inline-block mr-2 float-right text-muted small font-weight-bold`}
>
<T i18nKey="upload_image">#</T>
{ i18n.t('upload_image') }
</label>
<input
id="file-upload"
@ -201,7 +202,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
target="_blank"
class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
>
<T i18nKey="archive_link">#</T>
{ i18n.t('archive_link') }
</a>
)}
{this.state.imageLoading && (
@ -215,7 +216,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
{this.state.crossPosts.length > 0 && (
<>
<div class="my-1 text-muted small font-weight-bold">
<T i18nKey="cross_posts">#</T>
{ i18n.t('cross_posts') }
</div>
<PostListings showCommunity posts={this.state.crossPosts} />
</>
@ -223,12 +224,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="title">#</T>
<label class="col-sm-2 col-form-label" for="post-title">
{ i18n.t('title') }
</label>
<div class="col-sm-10">
<textarea
value={this.state.postForm.name}
id="post-title"
onInput={linkEvent(this, this.handlePostNameChange)}
class="form-control"
required
@ -239,21 +241,23 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
{this.state.suggestedPosts.length > 0 && (
<>
<div class="my-1 text-muted small font-weight-bold">
<T i18nKey="related_posts">#</T>
{ i18n.t('related_posts') }
</div>
<PostListings posts={this.state.suggestedPosts} />
</>
)}
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="body">#</T>
<label class="col-sm-2 col-form-label" for="post-body">
{ i18n.t('body') }
</label>
<div class="col-sm-10">
<textarea
id={this.id}
value={this.state.postForm.body}
id="post-body"
onInput={linkEvent(this, this.handlePostBodyChange)}
className={`form-control ${this.state.previewMode && 'd-none'}`}
rows={4}
@ -271,7 +275,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
.previewMode && 'active'}`}
onClick={linkEvent(this, this.handlePreviewToggle)}
>
<T i18nKey="preview">#</T>
{ i18n.t('preview') }
</button>
)}
<a
@ -279,18 +283,19 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
target="_blank"
class="d-inline-block float-right text-muted small font-weight-bold"
>
<T i18nKey="formatting_help">#</T>
{ i18n.t('formatting_help') }
</a>
</div>
</div>
{!this.props.post && (
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="community">#</T>
<label class="col-sm-2 col-form-label" for="post-community">
{ i18n.t('community') }
</label>
<div class="col-sm-10">
<select
class="form-control"
id="post-community"
value={this.state.postForm.community_id}
onInput={linkEvent(this, this.handlePostCommunityChange)}
>
@ -307,12 +312,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div class="form-check">
<input
class="form-check-input"
id="post-nsfw"
type="checkbox"
checked={this.state.postForm.nsfw}
onChange={linkEvent(this, this.handlePostNsfwChange)}
/>
<label class="form-check-label">
<T i18nKey="nsfw">#</T>
<label class="form-check-label" for="post-nsfw">
{ i18n.t('nsfw') }
</label>
</div>
</div>
@ -337,7 +343,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
class="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)}
>
<T i18nKey="cancel">#</T>
{ i18n.t('cancel') }
</button>
)}
</div>

49
ui/src/components/post-listing.tsx

@ -247,27 +247,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
{post.removed && (
<small className="ml-2 text-muted font-italic">
<T i18nKey="removed">#</T>
{ i18n.t('removed') }
</small>
)}
{post.deleted && (
<small className="ml-2 text-muted font-italic">
<T i18nKey="deleted">#</T>
{ i18n.t('deleted') }
</small>
)}
{post.locked && (
<small className="ml-2 text-muted font-italic">
<T i18nKey="locked">#</T>
{ i18n.t('locked') }
</small>
)}
{post.stickied && (
<small className="ml-2 text-muted font-italic">
<T i18nKey="stickied">#</T>
{ i18n.t('stickied') }
</small>
)}
{post.nsfw && (
<small className="ml-2 text-muted font-italic">
<T i18nKey="nsfw">#</T>
{ i18n.t('nsfw') }
</small>
)}
</div>
@ -289,17 +289,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</Link>
{this.isMod && (
<span className="mx-1 badge badge-light">
<T i18nKey="mod">#</T>
{ i18n.t('mod') }
</span>
)}
{this.isAdmin && (
<span className="mx-1 badge badge-light">
<T i18nKey="admin">#</T>
{ i18n.t('admin') }
</span>
)}
{(post.banned_from_community || post.banned) && (
<span className="mx-1 badge badge-danger">
<T i18nKey="banned">#</T>
{ i18n.t('banned') }
</span>
)}
{this.props.showCommunity && (
@ -406,14 +406,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
class="pointer"
onClick={linkEvent(this, this.handleModRemoveShow)}
>
<T i18nKey="remove">#</T>
{ i18n.t('remove') }
</span>
) : (
<span
class="pointer"
onClick={linkEvent(this, this.handleModRemoveSubmit)}
>
<T i18nKey="restore">#</T>
{ i18n.t('restore') }
</span>
)}
</li>
@ -430,7 +430,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.handleModBanFromCommunityShow
)}
>
<T i18nKey="ban">#</T>
{ i18n.t('ban') }
</span>
) : (
<span
@ -440,7 +440,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.handleModBanFromCommunitySubmit
)}
>
<T i18nKey="unban">#</T>
{ i18n.t('unban') }
</span>
)}
</li>
@ -487,7 +487,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.handleTransferCommunity
)}
>
<T i18nKey="yes">#</T>
{ i18n.t('yes') }
</span>
<span
class="pointer d-inline-block"
@ -496,7 +496,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.handleCancelShowConfirmTransferCommunity
)}
>
<T i18nKey="no">#</T>
{ i18n.t('no') }
</span>
</>
)}
@ -512,14 +512,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
class="pointer"
onClick={linkEvent(this, this.handleModBanShow)}
>
<T i18nKey="ban_from_site">#</T>
{ i18n.t('ban_from_site') }
</span>
) : (
<span
class="pointer"
onClick={linkEvent(this, this.handleModBanSubmit)}
>
<T i18nKey="unban_from_site">#</T>
{ i18n.t('unban_from_site') }
</span>
)}
</li>
@ -549,18 +549,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.handleShowConfirmTransferSite
)}
>
<T i18nKey="transfer_site">#</T>
{ i18n.t('transfer_site') }
</span>
) : (
<>
<span class="d-inline-block mr-1">
<T i18nKey="are_you_sure">#</T>
{ i18n.t('are_you_sure') }
</span>
<span
class="pointer d-inline-block mr-1"
onClick={linkEvent(this, this.handleTransferSite)}
>
<T i18nKey="yes">#</T>
{ i18n.t('yes') }
</span>
<span
class="pointer d-inline-block"
@ -569,7 +569,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.handleCancelShowConfirmTransferSite
)}
>
<T i18nKey="no">#</T>
{ i18n.t('no') }
</span>
</>
)}
@ -583,7 +583,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
className="pointer"
onClick={linkEvent(this, this.handleViewSource)}
>
<T i18nKey="view_source">#</T>
{ i18n.t('view_source') }
</span>
</li>
)}
@ -601,18 +601,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
/>
<button type="submit" class="btn btn-secondary">
<T i18nKey="remove_post">#</T>
{ i18n.t('remove_post') }
</button>
</form>
)}
{this.state.showBanDialog && (
<form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
<div class="form-group row">
<label class="col-form-label">
<T i18nKey="reason">#</T>
<label class="col-form-label" for="post-listing-reason">
{ i18n.t('reason') }
</label>
<input
type="text"
id="post-listing-reason"
class="form-control mr-2"
placeholder={i18n.t('reason')}
value={this.state.banReason}

11
ui/src/components/post-listings.tsx

@ -2,6 +2,7 @@ import { Component } from 'inferno';
import { Link } from 'inferno-router';
import { Post } from '../interfaces';
import { PostListing } from './post-listing';
import { i18n } from '../i18next';
import { T } from 'inferno-i18next';
interface PostListingsProps {
@ -30,14 +31,12 @@ export class PostListings extends Component<PostListingsProps, any> {
))
) : (
<>
<div>
<T i18nKey="no_posts">#</T>
</div>
<h2>
{ i18n.t('no_posts') }
</h2>
{this.props.showCommunity !== undefined && (
<div>
<T i18nKey="subscribe_to_communities">
#<Link to="/communities">#</Link>
</T>
<Link to="/communities">{ i18n.t('subscribe_to_communities') }</Link>
</div>
)}
</>

27
ui/src/components/post.tsx

@ -155,11 +155,11 @@ export class Post extends Component<any, PostState> {
return (
<div class="container">
{this.state.loading ? (
<h5>
<p class="text-center">
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
</svg>
</h5>
</p>
) : (
<div class="row">
<div class="col-12 col-md-8 mb-3">
@ -173,7 +173,7 @@ export class Post extends Component<any, PostState> {
{this.state.crossPosts.length > 0 && (
<>
<div class="my-1 text-muted small font-weight-bold">
<T i18nKey="cross_posts">#</T>
{ i18n.t('cross_posts') }
</div>
<PostListings showCommunity posts={this.state.crossPosts} />
</>
@ -235,18 +235,6 @@ export class Post extends Component<any, PostState> {
onChange={linkEvent(this, this.handleCommentSortChange)}
/>
</label>
<label
className={`btn btn-sm btn-secondary pointer ${this.state
.commentSort === CommentSortType.Old && 'active'}`}
>
{i18n.t('old')}
<input
type="radio"
value={CommentSortType.Old}
checked={this.state.commentSort === CommentSortType.Old}
onChange={linkEvent(this, this.handleCommentSortChange)}
/>
</label>
</div>
);
}
@ -256,7 +244,7 @@ export class Post extends Component<any, PostState> {
<div class="d-none d-md-block new-comments mb-3 card border-secondary">
<div class="card-body small">
<h6>
<T i18nKey="recent_comments">#</T>
{ i18n.t('recent_comments') }
</h6>
{this.state.comments.map(comment => (
<CommentNodes
@ -329,13 +317,6 @@ export class Post extends Component<any, PostState> {
+a.comment.deleted - +b.comment.deleted ||
b.comment.published.localeCompare(a.comment.published)
);
} else if (this.state.commentSort == CommentSortType.Old) {
tree.sort(
(a, b) =>
+a.comment.removed - +b.comment.removed ||
+a.comment.deleted - +b.comment.deleted ||
a.comment.published.localeCompare(b.comment.published)
);
} else if (this.state.commentSort == CommentSortType.Hot) {
tree.sort(
(a, b) =>

22
ui/src/components/search.tsx

@ -127,7 +127,7 @@ export class Search extends Component<any, SearchState> {
return (
<div class="container">
<h5>
<T i18nKey="search">#</T>
{ i18n.t('search') }
</h5>
{this.selects()}
{this.searchForm()}
@ -164,7 +164,7 @@ export class Search extends Component<any, SearchState> {
</svg>
) : (
<span>
<T i18nKey="search">#</T>
{ i18n.t('search') }
</span>
)}
</button>
@ -181,22 +181,22 @@ export class Search extends Component<any, SearchState> {
class="custom-select custom-select-sm w-auto"
>
<option disabled>
<T i18nKey="type">#</T>
{ i18n.t('type') }
</option>
<option value={SearchType.All}>
<T i18nKey="all">#</T>
{ i18n.t('all') }
</option>
<option value={SearchType.Comments}>
<T i18nKey="comments">#</T>
{ i18n.t('comments') }
</option>
<option value={SearchType.Posts}>
<T i18nKey="posts">#</T>
{ i18n.t('posts') }
</option>
<option value={SearchType.Communities}>
<T i18nKey="communities">#</T>
{ i18n.t('communities') }
</option>
<option value={SearchType.Users}>
<T i18nKey="users">#</T>
{ i18n.t('users') }
</option>
</select>
<span class="ml-2">
@ -383,14 +383,14 @@ export class Search extends Component<any, SearchState> {
class="btn btn-sm btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
<T i18nKey="prev">#</T>
{ i18n.t('prev') }
</button>
)}
<button
class="btn btn-sm btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
<T i18nKey="next">#</T>
{ i18n.t('next') }
</button>
</div>
);
@ -406,7 +406,7 @@ export class Search extends Component<any, SearchState> {
res.communities.length == 0 &&
res.users.length == 0 && (
<span>
<T i18nKey="no_results">#</T>
{ i18n.t('no_results') }
</span>
)}
</div>

27
ui/src/components/setup.tsx

@ -62,7 +62,7 @@ export class Setup extends Component<any, State> {
<div class="row">
<div class="col-12 offset-lg-3 col-lg-6">
<h3>
<T i18nKey="lemmy_instance_setup">#</T>
{ i18n.t('lemmy_instance_setup') }
</h3>
{!this.state.doneRegisteringUser ? (
this.registerUser()
@ -78,17 +78,16 @@ export class Setup extends Component<any, State> {
registerUser() {
return (
<form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
<h5>
<T i18nKey="setup_admin">#</T>
</h5>
<h4>{ i18n.t('setup_admin')}</h4>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="username">#</T>
<label class="col-sm-2 col-form-label" for="username">
{ i18n.t('username') }
</label>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="username"
value={this.state.userForm.username}
onInput={linkEvent(this, this.handleRegisterUsernameChange)}
required
@ -99,12 +98,14 @@ export class Setup extends Component<any, State> {
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="email">#</T>
<label class="col-sm-2 col-form-label" for="email">
{ i18n.t('email') }
</label>
<div class="col-sm-10">
<input
type="email"
id="email"
class="form-control"
placeholder={i18n.t('optional')}
value={this.state.userForm.email}
@ -114,12 +115,13 @@ export class Setup extends Component<any, State> {
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="password">#</T>
<label class="col-sm-2 col-form-label" for="password">
{ i18n.t('password')}
</label>
<div class="col-sm-10">
<input
type="password"
id="password"
value={this.state.userForm.password}
onInput={linkEvent(this, this.handleRegisterPasswordChange)}
class="form-control"
@ -128,12 +130,13 @@ export class Setup extends Component<any, State> {
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<T i18nKey="verify_password">#</T>
<label class="col-sm-2 col-form-label" for="verify-password">
{ i18n.t('verify_password') }
</label>
<div class="col-sm-10">
<input
type="password"
id="verify-password"
value={this.state.userForm.password_verify}
onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
class="form-control"

21
ui/src/components/sidebar.tsx

@ -72,7 +72,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
<span>{community.title}</span>
{community.removed && (
<small className="ml-2 text-muted font-italic">
<T i18nKey="removed">#</T>
{ i18n.t('removed') }
</small>
)}
{community.deleted && (
@ -92,7 +92,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
class="pointer"
onClick={linkEvent(this, this.handleEditClick)}
>
<T i18nKey="edit">#</T>
{ i18n.t('edit') }
</span>
</li>
{this.amCreator && (
@ -116,14 +116,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
class="pointer"
onClick={linkEvent(this, this.handleModRemoveShow)}
>
<T i18nKey="remove">#</T>
{ i18n.t('remove') }
</span>
) : (
<span
class="pointer"
onClick={linkEvent(this, this.handleModRemoveSubmit)}
>
<T i18nKey="restore">#</T>
{ i18n.t('restore') }
</span>
)}
</li>
@ -132,11 +132,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
{this.state.showRemoveDialog && (
<form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
<div class="form-group row">
<label class="col-form-label">
<T i18nKey="reason">#</T>
<label class="col-form-label" for="remove-reason">
{ i18n.t('reason') }
</label>
<input
type="text"
id