diff options
25 files changed, 316 insertions, 286 deletions
diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx index b1da9882..eef39ccf 100644 --- a/ui/src/components/communities.tsx +++ b/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> diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx index c8d888be..46fc4185 100644 --- a/ui/src/components/community-form.tsx +++ b/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> diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx index 3c5f6890..30756344 100644 --- a/ui/src/components/community.tsx +++ b/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> diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx index f16b6425..49cfb0e9 100644 --- a/ui/src/components/create-community.tsx +++ b/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> diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx index ad013d09..39a5e5f0 100644 --- a/ui/src/components/create-post.tsx +++ b/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> diff --git a/ui/src/components/footer.tsx b/ui/src/components/footer.tsx index 5451da2c..f48120b8 100644 --- a/ui/src/components/footer.tsx +++ b/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> diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx index 41c1ce60..c89beb40 100644 --- a/ui/src/components/inbox.tsx +++ b/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> ); diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx index 64687a3d..bea8564c 100644 --- a/ui/src/components/login.tsx +++ b/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> diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 6bf4164f..e578cc83 100644 --- a/ui/src/components/main.tsx +++ b/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()} diff --git a/ui/src/components/modlog.tsx b/ui/src/components/modlog.tsx index e03f1ff7..6da10eec 100644 --- a/ui/src/components/modlog.tsx +++ b/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> ); diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index eccc8116..cfec3651 100644 --- a/ui/src/components/navbar.tsx +++ b/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> diff --git a/ui/src/components/password_change.tsx b/ui/src/components/password_change.tsx index 10b6867c..7774b783 100644 --- a/ui/src/components/password_change.tsx +++ b/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> diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index 57d9a964..858b6b79 100644 --- a/ui/src/components/post-form.tsx +++ b/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 |