Merge branch 'feature/frontend-usability-features' of https://github.com/richardj/lemmy into richardj-feature/frontend-usability-features
This commit is contained in:
commit
1796faecb6
8 changed files with 105 additions and 75 deletions
28
ui/src/components/community-form.tsx
vendored
28
ui/src/components/community-form.tsx
vendored
|
@ -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>
|
||||||
|
|
4
ui/src/components/create-community.tsx
vendored
4
ui/src/components/create-community.tsx
vendored
|
@ -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>
|
||||||
|
|
6
ui/src/components/create-post.tsx
vendored
6
ui/src/components/create-post.tsx
vendored
|
@ -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>
|
||||||
|
|
54
ui/src/components/login.tsx
vendored
54
ui/src/components/login.tsx
vendored
|
@ -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>
|
||||||
|
|
10
ui/src/components/main.tsx
vendored
10
ui/src/components/main.tsx
vendored
|
@ -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()}
|
||||||
|
|
11
ui/src/components/navbar.tsx
vendored
11
ui/src/components/navbar.tsx
vendored
|
@ -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>
|
||||||
|
|
40
ui/src/components/post-form.tsx
vendored
40
ui/src/components/post-form.tsx
vendored
|
@ -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>
|
||||||
|
|
27
ui/src/components/setup.tsx
vendored
27
ui/src/components/setup.tsx
vendored
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue