grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

28
ui/src/components/community-form.tsx vendored
View file

@ -97,12 +97,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)}
@ -114,13 +115,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"
@ -131,12 +134,13 @@ 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
value={this.state.communityForm.description}
id="community-sidebar"
onInput={linkEvent(this, this.handleCommunityDescriptionChange)}
class="form-control"
rows={3}
@ -145,12 +149,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)}
>
@ -167,12 +172,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>
@ -197,7 +203,7 @@ export class CommunityForm extends Component<
class="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)}
>
<T i18nKey="cancel">#</T>
{ i18n.t('cancel') }
</button>
)}
</div>

4
ui/src/components/create-community.tsx vendored
View file

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

6
ui/src/components/create-post.tsx vendored
View file

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

54
ui/src/components/login.tsx vendored
View file

@ -84,15 +84,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
@ -101,12 +102,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"
@ -117,10 +119,11 @@ 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>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-secondary">
@ -141,16 +144,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)}
@ -161,13 +167,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}
@ -176,13 +184,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"
@ -190,13 +200,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"
@ -204,18 +216,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 vendored
View file

@ -158,8 +158,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>
);
@ -412,13 +412,13 @@ export class Main extends Component<any, MainState> {
posts() {
return (
<div>
<div class="main-content-wrapper">
{this.state.loading ? (
<h5>
<p style="text-align: center;">
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
</svg>
</h5>
</p>
) : (
<div>
{this.selects()}

11
ui/src/components/navbar.tsx vendored
View file

@ -94,6 +94,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>
@ -104,12 +105,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">
@ -120,12 +121,12 @@ 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>
</ul>
@ -167,7 +168,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>

40
ui/src/components/post-form.tsx vendored
View file

@ -136,12 +136,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)}
@ -165,7 +166,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"
@ -185,7 +186,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 && (
@ -199,7 +200,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} />
</>
@ -207,12 +208,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
@ -223,20 +225,22 @@ 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
value={this.state.postForm.body}
id="post-body"
onInput={linkEvent(this, this.handlePostBodyChange)}
className={`form-control ${this.state.previewMode && 'd-none'}`}
rows={4}
@ -254,7 +258,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
.previewMode && 'active'}`}
onClick={linkEvent(this, this.handlePreviewToggle)}
>
<T i18nKey="preview">#</T>
{ i18n.t('preview') }
</button>
)}
<a
@ -262,18 +266,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)}
>
@ -290,12 +295,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>
@ -320,7 +326,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>

27
ui/src/components/setup.tsx vendored
View file

@ -64,7 +64,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()
@ -80,17 +80,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
@ -101,12 +100,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}
@ -116,12 +117,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"
@ -130,12 +132,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"