Merge branch 'feature/frontend-usability-features' of https://github.com/richardj/lemmy into richardj-feature/frontend-usability-features

This commit is contained in:
Dessalines 2020-01-18 10:50:17 -05:00
commit 1796faecb6
8 changed files with 105 additions and 75 deletions

View file

@ -97,12 +97,13 @@ export class CommunityForm extends Component<
return ( return (
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}> <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
<div class="form-group row"> <div class="form-group row">
<label class="col-12 col-form-label"> <label class="col-12 col-form-label" for="community-name">
<T i18nKey="name">#</T> { i18n.t('name') }
</label> </label>
<div class="col-12"> <div class="col-12">
<input <input
type="text" type="text"
id="community-name"
class="form-control" class="form-control"
value={this.state.communityForm.name} value={this.state.communityForm.name}
onInput={linkEvent(this, this.handleCommunityNameChange)} onInput={linkEvent(this, this.handleCommunityNameChange)}
@ -114,13 +115,15 @@ export class CommunityForm extends Component<
/> />
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-12 col-form-label"> <label class="col-12 col-form-label" for="community-title">
<T i18nKey="title">#</T> { i18n.t('title') }
</label> </label>
<div class="col-12"> <div class="col-12">
<input <input
type="text" type="text"
id="community-title"
value={this.state.communityForm.title} value={this.state.communityForm.title}
onInput={linkEvent(this, this.handleCommunityTitleChange)} onInput={linkEvent(this, this.handleCommunityTitleChange)}
class="form-control" class="form-control"
@ -131,12 +134,13 @@ export class CommunityForm extends Component<
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-12 col-form-label"> <label class="col-12 col-form-label" for="community-sidebar">
<T i18nKey="sidebar">#</T> { i18n.t('sidebar') }
</label> </label>
<div class="col-12"> <div class="col-12">
<textarea <textarea
value={this.state.communityForm.description} value={this.state.communityForm.description}
id="community-sidebar"
onInput={linkEvent(this, this.handleCommunityDescriptionChange)} onInput={linkEvent(this, this.handleCommunityDescriptionChange)}
class="form-control" class="form-control"
rows={3} rows={3}
@ -145,12 +149,13 @@ export class CommunityForm extends Component<
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-12 col-form-label"> <label class="col-12 col-form-label" for="community-category">
<T i18nKey="category">#</T> { i18n.t('category') }
</label> </label>
<div class="col-12"> <div class="col-12">
<select <select
class="form-control" class="form-control"
id="community-category"
value={this.state.communityForm.category_id} value={this.state.communityForm.category_id}
onInput={linkEvent(this, this.handleCommunityCategoryChange)} onInput={linkEvent(this, this.handleCommunityCategoryChange)}
> >
@ -167,12 +172,13 @@ export class CommunityForm extends Component<
<div class="form-check"> <div class="form-check">
<input <input
class="form-check-input" class="form-check-input"
id="community-nsfw"
type="checkbox" type="checkbox"
checked={this.state.communityForm.nsfw} checked={this.state.communityForm.nsfw}
onChange={linkEvent(this, this.handleCommunityNsfwChange)} onChange={linkEvent(this, this.handleCommunityNsfwChange)}
/> />
<label class="form-check-label"> <label class="form-check-label" for="community-nsfw">
<T i18nKey="nsfw">#</T> { i18n.t('nsfw') }
</label> </label>
</div> </div>
</div> </div>
@ -197,7 +203,7 @@ export class CommunityForm extends Component<
class="btn btn-secondary" class="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)} onClick={linkEvent(this, this.handleCancel)}
> >
<T i18nKey="cancel">#</T> { i18n.t('cancel') }
</button> </button>
)} )}
</div> </div>

View file

