fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-26 16:02:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix up post, profile and community forms. Fixes #409 (#423)

Browse source
This commit is contained in:
Dessalines 2021-09-18 16:40:59 -04:00 committed by GitHub
parent ba07aa3126
commit 8f132f67fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 154 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/shared/components/app/navbar.tsx
View file

@ -20,6 +20,7 @@ import { i18n } from "../../i18next";
import { UserService, WebSocketService } from "../../services";
import {
authField,
donateLemmyUrl,
fetchLimit,
getLanguage,
isBrowser,
@ -28,7 +29,6 @@ import {
numToSI,
setTheme,
showAvatars,
supportLemmyUrl,
toast,
wsClient,
wsJsonToRes,
@ -241,7 +241,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<a
className="nav-link"
title={i18n.t("support_lemmy")}
href={supportLemmyUrl}
href={donateLemmyUrl}
>
<Icon icon="heart" classes="small" />
</a>

2
src/shared/components/common/image-upload-form.tsx
View file

@ -36,7 +36,7 @@ export class ImageUploadForm extends Component<
<form class="d-inline">
<label
htmlFor={this.id}
class="pointer ml-4 text-muted small font-weight-bold"
class="pointer text-muted small font-weight-bold"
>
{!this.props.imageSrc ? (
<span class="btn btn-secondary">{this.props.uploadTitle}</span>

44
src/shared/components/community/community-form.tsx
View file

@ -121,16 +121,19 @@ export class CommunityForm extends Component<
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
{!this.props.community_view && (
<div class="form-group row">
<label class="col-12 col-form-label" htmlFor="community-name">
<label
class="col-12 col-sm-2 col-form-label"
htmlFor="community-name"
>
{i18n.t("name")}
<span
class="pointer unselectable ml-2 text-muted"
class="position-absolute pointer unselectable ml-2 text-muted"
data-tippy-content={i18n.t("name_explain")}
>
<Icon icon="help-circle" classes="icon-inline" />
</span>
</label>
<div class="col-12">
<div class="col-12 col-sm-10">
<input
type="text"
id="community-name"
@ -146,16 +149,19 @@ export class CommunityForm extends Component<
</div>
)}
<div class="form-group row">
<label class="col-12 col-form-label" htmlFor="community-title">
<label
class="col-12 col-sm-2 col-form-label"
htmlFor="community-title"
>
{i18n.t("display_name")}
<span
class="pointer unselectable ml-2 text-muted"
class="position-absolute pointer unselectable ml-2 text-muted"
data-tippy-content={i18n.t("display_name_explain")}
>
<Icon icon="help-circle" classes="icon-inline" />
</span>
</label>
<div class="col-12">
<div class="col-12 col-sm-10">
<input
type="text"
id="community-title"
@ -168,8 +174,9 @@ export class CommunityForm extends Component<
/>
</div>
</div>
<div class="form-group">
<label>{i18n.t("icon")}</label>
<div class="form-group row">
<label class="col-12 col-sm-2">{i18n.t("icon")}</label>
<div class="col-12 col-sm-10">
<ImageUploadForm
uploadTitle={i18n.t("upload_icon")}
imageSrc={this.state.communityForm.icon}
@ -178,8 +185,10 @@ export class CommunityForm extends Component<
rounded
/>
</div>
<div class="form-group">
<label>{i18n.t("banner")}</label>
</div>
<div class="form-group row">
<label class="col-12 col-sm-2">{i18n.t("banner")}</label>
<div class="col-12 col-sm-10">
<ImageUploadForm
uploadTitle={i18n.t("upload_banner")}
imageSrc={this.state.communityForm.banner}
@ -187,11 +196,12 @@ export class CommunityForm extends Component<
onRemove={this.handleBannerRemove}
/>
</div>
</div>
<div class="form-group row">
<label class="col-12 col-form-label" htmlFor={this.id}>
<label class="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
{i18n.t("sidebar")}
</label>
<div class="col-12">
<div class="col-12 col-sm-10">
<MarkdownTextArea
initialContent={this.state.communityForm.description}
onContentChange={this.handleCommunityDescriptionChange}
@ -201,18 +211,18 @@ export class CommunityForm extends Component<
{this.props.enableNsfw && (
<div class="form-group row">
<div class="col-12">
<legend class="col-form-label col-sm-2 pt-0">
{i18n.t("nsfw")}
</legend>
<div class="col-10">
<div class="form-check">
<input
class="form-check-input"
class="form-check-input position-static"
id="community-nsfw"
type="checkbox"
checked={this.state.communityForm.nsfw}
onChange={linkEvent(this, this.handleCommunityNsfwChange)}
/>
<label class="form-check-label" htmlFor="community-nsfw">
{i18n.t("nsfw")}
</label>
</div>
</div>
</div>

76
src/shared/components/person/settings.tsx
View file

@ -227,10 +227,10 @@ export class Settings extends Component<any, SettingsState> {
<h5>{i18n.t("change_password")}</h5>
<form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
<div class="form-group row">
<label class="col-lg-5 col-form-label" htmlFor="user-password">
<label class="col-sm-5 col-form-label" htmlFor="user-password">
{i18n.t("new_password")}
</label>
<div class="col-lg-7">
<div class="col-sm-7">
<input
type="password"
id="user-password"
@ -244,12 +244,12 @@ export class Settings extends Component<any, SettingsState> {
</div>
<div class="form-group row">
<label
class="col-lg-5 col-form-label"
class="col-sm-5 col-form-label"
htmlFor="user-verify-password"
>
{i18n.t("verify_password")}
</label>
<div class="col-lg-7">
<div class="col-sm-7">
<input
type="password"
id="user-verify-password"
@ -262,10 +262,10 @@ export class Settings extends Component<any, SettingsState> {
</div>
</div>
<div class="form-group row">
<label class="col-lg-5 col-form-label" htmlFor="user-old-password">
<label class="col-sm-5 col-form-label" htmlFor="user-old-password">
{i18n.t("old_password")}
</label>
<div class="col-lg-7">
<div class="col-sm-7">
<input
type="password"
id="user-old-password"
@ -417,10 +417,10 @@ export class Settings extends Component<any, SettingsState> {
<h5>{i18n.t("settings")}</h5>
<form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
<div class="form-group row">
<label class="col-lg-5 col-form-label" htmlFor="display-name">
<label class="col-sm-5 col-form-label" htmlFor="display-name">
{i18n.t("display_name")}
</label>
<div class="col-lg-7">
<div class="col-sm-7">
<input
id="display-name"
type="text"
@ -434,10 +434,10 @@ export class Settings extends Component<any, SettingsState> {
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label" htmlFor="user-bio">
<label class="col-sm-3 col-form-label" htmlFor="user-bio">
{i18n.t("bio")}
</label>
<div class="col-lg-9">
<div class="col-sm-9">
<MarkdownTextArea
initialContent={this.state.saveUserSettingsForm.bio}
onContentChange={this.handleBioChange}
@ -447,10 +447,10 @@ export class Settings extends Component<any, SettingsState> {
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label" htmlFor="user-email">
<label class="col-sm-3 col-form-label" htmlFor="user-email">
{i18n.t("email")}
</label>
<div class="col-lg-9">
<div class="col-sm-9">
<input
type="email"
id="user-email"
@ -463,12 +463,12 @@ export class Settings extends Component<any, SettingsState> {
</div>
</div>
<div class="form-group row">
<label class="col-lg-5 col-form-label" htmlFor="matrix-user-id">
<label class="col-sm-5 col-form-label" htmlFor="matrix-user-id">
<a href={elementUrl} rel="noopener">
{i18n.t("matrix_user_id")}
</a>
</label>
<div class="col-lg-7">
<div class="col-sm-7">
<input
id="matrix-user-id"
type="text"
@ -480,8 +480,9 @@ export class Settings extends Component<any, SettingsState> {
/>
</div>
</div>
<div class="form-group">
<label>{i18n.t("avatar")}</label>
<div class="form-group row">
<label class="col-sm-3">{i18n.t("avatar")}</label>
<div class="col-sm-9">
<ImageUploadForm
uploadTitle={i18n.t("upload_avatar")}
imageSrc={this.state.saveUserSettingsForm.avatar}
@ -490,8 +491,10 @@ export class Settings extends Component<any, SettingsState> {
rounded
/>
</div>
<div class="form-group">
<label>{i18n.t("banner")}</label>
</div>
<div class="form-group row">
<label class="col-sm-3">{i18n.t("banner")}</label>
<div class="col-sm-9">
<ImageUploadForm
uploadTitle={i18n.t("upload_banner")}
imageSrc={this.state.saveUserSettingsForm.banner}
@ -499,13 +502,17 @@ export class Settings extends Component<any, SettingsState> {
onRemove={this.handleBannerRemove}
/>
</div>
<div class="form-group">
<label htmlFor="user-language">{i18n.t("language")}</label>
</div>
<div class="form-group row">
<label class="col-sm-3" htmlFor="user-language">
{i18n.t("language")}
</label>
<div class="col-sm-9">
<select
id="user-language"
value={this.state.saveUserSettingsForm.lang}
onChange={linkEvent(this, this.handleLangChange)}
class="ml-2 custom-select w-auto"
class="custom-select w-auto"
>
<option disabled aria-hidden="true">
{i18n.t("language")}
@ -521,13 +528,17 @@ export class Settings extends Component<any, SettingsState> {
))}
</select>
</div>
<div class="form-group">
<label htmlFor="user-theme">{i18n.t("theme")}</label>
</div>
<div class="form-group row">
<label class="col-sm-3" htmlFor="user-theme">
{i18n.t("theme")}
</label>
<div class="col-sm-9">
<select
id="user-theme"
value={this.state.saveUserSettingsForm.theme}
onChange={linkEvent(this, this.handleThemeChange)}
class="ml-2 custom-select w-auto"
class="custom-select w-auto"
>
<option disabled aria-hidden="true">
{i18n.t("theme")}
@ -538,10 +549,10 @@ export class Settings extends Component<any, SettingsState> {
))}
</select>
</div>
<form className="form-group">
<label>
<div class="mr-2">{i18n.t("type")}</div>
</label>
</div>
<form className="form-group row">
<label class="col-sm-3">{i18n.t("type")}</label>
<div class="col-sm-9">
<ListingTypeSelect
type_={
Object.values(ListingType)[
@ -551,11 +562,11 @@ export class Settings extends Component<any, SettingsState> {
showLocal={showLocal(this.isoData)}
onChange={this.handleListingTypeChange}
/>
</div>
</form>
<form className="form-group">
<label>
<div class="mr-2">{i18n.t("sort_type")}</div>
</label>
<form className="form-group row">
<label class="col-sm-3">{i18n.t("sort_type")}</label>
<div class="col-sm-9">
<SortSelect
sort={
Object.values(SortType)[
@ -564,6 +575,7 @@ export class Settings extends Component<any, SettingsState> {
}
onChange={this.handleSortTypeChange}
/>
</div>
</form>
{this.state.siteRes.site_view.site.enable_nsfw && (
<div class="form-group">

8
src/shared/components/post/post-form.tsx
View file

@ -310,18 +310,18 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
)}
{this.props.enableNsfw && (
<div class="form-group row">
<legend class="col-form-label col-sm-2 pt-0">
{i18n.t("nsfw")}
</legend>
<div class="col-sm-10">
<div class="form-check">
<input
class="form-check-input"
class="form-check-input position-static"
id="post-nsfw"
type="checkbox"
checked={this.state.postForm.nsfw}
onChange={linkEvent(this, this.handlePostNsfwChange)}
/>
<label class="form-check-label" htmlFor="post-nsfw">
{i18n.t("nsfw")}
</label>
</div>
</div>
</div>

4
src/shared/utils.ts
View file

@ -92,13 +92,13 @@ export const favIconPngUrl = "/static/assets/icons/apple-touch-icon.png";
// export const defaultFavIcon = `${window.location.protocol}//${window.location.host}${favIconPngUrl}`;
export const repoUrl = "https://github.com/LemmyNet";
export const joinLemmyUrl = "https://join-lemmy.org";
export const supportLemmyUrl = `${joinLemmyUrl}/support`;
export const donateLemmyUrl = `${joinLemmyUrl}/donate`;
export const docsUrl = `${joinLemmyUrl}/docs/en/index.html`;
export const helpGuideUrl = `${joinLemmyUrl}/docs/en/about/guide.html`; // TODO find a way to redirect to the non-en folder
export const markdownHelpUrl = `${helpGuideUrl}#markdown-guide`;
export const sortingHelpUrl = `${helpGuideUrl}#sorting`;
export const archiveUrl = "https://archive.is";
export const elementUrl = "https://element.io/";
export const elementUrl = "https://element.io";
export const postRefetchSeconds: number = 60 * 1000;
export const fetchLimit = 20;