@ -22,9 +22,9 @@ export class CreateCommunity extends Component<any, any> {
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4"> <div class="col-12 col-lg-6 offset-lg-3 mb-4">
<h5> <h2>
<T i18nKey="create_community">#</T> <T i18nKey="create_community">#</T>
</h5> </h2>
<CommunityForm onCreate={this.handleCommunityCreate} /> <CommunityForm onCreate={this.handleCommunityCreate} />
</div> </div>
</div> </div>

View file

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

View file

@ -84,15 +84,16 @@ export class Login extends Component<any, State> {
return ( return (
<div> <div>
<form onSubmit={linkEvent(this, this.handleLoginSubmit)}> <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
<h5>Login</h5> <h2>{ i18n.t('login') }</h2>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label"> <label class="col-sm-2 col-form-label" for="login-email-or-username">
<T i18nKey="email_or_username">#</T> { i18n.t('email_or_username') }
</label> </label>
<div class="col-sm-10"> <div class="col-sm-10">
<input <input
type="text" type="text"
class="form-control" class="form-control"
id="login-email-or-username"
value={this.state.loginForm.username_or_email} value={this.state.loginForm.username_or_email}
onInput={linkEvent(this, this.handleLoginUsernameChange)} onInput={linkEvent(this, this.handleLoginUsernameChange)}
required required
@ -101,12 +102,13 @@ export class Login extends Component<any, State> {
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label"> <label class="col-sm-2 col-form-label" for="login-password">
<T i18nKey="password">#</T> { i18n.t('password') }
</label> </label>
<div class="col-sm-10"> <div class="col-sm-10">
<input <input
type="password" type="password"
id="login-password"
value={this.state.loginForm.password} value={this.state.loginForm.password}
onInput={linkEvent(this, this.handleLoginPasswordChange)} onInput={linkEvent(this, this.handleLoginPasswordChange)}
class="form-control" class="form-control"
@ -117,10 +119,11 @@ export class Login extends Component<any, State> {
onClick={linkEvent(this, this.handlePasswordReset)} onClick={linkEvent(this, this.handlePasswordReset)}
className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold" 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> </button>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-10"> <div class="col-sm-10">
<button type="submit" class="btn btn-secondary"> <button type="submit" class="btn btn-secondary">
@ -141,16 +144,19 @@ export class Login extends Component<any, State> {
registerForm() { registerForm() {
return ( return (
<form onSubmit={linkEvent(this, this.handleRegisterSubmit)}> <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
<h5> <h2>
<T i18nKey="sign_up">#</T> { i18n.t('sign_up') }
</h5> </h2>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label"> <label class="col-sm-2 col-form-label" for="register-username">
<T i18nKey="username">#</T> { i18n.t('username') }
</label> </label>
<div class="col-sm-10"> <div class="col-sm-10">
<input <input
type="text" type="text"
id="register-username"
class="form-control" class="form-control"
value={this.state.registerForm.username} value={this.state.registerForm.username}
onInput={linkEvent(this, this.handleRegisterUsernameChange)} onInput={linkEvent(this, this.handleRegisterUsernameChange)}
@ -161,13 +167,15 @@ export class Login extends Component<any, State> {
/> />
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label"> <label class="col-sm-2 col-form-label" for="register-email">
<T i18nKey="email">#</T> { i18n.t('email') }
</label> </label>
<div class="col-sm-10"> <div class="col-sm-10">
<input <input
type="email" type="email"
id="register-email"
class="form-control" class="form-control"
placeholder={i18n.t('optional')} placeholder={i18n.t('optional')}
value={this.state.registerForm.email} value={this.state.registerForm.email}
@ -176,13 +184,15 @@ export class Login extends Component<any, State> {
/> />
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label"> <label class="col-sm-2 col-form-label" for="register-password">
<T i18nKey="password">#</T> { i18n.t('password') }
</label> </label>
<div class="col-sm-10"> <div class="col-sm-10">
<input <input
type="password" type="password"
id="register-password"
value={this.state.registerForm.password} value={this.state.registerForm.password}
onInput={linkEvent(this, this.handleRegisterPasswordChange)} onInput={linkEvent(this, this.handleRegisterPasswordChange)}
class="form-control" class="form-control"
@ -190,13 +200,15 @@ export class Login extends Component<any, State> {
/> />
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label"> <label class="col-sm-2 col-form-label" for="register-verify-password">
<T i18nKey="verify_password">#</T> { i18n.t('verify_password') }
</label> </label>
<div class="col-sm-10"> <div class="col-sm-10">
<input <input
type="password" type="password"
id="register-verify-password"
value={this.state.registerForm.password_verify} value={this.state.registerForm.password_verify}
onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)} onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
class="form-control" class="form-control"
@ -204,18 +216,20 @@ export class Login extends Component<any, State> {
/> />
</div> </div>
</div> </div>
{this.state.enable_nsfw && (
{ this.state.enable_nsfw && (
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<input <input
class="form-check-input" class="form-check-input"
id="register-show-nsfw"
type="checkbox" type="checkbox"
checked={this.state.registerForm.show_nsfw} checked={this.state.registerForm.show_nsfw}
onChange={linkEvent(this, this.handleRegisterShowNsfwChange)} onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
/> />
<label class="form-check-label"> <label class="form-check-label" for="register-show-nsfw">
<T i18nKey="show_nsfw">#</T> { i18n.t('show_nsfw') }
</label> </label>
</div> </div>
</div> </div>

View file

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

View file

@ -94,6 +94,7 @@ export class Navbar extends Component<any, NavbarState> {
<button <button
class="navbar-toggler" class="navbar-toggler"
type="button" type="button"
aria-label="menu"
onClick={linkEvent(this, this.expandNavbar)} onClick={linkEvent(this, this.expandNavbar)}
> >
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -104,12 +105,12 @@ export class Navbar extends Component<any, NavbarState> {
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item"> <li class="nav-item">
<Link class="nav-link" to="/communities"> <Link class="nav-link" to="/communities">
<T i18nKey="communities">#</T> { i18n.t('communities') }
</Link> </Link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<Link class="nav-link" to="/search"> <Link class="nav-link" to="/search">
<T i18nKey="search">#</T> { i18n.t('search') }
</Link> </Link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
@ -120,12 +121,12 @@ export class Navbar extends Component<any, NavbarState> {
state: { prevPath: this.currentLocation }, state: { prevPath: this.currentLocation },
}} }}
> >
<T i18nKey="create_post">#</T> { i18n.t('create_post') }
</Link> </Link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<Link class="nav-link" to="/create_community"> <Link class="nav-link" to="/create_community">
<T i18nKey="create_community">#</T> { i18n.t('create_community') }
</Link> </Link>
</li> </li>
</ul> </ul>
@ -167,7 +168,7 @@ export class Navbar extends Component<any, NavbarState> {
</> </>
) : ( ) : (
<Link class="nav-link" to="/login"> <Link class="nav-link" to="/login">
<T i18nKey="login_sign_up">#</T> { i18n.t('login_sign_up') }
</Link> </Link>
)} )}
</ul> </ul>

View file

@ -136,12 +136,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div> <div>
<form onSubmit={linkEvent(this, this.handlePostSubmit)}> <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label"> <label class="col-sm-2 col-form-label" for="post-url">
<T i18nKey="url">#</T> { i18n.t('url') }
</label> </label>
<div class="col-sm-10"> <div class="col-sm-10">
<input <input
type="url" type="url"
id="post-url"
class="form-control" class="form-control"
value={this.state.postForm.url} value={this.state.postForm.url}
onInput={linkEvent(this, this.handlePostUrlChange)} onInput={linkEvent(this, this.handlePostUrlChange)}
@ -165,7 +166,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
className={`${UserService.Instance.user && className={`${UserService.Instance.user &&
'pointer'} d-inline-block mr-2 float-right text-muted small font-weight-bold`} 'pointer'} d-inline-block mr-2 float-right text-muted small font-weight-bold`}
> >
<T i18nKey="upload_image">#</T> { i18n.t('upload_image') }
</label> </label>
<input <input
id="file-upload" id="file-upload"
@ -185,7 +186,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
target="_blank" target="_blank"
class="mr-2 d-inline-block float-right text-muted small font-weight-bold" class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
> >
<T i18nKey="archive_link">#</T> { i18n.t('archive_link') }
</a> </a>
)} )}
{this.state.imageLoading && ( {this.state.imageLoading && (
@ -199,7 +200,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
{this.state.crossPosts.length > 0 && ( {this.state.crossPosts.length > 0 && (
<> <>
<div class="my-1 text-muted small font-weight-bold"> <div class="my-1 text-muted small font-weight-bold">
<T i18nKey="cross_posts">#</T> { i18n.t('cross_posts') }
</div> </div>
<PostListings showCommunity posts={this.state.crossPosts} /> <PostListings showCommunity posts={this.state.crossPosts} />
</> </>
@ -207,12 +208,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label"> <label class="col-sm-2 col-form-label" for="post-title">
<T i18nKey="title">#</T> { i18n.t('title') }
</label> </label>
<div class="col-sm-10"> <div class="col-sm-10">
<textarea <textarea
value={this.state.postForm.name} value={this.state.postForm.name}
id="post-title"
onInput={linkEvent(this, this.handlePostNameChange)} onInput={linkEvent(this, this.handlePostNameChange)}
class="form-control" class="form-control"
required required
@ -223,20 +225,22 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
{this.state.suggestedPosts.length > 0 && ( {this.state.suggestedPosts.length > 0 && (
<> <>
<div class="my-1 text-muted small font-weight-bold"> <div class="my-1 text-muted small font-weight-bold">
<T i18nKey="related_posts">#</T> { i18n.t('related_posts') }
</div> </div>
<PostListings posts={this.state.suggestedPosts} /> <PostListings posts={this.state.suggestedPosts} />
</> </>
)} )}
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label"> <label class="col-sm-2 col-form-label" for="post-body">
<T i18nKey="body">#</T> { i18n.t('body') }
</label> </label>
<div class="col-sm-10"> <div class="col-sm-10">
<textarea <textarea
value={this.state.postForm.body} value={this.state.postForm.body}
id="post-body"
onInput={linkEvent(this, this.handlePostBodyChange)} onInput={linkEvent(this, this.handlePostBodyChange)}
className={`form-control ${this.state.previewMode && 'd-none'}`} className={`form-control ${this.state.previewMode && 'd-none'}`}
rows={4} rows={4}
@ -254,7 +258,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
.previewMode && 'active'}`} .previewMode && 'active'}`}
onClick={linkEvent(this, this.handlePreviewToggle)} onClick={linkEvent(this, this.handlePreviewToggle)}
> >
<T i18nKey="preview">#</T> { i18n.t('preview') }
</button> </button>
)} )}
<a <a
@ -262,18 +266,19 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
target="_blank" target="_blank"
class="d-inline-block float-right text-muted small font-weight-bold" class="d-inline-block float-right text-muted small font-weight-bold"
> >
<T i18nKey="formatting_help">#</T> { i18n.t('formatting_help') }
</a> </a>
</div> </div>
</div> </div>
{!this.props.post && ( {!this.props.post && (
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label"> <label class="col-sm-2 col-form-label" for="post-community">
<T i18nKey="community">#</T> { i18n.t('community') }
</label> </label>
<div class="col-sm-10"> <div class="col-sm-10">
<select <select
class="form-control" class="form-control"
id="post-community"
value={this.state.postForm.community_id} value={this.state.postForm.community_id}
onInput={linkEvent(this, this.handlePostCommunityChange)} onInput={linkEvent(this, this.handlePostCommunityChange)}
> >
@ -290,12 +295,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div class="form-check"> <div class="form-check">
<input <input
class="form-check-input" class="form-check-input"
id="post-nsfw"
type="checkbox" type="checkbox"
checked={this.state.postForm.nsfw} checked={this.state.postForm.nsfw}
onChange={linkEvent(this, this.handlePostNsfwChange)} onChange={linkEvent(this, this.handlePostNsfwChange)}
/> />
<label class="form-check-label"> <label class="form-check-label" for="post-nsfw">
<T i18nKey="nsfw">#</T> { i18n.t('nsfw') }
</label> </label>
</div> </div>
</div> </div>
@ -320,7 +326,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
class="btn btn-secondary" class="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)} onClick={linkEvent(this, this.handleCancel)}
> >
<T i18nKey="cancel">#</T> { i18n.t('cancel') }
</button> </button>
)} )}
</div> </div>

View file

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